En titt på mitt försök med centrerad <div>

13 svar · 448 visningar · startad av Folkbitar 9 jan. 2004

FolkbitarMedlem sedan feb. 2003168 inlägg

Frågan9 jan. 2004 15:44#1

Jag har gjort mitt första försök att centrera en sida med hjälp av <div>.
Jag har kollat sidan i IE6 och Firebird i 800x600 och 1024x768 och det verkar funka fint.

Kan någon vänlig själv med större upplösning och annan läsare kolla också?
Och om min css är ok, eller om det är nåt som behövs ändras?

En fråga också som jag inte lyckats hitta svar på här.
Om jag vill att min meny i exemplet ska följa med sidans höjd, hur gör jag då.
Alltså, så att den tänjs ut på längden.
Jag prova med att sätta höjden till 100% i min css, men det funkade inte.

Länken här

mvh

SurfarenMedlem sedan aug. 2003627 inlägg

9 jan. 2004 17:25#2

Ser tokbra ut i 1152x1024 också. Förutom färgerna då... *ogillar*

Att menyn ska hänga med själva innehållsblocket har jag också försökt hitta svaret på, typ hela dan nu utan gott resultat... :(

Alpha IIMedlem sedan maj 20002 993 inlägg

9 jan. 2004 17:29#3

Denna kod bör centrera lagret.

	margin: 0 auto 0 auto;

SurfarenMedlem sedan aug. 2003627 inlägg

9 jan. 2004 18:15#4

Alpha II skrev:

Denna kod bör centrera lagret.
	margin: 0 auto 0 auto;

Uhm? Det är ju redan centrerat..?! :q

FolkbitarMedlem sedan feb. 2003168 inlägg

9 jan. 2004 18:32#5

Surfaren skrev:

Ser tokbra ut i 1152x1024 också. Förutom färgerna då... *ogillar*

Att menyn ska hänga med själva innehållsblocket har jag också försökt hitta svaret på, typ hela dan nu utan gott resultat... :(

Tack, Surfaren! Vilken läsare använde du?
Färgerna har jag bara så att jag lättare
ska se vad som händer och fötter..

Alpha IIMedlem sedan maj 20002 993 inlägg

9 jan. 2004 19:43#6

Surfaren skrev:
Alpha II skrev:

Denna kod bör centrera lagret.
	margin: 0 auto 0 auto;
Uhm? Det är ju redan centrerat..?! :q

Ja det är centrerat men på ett väldigt krångligt och onödigt sätt.

Skulle du sätta en height på Content lagret (var väl så det hette?) skulle height fungera på meny-lagret. Vet tyvärr inte hur du skall lösa det annars.

SurfarenMedlem sedan aug. 2003627 inlägg

9 jan. 2004 21:25#7

Folkbitar skrev:

Tack, Surfaren! Vilken läsare använde du?
Färgerna har jag bara så att jag lättare
ska se vad som händer och fötter..

Firebird. Kan kolla Avant (IE6) också............ check!
Så brukar jag också göra, men just rosa gillar jag icke.. ;) :x

SurfarenMedlem sedan aug. 2003627 inlägg

9 jan. 2004 21:27#8

Alpha II skrev:

Ja det är centrerat men på ett väldigt krångligt och onödigt sätt.

Nej. Detta sätt funkar även för IE5, vilket ditt exempel inte gör... Då måste man lägga till text-align:center vilket ju sabbar justeringen i onödan... :e

FolkbitarMedlem sedan feb. 2003168 inlägg

9 jan. 2004 23:21#9

Surfaren skrev:

Folkbitar skrev:

Tack, Surfaren! Vilken läsare använde du?
Färgerna har jag bara så att jag lättare
ska se vad som händer och fötter..

Firebird. Kan kolla Avant (IE6) också............ check!
Så brukar jag också göra, men just rosa gillar jag icke.. ;) :x

Tack för hjälpen :bire
Återstår bara bekymmret med höjden då.
Letar vidare....

SurfarenMedlem sedan aug. 2003627 inlägg

9 jan. 2004 23:25#10

Jag grejade min nu iaf. Fuskade lite, och använde en bakgrundsbild för mina lodräta svarta streck. Vill du så kan du få koden...

FolkbitarMedlem sedan feb. 2003168 inlägg

10 jan. 2004 11:30#11

Surfaren skrev:

Jag grejade min nu iaf. Fuskade lite, och använde en bakgrundsbild för mina lodräta svarta streck. Vill du så kan du få koden...

Tja, varför inte? Kan prova lite, så jag tar gärna emot din kod :)

Tänkte iochförsig att jag skulle slippa ifrån bakgrundsbilder och sånt, men om det inte finns nåt annat sätt så är det ju bara att köra på det då

jarvkloMedlem sedan juli 20013 378 inlägg

10 jan. 2004 18:40#12

Gårdagens AListApart tar upp ämnet och hävdar att det inte finns något (just nu känt) sätt att göra det du är ute efter.
... annat än att, som sagt, helt enkelt "trixa" med en bakgrundsbild samtidigt som man positionerar ut kolumnerna över denna på lämpligt sätt...

SurfarenMedlem sedan aug. 2003627 inlägg

10 jan. 2004 22:17#13

Hoppas allt blev rätt här nu...

Utan bilder blir det svårt att se hur fint det är, men det är iaf på samma form som denna bild
Alla svarta kanter samt den grå bg'n är bildbaserade.

<body>

  <div style="position:absolute;left:50%;width: 727px;margin-left:-365px; top: 20px;">
   <div style="float:left;"><img src="topl01.bmp" alt="..."/></div>
   <div style="float:left;"><img src="topr01.bmp" alt="..."/></div>

   <div style="width:727px;background:url(bg.gif);background-position:-23px;float:left;">

    <div style="width:575px;padding:15px 10px;float:left;">

    Innehåll

    </div>

    <div style="width:120px;padding:15px 5px;float:right;">
    <a href="">&#187; Sök bil</a><br />
    <a href="">&#187; meny</a><br />
    <br />
    <a href="">&#187; meny</a><br />
    <a href="">&#187; meny</a><br />
    <br />
    <a href="">&#187; meny</a><br />
    <a href="">&#187; meny</a><br />
    <br />
    <a href="">&#187; meny</a><br />
    <a href="">&#187; meny</a><br />

    </div>

   </div>

   <div style="float:left;width:595px;height:82px;background:url(botl01.bmp);"> 
    <div style="position:relative;top:11px;left:64px;" class="point">
    <img src="banner01.gif" alt="..."/>
    </div>
   </div>
   <div style="float:left;"><img src="botr01.bmp" alt="..."/></div>
   <div style="float:left;width:707px;color:#B0B0B0;font-size:10px;padding:10px;text-align:center;">
   Lite copyright o annat tjafs.
   <br clear="all" />
   </div>
  </div>

</body>

FolkbitarMedlem sedan feb. 2003168 inlägg

11 jan. 2004 09:23#14

Surfaren skrev:

Hoppas allt blev rätt här nu...

Utan bilder blir det svårt att se hur fint det är, men det är iaf på samma form som denna bild
Alla svarta kanter samt den grå bg'n är bildbaserade.

Tackar.
Sätter igång och provar.

mvh