I want the "#logos" div like shown on the image. http://skateitall.be/abusekids/images/abusekidss.JPG css: body { margin: 0; padding: 60px 10px 10px 10px; background-image: url(images/bg.gif); } #logos { width: 200px; height: 40px; border: 1px solid; background-color: #DDDDDD; text-align: right; } #all { margin: 0 auto; width: 492px; font-family: Arial, Helvetica, sans-serif; border: 4px solid #000000; } #header { background-image: url(images/bgheader.gif); color: #ffffff; font-size: 11px; text-align: right; padding: 20px 5px 5px 0; } #header img { border: 0; } #menu { padding: 0; margin: 0; border-top: 2px solid #000000; border-bottom: 1px solid #000000; background-color: #ffffff; } #menu ul { padding: 0; margin: 0; } #menu ul li { padding: 0; margin: 0; display: inline; } #menu ul li a img { padding: 0; margin: 0; border: 1px solid black; } #menu ul li a:hover img { padding: 0; margin: 0; border: 1px solid black; filter:alpha(opacity=85); -moz-opacity:.85; opacity:.85; } #inhoud { font-size: 11px; background-image: url(images/bginhoud.gif); padding: 5px; } #inhoud h2 { font-size: 12px; margin: 0 0 10px 0; padding: 0; } #inhoud h3 { font-size: 11px; margin: 0 0 2px 0; padding: 0; } #inhoud h4 { font-size: 12px; font-style: italic; margin: 0 0 2px 0; padding: 0; } #inhoud p { margin: 0 0 10px 0; padding: 0; } #footer { border-top: 2px solid #000000; text-align: center; font-size: 9px; padding: 1px; font-family: Arial, Helvetica, sans-serif; background-color: #FFA92E; color: #ffffff; } #inhoud a{ text-decoration: underline; color: #000000; } #inhoud a:hover { color: #FF9600; text-decoration: underline; } </style> Code (markup): html: "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link rel="stylesheet" href="stijl.css" type="text/css"> <title>Abusekids</title> </head> <body><div id="logos"></div> <div id="all"> <div id="header"><a href="index.html"><img src="images/header.gif" alt="Abusekids"></a><br>We're fucking hardcore.</div> <div id="menu"><ul><li><a href="index.html"><img style="border-left: 0;" src="images/news.gif" alt="news"></a></li><li><a href="team.html"><img src="images/team.gif" alt="team"></a></li><li><a href="lan.html"><img src="images/lan.gif" alt="lan"></a></li><li><a href="join.html"><img src="images/join.gif" alt="join"></a></li><li><a href="contact.html"><img style="border-right: 0;" src="images/contact.gif" alt="contact"></a></li></ul></div> <div id="inhoud"> <p>Welkom op de homepage van abusekids.<br> Wij zijn een simpele counterstrike 1.6 gaming clan die gewoon wat plezier wilt maken.<br>We spelen allemaal sinds cs 1.5.</p> <h2>NEWS</h2> <h3>LAN</h3> <p>We gingen naar <a href="http://www.plug2play.be" target="blanc">plug2play</a>!<br> Een goede sfeer, goed eten, drinken en een zeer goede organisatie. Een echt amusement!<br> Goede resultaten hebben we toen jammer genoeg niet behaald.</p> <h3>SITE</h3> <p>Dit is onze nieuwe site. We hebben deze ook compact gehouden omdat we ons meer bezighouden met het spelen van cs zelf dan voor site, irc, .. te zorgen.</p> <h3>JOIN</h3> <p>Alleen Belgen die geïnteresseerd zijn om ons te joinen kunnen altijd mailen naar:<br> <a href="mailto:stijntulkens@hotmail.com">stijntulkens@hotmail.com</a>.</p> Kijk gerust maar eens rond </div> <div id="footer">Copyright Abusekids</div></div> </body> </html> Code (markup):
Why is there 60px padding on the body? better to move the #all down 60px. text-align: right will only work for text inside... to move the vak, you can either float: right or float: left with a large left margin. But right is probably better in this case if you really want the whole website to sit to the right like in the picture. Why not also make your page xhtml strict? Also, you can have the text sit under your links images... you can make two images, one of the whole menu with the yellow, and another with the colours lighter (what you're using opacity filters for now, which won't work with Opera) and make the background one show up on hover. (Just a cool idea, and also fewer files have to be loaded by the browsers.) http://forums.digitalpoint.com/showthread.php?t=427632&page=2 This way you don't need an image for every menu link and I can see the link text then even if I don't have the images : ) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Abusekids.nl</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="stijl.css"> </head> <body> <div id="logos"> </div> <div id="all"> <div id="header"> <a href="index.html"><img src="images/header.gif" alt="Abusekids"></a><p>We're fucking hardcore.</p> </div> <ul id="menu"> <li><a href="index.html">News<span></span></a></li> <li><a href="team.html">Team<span></span></a></li> <li><a href="lan.html">LAN<span></span></a></li> <li><a href="join.html">Join<span></span></a></li> <li><a href="contact.html">Contact<span></span></a></li> </ul> <div id="inhoud"> <p>Welkom op de homepage van abusekids.<br /> Wij zijn een simpele counterstrike 1.6 gaming clan die gewoon wat plezier wilt maken.<br />We spelen allemaal sinds cs 1.5.</p> <h2>NEWS</h2> <h3>LAN</h3> <p>We gingen naar <a href="http://www.plug2play.be" target="blanc">plug2play</a>!<br /> Een goede sfeer, goed eten, drinken en een zeer goede organisatie. Een echt amusement!<br /> Goede resultaten hebben we toen jammer genoeg niet behaald.</p> <h3>SITE</h3> <p>Dit is onze nieuwe site. We hebben deze ook compact gehouden omdat we ons meer bezighouden met het spelen van cs zelf dan voor site, irc, .. te zorgen.</p> <h3>JOIN</h3> <p>Alleen Belgen die geïnteresseerd zijn om ons te joinen kunnen altijd mailen naar:<br /> <a href="mailto:stijntulkens@hotmail.com">stijntulkens@hotmail.com</a>.</p> Kijk gerust maar eens rond. </div> <div id="footer"> <p>Copyright Abusekids</p> </div> </div> </body> </html> Code (markup): The beginning of the CSS: * { margin: 0; padding: 0; <--- met deze hoeft je niet zoveel padding:0 margin:0s te gebruiken } img { border: none; <-- sets a default no borders } body { background-image: url(images/bg.gif); } #logos { width: 200px; height: 40px; border: 1px solid #000; background-color: #ddd; text-align: right; float: right; padding-right: <--- ligt eraan waar staat de #all vak } #all { margin-top: 60px; <--40 px om logos te plaatsen + 5px neer & boven margin-left: auto; margin-right: auto; width: 492px; font-family: Arial, Helvetica, sans-serif; border: 4px solid #000; } #header { background-image: url(images/bgheader.gif); color: #fff; font-size: 11px; text-align: right; padding: 20px 5px 5px 0; } #menu { <-- de naam blijft hetzelfde maar er is geen div nodig! padding: 0; margin: 0; <--blijven omdat lijsten hebben hun eigen padding/margin in elke browser... border-top: 2px solid #000; border-bottom: 1px solid #000; background-color: #fff; } Code (markup): I don't have an image to play with so I didn't try the image-replacement, but the xhtml assumes you are using it... otherwise keep as you have but you don't need a div around the menu. Ul is a basic tag and you can position and style is as you like.
Since you aren't putting anything to it's left, I'd not even bother with a float - I'd just put the image you want in as the background of the div. #logos { height: 40px; background: #DDD url(images/logos.png) top right no-repeat; } default behavior of a div is to take up the full width. By placing the image top-right and making the div full height, it places your image properly AND will space the rest of the content down the page. The only 'issue' with this method is you'd lose your 1px border around it.