CSS probleem

Door Corneel den Hartogh op 04-01-2006 10:59 gewijzigd op 05-01-2006 11:29

607 views

Hoe kan ik er voor zorgen dat de ´navbar´ links en de ´content´ rechts evenlang worden als de main-text in het midden?

Heb de scripts hier maar weggehaald, bespaart scrollen

Onbekende gebruiker

04-01-2006 11:13

Door dezelfde width in te stellen.

Corneel den Hartogh

04-01-2006 11:16

Ik bedoelde niet dezelfde breedte, maar dezelfde lengte. Dus dat als je heel veel tekst in het midden hebt, de linker en rechterkolom ook ´meekomen´.

Jan Koehoorn

04-01-2006 11:39 gewijzigd op 04-01-2006 11:46

Hoi Corneel,

CSS is prachtig, maar heeft als nadeel dat het heel lastig is om verticale waarden te specificeren.

In jouw geval:

maak een header div (heb je al)
maak een content div met de linker en de rechter bars, geef ze geen achtergrondkleur en float ze naar links en rechts.

Maak een achtergrond image voor de content div
wit - rood - wit. Hoeft maar een paar pixels hoog te zijn, maar moet wel net zo breed zijn als je content div. De witte gedeeltes moeten net zo breed zijn als je bars, het rode gedeelte net zo breed als de content min de som van de bars.

#content {
background: #fff url(bg.gif) center center repeat-y;
}

daaronder je footer div.

Corneel den Hartogh

04-01-2006 17:31

Oke, ik geloof dat ik het begrijp, ik zal het vanavond of morgen is proberen.

Alvast bedankt!

Corneel den Hartogh

05-01-2006 11:24 gewijzigd op 05-01-2006 11:27

Oke, ik ben al verder gekomen.

Maar nu krijg ik mijn navbar en oude content divs niet in beeld, die zitten volgens mij achter de main-text.

Zie hier:http://www.denhartoghkaas.nl/csstest.html

Ik heb een content div uit een tutorial gebruikt, omdat die er wat simpeler uitzag.

Voor de volledigheid de scripts:

.css

body {
margin: 0;
padding: 0;
background-color: #007400;
}

#header {
background-color: #ffffff;
border-bottom: 1px #000000 solid;
height: 60 px;
margin-left: 80 px;
margin-right: 80 px;
}

#buitenkant{
margin-left:80px;
margin-right:80px;
border-left-width: 150px ; /* breedte linkerkolom: rand verbergen in NN4 */
/*/*/ border-left-color: #F0FCFC; /* kleur linkerkolom */
border-left-style: solid;
/*/*/ border-right-width: 150px; /* breedte rechterkolom: rand verbergen in NN4 */
border-right-color: #F0B6EC; /* kleur rechterkolom */
border-right-style: solid;
background-color: red; /* kleur midden */
width: auto;
}

#navbar {
position: relative;
float: left;
margin-left: -150px;
background-color: #F0FCFC;
border-bottom: 1px #000000 solid;
padding:5px;
}

#main-text {
position: relative;
background-color: red;
border-left: 1px #000000 solid;
border-right: 1px #000000 solid;
border-bottom: 1px #000000 solid;
padding:5px;
}

#content {
position: relative;
float: right;
width:150px;
background-color: #F0B6EC;
border-bottom: 1px #000000 solid;
padding:5px;
}

#onder{
background-color: yellow;
margin-right: 80px;
margin-left: 80px;
margin-bottom: -14px;
padding:5px;
}

en de html:

<html>
<head>
<title></title>
<link rel="stylesheet" href="csstest.css" type="text/css">

</head>
<body>
<div id="header">


Ik sta bovenaan.


</div><div id="buitenkant"><div id="navbar">


links


</div><div id="content">


Ik sta in de rechts


</div><div id="main-text">


Ik sta in het midden.<br><br>Ik sta in het midden.<br><br>Ik sta in het midden.<br><br>Ik sta in het midden.<br><br>Ik sta in het midden.<br><br>Ik sta in het midden.<br><br>Ik sta in het midden.<br><br>Ik sta in het midden.<br><br>Ik sta in het midden.<br><br>


</div></div><div id="onder">


Ik sta onderaan.


</div>
</body>
</html>

Corneel den Hartogh

06-01-2006 10:26

Probleem al opgelost beste mensen! Bedankt voor de hulp!

Jan Koehoorn

06-01-2006 10:32

Ik zat inderdaad net naar je voorbeeld te kijken en dat zag er gewoon uit zoals het moest :-)

Corneel den Hartogh

06-01-2006 10:46

Jah, ik moest de menu´s alleen margin-left/right -px meegeven. Dit omdat ik de menu´s borders zijn.

Reageren

Inloggen om te reageren