PDA

Click to See Complete Forum and Search --> : Help with my site.

Crystal Shards
03-12-2007, 04:19 AM
This is what it looks like:

http://dodds.team2037.com/

This is what I'd like to edit:

http://dodds.team2037.com/snapshot.jpg

Can anyone help me?

~Crystal
Centauri
03-12-2007, 06:34 AM
All the negative margins and IE hacks should be an indication the layout needs to be re-evaluated. With a classic fixed left and right columns / fluid centre column layout, it is much better to float the left column left, float the right column right, and allow the centre column to nestle between naturally (with the aid of margins, or, in this case, borders). The only downside to this positioning is that the left and right columns must be declared before the centre column in the html.

You also have a lot of unnecessary divs and classes - elements may be styled directly without having to stick them in a container.

Anyway, I had a play and came up with this html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>[Black Hole: Crystal's Test Site]</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Description" content="A website for European FIRST teams." />
<meta name="Keywords" content="team, 2037, first, robotics, nasa, twisted, logic, competition, afnorth, international, school, brunssum, netherlands, dodea, dodds" />
<meta http-equiv="Content-Language" content="en-us" />
<meta name="netinsert" content="0.0.1.4.1.4.1" />
<meta name="robots" content="all"/>
<meta name="authors" content="Crystal Steltenpohl, Team 2037"/>
<style type="text/css">
@import url("css.css");
</style>
</head>
<body>

<div id="header"><h1>[Black Hole]</h1></div>

<div id="left">
<h2>Site Navigation</h2>
<a href="http://www.dodds.team2037.com" title="Home">The only page</a><br/>
<a href="http://www.dodds.team2037.com" title="Home">The only page</a><br/>
<a href="http://www.dodds.team2037.com" title="Home">The only page</a><br/>
<a href="http://www.dodds.team2037.com" title="Home">The only page</a><br/>
<a href="http://www.dodds.team2037.com" title="Home">The only page</a><br/>
<a href="http://www.dodds.team2037.com" title="Home">The only page</a><br/>
<a href="http://www.dodds.team2037.com" title="Home">The only page</a><br/>
<a href="http://www.dodds.team2037.com" title="Home">The only page</a><br/>
<a href="http://www.dodds.team2037.com" title="Home">The only page</a><br/>
<a href="http://www.dodds.team2037.com" title="Home">The only page</a><br/>
<a href="http://www.dodds.team2037.com" title="Home">The only page</a><br/>
<a href="http://www.dodds.team2037.com" title="Home">The only page</a><br/>
<a href="http://www.dodds.team2037.com" title="Home">The only page</a><br/>
</div>

<div id="right">
<h2>Other Links</h2>
<a href="http://www.team2037.com" title="Team 2037">Team 2037!</a><br/>
<a href="http://www.team2037.com" title="Team 2037">Team 2037!</a><br/>
<a href="http://www.team2037.com" title="Team 2037">Team 2037!</a><br/>
<a href="http://www.team2037.com" title="Team 2037">Team 2037!</a><br/>
<a href="http://www.team2037.com" title="Team 2037">Team 2037!</a><br/>
<a href="http://www.team2037.com" title="Team 2037">Team 2037!</a><br/>
<a href="http://www.team2037.com" title="Team 2037">Team 2037!</a><br/>
<a href="http://www.team2037.com" title="Team 2037">Team 2037!</a><br/>
<a href="http://www.team2037.com" title="Team 2037">Team 2037!</a><br/>
</div>

<div id="center">
<h1>[Welcome To The Black Hole]</h1>
<p>Prepare to have your life sucked out of you, sucka.</p>
<p>Haha just kidding. No but really. Team 2037 freaking rocks. I can't wait until this site looks really good and everything 'cause then people will be like "OMG WE LOVE YOU TEAM 2037!" and we'll be like, "Yeah. We know. We know." Because we rock like that. Because life is amazing. There's nothing more beautiful than love.</p>
<p>Man I sound like I'm high. Don't do drugs kids. They're bad. Very very bad. They lead to you doing stupid stuff like... thinking you can swim. Well if you can swim you'd be thinking correctly but DRUGS INHIBIT YOUR BRAIN OKAY? THAT'S THE MORAL OF THE STORY. THEY ARE BAD. Why doesn't anyone ever listen to me? Jesus.</p>
<p>By the way this isn't the real name of our site. I just felt like making a stupid banner. =)</p>
<p><a href="http://jigsaw.w3.org/css-validator/"><img src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!"/></a><a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict"/></a></p>
</div>

<div id="footer">Copyright to Team 2037 and AFNORTH and Crystal and Kevin and all that fun stuff.</div>

</body>
</html>
and this css * {
margin: 0;
padding: 0;
}
body {
font-family: "Lucida Grande", Verdana, "Trebuchet MS", sans-serif;
min-width: 600px;
background-color: #E6E6E6;
font-size: 16px;
}
p {
margin: 10px 0;
}
img {
border: 0;
}

#header {
background-color: #FFFFFF;
background-image: url(headflow.jpg);
background-repeat: repeat-x;
border: 1px solid #163740;
text-align: left;
height: 125px;
}
#header h1 {
display: inline;
font-size: 36pt;
font-weight: bold;
text-align: center;
}

#left {
background-color: transparent;
color: #FFFFFF;
width: 180px;
float: left;
}
#right {
background-color: transparent;
color: #FFFFFF;
width: 130px;
float: right;
}
#left h2, #right h2 {
background-color: Transparent;
background-image: url(flow.jpg);
background-repeat: repeat-x;
border-bottom: 1px solid #163740;
color: #122E36;
height: 25px;
display: block;
font-size: 20px;
font-weight: normal;
line-height: 25px;
text-align: center;
}
#left a, #right a {
margin-left: 10px;
}

#center {
background-color: #000000;
color: #FFFFFF;
padding: 0 20px;
border-left: 180px solid #7A9AA3;
border-right: 130px solid #7A9AA3;
}
#center h1 {
text-align: center;
padding: 20px 0;
}

#footer {
background: #E6E6E6;
clear: both;
font-size: 16pt;
padding: 0.3em 0;
text-align: center;
}


Note that I used wide coloured borders on the centre content to act as backgrounds for the side columns, making it look as though the side columns extend full height.

Cheers
Graeme
WebJoel
03-12-2007, 04:29 PM
Oh that is jus' beautiful. :D -I worked all morning on something very similar to this (and came up with a mediocre-similar effect, but this is better!). :)
Centauri
03-12-2007, 04:32 PM
Oh that is jus' beautiful. :D -I worked all morning on something very similar to this (and came up with a mediocre-similar effect, but this is better!). :)

Don't you just hate that ... :D
Sometimes it seems like we are racing each other to rework a layout ;)

Cheers
Graeme
The Old Sarge
03-13-2007, 10:33 AM
... The only downside to this positioning is that the left and right columns must be declared before the centre column in the html.

If I understand you correctly, would not this little trick (http://www.bbd.com/stylin/sections/chapter6.htm) "fix" that?
Centauri
03-13-2007, 03:56 PM
Its those negative margins that indicate the elements of the layout are being "forced" into unnatural positions, and is more likely to be the cause of something "breaking" in less compliant browsers. I would much rather mark up the html in such an order to reflect the natural layout.

Cheers
Graeme
Crystal Shards
03-14-2007, 03:10 AM
Awesome! That works a lot better.

Now, I only have one last request...How do I make the footer a certain height and bring the content part go down?

So instead of this: http://dodds.team2037.com/snap.gif

I get this: http://dodds.team2037.com/desired.gif

(That image isn't exact, but that's the general idea.)

Thanks so much. This will be easier to edit and customize. I'm trying to make it so it works before I make it pretty... The last site I did I made it pretty and had a hard time making it work... And now it works but it's not as easy to work with as it could be.

~Crystal
Centauri
03-14-2007, 06:10 AM
Getting a footer to sit no higher than the bottom of the screen is relatively easy if it weren't for Internet Explorer.........

Trick here is to make the center column be at least full height. The only RELIABLE height reference is 100% of the screen height. As the columns sit below the header, 100% height on the columns will be 100% screen height PLUS be positioned below the header, making them hang way below screen bottom. If the header is positioned absolutely (a valid use of absolute positioning), the column will be positioned at the top of the screen underneath the header, so 100% minimum height can be used. Additional top padding on the #center h1 tag pushes the content down so it is not covered by the header. As the bottom of the center column will be at least the bottom of the screen, the footer would normally be just out of view. Here I have made the footer height 30px, so a negative top margin on the footer "pulls" it back up onto screen - a method I don't care for, but unavoidable. To prevent the footer covering column content, 30px of bottom padding is applied to the last paragraph.

And then there is IE........:mad:
Of course, minimum-height doesn't work in IE6, but it treats height as minimum-height, so we feed IE6 this via a * html css rule. Only problem here is that as soon as a height (any height) is applied to the centre column, the whole column tries to avoid the side floats in IE (why do we have to put up with this browser....). The way around this is to make the left and right columns absolutely positioned instead of floated...... :mad: :mad:

Anyway, only change to html is addition of a class to the last paragraph <p class="spacer"><a href="http://jigsaw.w3.org/css-validator/"><img src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!"/></a><a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict"/></a></p>

The new css is * {
margin: 0;
padding: 0;
}
html, body {
min-height: 100%;
height: 100%;
}
body {
font-family: "Lucida Grande", Verdana, "Trebuchet MS", sans-serif;
min-width: 600px;
background-color: #E6E6E6;
font-size: 16px;
}
p {
margin: 10px 0;
}
img {
border: 0;
}
#header {
background-color: #FFFFFF;
background-image: url(headflow.jpg);
background-repeat: repeat-x;
text-align: left;
height: 125px;
position: absolute;
width: 100%;
border-bottom: 1px solid #163740;
border-top: 1px solid #163740;
left: 0px;
top: 0px;
}
#header h1 {
display: inline;
font-size: 36pt;
font-weight: bold;
text-align: center;
}

#left {
background-color: transparent;
color: #FFFFFF;
width: 180px;
position: absolute;
left: 0px;
top: 127px;
}
#right {
background-color: transparent;
color: #FFFFFF;
width: 130px;
position: absolute;
right: 0px;
top: 127px;
}
#left h2, #right h2 {
background-color: Transparent;
background-image: url(flow.jpg);
background-repeat: repeat-x;
border-bottom: 1px solid #163740;
color: #122E36;
height: 25px;
display: block;
font-size: 20px;
font-weight: normal;
line-height: 25px;
text-align: center;
}
#left a, #right a {
margin-left: 10px;
}


#center {
background-color: #000000;
color: #FFFFFF;
border-left: 180px solid #7A9AA3;
border-right: 130px solid #7A9AA3;
min-height: 100%;
padding: 0 20px;
}
* html #center {
height: 100%;
}
#center h1 {
text-align: center;
padding: 147px 0 20px;
}
.spacer {
padding-bottom: 30px;
}


#footer {
background: #E6E6E6;
font-size: 16pt;
text-align: center;
height: 30px;
line-height: 30px;
margin-top: -30px;
}

Note the html and body are set to height of 100% first to provide the reference height for the column.

Cheers
Graeme
Crystal Shards
03-16-2007, 03:05 AM
Thank you very much!

~Crystal