Jump to content

Problem with layout


Recommended Posts

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!

post-40522-001488700 1333913911_thumb.gif

post-40522-013465600 1333913931_thumb.gif

Link to comment
Share on other sites

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!

post-40522-080293800 1333962134_thumb.gif

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

  • 4 weeks later...

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...