Hello
I have created this website, following some of the tips shown at <!-- m --><a class="postlink" href="http://glish.com/css/">http://glish.com/css/</a><!-- m -->
The url for the website is <!-- m --><a class="postlink" href="http://pot.lsd.ro/sns">http://pot.lsd.ro/sns</a><!-- m -->
i have a menu in the left side of the page:
#leftmenu {font-size: 13px;position: absolute;left:5px; top:100px;width:150px; background-color: #FFF;}
and the text content in the middle is:
#centercontent {background-color: #FFF; margin-left: 155px; margin-right: 210px;text-align: justify;}
the problem is I can't put a copyright note bellow both of them.. if the middle-text is long, it looks kinda ok.. but if it's short, the copyright note is shown in the right of the menu instead of below it (see <!-- m --><a class="postlink" href="http://pot.lsd.ro/sns/index.php?page=articole">http://pot.lsd.ro/sns/index.php?page=articole</a><!-- m --> )
i hear that i can't do this if i continue to use that absolute positioned menu, but i worked a lot at the layout and design, don't want (have time) to start over..
please, give me some tips on how to put the copyright note bellow everything..
(tried with clear:both, and more)...
thanksWell I think that it's OK as it is but, if you want to, instead of using absolute positioning, you could just give the side-bar div a 5px top margin and reduced the margin of the main content div. Then if you were to have a div tag that incompassed them both, it would stretch to the height of the tallest div that it contains, then underneath that you could have your copyright notice.Originally posted by lavalamp
instead of using absolute positioning, you could just give the side-bar div a 5px top margin and reduced the margin of the main content div.
Huh? What do you mean? If the side-bar is not positioned or floated, it will appear above the main content and not beside it.
Then if you were to have a div tag that incompassed them both, it would stretch to the height of the tallest div that it contains, then underneath that you could have your copyright notice.
No. Absolutely positioned elements are taken outside the normal flow of the text. Hence the copyright notice will be displayed immediately below the main content.
Originally posted by zamolxes
Keeping other things same, you can float the left menu:
#leftmenu {
font-size: 13px;
/* We will float the menu, not position it...
position: absolute; left:5px; top:100px; */
float: left; margin-left: 5px;
width:150px;
background-color: #FFF;
}
And to place the bottom below all the links and main contents, you'll have to add
#copyright {
/* invalid float: bottom; */
text-align: center;
margin: 30px 200px 0 200px;
clear: left;
}
Note: I have commented out the parts of your CSS that need to be deleted, so that you can see what parts have been changed.I know some basic css for a long while now, but i only used it for changing the way html tags look (like inputs, anchors, and so on) , and didn't learn very much about positioning, layout and so. Heh-heh used tables for that.
So this being my first site where I decided to use css and divs for layout, I am still a novice at this. I should read more of those w3 specs
anyway, thank you for your replies, the problem is solved. I knew what float did, but didn't thought it would be that easy to solve my problem.
Oh and that "float bottom" was there because I was desperatly trying miscelaneous stupid & incorrect css attributes just before posting
so .. problem solved ...
maybe you managed to take a look at the design.. what do you think? heh it's all vi & gimp
nkaisare, what I meant was that, INSTEAD of using absolute positioning, that he could simply change the margins around the sidebar and also around around the main content div so that it would look the same but no absolute positioning would be needed, then put the whole of the content of the page in a div except for the copywrite notice, which would be pushed to the bottom of the page after all of the page content.Here's an example of what I meant.Originally posted by lavalamp
Here's an example of what I meant.
i see.. well the ideea is usefull, but i decided to use floats .. everything works as it should now. it's not very nice to use position:absolute when you don't have to
thanks for the tips !Originally posted by lavalamp
Here's an example of what I meant.
Interesting example.
However, it works only in quirks mode not in standards mode. You have defined the two elements inline, which means that they cannot have the width property. Width is NOT defined inline elements.
<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/visudet.html#the-width-property">http://www.w3.org/TR/REC-CSS2/visudet.h ... h-property</a><!-- m -->
You can use display: inline-block instead; however its not well supported in all browsers. What inline-block does is it allows the element to carry properties like a block level element; however the element itself is layed out as inline content (exactly what happens in your example).Hmm... I didn't know about the width and inline thing, it seems a little strange to me that it isn't standard, I just assumed it would be.
Originally posted by lavalamp
Hmm... I didn't know about the width and inline thing, it seems a little strange to me that it isn't standard, I just assumed it would be.
It is standard. Just not the way you interpreted it (or IE interprets it). The standards say that width is applicable to all but "non-replaced inline elements". If its inline element, it should take its natural width and height. Think about letters. How does this display:
---
This is the first line
Look how this sentence displays and...
see this is the next line.
---
Notice, all the above being inline, how the sentences get displayed. If its inline element, how can you specify width and height.
(Exception: images, which are replaced inline elements)I would think that if you specified a width and height (as you would for a td tag) then when the text got too long for the allocated width that it would simply ignore the height and push the bottom of the div tag down (as it would for a td tag).Well not quite. TD is a block level element, not an inline element. Inline elements can have margin and padding, but not width/height.
Even if this sounds wierd, you have to abide by these rules, as all browsers except IE/Win apply this rule correctly (ie no width for inline elements).Hmm.. ok.. the floats work great, site looks great..
just one tiny problem
Apparently <table>s act like they have "clear: both"
please check <!-- m --><a class="postlink" href="http://www.sns.ro/index.php?page=contact">http://www.sns.ro/index.php?page=contact</a><!-- m -->
(the small contact form, it's in a table)
and
<!-- m --><a class="postlink" href="http://www.sns.ro/index.php?page=server">http://www.sns.ro/index.php?page=server</a><!-- m -->
The problem only occures in Internet Explorer, and in rather large tables.
It looks / acts great in mozilla
thanks
I have created this website, following some of the tips shown at <!-- m --><a class="postlink" href="http://glish.com/css/">http://glish.com/css/</a><!-- m -->
The url for the website is <!-- m --><a class="postlink" href="http://pot.lsd.ro/sns">http://pot.lsd.ro/sns</a><!-- m -->
i have a menu in the left side of the page:
#leftmenu {font-size: 13px;position: absolute;left:5px; top:100px;width:150px; background-color: #FFF;}
and the text content in the middle is:
#centercontent {background-color: #FFF; margin-left: 155px; margin-right: 210px;text-align: justify;}
the problem is I can't put a copyright note bellow both of them.. if the middle-text is long, it looks kinda ok.. but if it's short, the copyright note is shown in the right of the menu instead of below it (see <!-- m --><a class="postlink" href="http://pot.lsd.ro/sns/index.php?page=articole">http://pot.lsd.ro/sns/index.php?page=articole</a><!-- m --> )
i hear that i can't do this if i continue to use that absolute positioned menu, but i worked a lot at the layout and design, don't want (have time) to start over..
please, give me some tips on how to put the copyright note bellow everything..
(tried with clear:both, and more)...
thanksWell I think that it's OK as it is but, if you want to, instead of using absolute positioning, you could just give the side-bar div a 5px top margin and reduced the margin of the main content div. Then if you were to have a div tag that incompassed them both, it would stretch to the height of the tallest div that it contains, then underneath that you could have your copyright notice.Originally posted by lavalamp
instead of using absolute positioning, you could just give the side-bar div a 5px top margin and reduced the margin of the main content div.
Huh? What do you mean? If the side-bar is not positioned or floated, it will appear above the main content and not beside it.
Then if you were to have a div tag that incompassed them both, it would stretch to the height of the tallest div that it contains, then underneath that you could have your copyright notice.
No. Absolutely positioned elements are taken outside the normal flow of the text. Hence the copyright notice will be displayed immediately below the main content.
Originally posted by zamolxes
Keeping other things same, you can float the left menu:
#leftmenu {
font-size: 13px;
/* We will float the menu, not position it...
position: absolute; left:5px; top:100px; */
float: left; margin-left: 5px;
width:150px;
background-color: #FFF;
}
And to place the bottom below all the links and main contents, you'll have to add
#copyright {
/* invalid float: bottom; */
text-align: center;
margin: 30px 200px 0 200px;
clear: left;
}
Note: I have commented out the parts of your CSS that need to be deleted, so that you can see what parts have been changed.I know some basic css for a long while now, but i only used it for changing the way html tags look (like inputs, anchors, and so on) , and didn't learn very much about positioning, layout and so. Heh-heh used tables for that.
So this being my first site where I decided to use css and divs for layout, I am still a novice at this. I should read more of those w3 specs
anyway, thank you for your replies, the problem is solved. I knew what float did, but didn't thought it would be that easy to solve my problem.
Oh and that "float bottom" was there because I was desperatly trying miscelaneous stupid & incorrect css attributes just before posting
so .. problem solved ...
maybe you managed to take a look at the design.. what do you think? heh it's all vi & gimp
nkaisare, what I meant was that, INSTEAD of using absolute positioning, that he could simply change the margins around the sidebar and also around around the main content div so that it would look the same but no absolute positioning would be needed, then put the whole of the content of the page in a div except for the copywrite notice, which would be pushed to the bottom of the page after all of the page content.Here's an example of what I meant.Originally posted by lavalamp Here's an example of what I meant.
i see.. well the ideea is usefull, but i decided to use floats .. everything works as it should now. it's not very nice to use position:absolute when you don't have to
thanks for the tips !Originally posted by lavalamp
Here's an example of what I meant.
Interesting example.
However, it works only in quirks mode not in standards mode. You have defined the two elements inline, which means that they cannot have the width property. Width is NOT defined inline elements.
<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/visudet.html#the-width-property">http://www.w3.org/TR/REC-CSS2/visudet.h ... h-property</a><!-- m -->
You can use display: inline-block instead; however its not well supported in all browsers. What inline-block does is it allows the element to carry properties like a block level element; however the element itself is layed out as inline content (exactly what happens in your example).Hmm... I didn't know about the width and inline thing, it seems a little strange to me that it isn't standard, I just assumed it would be.
Originally posted by lavalamp Hmm... I didn't know about the width and inline thing, it seems a little strange to me that it isn't standard, I just assumed it would be.
It is standard. Just not the way you interpreted it (or IE interprets it). The standards say that width is applicable to all but "non-replaced inline elements". If its inline element, it should take its natural width and height. Think about letters. How does this display:
---
This is the first line
Look how this sentence displays and...
see this is the next line.
---
Notice, all the above being inline, how the sentences get displayed. If its inline element, how can you specify width and height.
(Exception: images, which are replaced inline elements)I would think that if you specified a width and height (as you would for a td tag) then when the text got too long for the allocated width that it would simply ignore the height and push the bottom of the div tag down (as it would for a td tag).Well not quite. TD is a block level element, not an inline element. Inline elements can have margin and padding, but not width/height.
Even if this sounds wierd, you have to abide by these rules, as all browsers except IE/Win apply this rule correctly (ie no width for inline elements).Hmm.. ok.. the floats work great, site looks great..
just one tiny problem
Apparently <table>s act like they have "clear: both"
please check <!-- m --><a class="postlink" href="http://www.sns.ro/index.php?page=contact">http://www.sns.ro/index.php?page=contact</a><!-- m -->
(the small contact form, it's in a table)
and
<!-- m --><a class="postlink" href="http://www.sns.ro/index.php?page=server">http://www.sns.ro/index.php?page=server</a><!-- m -->
The problem only occures in Internet Explorer, and in rather large tables.
It looks / acts great in mozilla
thanks