Forum Mjukvara Programmering och digitalt skapande Tråd

Nestlad div? [HTML & CSS]

1
Skriv svar
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

Redigera
Citera flera Citera
Permalänk
Medlem
●

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

How to program

Redigera
Citera flera Citera
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

Redigera
Citera flera Citera
Permalänk
Medlem
●
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.

Gå till inlägget

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

Visa signatur

How to program

Redigera
Citera flera Citera
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

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

http://www.positioniseverything.net/easyclearing.html

Visa signatur

Min Hemsida

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

Redigera
Citera flera Citera
Permalänk
Medlem
●
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;
}
Gå till inlägget

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

Visa signatur

How to program

Redigera
Citera flera Citera
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

Redigera
Citera flera Citera
Permalänk
Medlem
●
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

Gå till inlägget

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

Visa signatur

How to program

Redigera
Citera flera Citera
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

Redigera
Citera flera Citera
Permalänk
Medlem
●
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.

Gå till inlägget

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

Visa signatur

How to program

Redigera
Citera flera Citera
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

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Tott3:

Vad är nu detta?

Gå till inlägget

Ska det se ut så då?

Visa signatur

How to program

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Kebabhyvlarn:

Ska det se ut så då?

Gå till inlägget

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

Redigera
Citera flera Citera
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

Redigera
Citera flera Citera
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

Redigera
Citera flera Citera
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

Gå till inlägget

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

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara