Permalänk
Medlem

Nestlad div? [HTML & CSS]

Nu har jag klurat och klurat och det vill inte fungera.. Hur får jag mina boxar att hamna brevid varandra? Ganska ny på detta med HTML & CSS då detta är mitt första project.

Som ni ser är "Centreded Column" inte där den borde vara. Den ska vara till höger om "Left Column" och till höger om "Centered" ska det vara en "Right Column" som är nånstans under "Centered" just nu Och så missbrukar man citationstecken.

Bjuder även på källkoden utöver skärmdumpen.

HTML:

<!DOCTYPE html> <html> <head> <title>The Lundgren</title> <link rel="stylesheet" type="text/css" href="main.css"> <link rel="shortcut icon" type="image/gif" href="images/favicon.png" /> </head> <body> <div id="divWrapper"> <div id="divLogo">Logo/Header (1000*100px)</div> <div id="divLine"></div> <div id="divNav"> <ul> <li><a href="index.html" class="current">Home</a></li> <li><a href="portfolio">Portfolio</a></li> <li><a href="home.html">Resume</a></li> <li><a href="home.html">Contact</a></li> </ul> </div> <div id="divContentWrapper"> <div id="divLeftContent">Left Column</div> <div id="divCenterContent">Centered Colum</div> <div id="divRightContent">Right Column</div> </div> </div> </div> </body> </html>

CSS:

@charset "utf-8"; body, h1, h2, h3, h4, h5, h6, p, div, ul, li{ margin: 0; padding: 0; } body{ background: #111; font-family: Verdana, Geneva, sans-serif; } #divWrapper{ width: 1000px; margin: 0 auto; } #divLogo{ background-color: #333; height: 100px; text-align: center; color: white; } #divLine{ background-color: #555; height: 3px; } #divNav{ float: left; width: 100%; background: #333; overflow: hidden; position: relative; border-bottom: 3px #555 solid; } #divNav ul{ clear: left; float: left; list-style: none; margin: 0; padding: 0; position: relative; left: 50%; text-align: center; } #divNav ul li{ display: block; float: left; list-style: none; margin: 0; padding: 0; position: relative; right: 50%; } #divNav ul li a{ display: block; margin: 0 0 0 0px; padding: 3px 10px; background: #333; color: #FF8C00; text-decoration: none; line-height: 1em; font-weight: bold; } #divNav ul li a:hover{ background: #555; color: #FF8C00; cursor: default; } #divNav ul li a.current, #divNav ul li a.current:hover{ background: #555 } #divContentWrapper{ background-color: #222; height: 800px; padding: 3px; color: white; } #divLeftContent{ background-color: #555; height: 800px; width: 200px; padding: 0px; } #divCenterContent{ background-color: #444; height: 800px; width: 600px; padding: 0px; } #divRightContent{ background-color: #999; height: 800px; width: 200px; padding: 0px; }

Visa signatur

AMD Ryzen 9 3900x - MSI Tomahawk x570 Wi-Fi - 32GB Corsair Vengence @ 3200Mhz - MSI GeForce GTX 1070 8GB Gaming X - Corsair Hydro H100x - Några HDD's

Permalänk

Du måste använda dig av float på content-divarna också.

EDIT: Sedan så är content-divarna för stora för wrappern?
Gjorde en snabbis
http://jsfiddle.net/M5RMC/1/

Visa signatur
Permalänk
Medlem

Andvänder jag float så blir dom för stora. Just nu, utan flot, är dom precis så stora som jag vill ha dom.

Dock så är dom på lite fel plats nu, men det spelar väll ingen större roll, går ju ändra namnet på dom bara. Men som du ser så blir dom för stora när jag andvänder float. Dom ska vara som den som heter "Right" nu, den som inte har en float.

Visa signatur

AMD Ryzen 9 3900x - MSI Tomahawk x570 Wi-Fi - 32GB Corsair Vengence @ 3200Mhz - MSI GeForce GTX 1070 8GB Gaming X - Corsair Hydro H100x - Några HDD's

Permalänk
Skrivet av Tott3:

Andvänder jag float så blir dom för stora. Just nu, utan flot, är dom precis så stora som jag vill ha dom.

http://i.imgur.com/6snp2.png

Dock så är dom på lite fel plats nu, men det spelar väll ingen större roll, går ju ändra namnet på dom bara. Men som du ser så blir dom för stora när jag andvänder float. Dom ska vara som den som heter "Right" nu, den som inte har en float.

Ser detta rätt ut? Hur menar du med "för stora"?
http://jsfiddle.net/M5RMC/2/

Visa signatur
Permalänk
Medlem

Jag vill ha det så att contentWrappern sticker ut ungefär 1px på sidorna och botten. Vilket jag fått till att det gör nu, förutom botten.

@charset "utf-8"; body, h1, h2, h3, h4, h5, h6, p, div, ul, li{ margin: 0; padding: 0; } body{ background: #111; font-family: Verdana, Geneva, sans-serif; } #divWrapper{ width: 1000px; margin: 0 auto; } #divLogo{ background-color: #333; height: 100px; text-align: center; color: white; } #divLine{ background-color: #555; height: 3px; } #divNav{ float: left; width: 100%; background: #333; overflow: hidden; position: relative; border-bottom: 3px #555 solid; } #divNav ul{ clear: left; float: left; list-style: none; margin: 0; padding: 0; position: relative; left: 50%; text-align: center; } #divNav ul li{ display: block; float: left; list-style: none; margin: 0; padding: 0; position: relative; right: 50%; } #divNav ul li a{ display: block; margin: 0 0 0 0px; padding: 3px 10px; background: #333; color: #FF8C00; text-decoration: none; line-height: 1em; font-weight: bold; } #divNav ul li a:hover{ background: #555; color: #FF8C00; cursor: default; } #divNav ul li a.current, #divNav ul li a.current:hover{ background: #555 } #divContentWrapper{ background-color: #222; height: 800px; padding: 3px; color: white; } #divLeftContent{ background-color: #555; height: 800px; width: 200px; padding: 0px; float: left; } #divCenterContent{ background-color: #444; height: 800px; width: 600px; padding: 0px; float: left; } #divRightContent{ background-color: #999; height: 800px; width: 194px; padding: 0px; float: left; }

Visa signatur

AMD Ryzen 9 3900x - MSI Tomahawk x570 Wi-Fi - 32GB Corsair Vengence @ 3200Mhz - MSI GeForce GTX 1070 8GB Gaming X - Corsair Hydro H100x - Några HDD's

Permalänk
Medlem
Visa signatur

Canon 70D | 2x Dell Ultrasharp 24" | Ryzen 3700X | 32B | GTX 1080Ti

Permalänk
Skrivet av Tott3:

Jag vill ha det så att contentWrappern sticker ut ungefär 1px på sidorna och botten. Vilket jag fått till att det gör nu, förutom botten.

http://i.imgur.com/gmTzI.png

@charset "utf-8"; body, h1, h2, h3, h4, h5, h6, p, div, ul, li{ margin: 0; padding: 0; } body{ background: #111; font-family: Verdana, Geneva, sans-serif; } #divWrapper{ width: 1000px; margin: 0 auto; } #divLogo{ background-color: #333; height: 100px; text-align: center; color: white; } #divLine{ background-color: #555; height: 3px; } #divNav{ float: left; width: 100%; background: #333; overflow: hidden; position: relative; border-bottom: 3px #555 solid; } #divNav ul{ clear: left; float: left; list-style: none; margin: 0; padding: 0; position: relative; left: 50%; text-align: center; } #divNav ul li{ display: block; float: left; list-style: none; margin: 0; padding: 0; position: relative; right: 50%; } #divNav ul li a{ display: block; margin: 0 0 0 0px; padding: 3px 10px; background: #333; color: #FF8C00; text-decoration: none; line-height: 1em; font-weight: bold; } #divNav ul li a:hover{ background: #555; color: #FF8C00; cursor: default; } #divNav ul li a.current, #divNav ul li a.current:hover{ background: #555 } #divContentWrapper{ background-color: #222; height: 800px; padding: 3px; color: white; } #divLeftContent{ background-color: #555; height: 800px; width: 200px; padding: 0px; float: left; } #divCenterContent{ background-color: #444; height: 800px; width: 600px; padding: 0px; float: left; } #divRightContent{ background-color: #999; height: 800px; width: 194px; padding: 0px; float: left; }

Är väll bara att göra content-divarna kortare?

Visa signatur
Permalänk
Medlem

Självklart, men tänkte mer om det fanns något smart sätt att räkna ut längden och så Än att sitta och gissa =D

Visa signatur

AMD Ryzen 9 3900x - MSI Tomahawk x570 Wi-Fi - 32GB Corsair Vengence @ 3200Mhz - MSI GeForce GTX 1070 8GB Gaming X - Corsair Hydro H100x - Några HDD's

Permalänk
Skrivet av Tott3:

Självklart, men tänkte mer om det fanns något smart sätt att räkna ut längden och så Än att sitta och gissa =D

Genom att använda dynamisk height, som anpassar sig efter innehållet. Dvs, man specificera ingen height, på "divContentWrapper".

Visa signatur
Permalänk
Medlem

Okej, aja får klura vidare, tack för hjälpen, god jul och gott nytt år.

Tack, ska läsa igenom den senare när jag finner ork. Febern säger emot just nu.

Visa signatur

AMD Ryzen 9 3900x - MSI Tomahawk x570 Wi-Fi - 32GB Corsair Vengence @ 3200Mhz - MSI GeForce GTX 1070 8GB Gaming X - Corsair Hydro H100x - Några HDD's

Permalänk
Skrivet av Tott3:

Okej, aja får klura vidare, tack för hjälpen, god jul och gott nytt år.

Tack, ska läsa igenom den senare när jag finner ork. Febern säger emot just nu.

http://jsfiddle.net/M5RMC/4/

Visa signatur
Permalänk
Medlem

Vad är nu detta?

Visa signatur

AMD Ryzen 9 3900x - MSI Tomahawk x570 Wi-Fi - 32GB Corsair Vengence @ 3200Mhz - MSI GeForce GTX 1070 8GB Gaming X - Corsair Hydro H100x - Några HDD's

Permalänk
Skrivet av Tott3:

Vad är nu detta?

Ska det se ut så då?

Visa signatur
Permalänk
Medlem
Skrivet av Kebabhyvlarn:

Ska det se ut så då?

Så här ska det se ut, än så länge

<!DOCTYPE html> <html> <head> <title>The Lundgren</title> <link rel="stylesheet" type="text/css" href="main.css"> <link rel="shortcut icon" type="image/gif" href="images/favicon.png" /> </head> <body> <div id="divWrapper"> <div id="divLogo">Logo/Header (1000*100px)</div> <div id="divLine"></div> <div id="divNav"> <ul> <li><a href="index.html" class="current">Home</a></li> <li><a href="portfolio">Portfolio</a></li> <li><a href="home.html">Resume</a></li> <li><a href="home.html">Contact</a></li> </ul> </div> <div id="divContentWrapper"> <div id="divLeftContent">Left Column</div> <div id="divCenterContent">Centered Colum</div> <div id="divRightContent">Right Column</div> </div> <div id="divFooter">Footer</div> </div> </div> </body> </html>

@charset "utf-8"; body, h1, h2, h3, h4, h5, h6, p, div, ul, li{ margin: 0; padding: 0; } body{ background: #111; font-family: Verdana, Geneva, sans-serif; } #divWrapper{ width: 1000px; margin: 0 auto; } #divLogo{ background-color: #333; height: 100px; text-align: center; color: white; } #divLine{ background-color: #555; height: 3px; } #divNav{ float: left; width: 100%; background: #333; overflow: hidden; position: relative; border-bottom: 3px #555 solid; } #divNav ul{ clear: left; float: left; list-style: none; margin: 0; padding: 0; position: relative; left: 50%; text-align: center; } #divNav ul li{ display: block; float: left; list-style: none; margin: 0; padding: 0; position: relative; right: 50%; } #divNav ul li a{ display: block; margin: 0 0 0 0px; padding: 3px 10px; background: #333; color: #FF8C00; text-decoration: none; line-height: 1em; font-weight: bold; } #divNav ul li a:hover{ background: #555; color: #FF8C00; cursor: default; } #divNav ul li a.current, #divNav ul li a.current:hover{ background: #555 } #divContentWrapper{ background-color: #222; height: 800px; padding: 3px; color: white; } #divLeftContent{ background-color: #555; height: 778px; width: 180px; padding: 1px; float: left; } #divCenterContent{ background-color: #444; height: 778px; width: 628px; padding: 1px; float: left; } #divRightContent{ background-color: #555; height: 778px; width: 180px; padding: 1px; float: left; } #divFooter{ background-color: #222; height: 20px; text-align: center; padding: 1px; font-style: italic; color: white; }

Visa signatur

AMD Ryzen 9 3900x - MSI Tomahawk x570 Wi-Fi - 32GB Corsair Vengence @ 3200Mhz - MSI GeForce GTX 1070 8GB Gaming X - Corsair Hydro H100x - Några HDD's

Permalänk
Medlem

Den första länk som nämns på den sidan är tyvärr död; här är den som gäller: http://www.sitepoint.com/simple-clearing-of-floats/

Det hela kokar ner till: använd overflow: hidden (eller auto) för att cleara element när du kan.

Visa signatur

Kom-pa-TI-bilitet

Permalänk
Medlem

Om jag fatta rätt och du vill ha contentdiv utstickandes 1px åt alla håll så gör du såhär:

1. Använda en utav följande två för att återställa floats.
Clear: both;
Overflow: hidden; //rekommenderas

1. Använd paddong för att den ska sticka ut.
Padding: 1px;

Skickades från m.sweclockers.com

Permalänk
Medlem
Skrivet av simowewe:

Om jag fatta rätt och du vill ha contentdiv utstickandes 1px åt alla håll så gör du såhär:

1. Använda en utav följande två för att återställa floats.
Clear: both;
Overflow: hidden; //rekommenderas

1. Använd paddong för att den ska sticka ut.
Padding: 1px;

Skickades från m.sweclockers.com

De lugnt, jag har redan fixat (Y) Tack ändå.

Visa signatur

AMD Ryzen 9 3900x - MSI Tomahawk x570 Wi-Fi - 32GB Corsair Vengence @ 3200Mhz - MSI GeForce GTX 1070 8GB Gaming X - Corsair Hydro H100x - Några HDD's