Killersites Community: Problem with layout - Killersites Community

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Problem with layout

#1 User is offline   kirsiskaspars 

  • PipPip
  • View blog
  • Group: Member
  • Posts: 18
  • Joined: 31-January 12

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 thumbnail(s)

  • Attached Image: image222.gif
  • Attached Image: Image 000.gif

0

#2 User is offline   Andrea 

  • View gallery
  • Group: Moderators
  • Posts: 5,498
  • Joined: 19-December 08
  • LocationSan Antonio, TX

Posted 08 April 2012 - 05:01 PM

We really need to see the code.
0

#3 User is offline   kirsiskaspars 

  • PipPip
  • View blog
  • Group: Member
  • Posts: 18
  • Joined: 31-January 12

Posted 09 April 2012 - 04:02 AM

View PostAndrea, on 08 April 2012 - 05:01 PM, said:

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!

Attached thumbnail(s)

  • Attached Image: llll.gif

0

#4 User is offline   Wickham 

  • PipPipPipPip
  • View gallery
  • Group: Advanced Member
  • Posts: 1,731
  • Joined: 20-December 08
  • 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 User is offline   kirsiskaspars 

  • PipPip
  • View blog
  • Group: Member
  • Posts: 18
  • Joined: 31-January 12

Posted 09 April 2012 - 10:46 AM

View PostWickham, on 09 April 2012 - 05:43 AM, said:

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 User is offline   brainusa 

  • PipPip
  • View blog
  • Group: Member
  • Posts: 20
  • Joined: 08-May 12

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

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users