View Thread: CSS Layout Help. - Killersites.com Forum

Welcome Guest | Register | Login

Killersites.com Forum

Category: General Web Design

Forum: CSS - Styling your pages with Cascading Style Sheets.

Thread: CSS Layout Help.

Quick Go »

No member browsing this thread

Thread Status: Active
Total posts in this thread: 7

[ ]

Author

This topic has been viewed 1407 times and has 6 replies

shanejeffersphotography
Newbie

United States
Joined: Apr 22, 2008
Post Count: 32
Status: Offline


CSS Layout Help.

I am working on a portfolio site. I know the way I have it set up is not the greatest way to do it, but I'm just testing out some Ideas. The only thing I don't understand is that there is extra scroll space at the bottom of the the page. I have set the body, html, and content div's to not go that far down, yet it still has that as scroll space. Does anyone know what could be wrong.

here is the page.

www.s h a n ej e ff ersphotography.com/test/index.html (remove the spaces)

css is here.

html{
width: 1998px;
height: 705px;
}
body {
border-top: 60px solid #2b2b2b;
width: 1990px;
height: 640px;
background-image: url(images/bg_copy.png);
background-repeat: no-repeat;
background-color: #2b2b2b;
margin: 0px 0px 0px 0px;
z-index:-1;
}
#content {
width: 100%;
height: 700px;
clear: both;
position: relative;
top: -75px
}
#frames {
width: 909px;
list-style-type: none;
position: relative;
left: 35px;
top: 165px;
}
#frames li{
display: inline;
padding: 20px;
}
#frames li img{
width: 258px;
height: 298px;
border: none
}
#couch {
width: 562px;
height: 250px;
position: relative;
left: 980px;
bottom: 0px;
}
#clock {
width: 75px;
height:75px;
position: relative;
left: 900px;
bottom: 530px;
}
#desk {
width: 386px;
height: 369px;
position: relative;
left: 950px;
bottom: 35px;
}
#logo {
width: 203px;
height: 107px;
position: relative;
left: 749px;
bottom: 500px;
}
#text {
width: 468px;
height: 182px;
text-indent: -9999px;
background-image: url(images/text.png);
background-repeat: no-repeat;
position: relative;
left: 1040px;
bottom: 500px;
margin: 0px 0px 0px 0px;
}

Thanks for any Help!
----------------------------------------
[Edit 1 times, last edit by shanejeffersphotography at Dec 9, 2008 9:57:45 AM]

[Dec 9, 2008 9:56:41 AM]

[Link]

Wickham
Advanced Member

UK
Joined: Sep 17, 2007
Post Count: 590
Status: Offline


Re: CSS Layout Help.

You've raised the #content div with top: -75px; position: relative; which means the bottom of it is also raised 75px from where it normally would be, which leaves a space where it would have been!

That's part of the space; the rest is a conflict between the heights of html, body and #content which are all different.

I would suggest not putting a height on html or body and not using a negative top size. Keep it all very simple and use position: relative for your #content div with no top or left so that it sits at the top of the window and everything inside position: absolute with only top and left positions, not using bottom as I've found that some browsers operate it unreliably. The inside elements with position: absolute will take their positions from the top left corner of a containing div which has position: relative. You will have to recode all the top and left positions from the top left corner of #content.

You also have a border-top: 60px on the body but then drag the #content up over it with the negative 75px top position.

Since it's all a bit confused, I doubt if I could make your code work well without recoding it completely. We all went through the same process!
----------------------------------------
Code downloaded to my PC will be deleted in due course.
WIN XP SP3; IE7, Firefox 3.0, Opera and Safari for Windows; screen resolution usually 1024x768.
IE6 on W98 with 800*600.
----------------------------------------
[Edit 1 times, last edit by Wickham at Dec 9, 2008 10:55:34 AM]

[Dec 9, 2008 10:43:47 AM]

[Link]

newseed
Advanced Member

Joined: Apr 2, 2005
Post Count: 2141
Status: Offline


Re: CSS Layout Help.

Looks like the gap at the bottom could be cause by height setting for #text.

You have this in the html which is not a good practice:

<p id="text">

For that paragraph tag, you have the height set for 182px.
----------------------------------------
Success is based on how much you spend. If it's not money, then the alternative is your time.
The Kasper Group

[Dec 9, 2008 10:50:13 AM]

[Link]

shanejeffersphotography
Newbie

United States
Joined: Apr 22, 2008
Post Count: 32
Status: Offline


Re: CSS Layout Help.

Thanks a lot Wickham. I understand CSS, but I'm still trying to grasp how to position things correctly. I made the changes you suggested, and it worked very well.

Here is the new CSS. Using what you suggested.

body {
width: 1990px;
border-top: 60px solid #242424;
background-image: url(images/bg_copy.png);
background-repeat: no-repeat;
background-color: #2b2b2b;
margin: 0px 0px 0px 0px;
}
#content {
width: 1990px;
height: 645px;
clear: both;
position: relative;
}
#frames {
width: 909px;
list-style-type: none;
position: absolute;
left: 35px;
top: 65px;
}
#frames li{
display: inline;
padding: 20px;
}
#frames li img{
width: 258px;
height: 298px;
border: none
}
#couch {
width: 562px;
height: 250px;
position: absolute;
left: 980px;
top: 350px;

}
#clock {
width: 75px;
height:75px;
position: absolute;
left: 1500px;
top: 50px;
}
#desk {
width: 386px;
height: 369px;
position: absolute;
left: 1584px;
top: 200px;
}
#logo {
width: 203px;
height: 107px;
position: absolute;
left: 1787px;
top: 45px;
}
#welcome {
width: 468px;
height: 182px;
text-indent: -9999px;
background-image: url(images/text.png);
background-repeat: no-repeat;
position: absolute;
left: 1040px;
top: 120px;
margin: 0px 0px 0px 0px;
}

take a look at the page again with this tactic used.

Thanks again.
----------------------------------------
[Edit 1 times, last edit by shanejeffersphotography at Dec 9, 2008 11:41:57 AM]

[Dec 9, 2008 11:40:27 AM]

[Link]

Wickham
Advanced Member

UK
Joined: Sep 17, 2007
Post Count: 590
Status: Offline


Re: CSS Layout Help.

That's a big improvement.

Check errors here: http://validator.w3.org/#validate-by-upload

None relate to the structure.

I didn't use any of your images; I just added background-colors to the divs. It showed the same in IE7 and Firefox which is a good start.

The p tag with the text "Hi,........" is up at the top; as you coded that last I'm not sure if you want it there, but you can always put the p tag inside a div with position: absolute and top and left positions and put it somewhere else.
----------------------------------------
Code downloaded to my PC will be deleted in due course.
WIN XP SP3; IE7, Firefox 3.0, Opera and Safari for Windows; screen resolution usually 1024x768.
IE6 on W98 with 800*600.

[Dec 9, 2008 1:32:20 PM]

[Link]

shanejeffersphotography
Newbie

United States
Joined: Apr 22, 2008
Post Count: 32
Status: Offline


Re: CSS Layout Help.

The text should be right above the couch. centered between the couch and the top border. Thanks for the help. This is just the homepage so I might need some help when the actual content comes in. So as a rule of thumb should I position my content inside of a wrapper that is relatively positioned?

[Dec 9, 2008 1:54:26 PM]

[Link]

Wickham
Advanced Member

UK
Joined: Sep 17, 2007
Post Count: 590
Status: Offline


Re: CSS Layout Help.

I didn't see the text above the couch because the id was "text" in my version but I see that it's now "welcome" which does put it above the couch.

Since you started by positioning everything with left and bottom and position: relative I thought that one way to simplify it would be to use position: absolute and top and left positions for the inner elements, all inside a position: relative #content div.

The advantage of using a position: relative container is that you can add margin: auto; and it will centralise provided it has a width like your's has, but your container is 1990px wide so centralising is not going to be necessary as it's wider than nearly all resolutions.

If the #content div was much less wide it would centralise in larger resolutions and the inner divs would move with it.

There are of course lots of ways to structure a page, one of which is to use position: relative for all elements (or not state any position) and use floats and margins, not left and bottom positions, so that's something for you to practise.
----------------------------------------
Code downloaded to my PC will be deleted in due course.
WIN XP SP3; IE7, Firefox 3.0, Opera and Safari for Windows; screen resolution usually 1024x768.
IE6 on W98 with 800*600.

[Dec 9, 2008 3:27:00 PM]

[Link]

[ ]

Current timezone is GMT
Mar 19, 2010 8:07:16 PM