<help>Divs</help>
Brethren
I am having a little trouble with positioning <div>'s. I am trying to use 4, header (t1), logo (im), sidebar (side) and main (main), I can get the 3 to position correctly, main does not want to slot in at all, it just sits underneath.
Here's my CSS
| Quote: |
| div.t1 {position: relative; border-style: solid; border-width; 1px; border-color: #cc174f; background-color: #cc174f; width: 83%}
div.im {position: relative} div.main {position: relative; align: right; width: 80%} div.side {position:relative; background-color: #036; width: 15%} |
I've tred putting them in different orders, but to no avail. What me doing wrong
Thanks guys
Mike Abbott
Accessible to everyone
Share: 
Well, Mike, you're not positioning anything at all. 
You're saying that all four <div>s should be offset relative to their natural positions, but you don't provide any offsets. Therefore nothing moves from its static position. You need to specify one or more of the following attributes: top, right, bottom, or left.
If you specify 'top:1em', the <div> will shift downward one font unit. Think of it as an extra margin, if you will. To move somthing upward, specify either 'top:-1em' or 'bottom:1em'.
Although I don't know what you aim to accomplish, I doubt that 'position:relative' is what you really want. Relative positioning is rarely very useful, except to make an element 'positioned' so that you can use absolute positioning on its descendant elements. Sorry about the jargon, let me know if you didn't understand the last part.
Can you describe how you would like those four <div>s in relation to each other, and also include a brief sample of the associated HTML?
BTW, there is no CSS property called 'align'. Do you mean 'text-align' or were you attempting to shift the whole <div> to the right side of the viewport?
Tommy has left the building
Share:
Hi Tommy. As I say, inexperience counts
The effect I'm looking for is the same as most web pages <crude>
Header Logo
S Main body
i of text
d
e
The align was, I thought, a positioning element
Here is an extract from the body coding, XHTML 1.0 transitional
| Quote: |
| <body>
<div class="im"><img class="head" src="Image2.gif" align="right" hspace="12" vspace="1" alt="Chartered Management Institute logo" /></div> <div class="t1"> <h1>Integrated Management System</h1> <h3 class="c3">For Data Protection, Quality, Health & Safety</h3> </div> <div class="side"> <h3 class="c3">Links</h3> <ul class="menu"> <li><strong><abbr title="Eye Emm Ess">IMS</abbr> general</strong></li> ...... </div> <div class="main"> <h3 class="c5">Welcome</h3> <p>.....</p> <h5>This page was updated and validated on 22 March 2004</h5> </div> <img src="Image4.gif" width="200" height="125" align="right" hspace="1" alt="National Safety Award winner 2001" /> <p><a href="http://validator.w3.org/check/referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0!" height="31" width="88" /></a></p> </body> </html> |
Thanks for all your help
Mike Abbott
Accessible to everyone
Share:
I can't find the link off hand but I recall a site which had collected a number of pre-configured flexible CSS layouts which are available to download. I know that there are some at http://www.saila.com and http://www.realworldstyle.com. If you haven't created a layout before, you could continue to play with CSS but for speed, you might want to consider using one of these as starting points and then adapting one for your needs. I struggled immensely with my relatively simple layout in my personal web site and I wish I had thought to use one of the others.Jules
Share:
Something like this, perhaps? You didn't specify the dimensions of "Image2.gif", so I'll make a guess. You should also remove all presentational attributes from your XHTML if you use the CSS solution. (Stuff like 'align', 'hspace', 'vspace' etc. The 'width' and 'height' for images should be left in place, since they're useful and not deprecated.)
You might also think about using IDs rather than classes for stuff that will only occur once on a page (like 'im', 't1', 'side', 'main').
Oh, and I had to introduce an ID for you award image (which shouldn't be on its own in the <body> but be enclosed in a <div> BTW).
| Code: |
|
.im { position: absolute; top: 0; right: 0; width: 100px; /* Image width */ height: 40px; /* Image height */ } .t1 { margin-right: 112px; /* Image width + 12px hspace */ } .side { float: left; width: 10em; /* Or whatever you need. */ } .main { margin-left: 11em; /* To avoid text wrapping under the side menu. */ } #award { /* ID I invented for the award icon */ clear: both; float: right; width: 201px; /* 200px image width + 1px hspace */ height: 125px; } |
If you'd nest the logo image inside the 't1' <div>, you can float it to the right and not have to mess with absolute positioning.
Tommy has left the building
Share:
Thanks Tommy.
I've butchered my way around your coding and it's done what I want.
Image 2 is sized 95px x 105px and I have made it fit using an extra line of CSS coding otherwise the logo takes up a quarter of the page.
Thanks again
42
Mike Abbott
Accessible to everyone
Share:
No problem at all.
For good browsers, you can use scaling to ensure that the image doesn't take up a disproportionate part of screen real estate (max-width). It can prevent a fluid layout from breaking when the viewport shrinks, but of course it doesn't work in IE.
Tommy has left the building
Share:
| Jules wrote: |
| I can't find the link off hand but I recall a site which had collected a number of pre-configured flexible CSS layouts which are available to download. |
Jules, you may or may not be thinking of the Three column layout section of the CSS Wiki
It is a nice compendium of links to various articles, tutorials, and layouts, including a basic "compatibilty" chart.
As an aside, the rest of the [rul=http://css-discuss.incutio.com/?page=FrontPage]CSS Wiki[/url] is more than worth a minute or two of browsing. A first class resource to say the least...
Cheers,
feather.
Share:
Or maybe Layout-O-Matic?Tommy has left the building
Share:
| feather wrote: |
| Jules, you may or may not be thinking of the Three column layout section of the CSS Wiki |
Yes, that was the one.
Jules
Share:
Just want to make sure I am coding right.
To extend a div to make sure it is an equivalent depth to the adjacent one (in this case side menu and main text area) I have added
| Quote: |
| padding-bottom: 13em |
Mike Abbott
Accessible to everyone
Share:
That sounds like a brittle solution, Mike.
With a floating menu next to a non-floating content area, you could do something like this to make the content area at least as high as the menu:
| Code: |
| <div>
<div id="menu">Left-floated menu</div> <div id="content">Content area with left margin to clear the menu</div> <div class="cleared"> </div> </div> |
and
| Code: |
| .cleared {clear:both; font-size:0} |
If the content can sometimes be longer than the menu, and you wish the menu color to extend all the way down, you need to set the background on the 'wrapper' <div> and make the menu transparent. This can be rather tricky to get right, but it's doable.
Tommy has left the building
Share:
| TOOLman wrote: | ||||
and
|
I must admit that I hate to use an essentially empty div simply to clear the bottom of all other "columns". Is this technique a hack to accomodate browser's weak interpretation of the CSS clear property? Why could you not incorporate clear:both into the style rule of <div id="footer">?
I seem to recall that <br clear="both"> worked although I am not certain that I want to use <br> any longer.
Can someone explain why the empty div is necessary?
Jules
Share:
You could incorporate the 'clear' attribute in the footer, of course. Using a wrapping <div> allows you to style it in certain ways, e.g. to give the appearance of a menu extending to the bottom of the content. In short, it's more flexible.
The empty <div> needs to be inside that wrapping <div>, so the footer is out in that case. The non-breaking space and the zero 'font-size' property are necessary because Mozilla won't render an empty <div> unless you specify an explicit height (>0). If you do that, IE will treat 'height' as 'min-height' and you'll have an unwanted full-size space above your footer.
It's a kludge. Until CSS gives us better support for columnar output (and browsers support it, and people have upgraded to those browsers) kludges will be necessary for certain layouts. Still, it's a lot less extra code than a table hack, and it's not semantically wrong.
I agree with you Jules, I'd rather not have to use that <div>, but there you go.
Tommy has left the building
Share:
I'm not trying to use an empty <div> perhaps I didn't explain myself well enough.
The page I have has a menu <div> on the left hand side with links. There are only 3 links and so the <div> finishes just under these, far shorter than the main text area. All I wanted to do was extend the menu so it looks as if it is the same(ish) size as the text area. It's more appearance than anything.
BTW, all my work is only on an Intranet at the moment, I will get round to publishing one day
Mike Abbott
Accessible to everyone
Share: