The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> sidebar positioning
minidiapolis
post Feb 10 2008, 10:59 PM
Post #1


Serious Coder
*****

Group: Members
Posts: 437
Joined: 3-September 06
Member No.: 57



On www.fountainchurch.org why isn't the sidebar sitting on top of the fountain. I thought I used absolute positioning right?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Dr Z
post Feb 11 2008, 01:23 AM
Post #2


Advanced Member
****

Group: Members
Posts: 221
Joined: 23-August 06
Member No.: 11



I may be off my rocker... After a quick look, I saw some puzzling points:

QUOTE
#image {
position : absolute;
width : 100%;
}
#sidebar {
width : 20%;
float : left;
}


Your style sheet gives 100% to #image & 20% to #sidebar"; that does not add up!
#image is positioned 'absolute' but its coordinates are not specified.

I have a an allergic reaction to floats, but would recommend starting with:

QUOTE
#image {width : 80%; float : left;}
#sidebar {width : 20%; float : left}


Alternatively, if you want the #image as the container block, then use it as a wrapper and put all other div's - such as #sidebar, #contents, etc, inside that div.

Hope this may help.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
minidiapolis
post Feb 11 2008, 11:54 AM
Post #3


Serious Coder
*****

Group: Members
Posts: 437
Joined: 3-September 06
Member No.: 57



I'm not understanding your response. . . . shouldn't the sidebar be sitting on top of the picture and not on the left on a white background?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 11 2008, 01:18 PM
Post #4


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,181
Joined: 9-August 06
Member No.: 6



That's in IE. In other browsers the image and the content is on top of (covering) the sidebar.

Since you already use position: absolute, it's better to stick to that. Remove the float declaration from sidebar and make that position: absolute too.

Then move the HTML for the sidebar to the end of the code. That way it will be on top and it will also show last on the page without CSS which is better.

I'd use padding or a left offset (left: ...) on #content rather than margin on all Ps it contains. You don't need an alt text for the fountain picture since it's purely decorational. Just leave the value of alt empty: alt="". Makes talking thingamajigs skip it.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
minidiapolis
post Feb 11 2008, 04:30 PM
Post #5


Serious Coder
*****

Group: Members
Posts: 437
Joined: 3-September 06
Member No.: 57



I moved the sidebar code but in IE it still has a white background and in opera the sidebar isn't appearing at all.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 11 2008, 04:41 PM
Post #6


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,181
Joined: 9-August 06
Member No.: 6



You need to make the changes to the style sheet too.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 21st March 2019 - 10:51 PM