The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> content div overlapping navigation
iamglenn
post Oct 16 2006, 11:40 AM
Post #1


Novice
**

Group: Members
Posts: 25
Joined: 16-October 06
Member No.: 459



Hi there!

I am having a problem here: http://iamglenn.com/storage/msi/new/index.html

When you resize the width of your browser to a smaller desired screen, the content begins to go under the navigation. (Not the header, Iím talking before that)

Hereís the style sheet: http://iamglenn.com/storage/msi/new/style.css

Any help would be greatly appreciated! Thank you all in advance.

-Glenn Weatherson
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jimlongo
post Oct 16 2006, 12:32 PM
Post #2


This is My Life
*******

Group: Members
Posts: 1,125
Joined: 24-August 06
From: t-dot
Member No.: 16



I think if you change the content box to something using position:absolute; you will not have this happen. The units for placement i used are not exactly what you need but the idea should help.

CODE
#content {
    margin:0;
    position: absolute;
    top: 140px;
    left: 200px;
    background:#FFF;
}


There may be a better way to do this, but it works for me.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
iamglenn
post Oct 16 2006, 12:42 PM
Post #3


Novice
**

Group: Members
Posts: 25
Joined: 16-October 06
Member No.: 459



Thank you for your help! Works perfect!

Now one more thing.. is it possible to make the flash header NOT drop when you drag the width down on your browser?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jimlongo
post Oct 16 2006, 12:58 PM
Post #4


This is My Life
*******

Group: Members
Posts: 1,125
Joined: 24-August 06
From: t-dot
Member No.: 16



Try giving the style id banner a width of (I think) 657 px.

This post has been edited by jimlongo: Oct 16 2006, 12:59 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
iamglenn
post Oct 16 2006, 01:28 PM
Post #5


Novice
**

Group: Members
Posts: 25
Joined: 16-October 06
Member No.: 459



Looking good but it seems everytime you throw a fix for me something else needs adjustment, haha.

on the longer pages (equipment and construction the footer ends in the middle of the page.)
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jimlongo
post Oct 16 2006, 01:55 PM
Post #6


This is My Life
*******

Group: Members
Posts: 1,125
Joined: 24-August 06
From: t-dot
Member No.: 16



I'm finding it a little hard to follow . . . where is the class sidebar?
You refer to it in your html but it's not in your stylesheet.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
iamglenn
post Oct 16 2006, 01:58 PM
Post #7


Novice
**

Group: Members
Posts: 25
Joined: 16-October 06
Member No.: 459



that was just for text, the sidebar class is nav

sorry
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jimlongo
post Oct 16 2006, 02:23 PM
Post #8


This is My Life
*******

Group: Members
Posts: 1,125
Joined: 24-August 06
From: t-dot
Member No.: 16



Well it seems to me that since your nav class is a fixed height it can't expand to move the footer below any long pages. i would try placing the footer under the content.

Or find some other way to push it down in the navigation bar. For instance the class clear doesn't seem to do anything at the moment, give it a height and the footer gets pushed down, but it has to vary for every page.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
iamglenn
post Oct 16 2006, 03:09 PM
Post #9


Novice
**

Group: Members
Posts: 25
Joined: 16-October 06
Member No.: 459



tried pusing the footer below content and that was a no go.

thanks for your help, would appericate other methods as well!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jimlongo
post Oct 16 2006, 03:28 PM
Post #10


This is My Life
*******

Group: Members
Posts: 1,125
Joined: 24-August 06
From: t-dot
Member No.: 16



you could for the construction page make the
CODE

clear {height: 1400px;}
but as you narrow the page even that will get pushed under the content.


If you're going to do that kind of thing, I'd say it's better to put that part of your stylesheet directly in the html for each page.

for example . . . put this in the head of your html doc
CODE
<style type="text/css" media="all">
<!--
clear {height: 1400px;}
-->
</style>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
iamglenn
post Oct 16 2006, 03:35 PM
Post #11


Novice
**

Group: Members
Posts: 25
Joined: 16-October 06
Member No.: 459



since it's a resizable layout that doesn't work. it will move on browser resize sad.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jimlongo
post Oct 16 2006, 03:46 PM
Post #12


This is My Life
*******

Group: Members
Posts: 1,125
Joined: 24-August 06
From: t-dot
Member No.: 16



Yeah, well that can be a problem.

There seems to be a closing div tag missing . . . check the validator.

Oops - adding another closing div tag just before the end changes the layout quite a bit.


You might think about changing your doctype as well, even in trying to correct the validator errors it's much easier to write html then xhtml and there aren't really any advantages to it.

This post has been edited by jimlongo: Oct 16 2006, 04:13 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
iamglenn
post Oct 16 2006, 04:39 PM
Post #13


Novice
**

Group: Members
Posts: 25
Joined: 16-October 06
Member No.: 459



yes i didn't realize they were xhtml. changed and going through the errors.

thank you for all your help and time. have a good one mate.
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: 19th October 2019 - 05:01 PM