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.890 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;
}
M
Mitchell
01-10-2008 19:27
Waar is je clear?
N
Nicoow Unknown
01-10-2008 19:32
in m'n andere css bestand genaamd reset.css
[code]html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

/* remember to define focus styles! */
:focus {
outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
M
Mitchell
01-10-2008 19:47
Ik heb het over je div.clear die je floats dus cleared..
N
Nicoow Unknown
01-10-2008 19:52
die zijn er nog niet :P
dat was toch gewoon float: clear;??
-
--
01-10-2008 20:44
Nee.. clear is een eigenschap op zich. Als je float:left; doet, moet je daarna nog een clear gebruiken, zeggen sommigen. Persoonlijk heb ik het nog nooit gebruikt.
Jan Koehoorn
01-10-2008 21:12
Dat doe je alleen als een div mee moet rekken met zijn inhoud. Overigens bereik je hetzelfde met een width en een overflow: hidden op de container.
N
Nicoow Unknown
01-10-2008 21:27
Haha, jan grappig dat je t zegt, maar dat werkte dus niet, k had dat ook al geprobeerd.
Maar dan moet ik denk ik maar met een clear div werken.

//EDIT
Ok, k had net even met een clear geprobeerd,
dus een class aangemaakt in css met clear: both;
En die zet ik dan onder m'n div voor links en rechts, maar het helpt nog niks.
Iemand een idee?
Jan Koehoorn
01-10-2008 21:57
nico schreef op 01.10.2008 21:27
Haha, jan grappig dat je t zegt, maar dat werkte dus niet, k had dat ook al geprobeerd.

Dan moet ik even de broncode van je pagina online kunnen bekijken, want dat werkt altijd, zelfs in IE6 (jaja).
Jan Koehoorn
01-10-2008 22:40
Ja, dus als je die div#content deze CSS geeft:

#content {
	margin: 0 auto;
	width: 700px;
        overflow: hidden;
}

zou het moeten werken.

Reageren

Inloggen om te reageren