Hjälp med positionering av DIVar

2012-09-18 02:18

Medlem

Registrerad: Mar 2005

●

Hjälp med positionering av DIVar

Jag håller på med en hemsida och skulle behöva lite hjälp med att få allt centrerat.
Måste man ange exakt var ens DIVar ska vara eller finns det något enklare sätt att få allt centrerat?

Jag har jag ritat AP Divar till den stora bilden, de små bilderna och texten, även Divar runt bilderna och för rubrik.
Sedan har jag placerat koden i en Wrap-Div som har rätt storlek för mitt innehåll på sidan.

Såhär ser det ut i css:

#wrap {
margin:10px auto;
width:620px;
height:490px;
}

#apDiv4 {
position:absolute;
left:104px;
top:230px;
width:200px;
height:283px;
z-index:1;
}

#wrap har jag gjort själv och #apDiv4 såg ut så när jag ritat ut den.

Meny och header är mitt i bilden så det måste jag ha fått rätt men är inte säker på om det är bästa sättet.
Såhär ser den koden ut:

#header {
margin:0 auto;
width:680px;
height:173px;
background:url(images/logo.png) no-repeat;
}

#menu {
margin:0 auto;

width:800px;
height:30px;
background:url(images/menu2.png) no-repeat;

Sidan finns inte ute men den liknar den gamla designen och den sidan finns här: http://trestjarnor.se

Tack på förhand!

Visa signatur

Lian Li O11D Dynamic Mini || MSI MEG X570 Unify || Ryzen 5600x || MSI 3080 Suprim X || 2x8 GB PC 3600 HyperX || Corsair SF750 Platinum 750W || 2x SN750 NVMe 1TB

Rapportera Redigera

Citera flera Citera

2012-09-18 02:35

Permalänk

chaos_maniac

Medlem

Plats: Långt bort
Registrerad: Mar 2006

●

Ta en titt på att arbeta med boxar/block. Det kan nog hjälpa dig en del med centrering. Google har gott om exempel gällande centrering av boxar. Exempel här: http://www.w3.org/Style/Examples/007/center

Hoppas detta var det du eftersökte.

Visa signatur

Enter the Wired, you'll like it here • Sönderbyggd ITX-låda: i5 3570, 8GB DDR3, GT1030 2GB GDDR5, 1TB CX500, BluRay-RW, världens knöligaste låda med extern PSU •

Rapportera Redigera

Citera flera Citera

2012-09-18 10:05

Permalänk

crake

Medlem

Plats: Göteborg
Registrerad: Dec 2010

●

Jag tittade igenom din css lite snabbt och jag antar att "AP Divar" är något man gör i DW? Innan någon annan gör det kan jag väl lika gärna rekommendera dig att sluta använda DW.

Att centrera element horisontellt är oftast väldigt enkelt. Du kan göra det på en del olika sätt - men det klart enklaste är att, som jag såg att du redan gjort på något element, sätta margin till: 0 auto.

Detta sätter top-och bottom-margin till 0 (ändra om du vill), medan auto gör att elementet justerar sig själv horisontellt. Detta förutsätter dock att du har gett ditt element en bredd då blockelement, som default, annars tar upp all tillgänglig plats. Kanske bör det påpekas att det inte fungerar tvärtom (dvs margin: auto 0;)...

Såvida du inte vet varför du använder position: absolute hade jag rekommenderat dig att antingen ta bort det, alternativt lära dig hur och varför man använder det.

Rapportera Redigera

Citera flera Citera

2012-09-18 14:48

Permalänk

MORD

Medlem

Registrerad: Mar 2005

●

Skrivet av crake:

Jag tittade igenom din css lite snabbt och jag antar att "AP Divar" är något man gör i DW? Innan någon annan gör det kan jag väl lika gärna rekommendera dig att sluta använda DW.

Att centrera element horisontellt är oftast väldigt enkelt. Du kan göra det på en del olika sätt - men det klart enklaste är att, som jag såg att du redan gjort på något element, sätta margin till: 0 auto.

Detta sätter top-och bottom-margin till 0 (ändra om du vill), medan auto gör att elementet justerar sig själv horisontellt. Detta förutsätter dock att du har gett ditt element en bredd då blockelement, som default, annars tar upp all tillgänglig plats. Kanske bör det påpekas att det inte fungerar tvärtom (dvs margin: auto 0;)...

Såvida du inte vet varför du använder position: absolute hade jag rekommenderat dig att antingen ta bort det, alternativt lära dig hur och varför man använder det.

Gå till inlägget

Det stämmer att jag jobbar med Dreamweaver, glömde nämna det!
Om jag anger var DIVen ska vara med margin:0 auto; så får jag DIVen mitt i bilden.
Jag tog bort margin: auto; från body och nu ändrade sig headern och menyn så den ligger i vänsterkant, precis som mina rutor med bilder och text, wrap DIVen ligger dock centrerat med margin:0 auto; så det tog jag också bort så att allt finns på samma ställe, men eftersom jag har ritat DIVarna med bilder och text, så har de väl en fast position med denna koden:
left:332px;
top:240px;

I designläget i dreamweaver så har det sett rätt ut från böjrna, jag har ju själv ritat några DIVar så dom ligger där jag vill ha dom, men när jag öppnar sidan i Chrome så ligger de till vänster.

För att sammanfatta lite kort då, allt finns ju till vänster, hur centrerar jag hela sidan?

EDIT: När det gäller position:absolute så erkänner jag att jag inte har så bra koll på vad det gör, har experimenterat en hel del med koden, men när jag tog bort det så hamnade de små bilderna i en vertikal linje och allt blev konstigt. Jag vet att det har att göra med var innehållet ska placeras, i förhållande till webläsarens fönsters storlek osv.

Senast redigerat 2012-09-18 14:59

Visa signatur

Lian Li O11D Dynamic Mini || MSI MEG X570 Unify || Ryzen 5600x || MSI 3080 Suprim X || 2x8 GB PC 3600 HyperX || Corsair SF750 Platinum 750W || 2x SN750 NVMe 1TB

Rapportera Redigera

Citera flera Citera

2012-09-18 15:08

Permalänk

Teknocide

Medlem ★

Registrerad: Sep 2007

●

Skrivet av MORD:

För att sammanfatta lite kort då, allt finns ju till vänster, hur centrerar jag hela sidan?

Gå till inlägget

margin:0 auto; gör det du vill men elementet måste ha en satt bredd. Eftersom det är hela sidan som ska centreras får du lägga margin samt width på ett globalt omslutande element

Visa signatur

Kom-pa-TI-bilitet

Rapportera Redigera

Citera flera Citera

2012-09-18 18:19

Permalänk

MORD

Medlem

Registrerad: Mar 2005

●

Skrivet av Teknocide:

margin:0 auto; gör det du vill men elementet måste ha en satt bredd. Eftersom det är hela sidan som ska centreras får du lägga margin samt width på ett globalt omslutande element

Gå till inlägget

Jag har nu en "content"runt hela sidan och satte margin:0 auto; på det mesta i CSS, när jag ändrade body så ändrade hela sidan sig och det är jag mycket glad över

När jag vill flytta upp och ned menyn eller headern t.ex. genom margin så funkar det som det ska men mina ritade DIVar stannar kvar eftersom de har koden:
left:332px;
top:240px;

Tycker det är väldigt skönt att kunna rita ut DIVar men vill lära mig grunderna och vill inte att det ska se konstigt ut i Dreamweaver, nu hamnar bilder o text över menyn, fast i Chrome ser det bra ut. Hur ska jag gå till väga för att placera mina DIVar precis där jag vill?

Såhär ser en ritad DIV ut:
#apDiv13 {
position:absolute;
left:14px;
top:7px;
width:392px;
height:258px;
z-index:9;
}

och här är hela koden:

<body>

<div id="apDiv4">
<p>SKRIV TEXT HÄRnrelknevljfdnlv njfdlnvjndfkjvnjfdnjvnkfd </p>
<p> </p>
<p>update</p>
<p>update2</p>
</div>
<div id="apDiv5"> <div id="apDiv13"><img src="rumfem.jpg" width="391" height="258" /></div>
</div>
<div id="apDiv6"></div>
<div id="apDiv7"></div>
<div id="apDiv8"></div>
<div id="apDiv9"><img src="rumfem.jpg" width="187" height="122" /></div>
<div id="apDiv10"><img src="rumfem.jpg" alt="" width="187" height="122" /></div>
<div id="apDiv11"><img src="rumfem.jpg" alt="" width="187" height="122" /></div>

</div>

</div>

</body>

Visa signatur

Lian Li O11D Dynamic Mini || MSI MEG X570 Unify || Ryzen 5600x || MSI 3080 Suprim X || 2x8 GB PC 3600 HyperX || Corsair SF750 Platinum 750W || 2x SN750 NVMe 1TB

Rapportera Redigera

Citera flera Citera

2012-09-18 18:29

Permalänk

Alling

99:e percentilen ★

Testpilot

Plats: Göteborg
Registrerad: Aug 2011

●

Skrivet av MORD:

När jag vill flytta upp och ned menyn eller headern t.ex. genom margin så funkar det som det ska men mina ritade DIVar stannar kvar eftersom de har koden:
left:332px;
top:240px;

Gå till inlägget

Jag vet inte hur HTML-koden ser ut, men det där ser rent spontant inte så bra ut. Undvik att positionera element med relative, absolute, fixed eller dylikt om det inte finns en anledning till det. Om ett element kan ingå i flödet ska det också göra det.

Visa signatur

Skrivet med hjälp av Better SweClockers

Rapportera Redigera

Citera flera Citera (1)

2012-09-18 18:31

Permalänk

Teknocide

Medlem ★

Registrerad: Sep 2007

●

Skrivet av MORD:

Jag har nu en "content"runt hela sidan och satte margin:0 auto; på det mesta i CSS, när jag ändrade body så ändrade hela sidan sig och det är jag mycket glad över

Gå till inlägget

Har du satt bredd på content? Annars kommer inte margin att ha effekt.

När du skriver position: absolute; left: si px; top: så px; kommer elementet positionera sig med det angivna avståndet från närmast underliggande icke-statiskt positionerade element. Om ett sådant inte finns kommer koordinaterna vara relativa till body-elementet. Om du t ex. sätter position: relative; på #wrap kommer dina divar att placeras utifrån wraps översta vänstra hörn.

Visa signatur

Kom-pa-TI-bilitet

Rapportera Redigera

Citera flera Citera

2012-09-18 20:03

Permalänk

MORD

Medlem

Registrerad: Mar 2005

●

Skrivet av Teknocide:

Har du satt bredd på content? Annars kommer inte margin att ha effekt.

När du skriver position: absolute; left: si px; top: så px; kommer elementet positionera sig med det angivna avståndet från närmast underliggande icke-statiskt positionerade element. Om ett sådant inte finns kommer koordinaterna vara relativa till body-elementet. Om du t ex. sätter position: relative; på #wrap kommer dina divar att placeras utifrån wraps översta vänstra hörn.

Gå till inlägget

Så för att sätta allt i mitten så bör jag sätta position: relative; på #wrap och sedan på text DIVen:
margin:10px;
width:200px;
height:272px;

Så nu har jag fått den rutan längst upp i vänstra hörnet (10px ner och till höger) där jag vill ha den.
Sedan till den lilla bilden så har jag en DIV med bakgrund och i den bilden en DIV med en liten bild. Så för att få den rutan där den ska vara så har jag mått och margin 10px på den, sedan för att få bilden i den rutan i mitten, ska det då se ut såhär?

(ram runt bilden)
#apDiv8 {
position:relative; (för att DIV i denna DIV ska förhålla sig till denna och inte till body?
margin:10px;
width:200px;
height:136px;

och vad ska diven med bilden då ha för kod för att hamna i mitten av den? Måste man räkna ut hur många pixlar den ska på åt varje håll?

Visa signatur

Lian Li O11D Dynamic Mini || MSI MEG X570 Unify || Ryzen 5600x || MSI 3080 Suprim X || 2x8 GB PC 3600 HyperX || Corsair SF750 Platinum 750W || 2x SN750 NVMe 1TB

Rapportera Redigera

Citera flera Citera

2012-09-18 20:34

Permalänk

Teknocide

Medlem ★

Registrerad: Sep 2007

●

Skrivet av MORD:

*snip*
och vad ska diven med bilden då ha för kod för att hamna i mitten av den? Måste man räkna ut hur många pixlar den ska på åt varje håll?

Gå till inlägget

Allt som har bestämd bredd och ska centreras horizontellt inuti något annat ska ha margin: 0 auto;. Att centrera saker vertikalt är krångligare.

Visa signatur

Kom-pa-TI-bilitet

Rapportera Redigera

Citera flera Citera (1)

2012-09-18 21:05

Permalänk

phroggyy

Medlem

Plats: Solna, Stockholm
Registrerad: Dec 2010

●

Föreslår att du inte använder Dreamweavers design-läge (att däremot skriva kod i det är det inget fel på!), då det skapar rätt usel kod, mycket absolut positionerna. Det är bättre att använda relativa css-argument såsom margin (vilket ger marginaler från kanten på den omslutande diven), eller padding. Försök att alltid undvika absolut positionering med top, bottom, left och right, förutom i speciella fall där du av någon anledning måste ha innehåll utanför den omslutande divens utrymme, t ex om du vill ha det allra längst upp i vänstra hörnet så kan du ta top: 0; left: 0; men detta är endast ett undantagsfall!

Visa signatur

Rapportera Redigera

Citera flera Citera

2012-09-18 21:44

Permalänk

phroggyy

Medlem

Plats: Solna, Stockholm
Registrerad: Dec 2010

●

Föreslår att du inte använder Dreamweavers design-läge (att däremot skriva kod i det är det inget fel på!), då det skapar rätt usel kod, mycket absolut positionerna. Det är bättre att använda relativa css-argument såsom margin (vilket ger marginaler från kanten på den omslutande diven), eller padding. Försök att alltid undvika absolut positionering med top, bottom, left och right, förutom i speciella fall där du av någon anledning måste ha innehåll utanför den omslutande divens utrymme, t ex om du vill ha det allra längst upp i vänstra hörnet så kan du ta top: 0; left: 0; men detta är endast ett undantagsfall!

Visa signatur

Rapportera Redigera

Citera flera Citera

2012-09-18 22:36

Permalänk

MORD

Medlem

Registrerad: Mar 2005

●

Skrivet av Teknocide:

Allt som har bestämd bredd och ska centreras horizontellt inuti något annat ska ha margin: 0 auto;. Att centrera saker vertikalt är krångligare.

Gå till inlägget

Nu har jag lyckats få till texten och den lilla vänstra bilden så att den är där jag vill ha den.
Är detta bästa sättet att få den i mitten?
margin:7px auto;
width:187px;
height:122px;

Skrivet av phroggyy:

Föreslår att du inte använder Dreamweavers design-läge (att däremot skriva kod i det är det inget fel på!), då det skapar rätt usel kod, mycket absolut positionerna. Det är bättre att använda relativa css-argument såsom margin (vilket ger marginaler från kanten på den omslutande diven), eller padding. Försök att alltid undvika absolut positionering med top, bottom, left och right, förutom i speciella fall där du av någon anledning måste ha innehåll utanför den omslutande divens utrymme, t ex om du vill ha det allra längst upp i vänstra hörnet så kan du ta top: 0; left: 0; men detta är endast ett undantagsfall!

Gå till inlägget

Jag använder bara kodläget i dreamweaver förutom nu när jag hittade Draw ap div, eftersom jag har såna problem med det.

Nu blev det problem när jag ska placera den stora bildrutan, skriver div koden efter de andra divarna, och den stora bilden placerar sig under texten där den lilla var så fint placerad. skriver float right, och bilden åker till höger, ska jag sen använda margin för att få upp bilden?

Visa signatur

Lian Li O11D Dynamic Mini || MSI MEG X570 Unify || Ryzen 5600x || MSI 3080 Suprim X || 2x8 GB PC 3600 HyperX || Corsair SF750 Platinum 750W || 2x SN750 NVMe 1TB

Rapportera Redigera

Citera flera Citera

2012-09-18 22:47

Permalänk

Marwelln

Medlem

Registrerad: Jan 2008

●

Skrivet av Teknocide:

Allt som har bestämd bredd och ska centreras horizontellt inuti något annat ska ha margin: 0 auto;. Att centrera saker vertikalt är krångligare.

Gå till inlägget

Ska man inte ha någon margin på toppen eller botten finns det ingen mening med 0 auto, då kan man lika gärna skriva margin:auto;.

Rapportera Redigera

Citera flera Citera (1)

2012-09-18 23:00

Permalänk

phroggyy

Medlem

Plats: Solna, Stockholm
Registrerad: Dec 2010

●

Skrivet av MORD:

Nu har jag lyckats få till texten och den lilla vänstra bilden så att den är där jag vill ha den.
Är detta bästa sättet att få den i mitten?
margin:7px auto;
width:187px;
height:122px;

Jag använder bara kodläget i dreamweaver förutom nu när jag hittade Draw ap div, eftersom jag har såna problem med det.

Nu blev det problem när jag ska placera den stora bildrutan, skriver div koden efter de andra divarna, och den stora bilden placerar sig under texten där den lilla var så fint placerad. skriver float right, och bilden åker till höger, ska jag sen använda margin för att få upp bilden?

Gå till inlägget

Om jag inte minns fel så måste du ha float på två element för att de ska flyta bredvid varandra, om du bara lägger float på den andra så går den igenom koden och ser att den inte ska dela vertikal plats med någon annan, utan att nästa del hamnar nedanför. Om du efter din div med float: right gör en till div med float: left kommer denna hamna till vänster om diven ovanför (kodmässigt ovanför, inte fysiskt).

Sen är det också bra att använda clear: both när man är färdig med en float-del, då det annars inte alltid blir så bra (floats kan flyta ovanpå element, så det händer att element som kommer efteråt utan float hamnar under/över (beroende på om man ändrat z-värde) om man inte använder clear). Även clear: left och clear: right kan användas, beror helt enkelt på om man använt float: left eller float: right, men det är inte fel att göra clear: both för att vara säker!

Visa signatur

Rapportera Redigera

Citera flera Citera

2012-09-18 23:24

Permalänk

Teknocide

Medlem ★

Registrerad: Sep 2007

●

Skrivet av Marwelln:

Ska man inte ha någon margin på toppen eller botten finns det ingen mening med 0 auto, då kan man lika gärna skriva margin:auto;.

Gå till inlägget

Good call, ser lite snyggare ut också.

Visa signatur

Kom-pa-TI-bilitet

Rapportera Redigera

Citera flera Citera

2012-09-19 00:49

Permalänk

crake

Medlem

Plats: Göteborg
Registrerad: Dec 2010

●

Skrivet av phroggyy:

Sen är det också bra att använda clear: both när man är färdig med en float-del, då det annars inte alltid blir så bra (floats kan flyta ovanpå element, så det händer att element som kommer efteråt utan float hamnar under/över (beroende på om man ändrat z-värde) om man inte använder clear). Även clear: left och clear: right kan användas, beror helt enkelt på om man använt float: left eller float: right, men det är inte fel att göra clear: both för att vara säker!

Gå till inlägget

Det gick nog lite fort här...z-index fungerar bara på positionerade element (position: absolute;, position: relative; eller position: fixed;). Clear och z-index är INTE samma sak. Om du t.ex. ger ett element clear: both; kommer dess översta kant att ligga under tidigare element som har float: left eller float: right;

Rapportera Redigera

Citera flera Citera

2012-09-19 06:45

Permalänk

phroggyy

Medlem

Plats: Solna, Stockholm
Registrerad: Dec 2010

●

Skrivet av crake:

Det gick nog lite fort här...z-index fungerar bara på positionerade element (position: absolute;, position: relative; eller position: fixed;). Clear och z-index är INTE samma sak. Om du t.ex. ger ett element clear: both; kommer dess översta kant att ligga under tidigare element som har float: left eller float: right;

Gå till inlägget

Haha sorry, vart lite trött och förvirrad när jag skrev det!
Det clear: both; egentligen säger är ju att det inte får finnas en float åt varken höger eller vänster. Vet inte riktigt vad jag skrev igår :S

Skickades från m.sweclockers.com

Visa signatur

Rapportera Redigera

Citera flera Citera

2012-09-19 16:30

Permalänk

crake

Medlem

Plats: Göteborg
Registrerad: Dec 2010

●

Skrivet av phroggyy:

Haha sorry, vart lite trött och förvirrad när jag skrev det!
Det clear: both; egentligen säger är ju att det inte får finnas en float åt varken höger eller vänster. Vet inte riktigt vad jag skrev igår :S

Skickades från m.sweclockers.com

Gå till inlägget

Nja...då tycker jag faktiskt att beskrivningen i mitt tidigare inlägg är mer korrekt. Tänk dig att vi har markup enligt nedan:

<div id="container">	
     <div id="box1"></div>
     <div id="box2"></div>
     <div id="box3"></div>
     <div id="box4"></div>
</div>

Dold text

Med följande css:

#container {
    width: 800px;
}

 #box1 {
    background: red;
    float: left;
    height: 200px;
    width: 200px;
 }

 #box2 {
    background: green;
    float: left;
    height: 200px;
    width: 200px;
 }

 #box3 {
    background: yellow;
    clear: both;
    float: left;
    height: 200px;
    width: 200px;
 }

 #box4 {
    background: blue;
    float: left;
    height: 200px;
    width: 200px;
 }

Dold text

Det synliga resultatet blir då en kvadrat på 400*400px, som innehåller fyra mindre boxar (box1, box2, box3 och box4) i olika färger. Vad jag vill ha sagt med detta är att clear: both; inte betyder att det, som du säger, "inte får finnas en float åt varken höger eller vänster". Box3 har ju clear: both; - men trots detta har box4 lagt sig direkt till höger om denna, genom just float: left;

Detta kan verka löjligt och petigt. Men jag vet att många har problem att förstå hur clear och float verkligen fungerar...

Rapportera Redigera

Citera flera Citera

2012-09-19 20:57

Permalänk

phroggyy

Medlem

Plats: Solna, Stockholm
Registrerad: Dec 2010

●

Skrivet av crake:

Nja...då tycker jag faktiskt att beskrivningen i mitt tidigare inlägg är mer korrekt. Tänk dig att vi har markup enligt nedan:

<div id="container">	
     <div id="box1"></div>
     <div id="box2"></div>
     <div id="box3"></div>
     <div id="box4"></div>
</div>

Dold text

Med följande css:

#container {
    width: 800px;
}

 #box1 {
    background: red;
    float: left;
    height: 200px;
    width: 200px;
 }

 #box2 {
    background: green;
    float: left;
    height: 200px;
    width: 200px;
 }

 #box3 {
    background: yellow;
    clear: both;
    float: left;
    height: 200px;
    width: 200px;
 }

 #box4 {
    background: blue;
    float: left;
    height: 200px;
    width: 200px;
 }

Dold text

Det synliga resultatet blir då en kvadrat på 400*400px, som innehåller fyra mindre boxar (box1, box2, box3 och box4) i olika färger. Vad jag vill ha sagt med detta är att clear: both; inte betyder att det, som du säger, "inte får finnas en float åt varken höger eller vänster". Box3 har ju clear: both; - men trots detta har box4 lagt sig direkt till höger om denna, genom just float: left;

Detta kan verka löjligt och petigt. Men jag vet att många har problem att förstå hur clear och float verkligen fungerar...

Gå till inlägget

Tycker vi tar den enkla vägen ut och använder w3schools definition på en clear, så att vi har en tydlig referens!

Citat:

The clear property specifies which sides of an element where other floating elements are not allowed

. Översättningen till svenska blir då ungefär

Citat:

Clear-egenskapen specifierar vilka sidor av ett element där andra flytande element inte tillåts

Det innebär till exempel att en div med clear: both ska, enligt definition, varken ha float på vänster eller höger sida, det är åtminstone så jag tolkar och använder det.

Visa signatur

Rapportera Redigera

Citera flera Citera

2012-09-19 21:19

Permalänk

crake

Medlem

Plats: Göteborg
Registrerad: Dec 2010

●

Skrivet av phroggyy:

Tycker vi tar den enkla vägen ut och använder w3schools definition på en clear, så att vi har en tydlig referens!

Gå till inlägget

Eller så gör vi absolut inte det, w3schools är ett av de sista ställena jag skulle besöka för att få en korrekt definition. Den korrekta definitionen för clear:both; är (saxat från w3.org):

"Requires that the top border edge of the box be below the bottom outer edge of any right-floating and left-floating boxes that resulted from elements earlier in the source document."

Så länge man vet hur man ska använda det är definitionen såklart skitsamma. Men det är viktigt att påpeka att det går att få ett element att "flyta" intill ett annat element som har clear: both;

Rapportera Redigera

Citera flera Citera

2012-09-19 21:31

Permalänk

Teknocide

Medlem ★

Registrerad: Sep 2007

●

Skrivet av crake:

Eller så gör vi absolut inte det, w3schools är ett av de sista ställena jag skulle besöka för att få en korrekt definition. Den korrekta definitionen för clear:both; är (saxat från w3.org):

"Requires that the top border edge of the box be below the bottom outer edge of any right-floating and left-floating boxes that resulted from elements earlier in the source document."

Så länge man vet hur man ska använda det är definitionen såklart skitsamma. Men det är viktigt att påpeka att det går att få ett element att "flyta" intill ett annat element som har clear: both;

Gå till inlägget

Översatt till svenska så skiter alltså i-källkoden-efterföljande-element i om elementet innan har clear:both

(vilket inte är vad w3schools antyder, så ris på dem!)

Visa signatur

Kom-pa-TI-bilitet

Rapportera Redigera

Citera flera Citera

2012-10-29 23:31

Permalänk

MORD

Medlem

Registrerad: Mar 2005

●

Tack för hjälpen allihop!
Jag har lyckats fixa ihop sidan så den ser ut någorlunda som jag vill ha den, jag provar mig fram tills det funkar.

Jag kom på att sidan måste anpassa sig till olika upplösningar och platformar och det var inte det lättaste att ändra sidan nu.
Så jag försökte att göra om sidan från början, kan ju kopiera mycket från det gamla också.

Jag har förstått att man ska använda sig av % istället för px, men jag lyckas inte få det att funka, kan inte ens få rätt på logan och menyn. Bakgrunden är centrerad och loga o meny hamnar på sidan, och när jag zoomar ut med ctrl +/- så är bakgrunden centrerad men loga o meny åker upp i högra hörnet.

Hade varit tacksam om någon kunde hjälpa mig eller länka till någon bra guide så att jag kan lära mig.
Såhär ser min kod ut:

CSS:

body {

width:900px;
height:700px;
background:
url(images/bg_background.jpg)
no-repeat center;

}

#content {

margin:2% auto;
width:100%;
height:100%;
}

#header {

margin:2% 0 0 0;
width:100%;
height:15%;
background:url(images/logo.png) no-repeat top center;
}

#logo {

margin:0 auto;
width:58%;
height:100%;

}

#menu {

margin:2% auto;
width:100%;
height:3%;
background:url(images/menu2.png) no-repeat;
}

Dold text

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>%test</title>
<link rel="stylesheet" type="text/css" href="style3.css"/>

</head>

<body>

</div> 
<div id="menu">
</div> 
</div> 
</body>

</html>

Dold text

Visa signatur

Lian Li O11D Dynamic Mini || MSI MEG X570 Unify || Ryzen 5600x || MSI 3080 Suprim X || 2x8 GB PC 3600 HyperX || Corsair SF750 Platinum 750W || 2x SN750 NVMe 1TB

Rapportera Redigera

Citera flera Citera

Hjälp med positionering av DIVar

Hjälp med positionering av DIVar

Externa nyheter

Spelnyheter från FZ