Hoi,
Ik krijg het niet voor elkaar om het menu aan de zijkant bovenaan waar het wit start te laten beginnen. Ook lukt het me niet om het menu 100% hoogten te laten aan nemen. Ik hoop dat iemand me kan helpen met dit euvel.
Foto:
HTML:
Hier zit nog een class omheen genaamd main (te zien in CSS)Code:<div class="wrapper_top"></div> <div class="wrapper"> <div class="half_inner"> </div> <div class="side_bar">Doe jij is boven aansluiten</div> <div class="clear"></div> </div> <div class="wrapper_bottom"></div>
CSS:
(PATH wordt vervangen door de CMS naar de goeden map)Code:.main { margin: 0 auto; width: 988px; } .wrapper { background: url(PATH/bg_wrapper.png) repeat-y; padding:0px 4px; min-height:500px; height:auto !important; height:500px; } .wrapper_top { background: url(PATH/top_wrapper.png) no-repeat; left:0px; height:14px; width: 988px; } .wrapper_bottom { background: url(PATH/bottom_wrapper.png) no-repeat; left:0px; height:14px; width: 988px; } .full_inner { padding: 5px 15px; width: 960px; } .full_inner h1,.half_inner h1{ font-size:18px; font-weight:bold; color:#022029; border-bottom:2px solid #3873cd; padding-bottom:10px; margin-bottom:10px; } .half_inner{ padding: 0 5px; float: right; width: 760px; } .side_bar{ width: 165px; height: 100%; padding: 5px 10px; background-color: #dee4eb; }
Zoals je ziet staat er bij side_bar 100% hoogten aangegeven maar dit wordt genegeerd. Ook krijg ik het niet voor elkaar om de div direct waar het wit start te tonen.
Alvast bedankt voor de hulp!
- css probleempje
-
13-04-2012, 21:16 #1Particulier
- Berichten
- 89
- Lid sinds
- 15 Jaar
css probleempje
-
13-04-2012, 21:28 #2Particulier
- Berichten
- 475
- Lid sinds
- 15 Jaar
Re: css probleempje
Verander dit:
.half_inner{
padding: 0 5px;
float: right;
width: 760px;
}
Is naar dit:
.half_inner{
padding: 0 5px;
float: right;
width: 760px;
font-size: 0px;
display: block;
}
-
13-04-2012, 22:01 #3Particulier
- Berichten
- 89
- Lid sinds
- 15 Jaar
Re: css probleempje
Ik denk overigens dat de div niet bovenaan aansluit omdat de top wrapper een plaatje is en de sidebar div niet in de top wrapper div begint. Iets in de trant van top -5px; leek me de truc maar dat veranderd niks.
Eigenlijk zou ik het menu over de wrappers moeten doen maar hoe doe ik dat.
-
13-04-2012, 22:16 #4
- Berichten
- 191
- Lid sinds
- 13 Jaar
Re: css probleempje
Je lijkt last te hebben van collapsing margins. Probeer deze oplossingen eens: http://doctype.com/eliminate-white-space-created-my-div
-
13-04-2012, 22:21 #5
- Berichten
- 63
- Lid sinds
- 17 Jaar
Re: css probleempje
Doe eens:
Code:.side_bar{ width: 165px; height: 100%; padding: 5px 10px; background-color: #dee4eb; float: left; }
Code:<div class="wrapper_top"></div> <div class="wrapper"> <div class="side_bar">Doe jij is boven aansluiten</div> <div class="half_inner"> </div> <div class="clear"></div> </div> <div class="wrapper_bottom"></div>
-
13-04-2012, 22:23 #6Particulier
- Berichten
- 94
- Lid sinds
- 12 Jaar
Re: css probleempje
Body {
Margin:0
Padding:0
}
-
13-04-2012, 22:25 #7Particulier
- Berichten
- 89
- Lid sinds
- 15 Jaar
Re: css probleempje
@Sabra, dat is helaas het probleem niet, het probleem is de top wrapper die boven de normale wrapper zit de sidebar div zou eigenlijk over die top wrapper heen moeten.
@Bjorn, Er is niks veranderd.
@B Stolk, dit stond al bij html tag in css ik heb hem voor de zekerheid nog even bij body geprobeerd maar geen verschil.
-
13-04-2012, 22:38 #8Particulier
- Berichten
- 475
- Lid sinds
- 15 Jaar
Re: css probleempje
zet in je css is dit:
*{
padding: 0px;
margin: 0px;
}
-
13-04-2012, 22:42 #9Particulier
- Berichten
- 89
- Lid sinds
- 15 Jaar
Re: css probleempje
Doet helaas de truc niet, ook niet in combinatie met je vorigen bericht.
Maar dat padding en margin op 0px het enige wat dat doet is standaard ruimte die de browser van de rand wil negeren. Ik zie daar het verband niet tussen met mijn probleem.
-
13-04-2012, 22:48 #10Particulier
- Berichten
- 475
- Lid sinds
- 15 Jaar
Re: css probleempje
Dan weet ik het niet meer, is er meer css, is dit alles? wat is het pad naar de plaatjes, is dit alle html of niet?
En wat wil je exact hebben.
-
13-04-2012, 22:59 #11Particulier
- Berichten
- 89
- Lid sinds
- 15 Jaar
Re: css probleempje
Kan helaas geen URL geven omdat het nog lokaal is, het pad naar de plaatjes is goed anders zou de witten achtergrond er niet zijn dit zijn namelijk plaatjes verdeeld in een boven middel en onder stuk van wegen de scaduw.
Ik zal even de volledige HTML / CSS plaatsen en een screenshot van heel de site.
CSS:Code:html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, fieldset, ul, form, input, label, legend, caption, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } .input { border: 1px solid #ccc; } html{ background-color: #D9DAE2; } body{ padding-top: 20px; font: 13px/20px Helvetica, Arial, serif; font-weight: 300; } .clear { clear: both; } a{ text-decoration: none; color: #333; } a:hover{ color: #2196ed; } .main { margin: 0 auto; width: 988px; } .wrapper { background: url(PATH/bg_wrapper.png) repeat-y; padding:0px 4px; min-height:500px; height:auto !important; height:500px; } .wrapper_top { background: url(PATH/top_wrapper.png) no-repeat; left:0px; height:14px; width: 988px; } .wrapper_bottom { background: url(PATH/bottom_wrapper.png) no-repeat; left:0px; height:14px; width: 988px; } .header{ height: 85px; padding: 0 4px 0 5px; } .header_ad{ float: right; width: 468px; height: 60px; background-color: #CCC; } .menu{ background: url(PATH/top_menubg.png) repeat-x; height: 68px; padding-bottom: 10px; } .menu ul { margin:0px; /* algemene opmaak, kan verandert worden */ padding:0 20px; /* algemene opmaak, kan verandert worden */ list-style:none; /* zorgt ervoor dat er geen special menu-opmaak te zien is */ } .menu li { float:left; /* zorgt dat de menu's naast elkaar komen te staan */ display:block; /* NIEUW in elke menu style komt een display:block te staan */ padding:0px; /* verkomt dat er een apdding ontstaat in sommige browsers */ padding-top: 18px; margin:0px; /* eventueel kan hier een margin ingesteld worden op de li's, de padding volgt in een andere style */ } .menu li a { color:#fff; text-shadow:0 0 1px rgba(255, 255, 255, 0.7),0 1px 3px rgba(0, 0, 0, 0.85); text-decoration:none; font:normal 13px Helvetica, Arial, serif; /* zorg dat dit boven de line-heigt staat */ text-transform: uppercase; float:left; /* NIEUW vergeet de float niet, dit zorgt voor een goede weergave in IE6 */ display:block; /* NIEUW in elke menu style komt een display:block te staan */ height:32px; /* hoogte van de div word hier bepaald */ line-height:32px; /* ook de lijn hoogte word hier bepaald */ } .menu li span { padding:0 12px 0; /* NIEUW padding in de menu-items moeten hier worden opgemaakt */ display:block; /* NIEUW in elke menu style komt een display:block te staan */ } .menu li a:hover { background:url('PATH/menu_activelinks.png') repeat-x left top; /* NIEUW deze afbeelding moet zo -lang- mogelijk worden afgesneden */ display:block; /* NIEUW in elke menu style komt een display:block te staan */ float:left; /* NIEUW vergeet de float niet, dit zorgt voor een goede weergave in IE6 */ color:#fff; } .menu li a:hover span { background:url('PATH/menu_activerechtsd.png') no-repeat right top; /* NIEUW deze afbeelding moet zo -kort- mogelijk worden afgesneden */ display:block; /* NIEUW in elke menu style komt een display:block te staan */ } .full_inner { padding: 5px 15px; width: 960px; } .full_inner h1,.half_inner h1{ font-size:18px; font-weight:bold; color:#022029; border-bottom:2px solid #3873cd; padding-bottom:10px; margin-bottom:10px; } .half_inner{ padding: 0 5px; float: right; width: 760px; } .side_bar{ width: 165px; height: 100%; padding: 5px 10px; background-color: #dee4eb; } .footer{ padding:10px 4px; font-size:12px; color:#565656; text-shadow:1px 1px 1px #ffffff; width:980px; } .footer li{ display:inline } .footer a{ color:#565656; font-weight:600; margin:0 4px; }
Code:<!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> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name = "robots" content="index, follow, NOODP, NOYDIR" /> <link rel="icon" type="image/x-icon" href="/templates/v2/images/favicon.ico" /> <link rel="stylesheet" type="text/css" href="/templates/v2/css/style.css" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="/templates/v2/js/core.js"></script> <script type="text/javascript"> /*var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-30136439-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();*/ </script> <script type="text/javascript"> var $buoop = {vs:{i:7,f:3.5,o:10.6,s:3.2,n:9}} $buoop.ol = window.onload; window.onload=function(){ try {if ($buoop.ol) $buoop.ol();}catch (e) {} var e = document.createElement("script"); e.setAttribute("type", "text/javascript"); e.setAttribute("src", "http://browser-update.org/update.js"); document.body.appendChild(e); } </script> head> <body> <div class="main"> <div class="header"> <div class="header_ad"> </div> </div> <div style="width:980px; padding:0 4px;"> <div class="menu"> <ul> <li><a href=""><span>Home</span></a></li> </ul> </div> </div> <div class="wrapper_top"></div> <div class="wrapper"> <div class="half_inner"> <h1>Overzicht</h1> <p>Welkom, <strong>Tmm</strong>.<br />Je huidige saldo bedraagt <strong>160.50</strong> punt(en)<br /><br />Er hebben vandaag <strong>0/25</strong> personen op jouw persoonlijke klik-link geklikt</p><br /> <h1>Geschiedenis</h1><table width="100%"><thead><tr><td><strong>Omschrijving</strong></td><td><strong>punten</strong></td><td><strong>Datum</strong></td></tr></thead><tr><td>Login bonus 02-04-2012</td><td>0.50</td><td>2012-04-02 18:26:35</td></tr><tr><td>Deelgenomen aan verdubbelaar 100 naar 1000</td><td>-100.00</td><td>2012-04-02 16:11:36</td></tr><tr><td>Deelgenomen aan verdubbelaar 50 naar 500</td><td>-50.00</td><td>2012-04-02 16:11:33</td></tr><tr><td>Deelgenomen aan verdubbelaar 5 naar 50</td><td>-5.00</td><td>2012-04-02 16:11:31</td></tr><tr><td>Deelgenomen aan verdubbelaar 10 naar 100</td><td>-10.00</td><td>2012-04-02 16:11:16</td></tr><tr><td>Deelgenomen aan verdubbelaar 10 naar 100</td><td>-10.00</td><td>2012-04-02 16:10:47</td></tr><tr><td>Deelgenomen aan verdubbelaar 10 naar 100</td><td>-10.00</td><td>2012-04-02 16:10:07</td></tr><tr><td>Deelgenomen aan verdubbelaar 5 naar 50</td><td>-5.00</td><td>2012-04-02 16:10:05</td></tr><tr><td>Deelgenomen aan verdubbelaar 5 naar 50</td><td>-5.00</td><td>2012-04-02 16:03:14</td></tr><tr><td>Deelgenomen aan verdubbelaar 5 naar 50</td><td>-5.00</td><td>2012-04-02 16:03:13</td></tr></table><br /><center><strong> 1 <a href="/overzicht-2" title="Pagina: 2">2</a> <a href="/overzicht-3" title="Pagina: 3">3</a> <a href="/overzicht-4" title="Pagina: 4">4</a> <a href="/overzicht-5" title="Pagina: 5">5</a> <a href="/overzicht-6" title="Pagina: 6">6</a> <a href="/overzicht-7" title="Pagina: 7">7</a> <a href="/overzicht-8" title="Pagina: 8">8</a> <a href="/overzicht-9" title="Pagina: 9">9</a> <a href="/overzicht-10" title="Pagina: 10">10</a> <a href="/overzicht-11" title="Pagina: 11">11</a> <a href="/overzicht-12" title="Pagina: 12">12</a> <a href="/overzicht-13" title="Pagina: 13">13</a> <a href="/overzicht-14" title="Pagina: 14">14</a> <a href="/overzicht-15" title="Pagina: 15">15</a> </strong></center><br /></div><div class="side_bar">Doe jij is boven aansluiten</div><div class="clear"></div> </div> <div class="wrapper_bottom"></div> <div class="footer"> <ul> <li><a href="/algemenevoorwaarden" title="Algemene Voorwaarden">Algemene Voorwaarden</a></li> <li><a href="/contact/" title="Neem contact op">Contact</a></li> <li><a href="/adverteren/" title="Adverteren">Adverteren</a></li> <li style="float:right; font-weight:400;">© 2012</li> </ul> </div> </div> </body> </html>
Wat ik wil is dat het blauw stukje waar de tekst "doe jij eens boven aansluiten" staat over het helen witte gedeelte gaat met een lengte van 165px;
Edit: het stukje in het midden waar het wrapper gedeelte komt is erg onduidelijk om te lezen omdat het door PHP gegenereerd wordt, in mijn begin post staat dat stukje zonder al de troep erin en netjes georganiseerd.
-
14-04-2012, 11:38 #12Particulier
- Berichten
- 253
- Lid sinds
- 15 Jaar
Re: css probleempje
Ik kan het niet helemaal goed zien omdat de plaatjes ontbreken als ik de code test, maar het probleem ontstaat volgens mij door het volgende:
.wrapper_top {
background: url(PATH/top_wrapper.png) no-repeat;
left:0px;
height:14px;
width: 988px;
}
Dat blauwe tekstje wordt daar automatisch onder weergeven (14px). Wat je zou kunnen doen om het op te lossen is het volgende toevoegen aan je code:
.wrapper {
position: relative;
}
.side_bar{
position: absolute;
top: -14px;
left: 0;
}
Als dat blauwe blokje nu onder .wrapper_top weergeven wordt moet je dit even oplossen met z-index, maar ik denk dat het blokje er nu gewoon bovenop gelegd wordt.
-
21-04-2012, 23:11 #13Particulier
- Berichten
- 89
- Lid sinds
- 15 Jaar
Re: css probleempje
Sorry voor de late reactie,
Ik heb het inmiddels kunnen oplossen, rkas heeft me via PM een heel stuk op weg geholpen. Wat ik nu heb gedaan is de 100% height geregeld via Javascript, dit bleek een bug te zijn in HTML.
BaukR, Ik denk dat dat ook geen oplossing zou zijn. Als ik het goed begrijp gaat de wrapper nu over de top wrapper en dan krijg je dat de schaduw van beide plaatjes over elkaar heen gaan en dan heb je een stuk dat heel donker kijkt tegenover de rest.
-
22-04-2012, 01:32 #14Particulier
- Berichten
- 253
- Lid sinds
- 15 Jaar
Re: css probleempje
Het is natuurlijk onzin dat je zoiets via javascript moet oplossen! Het lijkt me duidelijk dat je tijdens het slicen ergens een fout hebt gemaakt waardoor het niet goed aansluit. Het beste is om de code gewoon even opnieuw op te bouwen.
-
22-04-2012, 08:42 #15
- Berichten
- 2.285
- Lid sinds
- 16 Jaar
Re: css probleempje
De < bij </head> ontbreekt.
Net voor je menu staat: <div style="width:980px; padding:0 4px;">
Wat is daar de functie van en waarom staat dat niet in het css i.p.v. de html?
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