|
|
 |
|
|
Thread Tools | Display Modes |
Nov 8th, 2005, 2:18 PM
|
#1 |
|
Programmer
Join Date: Dec 2004
Location: UK
Posts: 53
Rep Power: 4
 |
Let's get this over and done with, once and for all [CSS enthusiasts this way]
Hello, the knowledgable folk of PF.
Lately, i've been reading several threads (on this forum and others) about the whole centering div's and pushing footer's down to the bottom of the page issue especially with CSS. I'm sure a lot of you have read the thread started by Obtruse_Man4 where a violent war is taking place (using words) as a result of arguments about this. Seeing as I also have/had (kinda solved it now) a problem with this myself I thought it wud be a nice idea to invite all competent web designers to post their templates and/or suggestions on: 1) Centering ****DIV***s with CSS; NOT images/text/tables inside divs which i am aware are centered using text-align, but the actual div box itself. More importantly , centering fixed-width (720px) divs. Here's an example of what i mean. Just preview this code in FF and IE and note that in both browsers the footer is at the bottom of the PAGE (not window) which is what a lot of ppl seem to want and that the content appears just fine. But it is only in IE that the actual div box is centered (blue box); FF does things properly (i think ...) and doesnt move the div.
<html>
<head><title> Div's </title>
<style type="text/css">
/* colored borders put on for visual effect only */
body{
height: 100%;
margin: 2px;
padding: 0;
}
#spacer{
height: 90%;
float: left;
width: 0px;
font-size: 1px; /* to make sure width is not overridden */
padding: 0;
margin: 0;
background-color: green; /* visual effect only */
}
#contentwrap{
width: 100%;
text-align: center;
padding: 0;
margin: 0;
}
#content{
width: 80%;
padding: 20px;
border-width: 1px;
border-style: solid;
border-color: blue;
}
#footer{
clear: both;
height: 10%;
border-width: 1px 0 1px 0;
border-style: solid;
border-color: red;
text-align: center;
vertical-align: middle;
padding: 0;
margin: 0;
}
p {
text-align: left;
}
</style>
</head>
<body>
<div id="spacer"></div>
<div id="contentwrap">
<div id="content">
<p>this is the content div</p>
<p> </p>
<br />
<img src="#" height="200px" width="100px" />
<p>more content and more and more and so on more content and more and more and so on more content and more and more and so
more content and more and more and so on more content and more and more and so on more content and more and more and so onon</p>
<p> </p>
<p>and even more</p>
</div><!-- content -->
</div><!-- contentwrap -->
<div id="footer">footer</div>
</body>
</html>2. Putting footers at the bottom of pages, with solutions for the "3-column" approach (I know these exist but I'm looking to collect them together here). I suppose i should also iterate that CSS layouts is what we're looking for here (sorry bja888 aka Bryan the Tables Evangelist) and good cross-platform compatibility. I just hope we achieve something through this thread cos the other ones seem to get nowhere at all. :O |
|
|
|
Nov 8th, 2005, 3:01 PM
|
#2 |
|
Hobbyist Programmer
Join Date: Nov 2005
Posts: 122
Rep Power: 3
|
The proper way to center things it by using margins.
As you can see in this thread, I demonstrate how to center things across all browsers. What exactly are you looking for from #2? --47.
__________________
"I'm going to become rich and famous when I invent a device that allows you to stab people in the face over the internet" |
|
|
|
|
Nov 8th, 2005, 4:14 PM
|
#3 | ||
|
Hobbyist Programmer
Join Date: Oct 2005
Location: Central, FL
Posts: 213
Rep Power: 0
  |
Quote:
Quote:
The page it rather inefficent. It gets the job done though and is cross-browser. Props for solveing the proublem!! I have trouble with the whole xhtml css 2 thing bacause it is based on guess and check. Not efficent but it alomst always gets the job done. megamind5005 was right, I love tables. Why? Because I always know where everything is going to be. I still stand by my solution if you want to use html. If you want to use xhtml megamind5005 has posted a better solution. |
||
|
|
|
|
Nov 8th, 2005, 4:22 PM
|
#4 | |
|
Hobbyist Programmer
Join Date: Nov 2005
Posts: 122
Rep Power: 3
|
Quote:
What is inefficient about that code? Looks perfectly fine to me. Take the CSS out and put it in an external [cachable] CSS file, and the HTML will be smaller, more concise and easier to understand than your tag-soup table template... http://www.westciv.com/style_master/...l/dead_layout/ http://davespicks.com/essays/notables.html http://www.workingwith.me.uk/tablefree/why http://www.hotdesign.com/seybold/index.html --47.
__________________
"I'm going to become rich and famous when I invent a device that allows you to stab people in the face over the internet" |
|
|
|
|
|
Nov 8th, 2005, 5:46 PM
|
#5 | |
|
Hobbyist Programmer
Join Date: Oct 2005
Location: Central, FL
Posts: 213
Rep Power: 0
|
Quote:
[html]#spacer{ height: 90%; float: left; width: 0px; font-size: 1px; /* to make sure width is not overridden */ padding: 0; margin: 0; background-color: green; /* visual effect only */ }[/html] The position of the bottom layer is compleatly dependent on this layer. I don't know about you but I would rather have one element (layer) controol its self. |
|
|
|
|
|
Nov 8th, 2005, 5:49 PM
|
#6 |
|
Hobbyist Programmer
Join Date: Nov 2005
Posts: 122
Rep Power: 3
|
Why? The positioning of one element in a page [any page] is entirely
dependant on the positioning of other elements. Coming from a tables for layout advocate such as yourself I find that comment a surprising one...  --47.
__________________
"I'm going to become rich and famous when I invent a device that allows you to stab people in the face over the internet" |
|
|
|
|
Nov 8th, 2005, 5:53 PM
|
#7 |
|
Hobbyist Programmer
Join Date: Oct 2005
Location: Central, FL
Posts: 213
Rep Power: 0
|
But the spacer goes behind the main content layer. I don't like 2 opjects existing in the same area.
|
|
|
|
|
Nov 8th, 2005, 5:57 PM
|
#8 |
|
Hobbyist Programmer
Join Date: Nov 2005
Posts: 122
Rep Power: 3
|
No, the spacer doesn't go anywhere. It is an empty, floated box, so
it takes up no space in the 'flow' of the document at all, and even if it did, you wouldn't be able to see it, as it's got nowt in it. It's as if it isn't even there...
__________________
"I'm going to become rich and famous when I invent a device that allows you to stab people in the face over the internet" |
|
|
|
|
Nov 9th, 2005, 2:49 PM
|
#9 |
|
Programmer
Join Date: Dec 2004
Location: UK
Posts: 53
Rep Power: 4
|
guys can we not have another bja888 hate-post thread please?! i know i kinda helped him out there to prove his point but i think 47's solution (margin: 0px auto; ) pretty much nullifies that. I was hoping starting this thread would spark an educated, mature and serious discussion rather than a pointless, childish and repeated debate over bja's obstinacy.
47: about #2, all i'm looking for is different ways of positioning a footer at the bottom of the page (not window, cos "fixed" doesnt work with IE so i dont bother with it). Not my problem really just that I've seen other ppl ask. I've got one way of doing it in my own example, just looking for different approaches. especially with 3-column pages, where the two columns on the sides may be longer than the middle column (just google it if you don't know what i mean, altho most will know). e.g. http://glish.com/css/7.asp
__________________
Tetris is so unrealistic |
|
|
|
|
Nov 9th, 2005, 2:59 PM
|
#10 |
|
Hobbyist Programmer
Join Date: Oct 2005
Location: Central, FL
Posts: 213
Rep Power: 0
|
I really really love you megamind5005! Its about time the voice of reason stepped in!
|
|
|
|
|
| Bookmarks |
| Currently Active Users Viewing This Thread: 1 (0 members and 1 guests) | |
| Thread Tools | |
| Display Modes | |
|
|
Linear Mode
