Beste SDers,
elke div dat ik maak, elke heading dat ik maak wordt automatisch 100% breed uitgerokken..
bv: ik maak een div met background:green en de right container, en zet er 4 letters in, dan is de width niet even breed als die 4 letters maar even breed als de right container :S
ik heb hem al door de validator gegooid maar levert niets op!
CSS:
xHTML:Code:html{ width:100%; height:100%; } body{ margin:0; padding:0; background:url(../img/bg.jpg) top center no-repeat #382346; width:100%; height:100%; } img{ border:0; } *{ margin:0; padding:0; } h1{ margin:0; padding:0; font:16px Arial; color:#9c00ff; font-weight:bold; } h2{ margin:0; padding:0; font:14px Arial; color:#fff; } #heading{ height:128px; width:100%; background:url(../img/heading_bg.png); } #heading_wrap{ width:800px; margin:0 auto; } #logo{ float:left; margin:23px 0 0 0; width:262px; height:39px; } #wrap{ width:826px; margin:0 auto; } #banners_top{ margin:-37px 0 0 0; width:826px; height:110px; clear:both; } #banners_top img.left{ margin:0 0 0 13px;} #banners_top img.right{ float:right;} #left{ margin:0 0 0 6px; float:left; width:574px; } .blog_wrap{ width:574px; overflow:hidden; } .blog_title_wrap{ width:574px; height:64px; background:url(../img/blog_title_bg.png); } .blog_title_date{ padding:4px 0 0 0; margin:10px 0 0 0; float:left; width:56px; height:40px; font:16px Arial; color:#fff; text-transform:uppercase; text-align:center; line-height:17px; } .blog_title{ margin:10px 0 0 10px; padding:4px 0 0 0; float:left; width:450px; } .blog{ float:right; background:url(../img/blog_bg.png) top left repeat-x #fff; width:567px; } .blog img{ float:left; margin:10px; } .blog_content{ padding:15px; font:12px Arial; color:#474747; } .read_more{ margin:20px 0 0 0;} .read_more a{ font:12px Arial; color:#382346; } .read_more a:hover{ color:#9c00ff; } .foot{ width:567px; height:54px; background:url(../img/blog_foot_bg.png); } .foot_left{ padding:10px 0 0 10px; float:left; width:390px; font:11px Arial; color:#a5a5a5; line-height:15px; } .foot_left a{ font:11px Arial; color:#a5a5a5; } .foot_left a:hover{ text-decoration:none; } .foot_right{ padding:18px 15px 0 0; float:right; width:150px; text-align:right; } .foot_right a{ font:14px Arial; color:#9c00ff; text-decoration:none; } .foot_right a:hover{ text-decoration:underline; } #right{ float:left; width:213px; margin:0 0 0 20px; } #zoeken{ padding:10px 0 0 10px; width:204px; height:69px; background:url(../img/zoeken_bg.png) repeat-x bottom left #9c00ff; } #npt_zoeken{ margin:5px 0 10px 0; width:193px; height:20px; background:#8500d9; border:0; } #zoeken a{ font:11px Arial; color:#cc80fc; text-decoration:none; } #btn_zoeken{ float:right; margin:5px 10px 0 0; width:56px; height:22px; border:0; background:#fff; color:#9c00ff; } .right_box{ margin:30px 0 0 0; width:213px; overflow:hidden; } .right_box_title{ background:green; overflow:hidden;} ul.list{ list-style:none; padding:10px 0 0 0; margin:0; background:#fff; } ul.list li{ list-style:none; margin:0; padding:0; } ul.list li a{ display:block; padding:5px; width:203px; font:11px Arial; color:#474747; text-decoration:none; background:url(../img/list_bg.png) #fff repeat-x bottom left; } ul.list li a:hover{ color:#fff; background:url(../img/list_rol.png) #9b00fd repeat-x bottom left; }
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"> <head> <title>Fashion & Goodlife - De blog voor fashionista's</title> <link rel="SHORTCUT ICON" href="img/icon.ico"/> <meta http-equiv="cache-control" content="no-cache" /> <meta http-equiv="pragma" content="no-cache" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <meta name="robots" content="index, follow" /> <!-- CSS --> <link rel="stylesheet" type="text/css" href="css/main.css" /> </head> <body> <div id="heading"> <div id="heading_wrap"> <div id="logo"> <a href="#"><img src="img/logo.jpg" alt="" /></a> </div> </div> </div> <div id="wrap"> <div id="banners_top"> <a href="#"><img src="img/banner_top_1.jpg" class="left" alt="" /></a> <a href="#"><img src="img/banner_top_2.jpg" class="right" alt="" /></a> </div> <div id="left"> <div class="blog_wrap"> <div class="blog_title_wrap"> <div class="blog_title_date"> 16<br />juni </div> <div class="blog_title"> <h1>Photos: Get It Brandy! Her Sexy New Photoshoot for YRB Magazine</h1> </div> </div> <div class="blog"> <img src="img/blog1.jpg" alt="" /> <div class="blog_content"> <p>Brandy gets sexy for the her latest photoshoot for YRB magazine. She sits poolside rocking some fly bathing suits. The 31-year old is really doing her thing with the reality show VH1’s hit show Family Business and she's still performing and singing her a$$ off. Loves it! Check out more pic after the jump</p> <div class="read_more"><a href="#">Lees meer...</a></div> </div> <div class="foot"> <div class="foot_left"> Door <a href="#">Tess van Daelen</a> op 16 Jun 2010 om 10:22, in de categorie<br /> Gelezen: <a href="#">boeken & tijdschriften</a>, <a href="#">Modemix</a>, <a href="#">tijdschriften</a>. </div> <div class="foot_right"> <a href="#">32 comments</a> </div> </div> </div> </div> </div> <div id="right"> <div id="zoeken"> <h2>Zoeken</h2> <input type="text" id="npt_zoeken" /> <a href="#">Uitgebreid zoeken</a> <input type="button" value="zoeken" id="btn_zoeken" /> </div> <div class="right_box"> <div class="right_box_title"> Meest bekenen </div> <ul class="list"> <li><a href="#">Just In Case You're Having A Sh*tty Friday...</a></li> <li><a href="#">Alicia Keys, Kelis, Ke$ha & More For ELLE Magazine's Women In Music Issue</a></li> <li><a href="#">Photos: Get It Brandy! Her Sexy New Photoshoot for YRB Magazine </a></li> <li><a href="#">Event Fab: New York Knick David Lee, Mariel Haenn, Va$htie & More At Tanqueray NYC Event</a></li> </ul> </div> </div> </div> </body> </html>
- Raar css/xhtml probleem
-
26-07-2010, 12:37 #1
- Berichten
- 1.104
- Lid sinds
- 17 Jaar
Raar css/xhtml probleem
-
In de schijnwerper
Professionele, snelle en betaalbare Wordpress/WooCommerce ontwikkelaar aangebodenFreelance / WerkGewoonweg 150+ goede domeinnamen in de koopjeskelder voor slechts 69 euro p/stukDomein te koopMooie kans met een mooi domein voor affiliate - Debestevergelijker.nlWebsite te koopAutoriteit Verhogen met Blogs en BacklinksFreelance / Werk -
26-07-2010, 12:56 #2
- Berichten
- 694
- Lid sinds
- 14 Jaar
Plaats liever een link waar het probleem kan worden bekeken dat levert sneller resultaten op.
-
26-07-2010, 13:02 #3
Future Dezign - Scripting & Internetapplicaties
- Berichten
- 17
- Lid sinds
- 18 Jaar
Ik weet niet of ik je probleem goed begrijp, maar een <div> is standaard voor de volledige breedte (100%).
Zie ook: http://www.webdesignfromscratch.com/...ck-and-inline/
"BlockTakes up the full width available, with a new line before and after (display:block;)InlineTakes up only as much width as it needs, and does not force new lines (display:inline;)"
Hopelijk heb je er wat aan, succes in ieder geval
Plaats een
- + Advertentie
- + Onderwerp
Marktplaats
Webmasterforum
- Websites algemeen
- Sitechecks
- Marketing
- Domeinen algemeen
- Waardebepaling
- CMS
- Wordpress
- Joomla
- Magento
- Google algemeen
- SEO
- Analytics
- Adsense
- Adwords
- HTML / XHTML
- CSS
- Programmeren
- PHP
- Javascript
- JQuery
- MySQL
- Ondernemen algemeen
- Belastingen
- Juridisch
- Grafisch ontwerp
- Hosting Algemeen
- Hardware Info
- Offtopic