Sting
Members
-
Joined
-
Last visited
Everything posted by Sting
-
I have a webpage which works perfectly in all browsers. The only problem i have is in IE 6 ! In this version of IE the scrolling of text does not work. Can anyone help me out here? It looks simple, an automatic scrollbar when the screen is too little to display the text in IE 6. Link to a testpage: http://amazon.110mb.com/test.html Here is the css: CSS @charset "utf-8"; /* CSS Document */ /*-------structure-------*/ body, html { margin:0; padding:0; background:#a7a09a; height: 100%; font-family: Arial, Helvetica, sans-serif; } body { margin:0; padding:0; height:100%; } #wrap { background-image: url(images/bgmain.png); margin:0 auto; width:870px; position: relative; min-height: 100%; height:auto !important; height:100%; overflow:auto; } #subnav { float:left; width:170px; margin:0; padding:0; } #content { float:right; width:380px; margin:0; padding:80px 40px 0px 0px; } #header { height: 50px; } #foto { position:absolute; width:300px; height:200px; left:100px; top:285px; } #footer { position: absolute; bottom: 0; clear:both; margin-left: 125px; color:#cccccc; font-size:11px; } a.footer:link, a.footer:visited { color:#ffffff; text-decoration:none; } a.footer:hover { color: #ffffff; text-decoration:underline; } /*-------text-------*/ h1 { color:#0d527a; text-align: left; font-size: 18px; padding:0; } h2 { color:#161617; font-size: 14px; padding:0; } p { font-size: 12px; color:#161617; margin: 0px; line-height: 20px; } ol { font-size: 12px; color:#161617; line-height: 20px; } .ulstand { font-size: 12px; color:#161617; line-height: 20px; } .bold { font-size: 12px; font-weight:bold; color:#161617; margin: 0px; line-height: 20px; } .italic { font-size: 12px; font-style: italic; color:#161617; margin: 0px; line-height: 20px; } .small { font-size: 10px; color:#161617; margin: 0px; line-height: 20px;} .italic02 { font-size: 12px; font-style: italic; color:#0d527a; margin: 0px; line-height: 20px; } /*-------left menu-------*/ #menu { float:left; width:170px; margin:0; padding:0px 0px 0px 0px; font-size: 13px; } .left { text-align: left; } .right { text-align: right; } ul { margin: 5px 0 0 0; padding: 0; list-style: none; width: 170px; } ul li { position: relative; } li ul { position: absolute; left: 170px; top: -5px; display: none; } ul li.right a { display: block; text-decoration: none; margin-right: 3px; padding: 5px; color:#ffffff; } ul li.left a { display: block; text-decoration: none; margin-left: 3px; padding: 5px; color:#161617; } li:hover ul, li.over ul { display: block; } /* Fix IE. Hide from IE Mac \*/ * html ul li { float: left; height: 1%; } * html ul li a { height: 1%; } /* End */ ul li a:hover { color: #69658c; } /* Hover Styles */ ul li.right .currentleft { color: #69658c; } /*-------top menu-------*/ #topmenu { position: absolute; top:55px; left:285px; width:400px; margin:0; padding:0; font-size: 13px; } .ultop { margin: 0; padding: 0; list-style: none; width: 400px; } .ultop li { float:left; } li .ultop { display: none; position: absolute; left:0; } li > .ultop { top: auto; left: auto; } .ultop li a { display: block; text-decoration: none; margin-right: 0px; padding: 5px; color:#161617; background: url(images/lees.png) no-repeat right; } li:hover .ultop, li.over .ultop { display: block; } /* Fix IE. Hide from IE Mac \*/ * html .ultop li { float: left; height: 1%; } * html .ultop li a { height: 1%; } /* End */ .ultop li a:hover { color: #69658c; } /* Hover Styles */ .ultop li .currentleft { color: #69658c; } <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta name="description" content="" /> <meta name="keywords" content="" /> <script type="text/javascript" src="scripts/drop_down.js"></script> <link href="master.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrap"> <div id="header"><img src="images/logo.png" alt="" /></div> <div id="foto"><img src="fotos/09.jpg" width="300" height="200" /></div> <div id="topmenu"> <ul class="ultop"> <li><a href=".html" class="currentleft"></a></li> <li><a href=".html"></a></li> <li><a href=".html"></a> <ul class="ultop"> <li><a href=".html"><a></li> <li><a href=".html"></a></li> </ul></li> <li><a href=".html"></a></li> <li><a href=".html"></a></li> </ul> </div> <div id="menu"> <ul id="nav"> <li class="right"><a href="#"></a> <ul> <li class="left"><a href=".html"></a></li> <li class="left"><a href=".html"></a></li> <li class="left"><a href=".html"></a></li> </ul> </li> <li class="right"><a href=".html"></a></li> <li class="right"><a href=".html"></a></li> <li class="right"><a href="#"></a> <ul> <li class="left"><a href=".html"></a></li> <li class="left"><a href=".html"></a></li> </ul> </ul> </div> <div id="content"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce fringilla. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus pharetra felis a lacus. Nulla molestie hendrerit massa. Phasellus pulvinar metus sit amet erat. Suspendisse hendrerit. Nunc blandit tempor odio. Pellentesque faucibus lacinia nunc. Nulla sit amet ipsum non risus condimentum suscipit. Proin odio quam, sodales sit amet, lacinia at, consectetuer at, orci. Curabitur vitae nisi sed justo pharetra molestie. Vivamus quis tortor eget enim ultrices ornare. In hac habitasse platea dictumst. Proin imperdiet laoreet tortor. Donec blandit, odio vitae mattis mollis, nunc arcu scelerisque mauris, et volutpat lorem lacus at erat. Donec mollis ligula vitae felis. Nunc nonummy massa quis quam. Vivamus faucibus interdum metus. Maecenas non turpis ut velit pretium dictum. Morbi sapien velit, pellentesque non, mollis a, adipiscing id, augue. Ut dignissim aliquam diam. Quisque ipsum odio, vehicula non, hendrerit sed, imperdiet quis, felis. Nulla sit amet justo. Pellentesque lobortis. Vestibulum vel libero vel tellus aliquam condimentum. Cras pharetra ligula vel elit. Aenean mattis. Vestibulum congue arcu non nisi. Curabitur tellus lorem, consequat auctor, placerat at, mattis eget, justo. Vestibulum libero. Vivamus accumsan porttitor augue. Maecenas euismod sem. Duis nec urna sollicitudin nunc porttitor cursus. Nullam sed magna. Etiam quis ligula sed nulla venenatis placerat. Integer pretium purus vitae nisi. Proin luctus felis vitae arcu. Proin eu erat nec dolor accumsan fermentum. Mauris dolor. Quisque aliquam pharetra elit. Nullam pharetra dapibus orci. Nulla facilisi. Curabitur facilisis. Donec eu sem at metus consectetuer bibendum. Morbi suscipit, risus sit amet eleifend tincidunt, tortor purus vestibulum metus, eget condimentum magna est ut magna. Proin nisi. Phasellus non nisi. Nulla ut neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pede sapien, nonummy ut, lacinia ultricies, eleifend blandit, metus. Sed faucibus vestibulum pede. Etiam laoreet pede eu nibh. Sed varius molestie quam. Quisque mollis. Sed sed ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis sodales nisi. Nunc egestas. Nunc tincidunt condimentum dolor. Nulla facilisi. Sed varius tempus orci. Curabitur rhoncus. Fusce eleifend pellentesque arcu. Integer et odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed ut purus eu libero faucibus luctus. Donec accumsan fermentum arcu. Donec nec nunc. In et leo et libero porta faucibus. Maecenas at mi eget ante accumsan lobortis. Integer ut libero id nunc viverra eleifend. Morbi mollis, eros ullamcorper dictum vulputate, velit elit aliquam leo, placerat porttitor nulla mi et mi. Aenean ultrices mi sed tellus. </p> </div> <div id="footer"> <a href=".html" class=""></a><p><br /> </p> </div> </div> <div style="display:none"> </div> </body> </html>
-
I have rewritten my code and now i got it finally to work. My new code is (if anyone is interested) /*-------general -------*/ body, html { margin:0; padding:0; background:#094e77; color:#000000; } body { background-image: url(images/bg.png); background-repeat: repeat-x; } /*-------center --------*/ #wrap { margin:0 auto; width:963px; } /*-------structure-------*/ #topwrap { width: 963px; background-image: url(images/bgmain.png); height: 150px; } #nav { float: right; width: 460px; margin:0px 0px 0px 0px; padding:0px 45px 0px 0px; } #logo { float: left; position: relative; width:243px; left:40px; } #header { background: url(images/top.png) no-repeat; height: 50px; } #contentwrap { background-image: url(images/bgmain.png); width:963px; overflow: hidden; min-height:440px; position: relative; } <body> <div id="wrap"> <div id="header"></div> <div id="topwrap"> <div id="logo"> <img src="images/logo.png" alt="redrice" /> </div> <div id="nav"> <ul id="iconmenu"> <li id=""><a href=""></a></li> <li id=""><a href=""></a></li> <li id=""><a href=""></a></li> <li id=""><a href=""></a></li> </ul> </div> </div> <div class="topline"></div> <div id="contentwrap"></div> <div class="endline"></div> <div id="footer"> </div>
-
Yes I tried that before but it gives me the strangest results . In every browser it distorts the layout in a different way. I have uploaded the css file with float added , so you can see what it does in IE, FF, Opera en NS. I am thinking that maybe i could just use a table in the top div and put the logo and navigation in a table. one minute work and problem solved. Still i d like to build it completely tableless.
-
Hello, I recreated my navigation in css and put it in a div. But i am having difficulties positioning the div to the exact location. As you can see the div is at the bottom of the logo , while it should be on the right side of the logo. I tried different things but i cant get it right. Maybe someone can help me out here? <link href="css/master.css" rel="stylesheet" type="text/css" /> <link href="css/navigation.css" rel="stylesheet" type="text/css" /> </head> <body> <body> <div id="wrap"> <div id="header"> </div> <div id="topwrap"> <div id="logo"> <img src="images/logo.png" alt="logo" /> </div> <div id="nav"> <ul id="iconmenu"> <li id="home"><a href="index.html"></a></li> <li id="diensten"><a href="diensten.html"></a></li> <li id="portfolio"><a href="portfolio.html"></a></li> <li id="contact"><a href="contact.php"></a></li> </ul> </div> </div> <div id="contentwrap"> <div id="main"> ....content of the site.... navigation css #topwrap { width: 963px; background-image: url(../images/bgmain.png); } #logo { padding-left: 40px; padding-top: 7px; width:243px; } #nav { position: absolute; width: 460px; margin-left:0px; z-index:1; } #iconmenu { position: relative; width: 460px; height: 131px; background: url(../images/buttons.png) 0 0 no-repeat; } #iconmenu li { margin: 0; paddin: 0; position: absolute; top: 0; list-style: none; } #iconmenu li , #iconmenu a { height: 131px; display: block; } #iconmenu #home { left: 0px; width: 115px; } #iconmenu #diensten { left: 115px; width: 115px; } #iconmenu #portfolio { left: 230px; width: 115px; } #iconmenu #contact { left: 345px; width: 115px; } #iconmenu #home a:hover { background: transparent url(../images/buttons.png) -0px -131px no-repeat; } #iconmenu #diensten a:hover { background: transparent url(../images/buttons.png) -115px -131px no-repeat; } #iconmenu #portfolio a:hover { background: transparent url(../images/buttons.png) -230px -131px no-repeat; } #iconmenu #contact a:hover { background: transparent url(../images/buttons.png) -345px -131px no-repeat; } master css @charset "utf-8"; /*-------CSS Document-------*/ /*-------General-------*/ body, html { margin:0; padding:0; background:#094e77; color:#000000; } body { min-width:963px; background-image: url(../images/bg.png); background-repeat: repeat-x; font-family: Arial, Helvetica, sans-serif; font-size: 12px; } /*-------Text-------*/ h1 { color:#0d527a; text-align: left; font-size: 23px; padding:0; margin:0 55px 10px 54px; } h2 { color:#F2850C; font-size: 18px; padding:0; margin:10px 0px 0px 0px; } p { margin: 0px; line-height: 18px } .bold { line-height:155%; font-weight: bold; } .art { color:#F2850C; font-size: 16px; margin: 0px; } .tech { line-height:110%; font-size: 90%; } /*-------Lists-------*/ ul { list-style-type: square } .list li { list-style-image: url(../images/lees.png); margin: 1em 0; line-height:155%; } /*-------Link Styles-------*/ a:link, a:visited { color:#094e77; text-decoration:none; } a:hover { color: #cc3333; text-decoration:underline; } a.lees, a.lees:visited, a.lees:hover { margin-top: 10px; display: block; float: right; line-height: 15px; background: url(../images/lees.png) no-repeat left center; text-indent: 20px; } /*-------Images -------*/ img { border:0; } .imgleft { float: left; padding: 0px 10px 10px 0px; } .imgcenter { text-align:center; margin-top:0px; margin-bottom:0px; padding:0px; } .imgref { float: left; padding: 0px 10px 20px 0px; } .icons { padding: 0px 10px 10px 0px; } /*-------Structure -------*/ #wrap { margin:0 auto; width:963px; } #header { background: url(../images/top.png); height: 50px; } #contentwrap { background-image: url(../images/bgmain.png); width:963px; overflow: hidden; min-height:440px; position: relative; } #main { float:left; width:570px; margin:0 0 0 55px; padding:10px 0px 0px 0px; } #main h1 { color:#0d527a; text-align: left; font-size: 23px; padding:0; margin:0 55px 0px 0px; } #mainfull { float:left; width:855px; margin:10px 0 0 55px; } #sidebar { float:right; width:230px; margin:10px 45px 0 0; padding:0px 10px 0px 10px; border-left: 1px dotted #ccc; font-size: 11px; color:#666666; } div.spacer { clear: both; height: 20px; } div.small { clear: both; height: 10px; } /* -------colset diensten------- */ .colsetA1 { float: left; width: 160px; margin:0px 5px 0px 0px; } .colsetA2 { position: relative; float: left; width: 240px; margin:0px 40px 0px 0px; } .colsetA4 { position: relative; float: left; width: 240px; margin:0px 0px 0px 0px; } /* -------colset mailings------- */ .colsetB1 { float: left; width: 185px; margin:0px 5px 0px 0px; } .colsetB2 { position: relative; float: left; width: 370px; margin:0px 0px 0px 10px; } /* -------colset hosting -------*/ .colsetC1 { float: left; width: 160px; margin:0px 0px 0px 0px; } .colsetC2 { float: left; width: 180px; margin:0px 25px 0px 0px; } .colsetC3 { float: left; width: 180px; margin:0px 0px 0px 0px; } /* -------colset referenties------- */ .colsetR { float:left; width:580px; margin:0 0 0 55px; padding:0px 0px 0px 0px; } .colsetR1 { float:left; width:285px; margin:0; padding:0px 0px 0px 0px; } .colsetR2 { float:right; width:285px; margin:0; padding:0px 0px 0px 0px; } /*-------Table-------*/ caption { padding: 0 0 5px 0; width: 370px; text-align: right; } .domtable { width: 370px; border-collapse: collapse; border: 1px solid #c0c0c0; font: 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; letter-spacing: 2px; margin-left: auto; margin-right: auto; } .tdext { border: 1px solid #c0c0c0; text-align: left; width: 50px; background: #f1f1f1; padding: 5px 5px 5px 10px; } .tddom { border: 1px solid #c0c0c0; text-align: center; width: 100px; } /*-------Footer-------*/ #footer { background: url(../images/end.png) top left no-repeat; clear:both; min-height: 80px; padding: 110px 0 0 10px; text-align: center; color:#cccccc; font-size:90%; margin: 0; } .bar { color:#ffffff; } a.footer:link, a.footer:visited { color:#ffffff; text-decoration:none; } a.footer:hover { color: #ffffff; text-decoration:underline; }
-
Ok thanks, am looking forward to the sollution of this puzzle.
-
Thanks for you efforts. Heres the update of the code i changed, as you suggested: I have added the position and bottom to the link. THis makes the link go to the bottom indeed, but they jump to the left and the right - only in IE - as you can see on the testpage now. a.lees, a.lees:visited, a.lees:hover { margin-top: 10px; display: block; float: right; line-height: 15px; background: url(images/lees.png) no-repeat left center; text-indent: 20px; position: absolute; bottom: 0; }
-
Thanks for the help, i have uploaded the update. As you can see the links still dont align well with the bottom of the image. I think I messed up my code, the idea was to create a 5 row and 4 column table, but without the use of tabel. It sounds basic but i got myself confused in my code. When i remove the spacer div my whole layout gets messed up, the h2 tag is not necessary, this one i will remove. Maybe its better to use a table here? (although my first idea was to recreate my site without tables at all...)
-
Thank you for your suggestion. I tried it out but the text jumps to the left and stays up. You can see it on the testpage now.
-
I have a div with an image and next to that a div with text. In the text field is another div for a "read more" link . The problem is that i want the link to be automatically on the bottem of the div. Now it appears just after the text. body, html { margin:0; padding:0; background:#094e77; color:#000000; } body { min-width:963px; background-color: #094e77; background-image: url(images/bg.png); background-repeat: repeat-x; font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size: 0.74em } a:link, a:visited {color:#094e77; text-decoration:none;} a:hover {color: #cc3333; text-decoration:underline;} /*Read More Link Styles*/ a.lees, a.lees:visited, a.lees:hover { margin-top: 10px; display: block; float: right; line-height: 15px; background: url(images/lees.png) no-repeat left center; text-indent: 20px; } #wrap { margin:0 auto; width:963px; } #header { background: url(images/top.png); height: 50px; } #logo { background-image: url(images/bgmain.png); background-repeat: repeat-y; margin:auto; padding-left: 40px; padding-top: 7px; } #contentwrap { background-image: url(images/bgmain.png); width:963px; overflow: hidden; padding-top: 20px; } #main { float:left; width:550px; padding-left: 55px; line-height:155%; } #maindienst { float:left; padding-left: 55px; line-height:155%; } #maindienst h1 { color:#0d527a; text-align: left; text-decoration:none; font: 1.5em/1em Arial, Helvetica, sans-serif; font-weight: 500; border-bottom:1px solid #ccc; padding:0; margin:0 0 15px 0; } #maindienst h2 { color:#F2850C; text-decoration:none; font: 1.4em/1em Arial, Helvetica, sans-serif; font-weight:600; padding:0; margin:10px 0px 0px 0px; line-height:10%; } #sidebar { float:right; width:280px; padding-right: 50px; } #sidebar ul { margin-bottom:0; } #sidebar h3, #sidebar p { padding:0 10px 0 0; } #footer { background: url(images/end.png) top left no-repeat; clear:both; height: 172px; padding-left: 50px; } #footer p { padding: 120px 0 0 10px; margin: 0; text-align: center; color:#FFFFFF; font-size:90%; } #nav { background-image: url(images/bgmain.png); background-repeat: repeat-y; margin:auto; } .coldienst1, .coldienst3, .coldienst4 { float: left; width: 200px; margin:0px 0px 0px 0px; } .coldienst2 { float: left; width: 220px; margin:0px 30px 0px 0px; } div.spacer { clear: both; height: 20px; } <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>test</title> <link href="master.css" rel="stylesheet" type="text/css"> </head> <body> <div id="wrap"> <div id="header"> </div> <div id="logo"> <img src="images/logo.png"> </div> <div id="nav"> <ul class="glossymenu"> <li><a href="index.html"><b>Home</b></a></li> <li class="current"><a href="diensten.html"><b>Diensten</b></a></li> <li><a href="referenties.html"><b>Referenties</b></a></li> <li><a href="contact.html"><b>Contact</b></a></li> </ul> </div> <div id="contentwrap"> <div id="maindienst"> <h1>Diensten</h1> <div class="coldienst1"> <h2>Webdesign</h2><p><img src="" width="190" height="155" alt="" style="background-color: #999999"></p> </div> <div class="coldienst2"> <h2> </h2> <p>Via een website kunt u op een effectieve manier informatie verschaffen aan een zo groot mogelijke doelgroep.<a href="webdesign.html" class="lees">Lees meer</a></p> </div> <div class="coldienst3"> <h2>CMS</h2> <p><img src="" width="190" height="155" alt="" style="background-color: #999999"></p> </div> <div class="coldienst4"> <h2> </h2><p>Met een content management system (CMS) kan u zelf uw website onderhouden zonder technische kennis.<a href="webdesign.html" class="lees">Lees meer</a></p> </div> <div class="spacer"><!-- No Content --></div> <div class="coldienst1"> <h2>Nieuwsbrieven</h2> <p><img src="" width="190" height="155" alt="" style="background-color: #999999"></p> </div> <div class="coldienst2"> <h2> </h2> <p>Online module voor het creëren, verzenden en meten van e-mail nieuwsbrieven naar al uw klanten.<a href="webdesign.html" class="lees">Lees meer</a></p> </div> <div class="coldienst3"> <h2>Webshops</h2> <p><img src="" width="190" height="155" alt="" style="background-color: #999999"></p> </div> <div class="coldienst4"> <h2> </h2> <p>Een module waarmee u zelf uw webwinkel kunt opzetten, bijwerken en promoten. Uw producten en uw bestellingen kunt u makkelijk zelf beheren.<br> <a href="webdesign.html" class="lees">Lees meer</a></p> </div> <div class="spacer"><!-- No Content --></div> <div class="coldienst1"> <h2>Domeinregistratie</h2> <p><img src="" width="190" height="155" alt="" style="background-color: #999999"></p> </div> <div class="coldienst2"> <h2> </h2> <p>Domeinregistraties tegen scherpe prijzen voor zowel bedrijven als particulieren.<a href="webdesign.html" class="lees">Lees meer</a></p> </div> <div class="coldienst3"> <h2>Hosting</h2> <p><img src="" width="190" height="155" alt="" style="background-color: #999999"></p> </div> <div class="coldienst4"> <h2> </h2> <p>Kwalitatieve webhosting met support tegen een uiterst betaalbare prijs.<br> <a href="webdesign.html" class="lees">Lees meer</a></p> </div> <div class="spacer"><!-- No Content --></div> <div class="coldienst1"> <h2>Zoekmachines</h2> <p><img name="" src="" width="190" height="155" alt="" style="background-color: #999999"></p> </div> <div class="coldienst2"> <h2> </h2> <p>Dankzij zoekmachine optimalisatie (SEO) wordt uw gehele website opgenomen in de zoekmachines. Zo wordt uw website makkelijk gevonden in zoekmachines als Google.<a href="webdesign.html" class="lees">Lees meer</a></p> </div> <div class="coldienst3"> <h2>Website onderhoud</h2> <p><img name="" src="" width="190" height="155" alt="" style="background-color: #999999"></p> </div> <div class="coldienst4"> <h2> </h2> <p>Problemen om uw site up-to-date te houden? Een slecht onderhouden site kost u bezoekers. Wij verzorgen onderhoud en updates, zowel op afroep als op contractbasis.<a href="webdesign.html" class="lees">Lees meer</a></p> </div> <div class="spacer"><!-- No Content --></div> <div class="coldienst1"> <h2>Grafisch ontwerp</h2> <p><img name="" src="" width="190" height="155" alt="" style="background-color: #999999"></p> </div> <div class="coldienst2"> <h2> </h2> <p>Vormgeving & creatieve communicatie<br> voor frisse en eigentijdse reclame. Van logo tot visitekaartje en huisstijl, van folder tot campagne.<a href="webdesign.html" class="lees">Lees meer</a></p> </div> <div class="coldienst3"> <h2>Uitbesteding</h2> <p><img name="" src="" width="190" height="155" alt="" style="background-color: #999999"></p> </div> <div class="coldienst4"> <h2> </h2> <p>Webdesign en andere grafische opdrachten kunnen uitbesteed worden aan ons.<a href="webdesign.html" class="lees">Lees meer</a></p> </div> </div> </div> <div id="footer"> <p><span class="sub">Copyright © RedRice 2007. Alle rechten voorbehouden</span></p> </div> </div> </body> </html>
-
Ok i redsigned my page in a more simple construction then my first posting. The only problem i have now is positioning the colums, margin and padding dont seem to work out as i want. HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title></title> <link href="master03.css" rel="stylesheet" type="text/css"> </head> <body> <div id="wrap"> <div id="header"> <h1> </h1> </div> <div id="nav"> <ul class="glossymenu"> <li class="current"><a href="index.html"><b>Home</b></a></li> <li><a href="diensten.html"><b>Diensten</b></a></li> <li><a href="referenties.html"><b>Referenties</b></a></li> <li><a href="contact.html"><b>Contact</b></a></li> </ul> </div> <div id="contentwrap"> <div id="main"> <h2>Column 1</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna. Mauris risus nunc, tristique varius, gravida in, lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> <p>Nulla a lacus. Nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce pulvinar lobortis purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec semper ipsum et urna. Ut consequat neque vitae felis. Suspendisse dapibus, magna quis pulvinar laoreet, dolor neque lacinia arcu, et luctus mi erat vestibulum sem. Mauris faucibus iaculis lacus. Aliquam nec ante in quam sollicitudin congue. Quisque congue egestas elit. Quisque viverra. Donec feugiat elementum est. Etiam vel lorem.</p> <p>Aenean tempor. Mauris tortor quam, elementum eu, convallis a, semper quis, purus. Cras at tortor in purus tincidunt tristique. In hac habitasse platea dictumst. Ut eu lectus eu metus molestie iaculis. In ornare. Donec at enim vel erat tempor congue. Nullam varius. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla feugiat hendrerit risus. Integer enim velit, gravida id, sollicitudin at, consequat sit amet, leo. Fusce imperdiet condimentum velit. Phasellus nonummy interdum est. Pellentesque quam.</p> <h3>Consectetuer adipiscing elit</h3> <p>Nulla dictum. Praesent turpis libero, pretium in, pretium ac, malesuada sed, ligula. Sed a urna eu ipsum luctus faucibus. Curabitur fringilla. Suspendisse sit amet quam. Sed vel pede id libero luctus fermentum. Vestibulum volutpat tempor lectus. Vivamus convallis tempus ante. Nullam adipiscing dui blandit ipsum. Nullam convallis lacus ut quam. Mauris semper elit at ante. Vivamus tristique. Pellentesque pharetra ante at pede. In ultrices arcu vitae purus. In rutrum, erat at mollis consequat, leo massa consequat libero, ac vestibulum libero tellus sed risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <p>Maecenas eu velit nec magna venenatis consequat. In neque. Vivamus pellentesque, lacus eu aliquet semper, lorem metus rhoncus metus, a ornare orci ante a diam. Nunc sem nisl, aliquet quis, elementum nec, imperdiet in, wisi. Proin in lorem. Etiam molestie diam eget ante. Morbi quis tortor id lacus mollis venenatis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam vel orci sit amet tellus mollis eleifend. Donec urna diam, viverra eget, ultricies gravida, ultrices eu, erat. Proin vel arcu. Sed diam. Cras hendrerit arcu sed augue. Sed justo felis, luctus a, accumsan in, tincidunt facilisis, libero. Phasellus eu eros.</p> </div> <div id="sidebar"> <h3>Column 2</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna.</p> </div> </div> <div id="footer"> <p>Footer</p> </div> </div> </body> </html> CSS body, html { margin:0; padding:0; background:#094e77; color:#000; } body { min-width:963px; background-color: #094e77; background-image: url(images/bg.png); background-repeat: repeat-x; } #wrap { margin:0 auto; width:963px; } #header { background: url(images/top.png); } #header h1 { padding:5px; margin:0; } #nav { background-image: url(images/bgmain.png); background-repeat: repeat-y; padding:5px; } #nav ul{ margin:0; padding:0; list-style:none; } #nav li{ display:inline; margin:0; padding:0; } #contentwrap { background-image: url(images/bgmain.png); width:963px; overflow: hidden; } #main { float:left; width:550px; } #main h2, #main h3, #main p { padding:0 10px; } #sidebar { float:right; width:325px; } #sidebar ul { margin-bottom:0; } #sidebar h3, #sidebar p { padding:0 10px 0 0; } #footer { background: url(images/end.png) top left no-repeat; clear:both; height: 172px; } #footer p { padding: 120px 0 0 10px; margin: 0; } /* menu */ .glossymenu{ width: 864px; padding: 0 0 0 34px; margin: 0 auto 0 auto; background: url(images/menur_bg.gif) repeat-x; /*tab background image path*/ height: 46px; list-style: none; } .glossymenu li{ float:left; } .glossymenu li a{ float: left; display: block; color:#666666; text-decoration: none; font-family: sans-serif; font-size: 13px; font-weight: bold; padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/ height: 46px; line-height: 46px; text-align: center; cursor: pointer; } .glossymenu li a b{ float: left; display: block; padding: 0 24px 0 8Px; /*Padding of menu items*/ } .glossymenu li.current a, .glossymenu li a:hover{ color: #fff; background: url(images/menur_hover_left.gif) no-repeat; /*left tab image path*/ background-position: left; } .glossymenu li.current a b, .glossymenu li a:hover b{ color: #fff; background: url(images/menur_hover_right.gif) no-repeat right top; /*right tab image path*/ }
-
There is still a gap with my background in opera, while in other browsers its ok. Is there a sollution to have it done in all browsers? @charset "utf-8"; /* CSS Document */ /* base */ html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr { margin:0px; padding:0px; border:0px; border-collapse:separate; border-spacing:0px; } input,select { margin:0; padding:0; } body { background-color: #094e77; background-image: url(images/bg.png); background-repeat: repeat-x; font-family: Arial, Trebuchet MS, verdana, Helvetica, sans-serif; } #wrapper { position: relative; width: 963px; margin-right:auto; margin-left:auto; margin-top:0; padding:0; } #top { width: 963px; height: 50px; background: url(images/top.png); } #logo { position: absolute; top: 51px; left: 40px; width: 243px; height: 131px; } #header { width: 963px; height: 150px; background: url(images/bgmain.png); } #content { width: 963px; overflow: hidden; background: url(images/bgmain.png) top left; } #maincontent { padding: 50px 0 0 10px; float:left; top: 50px; width: 950px; text-align: left; } #footer { padding: 120px 0 0 10px; width: 963px; height: 60px; background: url(images/end.png) top left no-repeat; } /* text */ h1 { font-size: 170%; font-weight: bold; color:#9caa3b; padding: 0 50px 0 50px; } p { font-size: 75%; line-height:20px; padding: 0 50px 0 52px; } .sub { font-size: 70%; color:#e5e5e5; line-height:20px; text-align: center; } /* menu */ .glossymenu{ position: relative; top: 130px; width: 864px; padding: 0 0 0 34px; margin: 0 auto 0 auto; background: url(images/menur_bg.gif) repeat-x; /*tab background image path*/ height: 46px; list-style: none; } .glossymenu li{ float:left; } .glossymenu li a{ float: left; display: block; color:#666666; text-decoration: none; font-family: sans-serif; font-size: 13px; font-weight: bold; padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/ height: 46px; line-height: 46px; text-align: center; cursor: pointer; } .glossymenu li a b{ float: left; display: block; padding: 0 24px 0 8Px; /*Padding of menu items*/ } .glossymenu li.current a, .glossymenu li a:hover{ color: #fff; background: url(images/menur_hover_left.gif) no-repeat; /*left tab image path*/ background-position: left; } .glossymenu li.current a b, .glossymenu li a:hover b{ color: #fff; background: url(images/menur_hover_right.gif) no-repeat right top; /*right tab image path*/ } and the html 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" lang="en" xml:lang="en"> <head> <title>test</title> <link href="master.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="top"></div> <div id="header"> <ul class="glossymenu"> <li class="current"><a href="index02.html"><b>Home</b></a></li> <li><a href="diensten.html"><b>Diensten</b></a></li> <li><a href="referenties.html"><b>Referenties</b></a></li> <li><a href="contact.html"><b>Contact</b></a></li> </ul> </div> <div id="content"> <div id="maincontent"> <h1>Lorem ipsum</h1> <p> </p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam volutpat, eros sed placerat tincidunt, dui nunc vulputate lorem, et malesuada leo dolor id orci. Etiam sit amet ante. Donec ultrices erat id erat. Curabitur sed odio. Maecenas aliquam. Ut ante. Nullam ultrices viverra mi. Sed posuere ultrices felis. Donec iaculis velit et sem. Duis semper ante non orci. Ut at ante. Mauris laoreet fringilla risus. Aenean non augue. Vestibulum mi. Vestibulum at lacus. </p> <p>Sed tellus ante, tincidunt a, ornare at, condimentum vel, augue. In lobortis eleifend risus. Vivamus convallis augue ut metus. Phasellus non odio. Suspendisse nisi eros, faucibus vitae, dignissim at, porta a, massa. Vestibulum quis mauris ac lectus cursus fermentum. Duis eget velit. Pellentesque tincidunt, felis eget commodo ullamcorper, urna arcu faucibus sem, nec tempus enim tortor a augue. Fusce suscipit faucibus magna. Suspendisse potenti. Aenean porta lacus in sapien. Fusce nec lacus. Etiam dolor. Nullam mi tortor, varius ac, accumsan vel, congue vitae, leo. Nulla ullamcorper, lacus nec ullamcorper ullamcorper, pede sem luctus ligula, pretium accumsan erat ipsum dictum tellus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam commodo urna a eros auctor egestas. Nam imperdiet aliquam pede. Ut interdum facilisis est. </p> <p> </p> <p>Integer nec orci. Ut sem magna, aliquam non, rutrum eu, tempor vel, justo. Proin faucibus vestibulum dui. Proin vel nibh. Nunc nisl. Nunc condimentum, metus ac rutrum ultricies, felis magna pharetra mi, in pellentesque tortor eros eget magna. Ut leo. Vestibulum justo. Phasellus placerat lacinia ante. Donec nibh risus, tempus eget, varius id, tempus et, ante. Donec mollis aliquet libero. Ut bibendum, mi nec lacinia iaculis, leo lectus sagittis libero, vel facilisis metus metus vitae mauris. Etiam ante nibh, pulvinar ut, tincidunt pulvinar, feugiat ac, enim. Integer tristique, ipsum vel consectetuer dapibus, neque elit commodo leo, a fermentum quam felis ut elit. Nam sapien. Nunc aliquet eleifend nibh. Nam aliquam erat ac arcu viverra consequat. Integer eu lacus. </p> <p> </p> <p>Fusce hendrerit dictum dui. Quisque sapien arcu, lacinia id, varius nec, sollicitudin nec, nisl. Proin ipsum dui, congue vel, pretium vitae, sodales ac, pede. Aenean dignissim iaculis ipsum. Aenean convallis aliquet erat. Nullam hendrerit felis vel sem. Suspendisse mi ipsum, malesuada mollis, tincidunt non, nonummy in, elit. Praesent vulputate. Fusce id ante sit amet enim tempor consectetuer. Nulla facilisi. Cras sit amet tellus. Sed lacus neque, adipiscing ac, aliquam condimentum, porttitor dapibus, nulla. Quisque pretium mauris at tellus. </p> <p> </p> <p>Vestibulum nonummy sagittis lacus. Sed dui leo, dictum ac, dapibus ac, vestibulum id, est. Nam quis sem. Suspendisse convallis, turpis ac dapibus facilisis, ligula lorem lacinia nisl, non eleifend libero velit quis nisl. Cras aliquet, nulla nec venenatis pretium, mi metus feugiat est, sit amet commodo metus dui vel orci. Donec ac tortor a odio eleifend aliquet. Fusce accumsan, elit sit amet vestibulum venenatis, tortor est placerat orci, id nonummy est felis nec purus. Suspendisse convallis odio vitae nibh. Integer molestie tortor. Integer mollis lobortis sapien. </p> </div> </div> <div style="clear:both"></div> <div id="footer"> <p class="sub">FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER</p> </div> </div> </body> </html>
-
Finally solved... i needed to remove height: auto and add overflow: hidden;.
-
Damn i need to stay in for some longer, its a mess in Firefox....
-
Phew, problem solved! Indeed i forgot the padding - i just have been puzzling for too long. Now i can take a walk outside in peace of mind :-) Thanks for your time !!
-
Thanks for your input. We´re getting closer but not yet solved. If you want to take another look at the site you will see the footer is now below the main conent. Still how can i lower the position of this footer? I´d like to have it in the bleu part of the page. And more importantly... now my h1 disappeared.
-
I changed the meta now in lowercase and closed them all. I will also change the b-tags in the navigation. Hopefully anyone can solve the footer problem as i am having a killer headache now trying to figure it out.
-
Thanks , but the problem still exists.
-
Hello all, I am redesigning my website and try to move away from tables and only use CSS. The problem is with my orange footer text; It should be BELOW the white page , but now it appears into the content text. You can see the footer text appearing into the content text. It should be below the white page, in the blue part, somewhere in the reflection of the white page. CSS code @charset "utf-8"; /* CSS Document */ /* base */ html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr { margin:0px; padding:0px; border:0px; border-collapse:separate; border-spacing:0px; } input,select { margin:0; padding:0; } body { background-color: #094e77; background-image: url(images/bg.png); background-repeat: repeat-x; font-family: Arial, Trebuchet MS, verdana, Helvetica, sans-serif; } #wrapper { position: relative; width: 963px; margin-right:auto; margin-left:auto; margin-top:0; padding:0; } #top { width: 963px; height: 50px; background: url(images/top.png); } #logo { position: absolute; top: 51px; left: 40px; width: 243px; height: 131px; } #header { width: 963px; height: 150px; background: url(images/bgmain.png); } #content { width: 963px; height: auto; background: url(images/bgmain.png) top left; } #maincontent { position: relative; top: 50px; width: 963px; height: auto; text-align: left; } #footer { width: 963px; height: 187px; background: url(images/end.png) top left no-repeat; } /* text */ h1 { font-size: 170%; font-weight: bold; color:#9caa3b; padding: 0 50px 0 50px; } p { font-size: 75%; line-height:20px; padding: 0 50px 0 50px; } .footer { font-size: 90%; color:#9caa3b; line-height:20px; padding: 0 50px 0 50px; } /* menu */ .glossymenu{ position: relative; top: 130px; width: 864px; padding: 0 0 0 34px; margin: 0 auto 0 auto; background: url(images/menur_bg.gif) repeat-x; /*tab background image path*/ height: 46px; list-style: none; } .glossymenu li{ float:left; } .glossymenu li a{ float: left; display: block; color:#666666; text-decoration: none; font-family: sans-serif; font-size: 13px; font-weight: bold; padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/ height: 46px; line-height: 46px; text-align: center; cursor: pointer; } .glossymenu li a b{ float: left; display: block; padding: 0 24px 0 8Px; /*Padding of menu items*/ } .glossymenu li.current a, .glossymenu li a:hover{ color: #fff; background: url(images/menur_hover_left.gif) no-repeat; /*left tab image path*/ background-position: left; } .glossymenu li.current a b, .glossymenu li a:hover b{ color: #fff; background: url(images/menur_hover_right.gif) no-repeat right top; /*right tab image path*/ } HTML 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" lang="en" xml:lang="en"> <head> <title></title> <link href="master.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="top"></div> <div id="header"><img src="images/logo.png" alt="logo" id="logo" /> <ul class="glossymenu"> <li class="current"><a href="home.html"><b>Home</b></a></li> <li><a href="diensten.html"><b>Diensten</b></a></li> <li><a href="referenties.html"><b>Referenties</b></a></li> <li><a href="contact.html"><b>Contact</b></a></li> </ul> </div> <div id="content"> <div id="maincontent"> <h1>Lorem ipsum</h1> <p> </p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam volutpat, eros sed placerat tincidunt, dui nunc vulputate lorem, et malesuada leo dolor id orci. Etiam sit amet ante. Donec ultrices erat id erat. Curabitur sed odio. Maecenas aliquam. Ut ante. Nullam ultrices viverra mi. Sed posuere ultrices felis. Donec iaculis velit et sem. Duis semper ante non orci. Ut at ante. Mauris laoreet fringilla risus. Aenean non augue. Vestibulum mi. Vestibulum at lacus. </p> <p>Sed tellus ante, tincidunt a, ornare at, condimentum vel, augue. In lobortis eleifend risus. Vivamus convallis augue ut metus. Phasellus non odio. Suspendisse nisi eros, faucibus vitae, dignissim at, porta a, massa. Vestibulum quis mauris ac lectus cursus fermentum. Duis eget velit. Pellentesque tincidunt, felis eget commodo ullamcorper, urna arcu faucibus sem, nec tempus enim tortor a augue. Fusce suscipit faucibus magna. Suspendisse potenti. Aenean porta lacus in sapien. Fusce nec lacus. Etiam dolor. Nullam mi tortor, varius ac, accumsan vel, congue vitae, leo. Nulla ullamcorper, lacus nec ullamcorper ullamcorper, pede sem luctus ligula, pretium accumsan erat ipsum dictum tellus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam commodo urna a eros auctor egestas. Nam imperdiet aliquam pede. Ut interdum facilisis est. </p> <p> </p> <p>Integer nec orci. Ut sem magna, aliquam non, rutrum eu, tempor vel, justo. Proin faucibus vestibulum dui. Proin vel nibh. Nunc nisl. Nunc condimentum, metus ac rutrum ultricies, felis magna pharetra mi, in pellentesque tortor eros eget magna. Ut leo. Vestibulum justo. Phasellus placerat lacinia ante. Donec nibh risus, tempus eget, varius id, tempus et, ante. Donec mollis aliquet libero. Ut bibendum, mi nec lacinia iaculis, leo lectus sagittis libero, vel facilisis metus metus vitae mauris. Etiam ante nibh, pulvinar ut, tincidunt pulvinar, feugiat ac, enim. Integer tristique, ipsum vel consectetuer dapibus, neque elit commodo leo, a fermentum quam felis ut elit. Nam sapien. Nunc aliquet eleifend nibh. Nam aliquam erat ac arcu viverra consequat. Integer eu lacus. </p> <p> </p> <p>Fusce hendrerit dictum dui. Quisque sapien arcu, lacinia id, varius nec, sollicitudin nec, nisl. Proin ipsum dui, congue vel, pretium vitae, sodales ac, pede. Aenean dignissim iaculis ipsum. Aenean convallis aliquet erat. Nullam hendrerit felis vel sem. Suspendisse mi ipsum, malesuada mollis, tincidunt non, nonummy in, elit. Praesent vulputate. Fusce id ante sit amet enim tempor consectetuer. Nulla facilisi. Cras sit amet tellus. Sed lacus neque, adipiscing ac, aliquam condimentum, porttitor dapibus, nulla. Quisque pretium mauris at tellus. </p> <p> </p> <p>Vestibulum nonummy sagittis lacus. Sed dui leo, dictum ac, dapibus ac, vestibulum id, est. Nam quis sem. Suspendisse convallis, turpis ac dapibus facilisis, ligula lorem lacinia nisl, non eleifend libero velit quis nisl. Cras aliquet, nulla nec venenatis pretium, mi metus feugiat est, sit amet commodo metus dui vel orci. Donec ac tortor a odio eleifend aliquet. Fusce accumsan, elit sit amet vestibulum venenatis, tortor est placerat orci, id nonummy est felis nec purus. Suspendisse convallis odio vitae nibh. Integer molestie tortor. Integer mollis lobortis sapien. </p> </div> </div> <div id="footer"> <p class="footer">FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER</p> </div> </div> </body> </html> Thanks for your time, i appreciate your help.
-
Thanks a lot man, that solved the problem!
-
Hi thanks for taking a look at my code. I have changed the code as you said but it gets worse then.
-
Hello, I am having problems with a website layout which has css and div and some backgrounds involved. I am using 4 images bg.png which is the main background with stripes and gradient top.png which is the rounded corners + shadow top of the white content field - transparent image bgmain.png which is the background + shadow for the white content field - transparent image end.png which is the bottem with rounded corners + shadow of the white content field- transparent image Problem In the footer i have end.png set as a background but bgmain.png is also popping up there, so both backgrounds are overlapping. How can i solve this ? I hope i explained well. This is the html code <body> <div id="wrapper"> <div id="header"> </div> <div id="content"> <p>test</p> <p>1234568797 </p> <div id="footer"> </div> </div> </div> </body> And this is the css code body { margin: 0; padding: 0; background-color: #cbc6b8; background-image: url(images/bg.png); background-repeat: repeat-x; } #wrapper { position: relative; width: 963px; margin-right:auto; margin-left:auto; margin-top:0; padding:0; } #header { position: absolute; top: 0px; left: 0px; width: 963px; height: 51px; background: url(images/top.png); } #content { position: absolute; top: 51px; left: 0px; width: 963px; height: auto; background: url(images/bgmain.png) top left; text-align: center; } #footer { width: 963px; height: 128px; background: url(images/end.png) top left no-repeat; }
-
Hello to everyone, I just arrived in this place and i hope to learn a lot about css. regards, Sting