PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
N

[CSS] Border Height

Door Nicoow Unknown op 01-10-2008 18:38
1.889 views
Hallo allen,

Ik ben bezig met een nieuwe layout te basen, maar nu wil ik in de container div een border die over de hele lengte gaat.
Maar nu neemt hij 100% van wat je eerst krijgt, en daarna stopt hij ermee, als je naar beneden scrolt.
Voor de gene die het niet snappen
Een voorbeeldje

Ik gebruik dit stukje css.

body {
	background-color: #cfe5e4;
}
#container {
	margin-left: auto;
	margin-right: auto;
	height: 100%;
	width: 800px;
	background-color: #cfe5e4;
	border: 1px solid #504d42;
	border-bottom-width: 0px;
}
#header {
	background-image: url(images/header.gif);
	background-color: #fff;
	height: 147px;
	width:  800px;
}
#menu {
	background-image: url(images/menu.gif);
	background-color: #fff;
	height: 34px;
	width: 800px;
}
#content {
	margin-left: auto;
	margin-right: auto;
	width: 700px;
}
#content_left {
	margin-top: 25px;
	margin-bottom: 25px;
	background-image: url(images/content_head.gif);
	background-position: top;
	background-color: #fff;
	background-repeat: no-repeat;
	min-height: 500px;
	width: 468px;
	border: 1px solid #504d42;
	float:  left;
}
#content_right {
	margin-top: 25px;
	margin-bottom: 25px;
	background-color: #cfe5e4;
	width: 228px;
	min-height: 500px;
	border: 1px solid #504d42;
	border-left-width: 0px;
	float: left;
}
S
Steven Hack
01-10-2008 23:07
Ik ben nog aan het experimenteren met div's in css, maar wat als je nu het volgende doet:

Je verwijderd de with bij de container, en zet een clear both tussen de content en de container?

Dan zou je zoiets krijgen:

#container {
    margin-left: auto;
    margin-right: auto;
    width: 800px;
    background-color: #cfe5e4;
    border: 1px solid #504d42;
    border-bottom-width: 0px;
}
.clear {
clear: both;
}


En je html wordt dan:

<div id="container">
  <div id="header">&nbsp;</div>
  <div id="menu">&nbsp;</div>
  <div id="content">
    <div class="clear">&nbsp;</div>
    <div id="content_left">&nbsp;</div>
    <div id="content_right">&nbsp;</div>
    <div class="clear">&nbsp;</div>
  </div>
</div>


Volgens mij zou dat moeten werken.
Jan Koehoorn
01-10-2008 23:14
Klopt, maar dan zondig je tegen de regels van de semantiek. Je gebruikt een lege div als stoplap om te clearen, en het is gewoon niet nodig. Die oplossing van mij is veel slanker en semantisch correcter.
S
Steven Hack
01-10-2008 23:19
Ah oke, dan zal ik die ergens noteren.

Ik heb het idee van de sitemasters site, die, vind ik, heel goede tutorials hebben over css.
Daarin kwam dit ook aanbod, vandaar dat ik het zo heb aangeleerd.
Jan Koehoorn
01-10-2008 23:21
Zo werkt het. Je gebruikt de dingen die je tegenkomt, totdat je iets beters tegenkomt ;-)
N
Nicoow Unknown
02-10-2008 07:55
Als k die code op m'n content div zet, maakt dat helemaal niks uit.
Als ik de border in m'n content erbij doe, dan klopt de border wel, maar dan moet ik hem eerst weer wijd maken, waardoor hij niet meer goed centreerd.
Iemand nog suggesties?

Reageren

Inloggen om te reageren