3 div's naastelkaar

Status
Niet open voor verdere reacties.
Gerben93

Gerben93

Gebruiker
Lid geworden
28 okt 2009
Berichten
15
Hallo mensen van het goede leven.

Hier een vraag van mij ik maak een homepage voor mijzelf.
Ik wil een soort van de "new tab" pagina van google chrome alleen ik krijg geen 3 divs naast elkaar en daaronder weer 3 divs.

dit is mijn code tot nu toe.

Index.html
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>GB Hompage</title>
<link href="default.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<!-- start header -->
<div id="header">
	<div id="logo" />
</div>
<!-- end header -->
<!-- start page -->
<div id="linkrow1">
	<div id="link1" />
	<div id="link2" />
	<div id="link3" />
</div>
<div id="linkrow2">
	<div id="link4" />
	<div id="link5" />
	<div id="link6" />
</div>
	<div style="clear: both;">&nbsp;</div>
	<!-- end page -->
<div id="footer">
	<p class="copyright">&copy;&nbsp;&nbsp;2009 &nbsp;&bull;&nbsp; Design by Gerben Wijnja</p>
</div>
</body>
</html>

Stylesheet.css
HTML: 
body {
	margin: 0 0 0 0px;
	padding: 0px;
	background: #191919 url(images/img01.jpg) repeat-xy left top;
	text-align: justify;
	font-family:  Tahoma, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
}

h1, h2, h3 {
	margin-top: 0;
}

h1 {
	font-size: 1.6em;
	font-weight: normal;
}

h2 {
	font-size: 1.6em;
}

h3 {
	font-size: 1em;
}

a {
	text-decoration: none;
	color: #333333;
}

a:hover {
	border-bottom: none;
}

a img {
	border: none;
}

img.left {
	float: left;
	margin: 0 20px 0 0;
}

img.right {
	float: right;
	margin: 0 0 0 20px;
}

#header {
	width: 960px;
	margin: 0 auto;
	height: 262px;
}

/* Header */

#logo {
	width: 1000px;
	height: 200px;
	margin: 0 auto;
	padding-top: 50px;
	background: url(images/img07.jpg) no-repeat;
}

/* Wrapper */

#wrapper {
	width: 100%;
	margin: 0px;
	padding: 0px;
}


/* Link */

#linkrow1 {
	width: 400px;
	height: 214px;
	margin: 0px;
	padding: 0px;
}
#link1 {
	width: 400px;
	height: 214px;
	margin: 0px;
	padding: 0px;
	background: url(images/link1.jpg) no-repeat;
}
#link2 {
	width: 400px;
	height: 214px;
	margin: 0 0 0 410px;
	padding: 0px;
	background: url(images/link2.jpg) no-repeat;
}
#link3 {
	width: 400px;
	height: 214px;
	margin: 0 0 0 410px;
	padding: 0px;
	background: url(images/link3.jpg) no-repeat;
}
#linkrow2 {
	width: 400px;
	height: 250px;
	margin: 0px;
	padding: 0px;
}
#link4 {
	width: 400px;
	height: 214px;
	margin: 1000 0 0 0px;
	padding: 0px;
	background: url(images/link4.jpg) no-repeat;
	float:left;
}
#link5 {
	width: 400px;
	height: 214px;
	margin: 0 0 0 410px;
	padding: 0px;
	background: url(images/link5.jpg) no-repeat;
}
#link6 {
	width: 400px;
	height: 214px;
	margin: 0 0 0 410px;
	padding: 0px;
	background: url(images/link6.jpg) no-repeat;
}
/* Content */

#content {
	float: left;
	width: 460px;
	margin: 0px 20px 20px 20px;
	background: #FFFFFF;
}

.post {
	padding-bottom: 15px;
	line-height: 200%;
	background: url(images/img04.jpg) repeat-x left bottom;
}

.post h1 {
	font-weight: normal;
}

.title {
	margin: 0;
	padding: 30px 0 4px 0px;
	font-size: 28px;
	font-weight: normal;
}

.title a {
	border-bottom: none;
	color: #000000;
}

.title a:hover {
	border-bottom: 1px dotted #000000;
}

.byline {
	background: #676767;
	margin: 10px 0px 20px 0px;
	padding: 4px 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFFFFF;
}

.tag {
	padding: 0 15px;
}

.entry {
	padding: 0px 0px;
}

.links {
	width: 80px;
	height: 33px;
	background: url(images/img05.jpg) no-repeat left top;
	text-align: right;
	font-weight: bold;
}

.links a {
	display: block;
	height: 25px;
	padding-top: 8px;
	padding-left: 10px;
	text-align: left;
	color: #5E5E5E;
}

.links a:hover {
}


/* Footer */

#footer {
	width: 1000px;
	height: 80px;
	margin: 0 auto;
	padding: 0 20px;
	background: url(images/img03.gif) no-repeat center top;
}

#footer p {
	margin: 0;
	padding: 10px 0 0 0;
	text-align: center;
	text-transform: uppercase;
	font-size: 10px;
	font-family: Arial, Helvetica, sans-serif;
	color: #737373;
}

#footer a {
	color: #BDBDBD;
}

#footer .link {
}

#footer .copyright {
}

Ik hoop dat jullie mij kunnen helpen.
 
Wat 'n overzichtelijke code! Dat werkt veel makkelijker.
Toch heb ik me 'n ongeluk zitten zoeken. De fout is namelijk zo overduidelijk, dat ik 'm waarschijnlijk daardoor over 't hoofd zag. Prachtig.
HTML: 
<div id="link4" />
Deze div is niet afgesloten.
Als je dit verandert in
HTML: 
<div id="link4"></div>
is de div wel afgesloten. 'n div moet altijd <div>...(content)...</div> zijn.
Vreemd dat de validator hier geen foutmelding geeft. Lijkt me 'n foutje in de validator.
Ik weet niet of dit alles oplost, maar het uiterlijk verandert hier zo sterk door, dat 't handis is om eerst even dit te verbeteren.
 
Laatst bewerkt:
Heey bedankt voor deze goede toevoeging maar mijn vraag is hierbij nog steeds niet beantwoord dit is de veranderde code met nu de divs wel goed afgesloten
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>GB Hompage</title>
<link href="default.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<!-- start header -->
<div id="header">
	<div id="logo" />
</div>
<!-- end header -->
<!-- start page -->
<div id="linkrow1">
	<div id="link1"></div> 
	<div id="link2"></div>
	<div id="link3"></div>
</div>
<div id="linkrow2">
	<div id="link4"></div>
	<div id="link5"></div>
	<div id="link6"></div>
</div>
	<div style="clear: both;">&nbsp;</div>
	<!-- end page -->
<div id="footer">
	<p class="copyright">&copy;&nbsp;&nbsp;2009 &nbsp;&bull;&nbsp; Design by Gerben Wijnja</p>
</div>
</body>
</html>

Hoopt dat iemand mij kan helpen om die drie divs op een rechte rij te zetten.
 
Deze is valide,
doch er is niks te zien.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>GB Hompage</title>
<style type="text/css" >
body {
    margin: 0 0 0 0px;
    padding: 0px;
    background-image: url(images/img01.jpg);
background-repeat: repeat-x ;
background-color: #191919;
    text-align: justify;
    font-family:  Tahoma, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #000000;
}
 
h1, h2, h3 {
    margin-top: 0;
}
 
h1 {
    font-size: 1.6em;
    font-weight: normal;
}
 
h2 {
    font-size: 1.6em;
}
 
h3 {
    font-size: 1em;
}
 
a {
    text-decoration: none;
    color: #333333;
}
 
a:hover {
    border-bottom: none;
}
 
a img {
    border: none;
}
 
img.left {
    float: left;
    margin: 0 20px 0 0;
}
 
img.right {
    float: right;
    margin: 0 0 0 20px;
}
 
#header {
    width: 960px;
    margin: 0 auto;
    height: 262px;
border: solid 1px #ff0000;
}
 
/* Header */
 
#logo {
    width: 1000px;
    height: 200px;
    margin: 0 auto;
    padding-top: 50px;
    background: url(images/img07.jpg) no-repeat;
border: solid 1px #ff0000;
}
 
/* Wrapper */
 
#wrapper {
    width: 100%;
    margin: 0px;
    padding: 0px;
border: solid 1px #ff0000;
}
 
 
/* Link */
 
#linkrow1 {
    width: 400px;
    height: 214px;
    margin: 0px;
    padding: 0px;
}
#link1 {
    width: 400px;
    height: 214px;
    margin: 0px;
    padding: 0px;
    background: url(images/link1.jpg) no-repeat;
}
#link2 {
    width: 400px;
    height: 214px;
    margin: 0 0 0 410px;
    padding: 0px;
    background: url(images/link2.jpg) no-repeat;
}
#link3 {
    width: 400px;
    height: 214px;
    margin: 0 0 0 410px;
    padding: 0px;
    background: url(images/link3.jpg) no-repeat;
}
#linkrow2 {
    width: 400px;
    height: 250px;
    margin: 0px;
    padding: 0px;
}
#link4 {
    width: 400px;
    height: 214px;
    margin: 1000px 0 0 0px;
    padding: 0px;
    background: url(images/link4.jpg) no-repeat;
    float:left;
}
#link5 {
    width: 400px;
    height: 214px;
    margin: 0 0 0 410px;
    padding: 0px;
    background: url(images/link5.jpg) no-repeat;
}
#link6 {
    width: 400px;
    height: 214px;
    margin: 0 0 0 410px;
    padding: 0px;
    background: url(images/link6.jpg) no-repeat;
}
/* Content */
 
#content {
    float: left;
    width: 460px;
    margin: 0px 20px 20px 20px;
    background: #FFFFFF;
}
 
.post {
    padding-bottom: 15px;
    line-height: 200%;
    background: url(images/img04.jpg) repeat-x left bottom;
}
 
.post h1 {
    font-weight: normal;
}
 
.title {
    margin: 0;
    padding: 30px 0 4px 0px;
    font-size: 28px;
    font-weight: normal;
}
 
.title a {
    border-bottom: none;
    color: #000000;
}
 
.title a:hover {
    border-bottom: 1px dotted #000000;
}
 
.byline {
    background: #676767;
    margin: 10px 0px 20px 0px;
    padding: 4px 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #FFFFFF;
}
 
.tag {
    padding: 0 15px;
}
 
.entry {
    padding: 0px 0px;
}
 
.links {
    width: 80px;
    height: 33px;
    background: url(images/img05.jpg) no-repeat left top;
    text-align: right;
    font-weight: bold;
}
 
.links a {
    display: block;
    height: 25px;
    padding-top: 8px;
    padding-left: 10px;
    text-align: left;
    color: #5E5E5E;
}
 
.links a:hover {
}
 
 
/* Footer */
 
#footer {
    width: 1000px;
    height: 80px;
    margin: 0 auto;
    padding: 0 20px;
    background: url(images/img03.gif) no-repeat center top;
}
 
#footer p {
    margin: 0;
    padding: 10px 0 0 0;
    text-align: center;
    text-transform: uppercase;
    font-size: 10px;
    font-family: Arial, Helvetica, sans-serif;
    color: #737373;
}
 
#footer a {
    color: #BDBDBD;
}
 
#footer .link {
}
 
#footer .copyright {
}
</style>
</head>
<body>
<!-- start header -->
<div id="header">header
    <div id="logo">logo</div>
</div>
<!-- end header -->
<!-- start page -->
<div id="linkrow1">linkrow1
    <div id="link1" >ink1</div>
    <div id="link2" >ink1</div>
    <div id="link3" >ink1</div>
</div>
<div id="linkrow2">linkrow
    <div id="link4" >ink1</div>
    <div id="link5">ink1</div>
    <div id="link6" >ink1</div>
</div>
    <div style="clear: both;">&nbsp;</div>
    <!-- end page -->
<div id="footer">
    <p class="copyright">&copy;&nbsp;&nbsp;2009 &nbsp;&bull;&nbsp; Design by Gerben Wijnja</p>
</div>
</body>
</html>

Mischien heb je er wat aan.

:cool:
 
krijg geen 3 divs naast elkaar en daaronder weer 3 divs
Klik om te vergroten...

Googel met
css wrapper
en
css container

Je moet om drie divs naast elkaar te zetten,
die divs in een container of wrapper "vangen".

:cool:
 
jha owke maar ik heb in mijn index.html helemaal gaan wrapper of container div staan :confused:
 
Ik ken die Google chrome tabs niet. Maar ik neem aan dat je bedoelt drie divs naast elkaar, en daaronder weer drie divs. Te zien aan je code.
(Even over je css: repeat-xy bestaat niet, waarschijnlijk bedoel je gewoon repeat.
1000 kan niet, dat moet 1000px zijn)

Dit verhaal is voor de bovenste drie, maar voor de onderste drie geldt hetzelfde.



'n div is 'n blok-element en wordt daarom normaal genomen op 'n nieuwe regel gezet.
De bovenste drie moeten in linkrow1. Die heeft bij jou 'n breedte van 400 px. Daar krijg je dus nooit drie divs in van elk 400 px breed.
Om te beginnen maak ik dus #linkrow1 1200 px breed.

#link1, #link2 en link3 zijn elk 400 px breed, samen 1200, dus dat past precies. Alleen wordt bij de breedte de marge opgeteld. Dus dan wordt het meer dan 1200 px. Haal bij #link1, #link2 en #link3 de marge links en rechts weg.

Nu passen ze naast elkaar, alleen begint 'n div altijd op 'n nieuwe regel. Om dat te voorkomen zet je bij alle drie float: left.

Code: 
#linkrow1 {
height:214px;
margin:0;
padding:0;
width:1200px            /* was 400 px */
}

#link1 {
background:transparent url(images/link1.jpg) no-repeat scroll 0 0;
height:214px;
margin:0;
padding:0;
width:400px
float: left;           /* toegevoegd */
}

#link2 {
background:transparent url(images/link2.jpg) no-repeat scroll 0 0;
height:214px;
margin:0;         /* was 0 0 0 410px; */
padding:0;
width:400px;
float: left;              /* toegevoegd */
}

#link3 {
background:transparent url(images/link3.jpg) no-repeat scroll 0 0;
height:214px;
margin: 0;            /* was 0 0 0 410px; */
padding:0;
width:400px;
float: left;          /* toegevoegd */
}

Verder is 't verstandig om 'n paar px speling te nemen, dus ze bijvoorbeeld 398 px breed te maken. Als je gaat zoomen ontstaan er afrondingsfouten, waardoor drie divs naast elkaar net te veel kunnen worden. De laatste div wordt dan op de volgende regel gezet. Dit moet je zeker doen als je borders gaat gebruiken, want 'n border van 1px breed kan bij inzoomen ineens 2 px worden, terwijl de buitenste div niet zo snel meegroeit.
 
Laatst bewerkt:
Top man danku.

zie het nu helemaal.

Bij deze is mijn vraag opgelost.:thumb:
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan