Notifikationer

Markér alle som læst Log ud

morten_soegaard Nybegynder

19. december 2004 - 22:03 Der er 4 kommentarer og
1 løsning

Problemer det relative position

Hej

Jeg har problemer det funktionen relative position. Jeg bruger den til indsættelse af nogle billeder i en celle. Men det sidste billede kan ikke være på samme række med de andre selvom der er plads nok. I kan se siden på www.miniklub-mv.dk/test/test

Koden:
<td valign="top" colspan="3" style="height: 48px;" background="bund.jpg">
<img src="bund/pro1.jpg" style="position:relative; left:9px; bottom:-3px;">
<img src="bund/pro2.jpg" style="position:relative; left:5px; bottom:-3px;">
<img src="bund/pro3.jpg" style="position:relative; left:1px; bottom:-3px;">
<img src="bund/pro4.jpg" style="position:relative; left:-3px; bottom:-3px;">
<img src="bund/pro5.jpg" style="position:relative; left:-7px; bottom:-3px;">
<img src="bund/pro11.jpg"style="position:relative; left:-11px; bottom:-3px;">
<img src="bund/pro6.jpg" style="position:relative; left:-15px; bottom:-3px;">
<img src="bund/pro7.jpg" style="position:relative; left:-19px; bottom:-3px;">
<img src="bund/pro8.jpg" style="position:relative; left:-23px; bottom:-3px;">
<img src="bund/pro9.jpg" style="position:relative; left:-27px; bottom:-3px;">
<img src="bund/pro10.jpg" style="position:relative; left:-31px; bottom:-3px;">

</td>

Kan det gøres anderledes så det virker eller hvad?

Mvh Morten.

Synes godt om

skovenborg Nybegynder

20. december 2004 - 01:45 #1

For det første har du glemt en doctype - dette sætter IE i quirks mode (hvor den gætter sig mere eller mindre frem til resultatet), og det giver typisk en ret stor forskel mellem den og andre browsere (da de ikke gætter på samme måde).

Så tilføj dette i toppen på alle dine sider:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Vi starter lige med forsiden (har ikke kigget på resten endnu). Her vil du, efter du har sat doctypen ind, se at enter-knappen rykker sig ned i bunden af siden. Du kan rette dette ved at bruge enheder på dine mål (fx ved margin, width osv.)
På forsiden er det eneste du umiddelbart skal rette:
#enter_button {
width: 139px;
margin:-146px auto 0px;
z-index: 2;
}

Synes godt om

skovenborg Nybegynder

20. december 2004 - 01:55 #2

Det næste du skal gøre er at tilføje enheder over det hele (du mangler bla. ved padding, width og margin). Når du tilføjer dette vil du se det problem at den sidste spalte rykker sig ned - ligesom netscape gjorde det i starten.

Nu kan du så se resultatet af IE's quirks mode - den skider bogstaveligt talt på hvad standarden siger. Grunden til dette er at de tre spalter ligger indeni enter_page-diven med bredden 711px. De tre spalter har hver en bredde på 237px og ganger man dem sammen giver det da rigtignok også 711px. Nu er problemmet bare at padding altså også tæller med - de er IE nok ligeglad med i quirks mode, men når doctypen kommer på, ja så husker den pludseligt de formanende ord at padding skal lægges til spaltens bredde og højde.

Resultatet bliver så den fejl du kan se. Løsningen er dog ret enkel: Træk din højre og venstre padding fra din bredde - vupti så burde de være på plads:
#column_1 {
width: 213px;
float: left;
padding: 10px 6px 0px 18px;
}

#column_2 {
width: 213px;
float: left;
padding: 10px 12px 0px 12px;
}

#column_3 {
width: 213px;
float: right;
padding: 10px 18px 0px 6px;
}

Læg mærke til at hver spalte har bredden 213px plus en left/right padding på 24px = 237px. For at nævne det allerede nu så tæller borders også med i bredden - og har du margin på skal den naturligvis også tages i betragtning (selvom den er mere åbenlys).

Synes godt om

skovenborg Nybegynder

20. december 2004 - 01:57 #3

av, undskyld - det var det forkerte spørgsmål ;-) Skulle have postet dem herinde http://www.eksperten.dk/spm/572728

Mange gange undskyld herfra... :-S

Synes godt om

skovenborg Nybegynder

20. december 2004 - 02:00 #4

Desuden ser jeg ikke den samme fejl på siden - tværtimod ser det ud til der er for meget plads, da alle 11 billeder bliver vist (jeg har talt dem ;-)

Synes godt om

morten_soegaard Nybegynder

21. december 2004 - 08:10 #5

LUKKET

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS