CSS Floats and resizing background

ony_gosshamer

ony_gosshamer

a.k.a. dundee
I'm slowly moving from my Illustrator template to HTML & CSS and I ran into this problem (if you want to know, this basic template will later be merged with the movable type engine):

here is the page: http://www.hippopocampe.org/agnusday/index.html
here is the css: http://www.hippopocampe.org/agnusday/images/df.css

How do I make it so the #secondcontent background resizes to the content of my float (the #scleft)? I could make the #scright section float instead but that wouldn't solve my problem cause there might be (depending on the page) more content on that side...

Do I have to change the way the sections are structured?

BTW, thanks in advance. I always come here when I run into a CSS problem and it seems that these forums are blessed with good, helping and competent people.
 
Make a rule in the CSS that looks like this:

Code: 
#spacer {
    clear: both;
    }


Then add the red part to your #scright div as shown here:

Code: 
<div id="scright">
<h1><img src="images/title_biblepassage_d.gif" height="17" width="150" /><br />
Luke 4, 14-21 : Epiphany 3</h1>
<p><em>14</em>Jesus returned to Galilee in the power of the Spirit, and......</p>
[color=red]<div id="spacer"></div>[/color]
</div>


You also need to get a valid doctype in there ASAP to ensure proper handling of the page across browsers. Based on what I saw in the code, you're probably going to want to use XHTML 1 Transitional. Below is the head section with the proper info inserted.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>AgnusDay 4.0</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" media="screen" href="images/df.css" />
</head>
 
I just read that IE6 for Windows reverts to a strict mode if you put a url in your doctype. This might effect one of your styles in that browser.
 
Thanks for the fast replies everyone.

mdnky: A big thank you for the code. I knew I had something to do with that clear thing. I owe you one. One the other hand, why is my page XHTML 1 Transitional instead of something else? And what does "transitional" mean here?

I understand it's all about web standards and and but does the doctype affect how my page is dispayed?

twister: ;)

BitWit: Ok. Then I ask my question again, how important is the doctype? What does those adresses actually communicate to the browser? My feeling is that, even though I try, I just can't satisfy everybody out there. But I'll try the page with the doctype and IE6 and I'll let you knwo tommorow.
 
Actually, I just did the test. (BTW, i love Transmit's in-app edition capability.)

IE6 was being a bitch until I dropped the doctype code. Not everything is displyed as it should be but the majority is. The #scleft lists seem to have a 50pixel padding on the right for some matter (actually it does this with IE on my mac as well). But the rest seems ok. Tweaking will be done.

À+
 
ony_gosshamer said:
why is my page XHTML 1 Transitional instead of something else? And what does "transitional" mean here?

I understand it's all about web standards and and but does the doctype affect how my page is dispayed?
Click to expand...

There's 3 types for XHTML 1.0 (Transitional, Strict, Frameset). Your page would be best done in Transitional, just because, well trust me on this...you don't wanna mess with strict. In strict things like target="_blank" aren't allowed. It's just what it says, strict. Very unforgiving of structural issues and coding errors. Transitional is much easier for someone who's starting out with XHTML, esp. if you're used to the old ways.

Think of it as a roadmap, more like the key on the roadmap that is, for the browser. It's main purpose is to inform the browsers about the kind of documents we are producing. By specifying a DOCTYPE we tell the browser how to handle the pages.


BitWit said:
I just read that IE6 for Windows reverts to a strict mode if you put a url in your doctype. This might effect one of your styles in that browser.
Click to expand...

Actually it allows the browser to know how to handle the page by referencing the doctype on the W3C server. When you forget the URL, browsers (compliant ones) go into 'Quirks Mode' which then causes issues with code.

http://www.alistapart.com/articles/doctype/
 
Thanks for the explanation, mdnky. The doctype sure makes sense now, especially when it helps display the page correctly.

I added the code and it works fine (like I said earlier) in Safari and IE, but I checked it out with Firebird it doesn't seem to like it very much... It displays it like it was before. Any clues?
 
Mkdky: Okay. My friend, I got my page validated, yeah for me. It even validated strict (after I changed the doctype, cause now I know what doctype is, or should I say DOCTYPE). Heh. It was actually simpler than I thought, i'll make sure i'm checking my page regularly.

Problem is, firefox (i was still calling it firebird) is still out... I'm sure It has something to do with the 'clear' float thing. Setting a variable height (inherit or auto) to it didn't work either. I you have nothing, it's ok, i'll come back to it later on.

Cat: Thanks for the link. I started reading it. I'm surprised Apple is ahead of the game on this and preaching it too.
 
I hate to say it, but you found a FireFox bug. If you issue is what i think it is. FireFox has a hard time making a section bigger than the content. You can't do height="100%" for example. Sorry, but you may have to live with it. My only suggestion would be to put some sort of tag around all of them. Like a new span or div tag. Did i help or only confuse more?
 
ony_gosshamer said:
Problem is, firefox (i was still calling it firebird) is still out... I'm sure It has something to do with the 'clear' float thing. Setting a variable height (inherit or auto) to it didn't work either. I you have nothing, it's ok, i'll come back to it later on.
Click to expand...

Try adding a few more entries to it and see what happens...

It's not so much a bug in Firefox/Firebird as it is a bug in how the layout is being handled. I don't see it as a huge issue though, as long as your content div (id="scright") is taller than the navigation.
 
Since you all seem to be pretty CSS smart here. I was wondering how do i make something centered with css?

What i'd really like to do is center my to green graphic on my SkyZone site. However, it's been placed 0px from the top and 0px from left and then 'fixed' in place. But i'd rather have it centered w/ the window. However i never see any 'align' within my CSS choices. Am I just missing it or do i just get rid of the positioning and put in center tags?
 
Cat said:
This might help.
Click to expand...

Ahh, now copy that code into bbedit, and change the doctype to the default bbedit transitional doctype that has the url in it, and watch the whole thing stop working for IE. Take the URL out of the Doctype, and its back to normal.
 
You must log in or register to reply here.
Back
Top