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

CSS inhoud probleem

Door erik den Blaauwen op 13-01-2008 22:57
1.003 views
Ik ben bezig met een css layout, alleen ik heb daar een klein probleempje dat ik zelf niet verholpen krijg.

Dit is de site waar het omgaat: http://www.picel.nl/cms/cms.html

Je zit aan de linker kant van dit soort | staan, deze streepjes moeten binnen de div vallen

Dit is de css die daar bij hoort.
#Content{
width:800px;
height:100%;
background-color:#DFEAE9;

min-height:50px;

margin:0 auto;


border-left:1px solid #2a2a2a;
border-top:1px solid #2a2a2a;
border-right:1px solid #2a2a2a;
}
#Content_Left{
float: left;
height: 100%;
width: 575px;
min-height:50px;
}
#Content_Right{
height: 100%;
width: 25px;
float: right;
min-height:50px;
}
#Content_Center{
width: 200px;
height:100%;
/*min-height:600px;*/
background-color:#c7d6d5;

min-height:50px;

margin-left: 575px;
margin-right: 25px;
}

Dit zijn de div in het layout:
<div id="Content">
<div id="Content_Left">|<br />
|<br />
|<br />
|<br />
|<br />
|<br />
|<br />
|<br />
|<br />
|<br />
|</div>
<div id="Content_Right">..</div>
<div id="Content_Center">//|<br />
</div>
</div>

Kan iemand mij vertellen wat het probleem is?

Alvast bedankt voor je hulp ! :D:D
Jan Koehoorn
13-01-2008 23:01
Je hebt een float op de Content_Left div gezet. Daarom breekt hij uit zijn container div (Content)

Als je die een breedte en een overflow: hidden geeft, rekt hij weer mee.

Voor de breedte kun je een vast getal in pixels opgeven of een percentage.
O
Onbekend Onbekend
13-01-2008 23:01
Zijn gister 2 topics over geweest, even zoeken op het forum!
e
erik den Blaauwen
13-01-2008 23:11
het werkt nu nog niet 100%

Aangepaste css:
#Content{
width:800px;
height:100%;
background-color:#DFEAE9;

min-height:50px;

margin:0 auto;


border-left:1px solid #2a2a2a;
border-top:1px solid #2a2a2a;
border-right:1px solid #2a2a2a;
}
#Content_Left{
height: 100%;
width:575px;
overflow:hidden;
min-height:50px;
}
#Content_Right{
height: 100%;
width: 25px;
float: right;
min-height:50px;
}
#Content_Center{
width: 200px;
height:100%;
/*min-height:600px;*/
background-color:#c7d6d5;

min-height:50px;

margin-left: 575px;
margin-right: 25px;
}


nogmaals alvast bedankt voor de hulp
e
erik den Blaauwen
14-01-2008 13:56
Kan iemand erachter komen wat er fout is?

Alvast bedankt.
J
J V
14-01-2008 14:41
Je mag eigenlijk pas bumpen nah 24 uur, daar moet je volgende keer even op letten ;).

#Content {
background-color:#D1EBDA;
border-left:1px solid #2A2A2A;
border-right:1px solid #2A2A2A;
border-top:1px solid #2A2A2A;
margin:0pt auto;
width:800px;
height:auto;
}
#Content_Left {
height:100%;
min-height:50px;
overflow:hidden;
width:575px;
float:left;
}
#Content_Right {
float:right;
height:100%;
min-height:50px;
width:25px;
}
#Content_Center {
background-color:#FFFFFF;
height:100%;
margin-left:575px;
margin-right:25px;
min-height:50px;
width:200px;
}

Hier je css die aangepast is. Nu staat alles op 1 rij, maar je achtergrond (dat blauw) loopt maar tot die 50 px of er moet meer tekst in komen te staan.
Als je meer vragen hebt hoor ik het wel.
e
erik den Blaauwen
14-01-2008 14:58
Ik heb het aangepaste CSS van jou erin geplaatst en dan krijg ik het volgende resultaat: http://www.picel.nl/cms/cms.html

De tekst in het linker tekst vak (genaamd: Content_left) gaat nog steeds over de footer heen.




J
J V
14-01-2008 15:26
Ik mis bij je content-left nog een float-left.

body{
	margin:0 auto;
	/*background-color:#EBF1F0;*/
}
/*----------------- Header ---------------------*/
#Header{
	width:800px;
	height:100px;
	background-image:url(afbeeldingen/Header_bg.png);
	margin:0 auto;
	border:1px solid #2a2a2a;
}
#Header_Left{
	float: left;
	height: 100%;
	width: 569px;
	padding-left:3px;
}
#Header_Right{
	height: 100%;
	width: 25px;
	float: right;
}
#Header_Center{
	width: 200px;
	height:100%;
	/*min-height:600px;*/
	background-color:#FFFFFF;
	
	margin-left: 575px;
	margin-right: 25px;
}
	
			/*-- style --*/
.Titel{
	font-family:Arial, Helvetica, sans-serif;
	font-size:30px;
	font-weight:bold;
	color:#CC3300;
}
.H_klein{
	font-family:Arial, Helvetica, sans-serif;
	font-size:9px;
	font-weight:bold;
	color:#2a2a2a;
}
.H_Normaal{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#333333;
}
.H_Normaal_bold{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	color:#333333;
}			
			




/*----------------- Main ---------------------*/
#Main{
	width:800px;
	height:25px;
	/*background-color:#EBF1F0;*/
	
	margin:0 auto;
}
			/*-- style --*/
.M_Normaal{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#333333;
}			
			
			
			
			
/*----------------- Content --------------------*/
#Content{
	width:800px;
	height:100%;
	background-color:#d1ebda;
	
	min-height:50px;
	
	margin:0 auto;
	
		
	border-left:1px solid #2a2a2a;
	border-top:1px solid #2a2a2a;
	border-right:1px solid #2a2a2a;
}
#Content_Left{
	height: 100%;
	width:575px;
	overflow:hidden;
	min-height:50px;
}
#Content_Right{
	height: 100%;
	width: 25px;
	float: right;
	min-height:50px;
}
#Content_Center{
	width: 200px;
	height:100%;
	/*min-height:600px;*/
	background-color:#FFFFFF;
	
	min-height:50px;
	margin-left: 575px;
	margin-right: 25px;
}
			/*-- style --*/




/*----------------- Header ---------------------*/
#Footer{
	width:800px;
	height:100%;
	background-color:#91c9a4;
	margin:0 auto;
	border-left:1px solid #2a2a2a;
	border-bottom:1px solid #2a2a2a;
	border-right:1px solid #2a2a2a;
}
			/*-- style --*/
.F_Klein{
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
	color:#333333;
}

Vervang je oude code door deze. Of voeg bij je content-links die float:left toe. Anders verglijk je wat je nu hebt met diegene hierboven, dan zie je het wel.
e
erik den Blaauwen
14-01-2008 15:43
Ik heb het bovenstaande CSS gekopieerd en geplakt maar het werkt nog steeds niet goed. als ik een float left toepas dan staan ze wel naast elkaar alleen dan gaat de id Content_left over der footer heen.

in ieder geval alvast bedankt voor het meedenken :D!

Ik zie zelf niet wat nou precies het probleem is, zal wel een klein dingetje zijn dat ik niet zie :P

Reageren

Inloggen om te reageren