CSS Help
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me
Go Back   Dev Shed Forums > Web Design > CSS Help
Reload this Page

more css sizing problems please help

Discuss more css sizing problems please help in the CSS Help forum on Dev Shed.
more css sizing problems please help Cascading Style Sheets (CSS) forum discussing all levels of CSS, including CSS1, CSS2 and CSS Positioning. CSS provides a robust way of applying standardized design concepts to your web pages.

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old April 7th, 2004, 06:46 AM
agmogg agmogg is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Feb 2003
Posts: 202 agmogg User rank is Lance Corporal (50 - 100 Reputation Level)agmogg User rank is Lance Corporal (50 - 100 Reputation Level)agmogg User rank is Lance Corporal (50 - 100 Reputation Level) 
Time spent in forums: 1 Day 4 h 16 m 6 sec
Reputation Power: 6
Send a message via AIM to agmogg
more css sizing problems please help
Hi,

I am using the code below to try and create a resizable page.

the problem is when the i cant get left nav to stretch the full height of the content div..... so when it is resized the footer etc all go over the top of the image...which looks wrong as iwant it all to stay in proportion

any help would be much apreciated

css

body { /*sets properties for the body of the document*/
background-color:#ffffff;
margin:0px 0px 0px 0px;
}
#container {

margin-top: 50px;
margin-left: 50px;
margin-right: 50px;
margin-bottom: 50px;
padding: 0px;
background-color: orange;
width: 80%;
min-width: 241px;
}
#footer {
padding: 0px;
position: relative;
padding: 0px;
background-color: yellow;
width: 100%;
}

#content {
margin-left:182px;
width:100% - #leftnav;
background-color: red;
align: right;
min-width: 50px;

}

#leftnav { /*sets properties for the left nav bar*/

float:left;
background-color : #66ccff;
width: 180px;
border-right:2px solid;
border-color:#663300;
height:100%;


}

html

<div id="container"> container
<div id="leftnav"><img src="images/home-menu.gif" width="179" height="251"></div>

<div id="content">content content content content content content content content
content content content content content content content content content content</div>
<div id="footer">footer</div>
</div>
Reply With Quote
  #2  
Old April 7th, 2004, 07:07 AM
DEfusion DEfusion is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jan 2003
Posts: 288 DEfusion User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 9 h 26 m 45 sec
Reputation Power: 6
Try looking here http://www.alistapart.com/articles/footers/ for a great article on footers.

-D
Reply With Quote
  #3  
Old April 7th, 2004, 07:40 AM
agmogg agmogg is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Feb 2003
Posts: 202 agmogg User rank is Lance Corporal (50 - 100 Reputation Level)agmogg User rank is Lance Corporal (50 - 100 Reputation Level)agmogg User rank is Lance Corporal (50 - 100 Reputation Level) 
Time spent in forums: 1 Day 4 h 16 m 6 sec
Reputation Power: 6
Send a message via AIM to agmogg
Ive tried that but as soon as i put the left nav it it all goes haywire.

any suggestions on how i can change the code would be apreciated.

cheers
Andy
Reply With Quote
  #4  
Old April 7th, 2004, 02:20 PM
kk5st's Avatar
kk5st kk5st is offline
Thanks Johnny Hart (BC) R.I.P.
Dev Shed Demi-God (4500 - 4999 posts)
  
Join Date: May 2003
Location: Dallas
Posts: 4,555 kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level) 
Time spent in forums: 1 Month 2 Days 7 h 49 m 53 sec
Reputation Power: 630
There are a couple of things,
Code:
#content {
margin-left:182px;
width:100% - #leftnav;  /* This doesn't work, you can't calculate.  Nice try, though.
                         IE effs up the width attribute where floats are involved.
                         Just remove this line.  The default is 100% anyway */
background-color: red;
align: right;
min-width: 50px;  /* Lose this line, too.  IE doesn't know min/max anything. */
}
Add this rule to your #footer;
Code:
    clear: both;
That will ensure that the footer is below the float. Look at my little float demo to see what's happening.

cheers,

gary
__________________
There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

Ask a better question, get a better answer.
Last edited by kk5st : April 7th, 2004 at 02:25 PM. Reason: dumb keyboard! #%*$#@%
Reply With Quote
  #5  
Old April 8th, 2004, 02:21 AM
agmogg agmogg is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Feb 2003
Posts: 202 agmogg User rank is Lance Corporal (50 - 100 Reputation Level)agmogg User rank is Lance Corporal (50 - 100 Reputation Level)agmogg User rank is Lance Corporal (50 - 100 Reputation Level) 
Time spent in forums: 1 Day 4 h 16 m 6 sec
Reputation Power: 6
Send a message via AIM to agmogg
Fantastic, that seems to work

thanks for your help

cheers
andy
Reply With Quote
  #6  
Old April 8th, 2004, 02:51 AM
agmogg agmogg is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Feb 2003
Posts: 202 agmogg User rank is Lance Corporal (50 - 100 Reputation Level)agmogg User rank is Lance Corporal (50 - 100 Reputation Level)agmogg User rank is Lance Corporal (50 - 100 Reputation Level) 
Time spent in forums: 1 Day 4 h 16 m 6 sec
Reputation Power: 6
Send a message via AIM to agmogg
I just checked it in IE and it looks awful, but works perfectly in mozilla....any ideas?

cheers
andy
Reply With Quote
  #7  
Old April 8th, 2004, 03:08 AM
kk5st's Avatar
kk5st kk5st is offline
Thanks Johnny Hart (BC) R.I.P.
Dev Shed Demi-God (4500 - 4999 posts)
  
Join Date: May 2003
Location: Dallas
Posts: 4,555 kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level) 
Time spent in forums: 1 Month 2 Days 7 h 49 m 53 sec
Reputation Power: 630
Can you define "awful"? Post a URL or show us a screen-cap

gary
Reply With Quote
  #8  
Old April 14th, 2004, 04:01 AM
agmogg agmogg is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Feb 2003
Posts: 202 agmogg User rank is Lance Corporal (50 - 100 Reputation Level)agmogg User rank is Lance Corporal (50 - 100 Reputation Level)agmogg User rank is Lance Corporal (50 - 100 Reputation Level) 
Time spent in forums: 1 Day 4 h 16 m 6 sec
Reputation Power: 6
Send a message via AIM to agmogg
screen caps
Hi

here are the screen caps so you can see what i mean
Attached Images
File Type: jpg mozilla.jpg (73.0 KB, 74 views)
File Type: jpg ie6.jpg (71.6 KB, 73 views)
Reply With Quote
  #9  
Old April 14th, 2004, 02:15 PM
DEfusion DEfusion is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jan 2003
Posts: 288 DEfusion User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 9 h 26 m 45 sec
Reputation Power: 6
The code posted at the top works fine for me in IE 6 when you take kk5st suggestions on board.

Although I am testing it in XHTML strict & if you throw IE 6 into quirks mode it acts up a little, but not as bad as your screen shot.

Do you have the updated HTML & CSS for us to look at?

-D
Reply With Quote
Reply

Viewing: Dev Shed Forums > Web Design > CSS Help > more css sizing problems please help

« Previous Thread | Next Thread »

Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump


Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 





© 2003-2008 by Developer Shed. All rights reserved. DS Cluster 4 hosted by Hostway.