login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Html (css) vraag

Offline ReneKoops - 03/12/2011 10:30 (laatste wijziging 03/12/2011 10:33)
Avatar van ReneKoopsLid Hallo, ik heb een vraag

Ik ben beetje bezig met een website inelkaar te zetten maar ik loop tegen een probleem aan.
het is de bedoeling dat het er zo uit komt te zien:
http://i43.tinypic.com/n4urmr.png

maar wanneer ik dit probeer te coderen krijg ik dit:

http://i41.tinypic.com/2vrzh8o.png

de tekst komt wel goed te staan maar de background-color loopt helemaal door tot boven.

mijn html
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="container">
  2.  
  3. <div id="logo">
  4.  
  5. </div>
  6.  
  7. <div id="menu">
  8.  
  9. <ul id="nav">
  10. <li id="info"><a href="info.html">Info & Contact</a></li>
  11. <li id="projecten"><a href="projecten.html">Projecten</a></li>
  12. <li id="portfolio"><a href="portfolio.html">Portfolio</a></li>
  13. <li id="nav-home"><a href="home.html">Home</a></li>
  14.  
  15. </ul>
  16.  
  17.  
  18.  
  19.  
  20.  
  21. </div>
  22.  
  23. <div id="content"></div>
  24.  
  25. </div>
  26.  
  27. </div>


mijn css.
css code - Bekijk de code zonder highlighting - Klap code in 
  1. body{
  2.     background-color:#e3e3e3;
  3.     background-image:url(../images/background.png);
  4.     background-repeat:repeat-x;
  5.     margin:0;
  6.     padding:0;
  7.  
  8.     }
  9.  
  10.     #container {
  11.     width:900px;
  12.     margin:auto;
  13.  
  14.     }
  15.  
  16.     #menu {
  17.     width: 50%;
  18.     height:150px;
  19.     float: right;
  20.  
  21.  
  22.     }
  23.  
  24.     ul#nav {
  25.     float:right;
  26.     text-align:center;
  27.     margin:0;
  28.     padding:0;
  29.  
  30.     }
  31.  
  32.     ul#nav li {
  33.     float: right; list-style: none;
  34.  
  35.     }
  36.  
  37.     ul#nav li a {
  38.     display: block; width: 85px; height: 50px;
  39.     padding: 72px 0 0 0; margin-left:20px;
  40.     font: 12px Helvetica, Arial, Sans-Serif; text-transform: uppercase;
  41.     color: #fced00; text-shadow: 0 1px 1px #000; text-decoration: none;
  42.  
  43.     }
  44.  
  45.     ul#nav li a:hover {
  46.     background-color: #e3e3e3;
  47.     color: #333; text-shadow: 0 1px 1px #fff; text-decoration: none;
  48.  
  49.     }
  50.  
  51.  
  52.  
  53.     #logo{
  54.     background-image:url(../images/logo2.png);
  55.     background-repeat:no-repeat;
  56.     height:150px;
  57.     width:49%;
  58.     float:left;
  59.  
  60.     }
  61.  
  62.  
  63.     #content{
  64.     background-color:#FFF;
  65.     height:700px;
  66.     width:900px;
  67.  
  68.  
  69.     }


bedankt alvast voor het meedenken etc.

4 antwoorden

Gesponsorde links
Offline icemar - 03/12/2011 12:01
Avatar van icemar Lid probeer eens de achtergrond ook aan je container toe te voegen.
Offline vinTage - 03/12/2011 12:45
Avatar van vinTage Nieuw lid
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled Document</title>
  6. <style type="text/css">
  7. *{
  8.   margin:0;
  9.   padding:0
  10. }
  11. body{
  12.   background:#e3e3e3 url('http://www.uploadplaatjes.nl/plaatjes/8/294057.png') repeat-x;
  13. }
  14.  
  15. #container {
  16.   width:900px;
  17.   margin:auto;
  18.   background:#fff;
  19. }
  20.  
  21. #menu {
  22.    background:#4b4b4b;
  23.     height:150px;
  24. }
  25. ul#nav {
  26.     float:right;
  27.     text-align:center;
  28.     margin:0;
  29.     padding:0;
  30. }
  31. ul#nav li {
  32.     float: right; list-style: none;
  33. }
  34. ul#nav li a {
  35.     display: block; width: 85px; height: 50px;
  36.     padding: 72px 0 0 0; margin-left:20px;
  37.     font: 12px Helvetica, Arial, Sans-Serif; text-transform: uppercase;
  38.     color: #fced00; text-shadow: 0 1px 1px #000; text-decoration: none;
  39. }
  40. ul#nav li a:hover {
  41.     background-color: #e3e3e3;
  42.     color: #333; text-shadow: 0 1px 1px #fff; text-decoration: none;
  43. }
  44.  
  45. #content{
  46.   clear:both;
  47.   min-height:500px;
  48. }
  50. </head>
  51.  
  53.  
  54. <div id="container">
  55.     <div id="menu">
  56.         <ul id="nav">
  57.             <li id="info"><a href="info.html">Info &amp; Contact</a></li>
  58.             <li id="projecten"><a href="projecten.html">Projecten</a></li>
  59.             <li id="portfolio"><a href="portfolio.html">Portfolio</a></li>
  60.             <li id="nav-home"><a href="home.html">Home</a></li>
  61.         </ul>
  62.     </div>
  63. 	<div id="content">
  64.     	content
  65.     </div>
  66. </div>
  67.  
  68. </body>
  69. </html>
Offline Pieter - 03/12/2011 14:44
Avatar van Pieter Gouden medaille

SEO guru		 Het kan trouwens ook zonder afbeeldingen... Waardoor je terug een server request minder hebt.  
Offline vinTage - 03/12/2011 19:03
Avatar van vinTage Nieuw lid True, maar met afbeelding kun je weer dingen doen die met css wel wat lastiger worden 

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. body{
  2.   background:#fff url('http://www.uploadplaatjes.nl/plaatjes/8/295328.jpg') repeat-x;
  3. }


Maargoed, als het 'plain' grijs moet worden kun je gewoon met css aan de gang idd.
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.184s