Jump to content


Photo

Problem with layout


  • Please log in to reply
5 replies to this topic

#1 kirsiskaspars

kirsiskaspars

    Member

  • Member
  • PipPip
  • 18 posts

Posted 08 April 2012 - 02:40 PM

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!

Attached Thumbnails

  • image222.gif
  • Image 000.gif

  • 0

#2 Andrea

Andrea

    Advanced Member

  • Moderators
  • 5,681 posts
  • Facebook:https://www.facebook.com/aandbwebdesignAB
  • LocationSan Antonio, TX

Posted 08 April 2012 - 05:01 PM

We really need to see the code.
  • 0

#3 kirsiskaspars

kirsiskaspars

    Member

  • Member
  • PipPip
  • 18 posts

Posted 09 April 2012 - 04:02 AM

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...nsitional.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!

Attached Thumbnails

  • llll.gif

  • 0

#4 Wickham

Wickham

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 1,732 posts
  • LocationSalisbury UK

Posted 09 April 2012 - 05:43 AM

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.
  • 0

#5 kirsiskaspars

kirsiskaspars

    Member

  • Member
  • PipPip
  • 18 posts

Posted 09 April 2012 - 10:46 AM

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!
  • 0

#6 brainusa

brainusa

    Member

  • Member
  • PipPip
  • 20 posts

Posted 08 May 2012 - 08:50 AM

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.
  • 0
Spinxwebdesign.com – We take pride to have the best Web designer with years of experience in our team. http://www.spinxwebdesign.com/




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users