13 replies [Last post]
infusion
Offline
Regular
Last seen: 17 years 7 weeks ago
Joined: 2005-08-14
Posts: 12
Points: 0

Hi everyone,

I've been having problems with my tableless layout. You see, I'm trying to create a 5 column layout (yeah i know it's kindda unconventional). and the content and the background don't follow accordingly. Visit http://simplydesign.info/temp to see what I mean. I've stripped the layout from anything else except some text for easy debugging.

Thanks in advance.[/url]

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 22 weeks 5 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Containers don't continue its height

You can't use IDs more than once.

Also, you're suffering from divitis.

Verschwindende wrote:
  • CSS doesn't make pies

infusion
Offline
Regular
Last seen: 17 years 7 weeks ago
Joined: 2005-08-14
Posts: 12
Points: 0

Containers don't continue its height

hi. thanks for your reply. i'm rather new to css having been a table guy all my life.

Anyway, could you care to explain? From what i understand, I cannot use div id's of the same kind more than once. I looked through my code and didn't see any id's used more than once. Could you point it out to me please?

Errmm... i know i'm using a lot of div's. Hehez. but how do u suggest that I could lower the number of div's i'm using? The only other way is using span i guess but i'm not sure.

Your help is greatly appreciated

Anonymous
Anonymous's picture
Guru

Containers don't continue its height

infusion wrote:
how do u suggest that I could lower the number of div's i'm using?

For starters:
<div class="container">
<div id="header"><img src="images/banner.gif" alt="" align="right" /></div>
</div>

could be changed to <h1><img src="images/banner.gif" alt="" /></h1>Also, drop the align="right" and define your layout in the css.

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 22 weeks 5 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Containers don't continue its height

Sorry, I read leftside1 as leftside.

 
<div id="leftSide1"> 
<span class="textStyle"> 
Hello World. This is the left side Version 2 
</span> 
</div> 


would be better as:

 
<div id="leftSide1"> 
<p>Hello World. This is the left side Version 2</p> 
</div> 


the paragraph doesn't need an ID or a class, it is targeted by

 
#leftSide1 p { 
 
} 


And it really isn't a good idea using names like leftSide1. For a start, it's too descriptive - what if you want to redesign your layout and have the contents of leftSide1 as a horizontal nav below the content?

At the very lest ditch the caps and call it leftside, it could cause you headaches later on Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

infusion
Offline
Regular
Last seen: 17 years 7 weeks ago
Joined: 2005-08-14
Posts: 12
Points: 0

Containers don't continue its height

triumph >> thanks for your comments. but i don't think using the h1 tag will work too well because the div that i'm nesting the image in has a repeating background.

thepineapplehead >> thanks once again for your quick response. I'll definitely look into doing the leftside div like what you mentioned. however, could you please point out to me the problem of why the #midSection block doesn't grow along with my text and that the text is stuck at one line only? thanks a lot

Anonymous
Anonymous's picture
Guru

Containers don't continue its height

infusion wrote:
triumph >> thanks for your comments. but i don't think using the h1 tag will work too well because the div that i'm nesting the image in has a repeating background.
Why does a repeating background deny you the use of the h1 element????????? :? :?: :?: :?: :?: :?: :?: :?:

infusion
Offline
Regular
Last seen: 17 years 7 weeks ago
Joined: 2005-08-14
Posts: 12
Points: 0

Containers don't continue its height

Triumph wrote:
infusion wrote:
triumph >> thanks for your comments. but i don't think using the h1 tag will work too well because the div that i'm nesting the image in has a repeating background.
Why does a repeating background deny you the use of the h1 element????????? :? :?: :?: :?: :?: :?: :?: :?:

pardon my ignorace. i'm really new at this
my original code is

<div id="header"><img src="images/banner.gif" alt="" align="right" /></div>

where the header block is the repeating background. So I assume that if i use the code you posted, it should be declared like this:-

h1 {
	background-image: url(images/repeater.gif);
	height: 250px;
}

is that right? once again, i apologize for my ignorance, i'm just doing it trial and error.

Anonymous
Anonymous's picture
Guru

Containers don't continue its height

infusion wrote:
h1 {
	background-image: url(images/repeater.gif);
	height: 250px;
}

is that right?Looks peachy to me. Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 38 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Containers don't continue its height

The midsection problem is due to perhaps the most common error with floats, people forget or aren't aware that a floats correct behavior is to break through it's parent container, a float is removed from the flow and does not expand parent containers. try adding overflow:auto to the midsection div and you will see it expand to enclose the float content.

A better technique is outlined in the link to "Clearing Float Containers" found on the forum index page.

Hugo.

P.S :? why are we using an h1 tag for a background image?

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

infusion
Offline
Regular
Last seen: 17 years 7 weeks ago
Joined: 2005-08-14
Posts: 12
Points: 0

Containers don't continue its height

Hugo wrote:
The midsection problem is due to perhaps the most common error with floats, people forget or aren't aware that a floats correct behavior is to break through it's parent container, a float is removed from the flow and does not expand parent containers. try adding overflow:auto to the midsection div and you will see it expand to enclose the float content.

A better technique is outlined in the link to "Clearing Float Containers" found on the forum index page.

Hugo.

P.S :? why are we using an h1 tag for a background image?

hugo > thanks for your reply. i'll try to look into the post you mentioned. but adding the overflow didn't work for me. I tried at random by putting height:100% to the midsection area and it worked but i'm not sure if it's a good practice. What would be your comments on this?

Errrm... I dunno about the h1 thing. I put it in a div initially and Triumph recommended me to use a h1 tag instead. So i'm not sure which is right.

Anonymous
Anonymous's picture
Guru

Containers don't continue its height

Hugo wrote:
P.S :? why are we using an h1 tag for a background image?
I suggested the use of h1 instead of <div class="container"> and <div id="header"> and not for the a body background image.

h1 is a header so the use of a div as a header makes no sense to me.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 38 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Containers don't continue its height

infusion wrote:
I tried at random by putting height:100% to the midsection area and it worked but i'm not sure if it's a good practice. What would be your comments on this?


Height 100% will cause you problems in compliant browsers as it will fix the height. This may look as though things are sorted if viewed in IE as it expands the container if it has any height value stated which is wrong.

Are you viewing in IE ? overflow auto should have worked in Firefox but the best solution is the link I mentioned as that takes into account the browser problems encountered with this problem.

with the H1 tag I was wondering how it was going to be used as really a h# tag is a textual heading tag. if for indexing purposes the h1 tag just has a background then you loose the value of that tag you could of course use at as an absolute url link to your site or use the h1 tag with text and an image replacement technique.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Anonymous
Anonymous's picture
Guru

Containers don't continue its height

Hugo wrote:
with the H1 tag I was wondering how it was going to be used as really a h# tag is a textual heading tag. if for indexing purposes the h1 tag just has a background then you loose the value of that tag you could of course use at as an absolute url link to your site or use the h1 tag with text and an image replacement technique.
I did use the word "could" and not "must". Wink

I was positive that the use of h1 as a header regardless of its content was semantic. I don't understand how it loses its value either way.