Deze vraag is n.a.v. een eerdere vraag die al gesloten is.
Ben met de code van Bron aan de slag gegaan en stuit op een probleem met tekst-positionering. Zoals je hier kunt zien in het gele deel staan de teksten "links main" en "rechts main" niet goed. De tekst moet helemaal boven in het gele vak staan. Ik zie iets over het hoofd. Hieronder vind je de broncode. Alvast dank voor de moeite!
Ben met de code van Bron aan de slag gegaan en stuit op een probleem met tekst-positionering. Zoals je hier kunt zien in het gele deel staan de teksten "links main" en "rechts main" niet goed. De tekst moet helemaal boven in het gele vak staan. Ik zie iets over het hoofd. Hieronder vind je de broncode. Alvast dank voor de moeite!
Code:
/* minimale reset */
* {
margin: 0; padding: 0; border: 0;
font-size: 100%; font-family: sans-serif;
}
/* html, body, wrapper */
html {
height: 100%;
overflow-y: scroll;
-ms-overflow-y: scroll
}
body {
height: 100%;
font: normal 16px verdana, 'trebuchet ms', sans-serif;
line-height: 1.4;
background: #fff;
color: #000;
}
#wrapper {
width: 960px;
margin: 0 auto;
min-height: 100%;
background: #ffffff;
}
/* navbar + header */
#navbar {
width: 100%;
top: 0;
left: 0;
z-index: 5;
background: #ff0000;
}
#innernavbar {
width: 960px; /* hetzelfde als #wrapper */
height: 50px; /* hoogte van navbar */
margin: 0 auto;
}
#header {
width: 100%;
position: relative;
}
#innerhead {
width: 960px; /* hetzelfde als #wrapper */
height: 256px; /* hoogte van header */
background: #00ff00;
margin: 0 auto;
}
/* main */
#main {
width: 100%;
position: relative;
background: #ffff00;
}
#navandheadpadding {
height: 306px; /* hoogte van navbar + header */
}
#footpadding {
height: 35px; /* hoogte van footer */
}
/* linkerkolom */
#leftwrap {
postion: absolute;
top: 306px; /* hoogte van navbar + header */
bottom: 35px; /* hoogte van footer */
left: 0;
}
#innerleft {
postion: fixed;
width: 480px; /*breedte linkerkolom = helft wrapper */
top: 306px; /* hoogte van navbar en header */
bottom: 35px; /* hoogte van footer */
overflow: auto; /* voor beide kolommen */
background: #dcdc00;
}
/* rechterkolom */
#rightwrap {
width: 480px; /* breedte rechter kolom (#wrapper - #innerleft) */
left: 480px; /* breedte linker kolom */
position: relative;
top: 0;
overflow: auto; /* voor beide kolommen */
background: #bebebe;
}
#innerright {
}
/* footer */
#footer {
width: 100%;
/* position: fixed; */
bottom: 0;
left: 0;
z-index: 5;
background: #ffa300;
}
#innerfoot {
width: 960px; /* hetzelfde als #wrapper */
height: 35px; /* hoogte van footer */
margin: 0 auto;
}
/* opmaak
.navtext {
font-family: Trebuchet MS;
font-size: 13pt;
font-weight: bold;
color: #000000;
}
*/
HTML:
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"><title>Steely Fan - The Dutch Steely Dan tribute</title>
<link href="style-sf.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="navbar">
<div id="innernavbar">
<p>dit is de navbar</p>
</div>
<div id="header">
<div id="innerhead">
<p>dit is de header</p>
</div>
</div>
<div id="main">
<!--ruimte maken voor navbar + header-->
<div id="navandheadpadding"></div>
<div id="leftwrap">
<div id="innerleft">
<p>links main. links main. links main. links main. links main. links main. links main. links main. links main. links main. links main. links main. links main. links main. links main. </p>
</div>
</div>
<div id="rightwrap">
<div id="innerright">
<p>rechts main. rechts main. rechts main. rechts main. rechts main. rechts main. rechts main. rechts main.</p>
</div>
</div>
<!--ruimte maken voor footer-->
<div id="footpadding"></div>
</div><!--/main-->
<div id="footer">
<div id="innerfoot">
<p>Dit is de footer</p>
</div>
</div>
<!--eind div wrapper-->
</div>
</body></html>
Laatst bewerkt:
