CSS Frusteration

  • s15199d
  • Expert
  • Expert
  • User avatar
  • Posts: 524
  • Loc: NC, USA

Post 3+ Months Ago

I'm teaching myself CSS combining some tutorials I've found. I've mocked up a dummy page, and well everything is all very close to the way I want it, but not quite.

I'll post the bits of my CSS that I feel are pertanate to this post...as the entire CSS file has gotten a little out of control length wise:

Here's my CSS:
Code: [ Select ]
body{
  margin:0px;
  padding:0px;
}
div{
  margin:0px;
  padding:0px;
  border: 1px solid black;
    border-color: #c0c0c0;
}
div#noborder{
  padding:0px;
  border: 0px;
    margin:0px;
}
.title{
  height:100px;
    background-color: #FE0000;
    text-align:center;
}
.navigation{
    top: 70px;
    text-align:center;
}
#Lcontent{
  position:absolute;
  left:10px;
  top:120px;
  width:200px;
    padding: 5px;
}
#Mcontent{
    position:absolute;
  left:220px;
    right: 220px;
  top:120px;
    padding: 5px;
}
#Rcontent{
  position:absolute;
    right: 10px;
  top:120px;
  width:200px;
    padding: 5px;
}
.botnav{
    bottom: 10px;
    text-align:center;
}
  1. body{
  2.   margin:0px;
  3.   padding:0px;
  4. }
  5. div{
  6.   margin:0px;
  7.   padding:0px;
  8.   border: 1px solid black;
  9.     border-color: #c0c0c0;
  10. }
  11. div#noborder{
  12.   padding:0px;
  13.   border: 0px;
  14.     margin:0px;
  15. }
  16. .title{
  17.   height:100px;
  18.     background-color: #FE0000;
  19.     text-align:center;
  20. }
  21. .navigation{
  22.     top: 70px;
  23.     text-align:center;
  24. }
  25. #Lcontent{
  26.   position:absolute;
  27.   left:10px;
  28.   top:120px;
  29.   width:200px;
  30.     padding: 5px;
  31. }
  32. #Mcontent{
  33.     position:absolute;
  34.   left:220px;
  35.     right: 220px;
  36.   top:120px;
  37.     padding: 5px;
  38. }
  39. #Rcontent{
  40.   position:absolute;
  41.     right: 10px;
  42.   top:120px;
  43.   width:200px;
  44.     padding: 5px;
  45. }
  46. .botnav{
  47.     bottom: 10px;
  48.     text-align:center;
  49. }


Here's the HTML:
Code: [ Select ]
<BODY>

<div class=title><IMG src="toplogo.jpg"></div>
<div id=noborder class=navigation>
    <A href="index.htm">Home</a> | <A href="about.htm">About Us</a> | <A href="sitemap.htm">Site Map</a>
</div>
<div id=Lcontent>
    <span class=text>blah blah blah</span>
</div>
<div id=Mcontent>
    <span class=text>blah blah blah</span>
</div>
<div id=Rcontent>
    <span class=text>blah blah blah</span>
</div>

<div id=noborder class=botnav>
    <A href="help.htm">Help</A> | <A href="contact.htm">Contact Us</A> | <A href="locate.htm">Locations</A>
<div>

</BODY>
  1. <BODY>
  2. <div class=title><IMG src="toplogo.jpg"></div>
  3. <div id=noborder class=navigation>
  4.     <A href="index.htm">Home</a> | <A href="about.htm">About Us</a> | <A href="sitemap.htm">Site Map</a>
  5. </div>
  6. <div id=Lcontent>
  7.     <span class=text>blah blah blah</span>
  8. </div>
  9. <div id=Mcontent>
  10.     <span class=text>blah blah blah</span>
  11. </div>
  12. <div id=Rcontent>
  13.     <span class=text>blah blah blah</span>
  14. </div>
  15. <div id=noborder class=botnav>
  16.     <A href="help.htm">Help</A> | <A href="contact.htm">Contact Us</A> | <A href="locate.htm">Locations</A>
  17. <div>
  18. </BODY>


I hate posting that much code. Sorry!

Here's the problem w/ this code right now. Currently everything is correctly positioned horizontally. But, the topnav & botnav are not positioning correctly vertically. B/c I had to remove position:absolute for the text-align:center to work.

Any help/responses are greatly appreciated!
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

Ok, I don't think it is the position:absolute messing you about as such.Due to the fact that the rest of the site is layed out with pos abs you will probably have to use it. The problem is that IE collapses boxes that are position:absolute; to the width of the contained text.

The only soultion I have ever found for this is to do something like this:

http://www.caffeinefuelled.net/richard-hotlink/blah.htm

I have put an empty span in there and floated it to the right. This forces the div to expand to it's fullest width. Possibly the dirtiest hack in the world, but when you are hacking for the dirtiest browser in the world .... :lol:
  • s15199d
  • Expert
  • Expert
  • User avatar
  • Posts: 524
  • Loc: NC, USA

Post 3+ Months Ago

all hail RTM

<img src="http://img75.photobucket.com/albums/v229/s15199d/bowdown.gif">

thanks soo much for walking me through this! thanks for your time man!

really I was trying to meld the centering & fluid design tuts from your caffeinefulled.net

i haven't completely mastered the understanding of the float in CSS it's kinda misterious to me. But, I'll devote some more time to following your tut...and see where that gets me. Thanks for all your help/patience!
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

s15199d wrote:
i haven't completely mastered the understanding of the float in CSS it's kinda misterious to me.


The floating span thing was something I did a month or so ago, and had completely forgotten about, I'm actually really glad you reminded me of that.

The float is the buggiest of buggy properties. There are so many IE bugs with the float it's unbelieveable. Best bet is to avoid floating unless you really need it. It's part of the reason my float tutorials are taking so long, it scares me lol
  • s15199d
  • Expert
  • Expert
  • User avatar
  • Posts: 524
  • Loc: NC, USA

Post 3+ Months Ago

thanks again RTM...I'm really pleased w/ my dummy page

it's the first CSS positioning I've done, and I'm thoroughly stoked about it's appearance!!!!

Deffinately a break from all the tables I build & framesets I use here in my work environment. I feel like I've been liberated from the confines of tables.

I have soo much to learn to make some really cool designs, but w/out your tut I'd still be totally in the dark! I'm gonna work on better understanding the float, and then I'm gonna research z-index. I think w/ those tools and the ones I'm learning right now...I'll be fairly well set.

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 47 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.