Very odd html/css -



Very odd html/css -

jfiddle http://jsfiddle.net/h5lmf/2/

if @ this, white bar @ top, don't know why there, it's doesn't recognise banner. anyway want white bar beneath banner @ center (red bar in picture). don't know anymore , see lastly resort

html:

<div class="navcont"> <div class="bancont"><img class="banner" src="images/banner.png"></div> <nav class="cssmenu"> <ul> <li><a href="#">home</a></li> <li><a href="#">prijzen</a></li> <li><a href="#">examen</a></li> <li><a href="#">leerlingen</a></li> </ul> </nav> </div> <div class="midden"> <div class="middentextvak"> </div> <img class="logo" src="images/logo.png"> </div>

css:

body { background-image:url('images/background.jpg'); background-repeat: no-repeat; height: 100%; margin: 0 0 0 0; } .banner { width: 100%; top: 0; left: 0; position: relative; float: left; } .cssmenu { float:left; margin-top: 0px; left: 0; background-color:black; width: 100%; height: 6%; } .cssmenu ul { list-style-type:none; text-align: center; margin-right: 6%; } .cssmenu li { display:inline; padding-left: 5%; } .cssmenu li { color: white; text-decoration: none; font-family:eras bold itc; font-size: 20px; } .cssmenu li a:hover { color: #0671ca; text-decoration: none; font-family:eras bold itc; font-size: 20px; } .middentextvak { position: relative; display: block; margin-left: auto; margin-right: auto; width: 200px; height: 200px; background: white; } .logo { position: absolute; display: block; margin-left: 25%; margin-right: auto; margin-top: 3%; width:50%; opacity: 0.5; z-index: -1; }

seems way floating elements.

try

.midden { clear:both; }

to tell midden div appear below floated elements.

html css

Comments

Popular posts from this blog

php - Android app custom user registration and login with cookie using facebook sdk -

django - Access session in user model .save() -

php - .htaccess Multiple Rewrite Rules / Prioritizing -