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!
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!
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.
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!
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.
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now