kirsiskaspars Posted April 8, 2012 Report Posted April 8, 2012 Hey guys! I was building some web with DW and turned to a little issue. As far as I am concerned I have done everything right so my web page layout would be relative and content always centered. But when I minimize my web in a browser a lot , the scroll bar doesn't offer to scroll the page to it's full content. See in the pictures. I hope i have explaned the problem understodable. Thanks! Quote
kirsiskaspars Posted April 9, 2012 Author Report Posted April 9, 2012 We really need to see the code. Here is the code of HTML file and under is CSS 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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Figaro</title> <style type="text/css"> </style> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="figaro"> </div> <div id="nav1"> <ul> <li><a href="#">Par FIGARO</a></li> <li><a href="#">Kontakti</a></li> <li><a href="#">Draugi</a></li> <li><a href="#">Atbalstītāji</a></li> <li><a href="#">Reklāmas iespējas</a></li> </ul> </div><!--Vertikala navigacija --><!--vertikala navigacija --> <div id="nav"> <ul> <li id="aktualitates"><a href="#">AKTUALITĀTES</a></li> <li id="diskusijas"><a href="#">Diskusijas/viedokļi</a></li> <li id="galerija"><a href="#">Galerija</a></li> <li id="abonet"><a href="#">Abonēt</a></li> <li id="arhivs"><a href="#">Arhīvs</a></li> </ul> </div> </body> </html> CSS Code: #figaro { background-image: url(images/figaro.jpg); background-repeat: no-repeat; display: block; position: relative; height: 169px; width: 517px; top: 0px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; left: -167px; } #nav1 ul li a:hover { background-image: url(images/navigacija_figaro_hover.gif); color: #000; } #nav1 ul { list-style-type: none; margin: 0px; padding: 0px; } #nav1 ul li a { display: block; height: 25px; width: 180px; line-height: 10px; text-decoration: none; text-indent: 5px; background-image: url(images/navigacija_figaro.gif); color: #FFF; font-style: normal; font-weight: bold; font-family: "Times New Roman", Times, serif; background-repeat: no-repeat; z-index: 6; padding-top: 8px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; position: relative; top: 230px; left: -330px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; } #nav ul #aktualitates { background-image: url(images/horizontal_nav/nav_aktualitates.jpg); display: block; position: relative; height: 36px; width: 168px; left: -359px; background-repeat: no-repeat; top: -180px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; } #lapa { background-image: url(images/pianobackground.jpg); background-repeat: no-repeat; height: 1000px; width: 1000px; } #nav ul #aktualitates:hover { background-image: url(images/horizontal_nav/nav_aktualitates_hover.jpg); background-repeat: no-repeat; } #nav ul #diskusijas { background-image: url(images/horizontal_nav/nav_diskusijas.jpg); background-repeat: no-repeat; display: block; position: relative; height: 36px; width: 193px; left: -172px; top: -216px; padding-left: 12px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; } #nav ul #galerija { background-image: url(images/horizontal_nav/nav_galerija.jpg); background-repeat: no-repeat; display: block; position: relative; height: 36px; width: 128px; left: -10px; top: -252px; padding-left: 13px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; } #nav ul #abonet { background-image: url(images/horizontal_nav/nav_abonet.jpg); background-repeat: no-repeat; position: relative; height: 36px; width: 129px; left: 121px; top: -288px; padding-left: 15px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; display: block; } #nav ul #arhivs { background-image: url(images/horizontal_nav/nav_arhivs.jpg); background-repeat: no-repeat; display: block; position: relative; height: 36px; width: 158px; left: 272px; top: -324px; padding-left: 28px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; } #nav ul { list-style-type: none; mi } #nav ul li a { font-family: "Times New Roman", Times, serif; font-size: 15px; line-height: 36px; text-decoration: none; color: #000; font-weight: 200; padding-left: 25px; } #nav ul #diskusijas:hover { background-image: url(images/horizontal_nav/nav_diskusijas_hover.jpg); } #nav ul #galerija:hover { background-image: url(images/horizontal_nav/nav_galerija_hover.jpg); } #nav ul #abonet:hover { background-image: url(images/horizontal_nav/nav_abonet_hover.jpg); } #nav ul #arhivs:hover { background-image: url(images/horizontal_nav/nav_arhivs_hover.jpg); } HOW THE WEB ACTUALLY LOOKS, LOOK IN THE PICTURE. Thanks! Quote
Wickham Posted April 9, 2012 Report Posted April 9, 2012 You have lots of negative left sizes (and negative top sizes) which are dragging the content left beyond the scrollbar capability. Learn to code without large negative sizes. Quote
kirsiskaspars Posted April 9, 2012 Author Report Posted April 9, 2012 You have lots of negative left sizes (and negative top sizes) which are dragging the content left beyond the scrollbar capability. Learn to code without large negative sizes. Perhaps it is the reason. But I've tried to do this without having negative values but it just doesn't. I got to use neg. values. What I am doing wrong? Really appreciate your assistance. Thanks! Quote
brainusa Posted May 8, 2012 Report Posted May 8, 2012 Hey, why not you use tools such as firebug which will help you to fix the problem while you are browsing your website. Just give it a try and you will be very well in a position to make necessary changes in a code. Quote
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.