PDA

View Full Version : Learning CSS


Death Dream
03-26-2008, 08:32 PM
Alright so after being told to go the CSS way instead of the Table way which I am so use to I finally caved and did some searching.

While I found a great tutorial that helped me understand has to use DIV tags over Table tags I still can't help but become a little lost when I am told the following:

For the sake of this article, CSS code is within the same Web page, but it should always be attached as an external file.
Source: http://www.devarticles.com/c/a/Web-Style-Sheets/DIV-Based-Layout-with-CSS/3/

So you first make a page of code on various tables on a different file, lets say "style.css" and then you start to make your web page on another Main.html file using references of the ID names you gave on style.css. How do you make it to where Main.html pull's the information off of style.css?

Now I haven't read many tutorials but this one made the most sense to me, if I am getting it wrong point me in the right direction. As I learn I will be rebuilding my current website I am working on to more fit CSS and break away from Tables.

Thanks for all your help.

~Death Dream~

liquidmonkey
03-26-2008, 10:14 PM
i just starting learning css a week ago and yes, your on your way.
am also rebuilding my site using css :)
in your main.html, you will reference to various classes which are found in your style.css.
this way, if you have let's say 5 pages all using the .maintext class, you can change the font size in your style.css page and ALL 5 pages will update with the new information.
follow?

check out lynda.com for some fantastic tutorials on css and even dreamweaver with css.
they can be found on lynda.com or even on their sister site called isohunt.com :) heehee!

good luck!

Cary
03-26-2008, 11:39 PM
While I found a great tutorial that helped me understand has to use DIV tags over Table tags I still can't help but become a little lost when I am told the following...

Normally, you want to keep the styling in a separate file, but for tutorials it's often more convenient to embed the style sheet in the head of the html.

How do you make it to where Main.html pull's the information off of style.css?

In the head of Main.html you would include this bit of code:

<link rel="stylesheet" type="text/css" href="style.css">

You'll have to modify how that tag is closed for XHTML, but once it's there, the browser will load and cache the style sheet so it can style Main.html.

Death Dream
03-27-2008, 01:45 PM
this way, if you have let's say 5 pages all using the .maintext class, you can change the font size in your style.css page and ALL 5 pages will update with the new information.
follow?


Yeah that makes perfect sense.

I'm going to try to see what I can do and I will post my code here as I go and what I am trying to do.

~Death Dream~

Death Dream
03-27-2008, 02:37 PM
Ok this is the site I have done with tables so far: http://dd.adesadesmoines.com/base.html

Now I went ahead and drew some colors in photoshop around my areas I think I will need to make Div tags for: http://dd.adesadesmoines.com/DivLayout.jpg

Now my next question, on the Body party will I have to split that up into more div's to get the holder and nav section into the places I want? Like: http://dd.adesadesmoines.com/DivLayout2.jpg

~Death Dream~

Ricky55
03-27-2008, 11:24 PM
The navigation should be a CSS styled unordered list. I think you could do with doing a few tutorials first.

Cary
03-28-2008, 12:36 AM
Now I went ahead and drew some colors in photoshop around my areas I think I will need to make Div tags for...

You can only use a given ID once per page, but the same class can be used multiple times. With this in mind, instead of

<div id="game">...</div>

you should use

<div class="game">...</div>

And it's more common to call the bottom area the "footer" which would avoid the problem of using the "header" ID twice and would also make the code easier to understand at a glance.

Now my next question, on the Body part will I have to split that up into more div's to get the holder and nav section into the places I want?

No, you won't need to do that.

Cary
03-28-2008, 12:54 AM
Source: http://www.devarticles.com/c/a/Web-Style-Sheets/DIV-Based-Layout-with-CSS/3/


I just looked at this page and wouldn't recommend it. You should try to avoid using position:absolute whenever possible. Pages which make heavy use of it tend to break in real-world use where people will view the page with different font and window sizes, not to mention browser rendering differences.

Westciv.com has some free css tutorials. Check out this (http://westciv.com/style_master/academy/hands_on_tutorial/index.html) and these (http://westciv.com/style_master/house/tutorials/quick/index.html).

Also, take a look at the CSS section of the Dreamweaver Developer Center (http://www.adobe.com/devnet/dreamweaver/css.html), particularly the six-part tutorial on Designing with CSS and Dreamweaver CS3.

Cary
03-28-2008, 01:09 AM
I just looked at this page and wouldn't recommend it...

It may actually be better than I initially thought. If the series of tutorials dropped you there, then that would be bad. However, the author seems to be (in a roundabout way) leading to using floats instead of absolute positioning.

Death Dream
03-28-2008, 03:26 AM
I know the footer is called a footer but for the sake of code I would use the same DIV for the footer as I did the header. I ended up giving it the id="HF" instead.

with you saying that I can not use a given ID more than once on a HTML page confuses me because I got two id="spacers" working just fine so far, from what I can see.

Tomorrow when I get back to my desk I will post my code of what I have going on so far, I don't think I am that far lost of what it seems like you guys are thinking I am.

Most my Divs are just this in my CSS:

#hf {width: 800; height: 200;}
#spacer {width: 800; height: 8;}
#body {width: 800; height: 400; overflow: scroll;}

______________________

Now on my HTML file I have

<div id="hf">&nsbp</div>
<div id="spacer">&nsbp</div>
<div id="body">Texthere</div>
<div id="spacer">&nsbp</div>
<div id="hf">&nsbp</div>

________________

Again I am not at the computer that has the exact files but that is pretty much the way I am going right now. I haven't had a problem running more than 1 div ID so far but if this is what you meant then I can change it because it is still early.

Again, tomorrow I will post the full code and upload it to make sure I am doing it correctly.

The navigation should be a CSS styled unordered list. I think you could do with doing a few tutorials first.
I learn faster this way, getting my hands dirty and going in the wrong direction. Getting told to go the other path and I will remember what is not the right way for next time. I find it easier for me to do it this way.

~Death Dream~

edbr
03-28-2008, 03:39 AM
I learn faster this way, getting my hands dirty and going in the wrong direction. Getting told to go the other path and I will remember what is not the right way for next time. I find it easier for me to do it this way.
you and me both!

Cary
03-28-2008, 05:32 AM
I know the footer is called a footer but for the sake of code I would use the same DIV for the footer as I did the header. I ended up giving it the id="HF" instead.

In that case, you can get the same result if you use two divs without IDs but with the same class name instead, and then the code will validate and be acceptable to all browsers.

with you saying that I can not use a given ID more than once on a HTML page confuses me because I got two id="spacers" working just fine so far, from what I can see.

You can do it, but it won't work in all browsers, and may cease to work in future versions of the browsers which currently let you get away with it.

Most my Divs are just this in my CSS:

#hf {width: 800; height: 200;}
#spacer {width: 800; height: 8;}
#body {width: 800; height: 400; overflow: scroll;}

______________________

Now on my HTML file I have

<div id="hf">&nsbp</div>
<div id="spacer">&nsbp</div>
<div id="body">Texthere</div>
<div id="spacer">&nsbp</div>
<div id="hf">&nsbp</div>

You might try something like this:
<div id="hf">
<div class="spacer">&nbsp;</div>
<div id="body">Texthere</div>
<div class="spacer">&nbsp;</div>
</div>

And then the styling might look like this:
#hf {width: 800; padding-top:200px; padding-bottom:200px;}
.spacer {width: 800; height: 8;}
#body {width: 800; height: 400; overflow: scroll;}

It will probably even be possible to leave out the spacer divs by using padding and/or margins.

A really convenient add-on for Firefox is HTML Validator (https://addons.mozilla.org/en-US/firefox/addon/249) which will point out mistakes in your html as soon as you view the page in Firefox. If you set it to use the Serial algorithm it will first do a real validation of the page and give the results unless there aren't any errors, in which case it will show the results of Tidy validation.

domedia
03-28-2008, 01:22 PM
Death just want to add my 2 cents; Cary is giving great advice here, follow what he says and you'll jumpstart your adventures into CSS.
ID's are unique, there should only be one ID of a certain name. Having 2 of them defeats the whole purpose of the ID. CSS class is used for elements that share the same CSS

Death Dream
03-28-2008, 01:58 PM
Death just want to add my 2 cents; Cary is giving great advice here, follow what he says and you'll jumpstart your adventures into CSS.
ID's are unique, there should only be one ID of a certain name. Having 2 of them defeats the whole purpose of the ID. CSS class is used for elements that share the same CSS

Yeah I know he is, I've seen many of his posts. But in order for me to learn I have to ask questions on why it doesn't work. It's just how I learn.

I don't think I am coming off as an ass or anything, if I am I am sorry but I am just asking questions to learn.

~Death Dream~

domedia
03-28-2008, 02:10 PM
I don't think I am coming off as an ass or anything, if I am I am sorry but I am just asking questions to learn. Oops my fault, in no way was I implying you were :)

Death Dream
03-28-2008, 02:35 PM
Alright so far I have kinda of what I want but I know I kind of cheated. So this is where expect to get slapped across the face lol.

First lets check out the site: http://dd.adesadesmoines.com/Untitled-4.html

As we can see firefox doesn't like the background color to well but IE takes it alright.

About the cheating, well, on the body div I made a table inside it. I drew everything out how I wanted in photoshop like I always do and got all the sizes. Then I made a new page within photoshop and started to draw my table like I always have done (cheating I think). We can see my table page at: http://dd.adesadesmoines.com/TableLayout.html

When I got to the center part of the table I then put in my holder div into place that does the scroll work for me. As we can see I have a horizontal scroll bar which I don't want at all.

I have yet to start on the game class yet but that is the next step.

My css file is here: http://dd.adesadesmoines.com/Style.css

Is there a way to get the image banner to stay inside the div tag? would save on code too i think.

Thoughts?

~Death Dream~

Death Dream
03-28-2008, 03:19 PM
Updated with .game class
css code:
.game {width:207; height:224; padding-left:8px; padding-right:9px; color: #FFFF00; background:#00FF00; padding-bottom:8px;}In HTML:

<div id="holder">
<div class="game">GameOne</div>
<div class="game">GameTwo</div>
<div class="game">GameThree</div>
</div>
Don't mind the colors, they are just there to make it easy to spot each block. For some reason they go down to the next line and I didn't even use a <br> tag.

Offtopic: I'm a bronze member now XD

~Death Dream~

Cary
03-29-2008, 01:02 AM
As we can see firefox doesn't like the background color to well but IE takes it alright.

This is because Firefox doesn't know what to make of the html tags in your style sheet. The following code is used at the beginning and end of styles embedded in the head of an html page, but they shouldn't appear in an external style sheet.

<style type="text/css">
<!--


-->
</style>

A couple important things to remember. Make sure your pages start with a valid doctype or getting pages to work cross-browser will be a nightmare. Also, make sure any values in your style sheet which require units actually have units.

For instance, "width:207;" should be "width:207px;"

Is there a way to get the image banner to stay inside the div tag? would save on code too i think.

It seems to be staying inside okay.

Cary
03-29-2008, 01:19 AM
Alright so far I have kinda of what I want but I know I kind of cheated. So this is where expect to get slapped across the face lol...

Well, there won't be any slapping, but your "cheating" is illustrating just how much of a change in thinking is required to work with CSS instead of tables. You're still thinking in terms of layout and then content. You need to think of the html in terms of just the content you want on the page. Then the look of the page will be added around it latter with CSS. By starting with tables within tables, it just too difficult to simplify things with CSS.

Updated with .game class css code...For some reason they go down to the next line and I didn't even use a <br> tag.

Divs are normally block-level elements which means they appear one below the other. You can override this behavior in several ways, but in this instance it would be easiest by floating them. You'll need to add "float:left;" to your .game styling.

Cary
03-29-2008, 07:39 PM
To make your scrolling work right I had to add a doctype to the code and some extra .game divs for testing the scrolling.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>


<div id="holder">
<div class="game">GameOne</div>
<div class="game">GameTwo</div>
<div class="game">GameThree</div>
<div class="game">GameFour</div>
<div class="game">GameFive</div>
<div class="game">GameSix</div>
</div>


Here's the modified style sheet. I changed "overflow:scroll" to "overflow:auto" and widened the holder to allow three .game divs across. Overflow:auto only shows a vertical or horizontal scrollbar when necessary.

@charset "utf-8";
/* CSS Document */

body {
margin: 0;
background-color: #000000;
scrollbar-face-color: #4d6a94;
scrollbar-highlight-color: #79c2fb;
scrollbar-3dlight-color: #d2e8fb;
scrollbar-darkshadow-color: #142c4d;
scrollbar-shadow-color: #5e88aa;
scrollbar-arrow-color: #ffffff;
scrollbar-track-color: #2656a2;
}
body,td,th {
color: #FFFFFF;
}
a:link {
color: #00FFFF;
}
a:visited {
color: #99CCFF;
}
img {border: none;}

#hf {
width:988px;
height:181px;
padding-bottom:200px;
padding-top:20px;
}
.spacer {
width:988px;
height:8px;
}
#body {
background-image: url(Images/MainBackground.gif);
width:988px;
height:406px;
}
#holder {
width:688px;
height:244px;
overflow: auto;
}
.game {
width:207px;
height:224px;
padding-left:8px;
padding-right:9px;
color: #FFFF00;
background:#00FF00;
padding-bottom:8px;
float: left;
}

Death Dream
03-30-2008, 04:40 AM
It seems to be staying inside okay.
I mean, code it into the style sheet? Right now I have it coded into the HTML version <div id="HF"><img src="blah.gif"></div>

Well, there won't be any slapping, but your "cheating" is illustrating just how much of a change in thinking is required to work with CSS instead of tables. You're still thinking in terms of layout and then content. You need to think of the html in terms of just the content you want on the page. Then the look of the page will be added around it latter with CSS. By starting with tables within tables, it just too difficult to simplify things with CSS.

I'm not quite sure I understand this. I design my websites in photoshop first which might be my problem trying to break away from thinking about it in layout but I saw no other way to do what I wanted it to do from what I know right now. If I think about it another way I would just end up making spacer <Divs> for everything instead of Cells. This is going to be a hard habit to break.

Thanks for the code. I will try it out on Monday and see how it works out. Busy weekend, you know.

~Death Dream~

Cary
03-30-2008, 05:29 AM
You can try something like this. You use a header tag for the heading. The span within the heading has the background image of the logo or graphic heading, and absolute positioning is used to place that image-filled span in front of the header text.

There are several types of image replacement methods, each with their own advantages and disadvantages. This one may be the Gilder/Levin method and doesn't work with transparent images and adds an otherwise empty span to the markup. It allows the header text to be seen by text browsers, screen readers, users who surf with images turned off in their browsers, as well as search engines. Everyone else sees a pretty picture.

<div id="hf">
<h1><span></span>Title Here</h1>
<div id="body">
...

#hf h1 {
position: relative;
width: 601px;
height: 95px;
overflow: hidden;
color: #FFFFFF;
background: #000000;
margin-left: auto;
margin-right: auto;
}
#hf h1 span {
top: 0;
left: 0;
width: 601px;
height: 95px;
background: url(Images/Banner.jpg) no-repeat left top;
position: absolute;
}

Death Dream
03-31-2008, 03:42 PM
Alright so we got the game divs work out now. But how will I go about adding the download button top of the bottom image?

<div class="game">
<img src="Images/CabalTitle.gif"><img src="Images/CabalCenter.gif"><!-- Need this to be a background image for download button --><img src="Images/PlainforDNL.gif">
</div>In http://dd.adesadesmoines.com/base.html I have the PlainforDNL.gif set as a background image so I can add the download button on top of it.

Do you think I should combine the Title and Center game images as one image? Reduce on code but not sure if that helps or not.

Next, I tried to use the span and #body h1 for the navigation and both browsers are tossing different thing sup at me. The first two buttons I used the CSS code and the other two are using just image tags inside the table. Not sure if it is the table that is throwing it out of wack but I bet it is. In Firefox it keeps the spacing I want between the buttons (4px) but the CSS coded ones push down to the bottom of the cell and then in turn push down my holder table cell. In IE they just don't keep the spacing between the cells.

Not totally sure what would be the best way to go at this, should I just code the images into the HTML file or would it be better to do it in CSS?

Also I tired a few code combinations but I can figure out how to bring the Banner.jpg down a few pixles.

I went ahead and removed the spacer class as it seems I wont be needing that.

Thanks for all your help so far Cary :) You've been great.

Rob_Che
03-31-2008, 10:49 PM
This is why we need new User Ratings...
Cary needs changing from Gold to Legend.

I almost look forward to having problems* when I come here....

Rob

*web design related

Cary
04-01-2008, 12:08 AM
You'll realize how much I don't know once you've learned enough css to see where I'm giving bad advice.

Cary
04-01-2008, 01:48 AM
This is some code I was playing around with, just so you can take a look at it, Death. There's plenty that can be improved. I didn't have much time, so it falls apart if you mess with the font size, and the fall-back fonts are wider than Impact, so that would be something else to account for. I haven't had time to look into the menu issue yet.

<div id="holder">
<div class="game"><p class="gametitle">CABAL</p><img src="Images/CabalCenter.gif" width="208" height="148" alt=""><p class="buttonbg">&nbsp;</p></div>
<div class="game"><p class="gametitle">AION</p><img src="Images/AionCenter.gif" width="208" height="148" alt=""><p class="buttonbg">COMING SOON!</p></div>
<div class="game"><p class="gametitle">AION</p><img src="Images/AionCenter.gif" width="208" height="148" alt=""><p class="buttonbg">COMING SOON!</p></div>
<div class="game"><p class="gametitle">AION</p><img src="Images/AionCenter.gif" width="208" height="148" alt=""><p class="buttonbg">COMING SOON!</p></div>
<div class="game"><p class="gametitle">AION</p><img src="Images/AionCenter.gif" width="208" height="148" alt=""><p class="buttonbg">COMING SOON!</p></div>
<div class="game"><p class="gametitle">AION</p><img src="Images/AionCenter.gif" width="208" height="148" alt=""><p class="buttonbg">COMING SOON!</p></div>
</div>

#holder .game img {
display: block;
}
#holder .gametitle {
text-align: center;
vertical-align: middle;
margin: 0;
padding: 6px 0 0;
width: 208px;
background: url(Images/gameTitleBg.gif) no-repeat left top;
color: #000000;
background-color: #FFFFFF;
font: bold 1.5em/29px Impact, "Arial Narrow", Verdana, Helvetica, serif;
}
#holder .buttonbg {
width: 208px;
background: url(Images/PlainforDNL.gif) no-repeat left top;
text-align: center;
vertical-align: middle;
margin: 0;
font: bold 2em/35px Impact, "Arial Narrow", Verdana, Helvetica, serif;
background-color: #0E1E37;
color: #FFFFFF;
padding: 0 0 6px 0;
}

I had to create an image to go behind the title.

Death Dream
04-01-2008, 02:24 PM
Wow that is just .. wow. I didn't think you could get a font so close to what I had on my images.

I had to change the download button to text because it kind didn't work (thing I don't like about CSS to much)

I'm going to try the same thing you did with the game tags for the navigation and see how that works.

~Death Dream~

Death Dream
04-01-2008, 03:15 PM
Alright, I deleted all the "Home, forums, faq" ect cells along with the two spacers I had between the "Big Spacers" to make one big cell that is 674px. I then put a center tag inside it and started adding my DIVs


#nav {
width:396px;
height:54px;
}
#nav .navbg {
text-align: center;
vertical-align: middle;
width:76px;
height:22px;
background: url(Images/navBg.gif) no-repeat left top;
font: 16px Impact, "Arial Narrow", Verdana, Helvetica, serif,;
color: #000000;
float:left;
padding: 0 1px 0 1px;
}
#nav .activenavbg {
text-align: center;
vertical-align: bottom;
width:76px;
height:54px;
background: url(Images/ActivenavBg.gif) no-repeat left top;
font: 16px Impact, "Arial Narrow", Verdana, Helvetica, serif,;
color: #FFFFFF;
float:left;
padding: 0 1px 0 1px;
}
<td width="674" valign="top"><center>
<div id="nav">
<p class="activenavbg">HOME</p>
<p class="navbg">FORUMS</p>
<p class="navbg">FAQ</p>
<p class="navbg">ABOUT</p>
<p class="navbg">CONTACT</p>
</div>
</center></td>
Now I ran into a couple problems with this. On the active button I could not get the text to drop down to the bottom in both IE and FF.

FF Errors:
Navigation buttons get pushed down to the center of the cell while stretching the cell.
Holder Cell still gets pushed down because of the navigation is pushing down

IE Errors:
Holder Cell gets pushed to the right, however the Nav cell does not stretch.

Edit: I tired to replace the spacer cells I have going on with the following:

#body .spacer {
width:157px;
height:406px;
}


<tr>
<p class="spacer">&nbsp;</p>
<td width="674" valign="top"><center>
<div id="nav">
<p class="activenavbg">HOME</p>.....


It didn't like that at all, don't know if I am suppose to have a <td> before the class or not but either way it didn't like it.

~Death Dream~

domedia
04-01-2008, 04:16 PM
You can't have anything between a <tr> and a <td>

Death Dream
04-01-2008, 05:28 PM
You can't have anything between a <tr> and a <td>

Yeah thought that was the case. Either way it didn't like it.

~Death Dream~

Cary
04-02-2008, 03:07 AM
More code for you to play with...I also tried something with hover on the menu links...

Complete HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="Style.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS Test</title>
<!-- The following code is for IE6 which doesn't understand min-width. -->
<!--[if lte IE 6]>
<style type="text/css">
body {
width:expression( documentElement.clientWidth < 800 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 800 ? "800" : "auto") : "800px") : "auto" );
}
</style>
<![endif]-->
</head>
<body>
<div id="hf">
<h1><span></span>Title Here</h1>
<div id="body">
<ul id="nav">
<li><a class="current" href="#">HOME</a></li>
<li><a href="#">FORUMS</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
<div id="holder">
<div class="game">
<p class="gametitle">CABAL</p>
<img src="Images/CabalCenter.gif" width="208" height="148" alt="">
<p class="buttonbg">DOWNLOAD!</p>
</div>
<div class="game">
<p class="gametitle">AION</p>
<img src="Images/AionCenter.gif" width="208" height="148" alt="">
<p class="buttonbg">COMING SOON!</p>
</div>
<div class="game">
<p class="gametitle">REQUIEM</p>
<img src="Images/RequiemCenter.gif" width="208" height="148" alt="">
<p class="buttonbg">COMING SOON!</p>
</div>
<div class="game">
<p class="gametitle">AION</p>
<img src="Images/AionCenter.gif" width="208" height="148" alt="">
<p class="buttonbg">COMING SOON!</p>
</div>
<div class="game">
<p class="gametitle">REQUIEM</p>
<img src="Images/RequiemCenter.gif" width="208" height="148" alt="">
<p class="buttonbg">COMING SOON!</p>
</div>
<div class="game">
<p class="gametitle">AION</p>
<img src="Images/AionCenter.gif" width="208" height="148" alt="">
<p class="buttonbg">COMING SOON!</p>
</div>
</div>
</div>
</div>
</body>
</html>

Complete Style Sheet
@charset "utf-8";
/* CSS Document */

body {
margin: 0;
scrollbar-face-color: #4d6a94;
scrollbar-highlight-color: #79c2fb;
scrollbar-3dlight-color: #d2e8fb;
scrollbar-darkshadow-color: #142c4d;
scrollbar-shadow-color: #5e88aa;
scrollbar-arrow-color: #ffffff;
scrollbar-track-color: #2656a2;
color: #FFFFFF;
text-align: center;
background-color: #000000;
min-width: 800px;
}
a:link {
color: #00FFFF;
}
a:visited {
color: #99CCFF;
}
img {border: none;}

#hf {
padding-bottom:100px;
padding-top:20px;
margin: 0;
}
#hf h1 {
position: relative;
width: 601px;
height: 95px;
overflow: hidden;
color: #FFFFFF;
background: #000000;
margin: 20px auto;
}
#hf h1 span {
top: 0;
left: 0;
width: 601px;
height: 95px;
background: url(Images/Banner.jpg) no-repeat left top;
position: absolute;
}
#body {
background: url(Images/MainBackground.gif) no-repeat center top;
padding-bottom: 60px;
}
#holder {
width:688px;
height:244px;
overflow: auto;
margin: 0 auto;
}
#holder .game {
width:207px;
height:224px;
padding-left:7px;
padding-right:8px;
padding-bottom:3px;
padding-top:8px;
float: left;
}
#holder .game img {
display: block;
}
#holder .gametitle {
text-align: center;
vertical-align: middle;
margin: 0;
padding: 6px 0 0;
width: 208px;
background: url(Images/gameTitleBg.gif) no-repeat left top;
color: #000000;
background-color: #FFFFFF;
font: bold 1.5em/29px Impact, "Arial Narrow", Verdana, Helvetica, serif;
}
#holder .buttonbg {
width: 208px;
background: url(Images/PlainforDNL.gif) no-repeat left top;
text-align: center;
vertical-align: middle;
margin: 0;
font: bold 2em/35px Impact, "Arial Narrow", Verdana, Helvetica, serif;
background-color: #0E1E37;
color: #FFFFFF;
padding: 0 0 6px 0;
}
#nav {
width:390px; /* 5 x 78px */
height: 56px;
margin: 0 auto 47px;
}
#nav li {
list-style: none; /* remove bullet */
float: left;
display: block;
height: 54px;
width: 78px;
padding: 1px 0; /* 1+1+54 = 56px = height of ul#nav */
}
#nav li a {
display: block;
width: 74px; /* 74+2+2 = 78px = width o #nav li */
height: 22px;
padding: 1px 2px 31px; /* 1+31+22 = 54px = height of #nav li */
background: url(Images/navBg.gif) no-repeat center top;
text-decoration: none;
text-align: center;
color: #000000;
font: 15px Impact, "Arial Narrow", Verdana, Helvetica, serif;
}
#nav li a.current, #nav li a:hover {
padding: 31px 2px 1px; /* put large padding on top instead of bottom to push text down. */
background: url(Images/ActivenavBg.gif) no-repeat center top;
color: #FFFFFF;
}

Death Dream
04-02-2008, 05:23 PM
Wow ... wow .... just wow..... your crazy lol

I popped that code in and started to look at it and, man, there is so little code from what we began with (base.html version)

So IE6 doesn't understand the term width?

I am not totally sure how you got the nav block to center it's self in place. I can tell it the first div in the body so that puts it on top but do div's self center? And how did you get the gap between the nav to the holder? I still can't find that part of the code.

The padding idea to push the text down is a great idea.

~Death Dream~

Cary
04-02-2008, 11:13 PM
So IE6 doesn't understand the term width?

It understands width, but not min-width, so it ignores this:

body {
min-width: 800px;
}

I am not totally sure how you got the nav block to center it's self in place. I can tell it the first div in the body so that puts it on top but do div's self center? And how did you get the gap between the nav to the holder? I still can't find that part of the code.

Let's look at the styling there:

#nav {
width:390px;
height: 56px;
margin: 0 auto 47px;
}

I used three values for the margin. These are the top margin, the side margins and the bottom margin. It the same thing as if I used "margin: 0 auto 47px auto". This makes the top margin 0px and the bottom margin 47px, producing the space between the bottom of #nav and the top of #holder.

The left and right margins are set to auto, which only really does anything if the element has a width. In this case, #nav does have a width, so the auto margin setting causes its side margins to extend equally in both the left and the right directions. This horizontally centers #nav within its parent. The same trick is used to center the h1 header as well as #holder.

Cary
04-03-2008, 12:23 AM
I'm not quite sure I understand this. I design my websites in photoshop first which might be my problem trying to break away from thinking about it in layout but I saw no other way to do what I wanted it to do from what I know right now. If I think about it another way I would just end up making spacer <Divs> for everything instead of Cells. This is going to be a hard habit to break.

I meant to respond to this before, but I got sidetracked and forgot. I didn't explain this very well before, and I may not do any better this time, but I'll try. It is fine, and I would think the best way to go, to create a mock up of what you want which will perhaps even provide some of the graphics/image slices for the final page.

However, normally you won't be able to create the mock up until you have some idea of what the content on the page is going to consist of. Since you then know what the content will be, you can code most of the html without even having the layout designed because the html is just the content. You may have to go back and put in divs, spans, IDs and classes and such, but once you have the content, the html part is pretty much done.

With tables you're trying to figure out how to make the html itself the layout. Whereas with css you need to figure out how to make the html you have look the way you want without really changing the html.

With tables you need to place the content in the code where it needs to appear on the page. With css you can create a site where the order of the content on a page is dictated by its importance and the need to make the site easy to navigate for users of screen readers or text browsers. Then css can be used to change the apparent order of elements for visual browsers and warp the content into a layout that is completely unlike anything one sees when looking at the markup.

Death Dream
04-03-2008, 01:55 PM
However, normally you won't be able to create the mock up until you have some idea of what the content on the page is going to consist of.

Yeah, I don't do the mock up right away. Usually I get a pen and paper and write down the navigation buttons and what I want on each page. After that I figure out how I want my navigation to look and where I want it positioned on the page, after that I design around the navigation. After I have a fair boxy drawing of what I want I then go into photoshop and start to draw my boxes out and then give them the flair I want.

I think I pulled a lot from this, margins and padding is going to be solving my table problem for the most part I think. I'm going to start work on my next website and try to use CSS like you did on this site. I will keep posting on this topic about it as well but I am going to try to do as much of it as I can by my self this time I hope.

As for this site, my god, wouldn't of come out as great without your help Cary. If I got paid for this site (if my buyer didn't bail) I would of given you a cut but it seems that this was a learning experience more than anything now. Hell, taking out the game divs and just replacing it with text inside the holder works great too for other content pages. This turned out so much better than my original HTML version.

I think my next site will be my own that I've been meaning to redesign for some time now. It might take a day or two for me to get a rough design up for you guys to see though so bare with me.

~Death Dream~

Death Dream
04-05-2008, 04:11 AM
Site 2

So I got the design done today and started the coding. It didn't take me long to get stuck, well not to much stuck but more confused.

I am trying to line up my navigation bar with my background and I got everything lined up great (28px height). My DREAM image is 28px with a 4px left and a 6px right padding (#nav .dream) I then went ahead and started to add my next div to put my buttons in (#nav .buttons) which has 24px images centered in the middle by a top and bottom padding of 2px.

http://dd.adesadesmoines.com/
http://dd.adesadesmoines.com/DDStyle.css

The black top bar is the one I'm trying to line it up with but I can't get anything to work >.<

What am I doing wrong?

~Death Dream~

Death Dream
04-05-2008, 05:34 AM
Ok I got the problem fixed in Firefox but IE is still Fing it up.

~Death Dream~

Tom Wildenberg
04-05-2008, 10:11 PM
This is probably a simple question, but as a newbie, I can't seem to find the soluton. I'm trying to add a layout, but I get getting a do not go symbol, you no, the circle with a slash through it. What am I doing wrong?

Cary
04-05-2008, 11:56 PM
This is probably a simple question...

Please start your own thread for this question and give more detailed information. I have no idea what adding a layout means.

Cary
04-06-2008, 12:35 AM
Ok I got the problem fixed in Firefox but IE is still Fing it up.

This is a problem you'll keep running into with IE if you don't give your page a valid heading by adding a doctype from the Title/Encoding category of Page Properties. Otherwise, browsers will run in quirks mode, which means IE6 behaves like IE5, needing box-model hacks and other stuff you shouldn't be worring about any more.

You also seem to have a link to a Firefox chrome file for Firebug which you should remove.

Death Dream
04-06-2008, 01:17 AM
Yeah I used firebug to fix my first problem, I like how I can update the CSS live but then run into problems saving it ... annoying I got to say.

I will look up a tutorial on doctypes then, I figured you only needed one doc type that we used on the last site would work on this one as well, so I hoped.

Edit: odd I think firebug took out my doctype >.<

~Death Dream~

Cary
04-07-2008, 03:59 AM
Here's some code you can try. As you can see it removes a lot of unnecessary markup. Center tags can't be used with html 4.01 strict. The images themselves can have id or classes without the need to place them within divs. Also, padding can be used with the menu to leave space for the decorative left and right curved end images. I also restored the unordered list to a validating form.

I can't emphasize enough how important it is to make sure your html validates as you go, because any errors will leave browsers to come up with their own ideas of what they think you meant which makes it even harder to get css to work cross-browser.

With everything you had to fight against, I thought you did an amazing job of getting this to work like you did.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link href="DDStyle.css" type="text/css" rel="stylesheet">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Base</title>
</head>
<body>
<div id="holder">
<img id="dream" src="Images/Dream.gif" alt="DDreamDesign.com" width="124" height="28"> <!-- I would definitely use some kind alt text with this image -->
<ul id="nav">
<li><a href="#" class="current">home</a></li>
<li><a href="#">web design</a></li>
<li><a href="#">3d design</a></li>
<li><a href="#">2d design</a></li>
<li><a href="#">features</a></li>
<li><a href="#">tutorials</a></li>
<li><a href="#">forums</a></li>
<li class="last"><a href="#">contact</a></li>
</ul>
<div id="login">
<img class="design" src="Images/design.gif" alt="" width="81" height="14">
<span>Username Password Login Register | Forgot Password?</span>
</div>
<img id="ban" src="Images/ddba.gif" alt="" width="705" height="112">
</div>
</body>
</html>

body {
color: #FFFFFF;
margin-top: 6px;
text-align: center;
font: normal 12px Arial, Helvetica, sans-serif;
background: #192927 url(Images/bg.jpg) repeat-x;
}
img {
border: none;
}
#holder {
width: 775px;
margin: 0 auto; /* centers the holder on the page */
}
#dream {
float: left;
padding: 0 4px 0 6px;
}
#nav {
height: 28px;
text-align: left;
width: 629px;
float: left;
padding: 0 0 0 12px; /* left padding leaves room for NavLeft.gif */
background: url(Images/NavLeft.gif) no-repeat 0 0;
margin: 0; /* remove default margins */
}
#nav li {
display: block;
float: left;
height: 24px;
width: 77px;
list-style: none;
}
#nav li a {
background: transparent url(Images/InactiveButton.gif) no-repeat scroll center top;
color: #FFFFFF;
display: block;
height: 24px;
line-height: normal;
padding-top: 4px;
text-align: center;
text-decoration: none;
width: 77px;
}
#nav li a.current, #nav li a:hover {
background: transparent url(Images/ActiveButton.gif) no-repeat scroll center top;
}
#nav .last { /* adding right padding and NavRight.gif to last menu item */
background: url(Images/NavRight.gif) no-repeat 77px 0;
padding-right: 13px;
}
#login {
width: 775px;
text-align: left;
margin-bottom: 4px;
float: left;
background: #99CCCC;
}
#login .design {
width: 81px;
height: 16px;
padding-left: 84px;
float: left;
background: #FF0000;
}
#login span {
height: 16px;
font-size: 10px;
}
#ban {
margin: 0 auto; /* center the image */
}

Death Dream
04-07-2008, 04:54 AM
Here's some code you can try.
Sweet, I'll try that tomorrow. Gonna go to bed shortly here.

Center tags can't be used with html 4.01 strict.

Actually, I wasn't sure with what doc type to try so I tried all the html ones I saw listed (3) and I just left it at strict because none of them changed anything.


I can't emphasize enough how important it is to make sure your html validates as you go, because any errors will leave browsers to come up with their own ideas of what they think you meant which makes it even harder to get css to work cross-browser.

Yeah I understand this, I just hate how IE doesn't like to work with me as well as firefox seems to at times.


With everything you had to fight against, I thought you did an amazing job of getting this to work like you did.

Thank you!! I actually did a lot more progress today as well getting some of my content div's set up but I wont know exactly if I did it right till I take a look at the code you put up above there.

I'm sure I will have more questions after I take closer look at the code first thing tomorrow.

Death Dream
04-07-2008, 05:14 PM
Alright updated.

I was a bit surprised to see the combination of a background image used with padding. I would of never thought of that.

As of right now my main problem is getting my title bars to work properly.

.titleends {
width:6px;
height:22px;
float:left;
}
.titles {
width:100%;
hegith:22px;
background:url(Images/TitleBG.gif);
float:left;
}


<img class="titleends" src="Images/TitleLeftEnd.gif">
<div class="titles">Title</div>
<img class="titleends" src="Images/TitleLeftEnd.gif">


Didn't know I could put a class on images as well, good to know :)

For one reason or another the title doesn't want to sit in the middle of the two ends and it doesn't want to take the height either.

Also, is there a code that allows us to flip a image so that you can have one of the end images just being flipped over to get the other side?

I went ahead and placed my Detail class and for the most part that looks to be work fine, can't be for certain because the titles are kind of screwing it up for me.

~Death Dream~

Death Dream
04-07-2008, 05:14 PM
Alright updated.

I was a bit surprised to see the combination of a background image used with padding. I would of never thought of that.

As of right now my main problem is getting my title bars to work properly.

.titleends {
width:6px;
height:22px;
float:left;
}
.titles {
width:100%;
hegith:22px;
background:url(Images/TitleBG.gif);
float:left;
}


<img class="titleends" src="Images/TitleLeftEnd.gif">
<div class="titles">Title</div>
<img class="titleends" src="Images/TitleLeftEnd.gif">


Didn't know I could put a class on images as well, good to know :)

For one reason or another the title doesn't want to sit in the middle of the two ends and it doesn't want to take the height either.

Also, is there a code that allows us to flip a image so that you can have one of the end images just being flipped over to get the other side?

I went ahead and placed my Detail class and for the most part that looks to be work fine, can't be for certain because the titles are kind of screwing it up for me.

~Death Dream~

Cary
04-07-2008, 11:59 PM
For one reason or another the title doesn't want to sit in the middle of the two ends and it doesn't want to take the height either.

Double-check the spelling of "height" in your .titles rule.

Also, is there a code that allows us to flip a image so that you can have one of the end images just being flipped over to get the other side?

Nope.

Death Dream
04-08-2008, 12:43 AM
Double-check the spelling of "height" in your .titles rule.

I feel stupid ...

~Death Dream~

Cary
04-08-2008, 01:37 AM
Typos are easy to make. The Web Developer Toolbar for Firefox makes it easy to validate local html and css. Firebug may have this functionality as well, but I haven't looked for it.

Death Dream
04-08-2008, 03:56 AM
Chances are I wont be able to work on it much for the next few days. I leave for Pennsylvania Tuesday afternoon (8th) afternoon and then get back Sunday afternoon (13th) I then have to work Monday and Tuesday morning in Iowa and then I get shipped back out again on the 15th and return on the 20th.

My company needs my help at the PA site to set up the servers and workstations so I will have my hands full there. I will be taking my laptop and might work on it in the hotel if PA turns out really boring you know.

~Death Dream~

Cary
04-09-2008, 02:22 AM
When you have a chance, here's another way of creating the title bars.

<!-- I would just put all this on one line without the comments, but for the purposes of making this easier to see... -->
<div class="titles"><!-- has the repeating background image and stretches to fill the width of its container -->
<div><!-- has left padding and left image -->
<div><!-- has right padding and the right image and the title bar height -->
<p>Title</p>
</div>
</div>
</div>


div.titles {
background:url(Images/TitleBG.gif);
}
div.titles div {
padding: 0 0 0 6px;
background: url(Images/TitleLeftEnd.gif) no-repeat left top;
}
div.titles div div {
height: 22px;
padding: 0 6px 0 0;
background: url(Images/TitleRightEnd.gif) no-repeat right top;
}
div.titles p {
line-height: 1;
padding: 4px 0 0;
margin: 0;
}

Death Dream
04-11-2008, 12:47 AM
Yeah I am so busy here at PA. I am having a blast too, these other guys that came along are so cool. I don't get back to my hotel till pretty late because we all go out and eat so chances are I wont get back to this till I get back in Iowa. I will try it out then.

~Death Dream~

Death Dream
04-12-2008, 10:03 PM
Actually got something done today. The other guys I am with didn't want to do anything today because they were tired so I went ahead and did some stuff with the site.

I am unsure how to go about the Read More | Comments thing. If there is a way just to align it to the bottom right side or if I got to make a new div to do so?

So far everything looks alright I think, still got to do a footer though and something to put at the bottom of the news to make it not look so ... cut off at the end I guess.

Also, That main thing will be done in flash when I learn how after I get back from PA I hope to watch some tutorials on how to do so. :)

Edit: What makes people use <p></p> over <br>?

~Death Dream~

Cary
04-13-2008, 03:51 AM
Normally, any plain text on the page will be in <p> tags. Other text may be in header tags such as h1, h2, etc. to reflect the text's purpose and importance on the page.

If you have a lengthy sentence which needs to be split into two or more lines then the <br> tag can do that if setting a width for the containing header or <p> tag won't do the job.

Paragraph tags should not be used to break a sentence instead of a <br> tag because the paragraph tag means just that.

Span tags shouldn't be used in place of header or paragraph tags because the span tag gives no indication of the text's purpose or importance. Instead, spans should be used within header or p tags when a portion of the text needs to be styled differently.

Cary
04-13-2008, 04:19 AM
I am unsure how to go about the Read More | Comments thing. If there is a way just to align it to the bottom right side or if I got to make a new div to do so?

You can try this code with <p> tags:

<div><!--start of news post-->
<p class="fonttitle">Test Title</p>
<p class="greysmall">Posted By: Derrick 4/12/08</p>
<p class="small">This is a news post for no reason other than to give me an idea what the site will look like with something in this spot. I have no idea what else to write so I will just type this: this this this this this this this this this this this this this this this this this this this this this this this this this this this this this this this this this this this this this this this this this this this this this this this this this this this this this this.</p>
<p class="newsend">Read More | Comments</p>
</div><!--End of news post-->

Then add this style rule to your CSS:

#content .news div p {
margin-top: 2px;
margin-bottom: 3px;
}

Cary
04-13-2008, 04:37 AM
Another thought I wanted to add to the post about br's...

The <br> tag shouldn't be used to add breaks between sentences. Such breaks would imply the end of one paragraph and the beginning of another, and this can be handled just fine by the <p> tag.

Death Dream
04-14-2008, 05:36 PM
Alright, guess I will go with the P tags but <BR> tags have less characters that need to get downloaded lol.

I got a problem with the Footer (Bottom) part of the site. I should really change the ID footer and bottom around but I don't know why I did it the way I did. The "bottom" is above my content and right tables. I was looking for a div tag I might of closed off by mistake but couldn't find it.

What the hell did I do wrong? It should be below the two collums but its behind and above them.

~Death Dream~

Death Dream
04-14-2008, 07:44 PM
Also, I tired to change the BR tags to P tags on the right side where the UV mapping thing is. I only did it on the first one but it got messed up.

Should I keep the Span and BR tag there instead?

~Death Dream~

Cary
04-15-2008, 12:45 AM
I got a problem with the Footer (Bottom) part of the site...What the hell did I do wrong? It should be below the two collums but its behind and above them.

Some of the content on your page is being floated, so other content can end up slipping underneath. Your bottom needs to clear the floated content.

div.footer {
background:url(Images/FooterBG.gif) repeat-x left top; /* only want background repeating horizontally.
font-size: 0; /* to keep div height from increasing past 13px in IE */
}
div.footer div {
padding: 0 0 0 5px;
background: url(Images/FooterLeft.gif) no-repeat left top;
}
div.footer div div {
height: 13px;
padding: 0 5px 0 0;
background: url(Images/FooterRight.gif) no-repeat right top;
}
div.bottom {
background:url(Images/BottomBG.gif) repeat-x left bottom; /* only repeated horizontally, and bg image is at bottom of div because of added top padding. */
clear: both; /* clear floated content */
padding-top: 5px; /* an example of how you might add a gap between the bottom and the rest of the page */
font-size: 0; /* to keep div height from increasing past 14px in IE */
}
div.bottom div {
padding: 0 0 0 6px;
background: url(Images/BottomLeft.gif) no-repeat left top;
}
div.bottom div div {
height: 14px;
padding: 0 6px 0 0;
background: url(Images/BottomRight.gif) no-repeat right top;
}

Also, I tired to change the BR tags to P tags on the right side where the UV mapping thing is. I only did it on the first one but it got messed up.

This is because of the p tag's default margins. Define your own margins to customize the look the want.

For instance...
#topcon .detail p {
margin-top: 2px;
margin-bottom: 3px;
}

Some other things you might change:

#content { /* may not need the height defined */
width:542px;
margin: 10px 10px 0px 17px;
float:left;
}
#topcon { /* may not need the height defined */
width:206px;
margin-top: 10px;
float:right;
}

Death Dream
04-15-2008, 03:01 PM
Thanks Cary, that did the trick.

I think design wise the front page is done, I still got to get the username and password field placed in there but I think I'm going to do that after I get some of the other things done.

I think I will start on a base layout for all the other pages and then start up on the flash thing for the main page.

So far, what do you think of the site design wise? Something you don't like? Something you want to see more of? To much green? I am curious on what you think of the site from a design stand point.

BTW, I have to go back to PA today after work so I wont be able to work on the site for a few days again.

Edit: taking out the height made the tables look funny in IE ... gotta hate IE lol.

~Death Dream~

Cary
04-15-2008, 11:56 PM
I really like it! The one thing I would suggest is that you go through and add in header tags to indicate the relative importance of things. (This will involve additional styling to control the relative font sizes and margins.)

You would need an h1 tag containing something for search engines to see as the main page heading as well as subsequent h2 and h3 tags for sub-headers and sub-sub-headers as you have category titles and then news or article titles below those.

Death Dream
04-16-2008, 12:07 AM
Well I am currently in the Detroit airport and decided to pop my head in here and see what was going on since I have an hour wait for my plane to PA.

Thanks :) Glad you like it.

So lets take my news post for example.
<h1>news</h1>
<h2>Test Title</h2>
<h3>Posted By...</h3>
<p>Body Text </p>

And on the right collum
<h1>top downloads</h1>
<h2>UV Mapping </h2>
<p>Sub Text</p>

Not even sure if I should give the posted by a heading tag.

Edit: Added Main titles.

~Death Dream~

Cary
04-16-2008, 12:20 AM
Yes, like that. Or, h1 might encompass your DDream logo, in which case you might have this:

<h2>news</h2>
<h3>Test Title</h3>
<h4>Posted By...</h4>
<p>Body Text </p>

<h2>top downloads</h2>
<h3>UV Mapping </h3>
<p>Sub Text</p>

Death Dream
04-16-2008, 12:27 AM
Yes, like that. Or, h1 might encompass your DDream logo, in which case you might have this:

Lol actually already forgot about that up there. Sounds good.

~Death Dream~

Cary
04-16-2008, 12:37 AM
Not even sure if I should give the posted by a heading tag.

Good point. Probably should just be a p tag.

Death Dream
04-24-2008, 02:48 PM
So it's been a while, finally starting to slow down again and I can begin work on my site now. Odd thing is that I tried to put the height back to its normal settings but I can't remember what they were and ended up having to pull my files off the server because I screwed up the ones on my HD ... figures that is what happens when you don't remember where you picked up off at.

For the time being I am going to start on the Heading tags and see how that goes.

Edit: Alright, should I do it like this: <h3 class="fonttitle"> or is there another way I should be doing this?


.fonttitle {
color:#bfdf00;
font-size: 14px;
font-weight: bold;
}~Death Dream~

Cary
04-25-2008, 01:02 AM
Just use <h3> and drop the class.

You can then use something like this:

#content h3, #topcon h3 {
color:#bfdf00;
font-size: 14px;
font-weight: bold;
margin-top: 2px; /* margins are from p styling which won't be applied to the new h3 elements */
margin-bottom: 3px;
}

Or you can narrow it down further like this:

#content .news h3, #topcon .detail h3 {
color:#bfdf00;
font-size: 14px;
font-weight: bold;
margin-top: 2px;
margin-bottom: 3px;
}

Death Dream
04-25-2008, 01:20 PM
Narrowing it down, does that really help anything? I just see more text and in the end it does the same thing. I know it makes things easier to tell where it is going by eye sight but does it help search engines or something/browsers?

Hell why not just go:

#holder h3 {
color:#000000;
Font-size:20000px;
}


Don't worry about the color and font, just using it as an example. You use a lot less text this way, at least in the title, and that means less to download lol.

~Death Dream~

Cary
04-25-2008, 10:49 PM
Narrowing it down, does that really help anything?

Sometimes, as explained below.

Hell why not just go:

#holder h3 {
color:#000000;
Font-size:20000px;
}


If all the h3 elements in #holder will have the same styling, then that would be the way to go. If some are not the same, then you would want to be more specific, so different h3 elements can be styled differently.

Death Dream
04-26-2008, 06:19 AM
Sometimes, as explained below.



If all the h3 elements in #holder will have the same styling, then that would be the way to go. If some are not the same, then you would want to be more specific, so different h3 elements can be styled differently.

In our case our H3 is the same so putting it under the holder would be the way to go I think.

~Death Dream~

Death Dream
04-28-2008, 03:18 PM
As for the <H2>'s go ... I realize there is no real styling going on there which I am fine with but I am not sure if I should make it bold or anything. I went ahead and put bold on the latest tutorials title just to show what it looks like. Opinions?

While doing the <h1> tag I noticed that my navigation was not centered on the black background bar. So I changed the margin on the #nav class, but in turn it pushes down the login class as well ... Is there no way around this? I tired a few things but to no avail...

Then the new's section is kind of annoying how Firefox is working great but in IE it doesn't line up to the bottom of the latest downloads section .. Is there something I am missing? Ever since I took out the height I can't seem to get it placed back the way it was. I think it is because I wasn't working on the site in a week and I just can't remember the exact numbers I had but geeeez I'm racking my brain here.

~Death Dream~

Cary
04-29-2008, 06:37 AM
While doing the <h1> tag I noticed that my navigation was not centered on the black background bar. So I changed the margin on the #nav class, but in turn it pushes down the login class as well ... Is there no way around this? I tired a few things but to no avail...

You have this:
#holder h1 {
color:#FFFFFF;
font-size: 12px;
font-weight:bold;
margin-top: 0px;
margin-bottom: 0px;
}
#dream {
float: left;
padding: 0 4px 0 6px;
}
#nav {
height: 28px;
text-align: left;
width: 629px;
float: left;
padding: 0 0 0 12px; /* left padding leaves room for NavLeft.gif */
background: url(Images/NavLeft.gif) no-repeat 0 0;
margin: 2px 0 0 0; /* changed from margin:0px; so that this can center the nav on the black bar*/
}

As you can see below, I moved the padding from #dream to #holder h1, floated #holder h1 to the left and set all the margins on #nav back to zero.

#holder h1 {
color:#FFFFFF;
font-size: 12px;
font-weight:bold;
margin: 0;
padding: 0 4px 0 6px;
float: left;
}
#dream {
float: left;
}
#nav {
height: 28px;
text-align: left;
width: 629px;
float: left;
padding: 0 0 0 12px; /* left padding leaves room for NavLeft.gif */
background: url(Images/NavLeft.gif) no-repeat 0 0;
margin: 0; /* changed from margin:0px; so that this can center the nav on the black bar*/
}

A couple other changes I made:

By adding "display:inline" to the #content styling you can fix IE's doubled float-margin (http://www.positioniseverything.net/explorer/doubled-margin.html).

I added another selector to "div.titles p" to get this:
div.titles h2, div.titles p {
line-height: 1;
padding: 4px 0 0;
margin: 0;
}

Then the new's section is kind of annoying how Firefox is working great but in IE it doesn't line up to the bottom of the latest downloads section .. Is there something I am missing?

I would guess the differences in default padding and margins for the two browsers are causing that.

Death Dream
04-29-2008, 08:41 PM
As you can see below, I moved the padding from #dream to #holder h1, floated #holder h1 to the left and set all the margins on #nav back to zero.
A couple other changes I made:


I see everything go back to the way it was with the nav bar on the top of the back BG bar.

By adding "display:inline" to the #content styling you can fix IE's doubled float-margin (http://www.positioniseverything.net/explorer/doubled-margin.html).

Interesting read and just shows how odd IE can be. But then again I don't see this problem on my site o.O I went ahead and added it to the #content but see no change either way.

(Did not upload this version)

~Death Dream~

Cary
04-29-2008, 10:21 PM
Interesting read and just shows how odd IE can be. But then again I don't see this problem on my site o.O

This bug isn't present in IE 7, in case that's what you're using.

Death Dream
04-30-2008, 01:28 PM
This bug isn't present in IE 7, in case that's what you're using.

Hah! I'm using IE6. I don't see any reason supporting anything pior to that because IE8 will be coming out soon to.

~Death Dream~

Death Dream
05-01-2008, 02:46 PM
You have this:
I added another selector to "div.titles p" to get this:
div.titles h2, div.titles p {
line-height: 1;
padding: 4px 0 0;
margin: 0;
}

I used this code in combination with my H2 code because it wasn't working to well for me to have to sets of H2 or one or the other in IE, although it did fix that ugly problem in IE7 =D (uploaded)

I'm going to try to figure out why my news isn't lining up quite right and then I am going to start up on some of the other pages, most of which are going to be a pretty basic layout that will be used on all other pages.

Edit: I always removed the Height and Width from #topcon .table since I will be using that same class for other pages and need it to be autoed.

~Death Dream~

Death Dream
05-01-2008, 03:23 PM
Edit2: I got values that are just not adding up ... Flash = 201 with a margin of 12, news at 410 with a footer of 13 adding up to 636. I had the left content side set for 680 .. ? After adjusting the right value in content nothing really changed so I took it back out as you stated once before. And I started to mess with the height of the News, it doesn't line up to the top section till about 443 which would then in turn give it a height of 669! I went into photoshop and measured the height of the other section 658! which leads me to believe IE can't do proper math because it looked like it was taking more pixels than it should of in the first place when I was adding more and more to the news. SO! I go to firefox, what do you know, it is over shot, go figure, at least Firefox knows how to do math a lil better.

So in the end I took back off the height of both sections again. My goal was to get it to line up with the right hand side (658px) but something is now allowing IE to do so. Is the footer do now allowing this?

I ended up uploading this version to show you what I mean by IE and FF way of doing math.

(I didn't make the 30 min cut off ....)

~Death Dream~

Death Dream
05-01-2008, 08:04 PM
Edit: I always removed the Height and Width from #topcon .table since I will be using that same class for other pages and need it to be autoed.

Edit on a Edit: I removed the ... *

Just realized I can't use the topcon table because I have a bg embedded into it.

Also, do you think I should put a H4 on the footer "website designed by" thing?

~Death Dream~

Cary
05-03-2008, 04:41 AM
Edit2: I got values that are just not adding up ... My goal was to get it to line up with the right hand side (658px) but something is now allowing IE to do so. Is the footer do now allowing this?

I ended up uploading this version to show you what I mean by IE and FF way of doing math.

I finally had a chance to take a look at this, but I'm not sure what's going on. The News title bar also accounts for 22px.

Death Dream
05-03-2008, 11:55 PM
I finally had a chance to take a look at this, but I'm not sure what's going on. The News title bar also accounts for 22px.

Ah forgot that. I'll redo my math on monday then.

~Death Dream~

Death Dream
05-05-2008, 02:26 PM
Found out what the problem is, and it's not even the left content side that is causing the problem. It's the topcon side! I can't believe I didn't see this sooner because I remember having this problem with the Adesa site I did awhile back. The way IE and FF use text is highly annoying and not centralized when it should be. While at face value it may look the same it causes pretty big design flaws as we are seeing now. The text and spacing is slightly bigger in IE than in FF.

In Firefox the height of topcon is 658 and in IE its 691 Not exactly to sure when this happened or I would try to back up and find what is causing this because at the start we didn't have this problem. I first thought it was the heading tags that might of caused this sudden change but then I remembered, this was a problem before I went ahead and added the Heading tags. It could be a problem with the spacing on the <p> tags because I was using <br> tags instead at that time.

If worse comes to worse, firefox will have to be a bit bigger and IE will be lined up correctly. As much as I would rather support FF, I need to look at the big picture and go with what is more widely used.

Edit: on a side note if your are wondering how I measured the sizes of topcon. I took printscreens, pasted into photoshop, cropped, and measured.

~Death Dream~

Death Dream
05-05-2008, 02:34 PM
Please delete this post

domedia
05-05-2008, 02:41 PM
don't want to read through 6 pages of thread.. url? :-)

Death Dream
05-05-2008, 02:47 PM
lol 9 pages now =P

http://dd.adesadesmoines.com/

~Death Dream~

domedia
05-05-2008, 08:11 PM
Well, you changed your last post before mine so I don't remember what the problem was anymore :-?

Death Dream
05-05-2008, 08:17 PM
Nah, I made a double post by mistake that is one one of them need deleted.

Anyways, http://dd.adesadesmoines.com/template.html

I started work on this page for the 3d section, ran into a few things that confused me. I'm using the same <p> tags on the scrolling sections yet the spacing seems different. Also, to get the space between the title and footer I just used a BR tag because I didn't want to screw up the spacing on the main page, not sure if this was how it should be done but it gave the result I was looking for.

On the Misc renders, I'm trying to do the following: http://dd.adesadesmoines.com/Untitled-3.gif

I tried putting them in their own div then in their own P tag but nothing worked on that, I wanted to keep the code on a min and only made a L and a R class again, do you think I need to make different div classes for each row if I want to do this? Or at the very least, different gicon classes with different sets of padding?

~Death Dream~

Death Dream
05-07-2008, 07:38 PM
Just an FYI, I am working on learning how to integrate Wordpress into my theme if at all possible.

~Death Dream~

Cary
05-12-2008, 07:44 AM
I'm using the same <p> tags on the scrolling sections yet the spacing seems different.

I still need to look into this.

Also, to get the space between the title and footer I just used a BR tag because I didn't want to screw up the spacing on the main page, not sure if this was how it should be done but it gave the result I was looking for.

You can also use margins instead of br tags.

On the Misc renders, I'm trying to do the following: http://dd.adesadesmoines.com/Untitled-3.gif

This is what I used and it seems to work okay.

<div id="maya">
<div class="titles"><div><div><h2>Misc Renders</h2></div></div></div>
<div class="table2">
<div>
<a href="#"><img src="Images/TopIcons/UVmappingIco.gif"></a>
<a href="#"><img src="Images/TopIcons/UVmappingIco.gif"></a>
<a href="#"><img src="Images/TopIcons/UVmappingIco.gif"></a>
</div>
<div>
<a href="#"><img src="Images/TopIcons/UVmappingIco.gif"></a>
<a href="#"><img src="Images/TopIcons/UVmappingIco.gif"></a>
</div>
<div>
<a href="#"><img src="Images/TopIcons/UVmappingIco.gif"></a>
<a href="#"><img src="Images/TopIcons/UVmappingIco.gif"></a>
<a href="#"><img src="Images/TopIcons/UVmappingIco.gif"></a>
</div>
<div>
<a href="#"><img src="Images/TopIcons/UVmappingIco.gif"></a>
<a href="#"><img src="Images/TopIcons/UVmappingIco.gif"></a>
</div>
<div>
<a href="#"><img src="Images/TopIcons/UVmappingIco.gif"></a>
</div>
</div>
</div>

#maya {
width:148px;
margin: 10px 0 0 10px;
float:left;
}
#maya .table2 {
background: url(Images/TopsBG.gif) no-repeat bottom #303e3c;
margin-top:2px;
}
#maya .table2 img {
padding: 2px 1px;
}

Cary
05-12-2008, 07:58 AM
I'm using the same <p> tags on the scrolling sections yet the spacing seems different.

Find the selector, "#content .news div p", and change it to "#content .news div p, #game .ginfo div p"

Death Dream
05-14-2008, 09:28 PM
Thanks Cary, I will look at this after I get the main setup going on Wordpress. Thank goodness you were willing to teach me this CSS or what I am learning about WP would make no sense to me right now.

~Death Dream~

Death Dream
05-15-2008, 07:42 PM
Not sure if I asked this, but is there a way to force the div to keep its height and width no matter if there is content in it or not?

Is that the position: absolute; thing?

~Death Dream~

Cary
05-16-2008, 01:04 AM
Usually, you just use width and height in your styling. This won't work if the div also has "display:inline" styling.

Death Dream
05-16-2008, 01:12 PM
Usually, you just use width and height in your styling. This won't work if the div also has "display:inline" styling.

Yeah I thought so too, because my flash div keeps it's shape just fine but then my banner image thing doesn't keep it's shape which is the oddest thing.

I just tossed some <br /> tags inside it to keep it's shape.

~Death Dream~

domedia
05-16-2008, 03:40 PM
Yeah I thought so too, because my flash div keeps it's shape just fine but then my banner image thing doesn't keep it's shape which is the oddest thing.

I just tossed some <br /> tags inside it to keep it's shape.

~Death Dream~
Remember to do styling with CSS ;-)
Add a padding-bottom instead of the BR's.

Death Dream
05-16-2008, 03:44 PM
Remember to do styling with CSS ;-)
Add a padding-bottom instead of the BR's.

That wont work because I am skinning WordPress with this question I asked (This should really go in my wordpress thread) I can't figure out how to get <img src> tags to work correctly yet so I just set the image as a background inside the Div and used the BRs to push the table down so the whole image is seen. It's a temp work around for now anyways.

Edit: Fixed now, found out how to display images correctly in Wordpress now (see that thread if you have questions, this is for CSS) http://www.dreamweaverclub.com/forum/showthread.php?t=27853

~Death Dream~

Death Dream
05-19-2008, 04:57 PM
Alright, this is going to be hard to show since wordpress is on my local machine but I will try my best to show you my problem.

http://img366.imageshack.us/img366/6994/ffieloginbarcc3.gif

Again, I think this might have to deal with the font size but was wondering if there is some kind of work around on this? It looks prefect in FF but in IE .. EW!!!

Here is my code:

#login {
width: 775px;
text-align: left;
margin-bottom: 4px;
float: left;
}
#login .design {
width: 81px;
height: 16px;
padding: 0 8px 0 84px;
float: left;
}
#login span {
height: 16px;
font-size: 10px;
}
#login .forms {
background:url(Images/formbg.gif);
width: 79px;
height: 14px;
text-align:center;
float:left;
margin: 1px 7px 0 0;
}
.textinput {
border:none;
height:12px;
font-size:9px;
}
#login .bgbutton {
background:url(Images/loginbg.gif) #666666;
float:left;
margin: 1px 7px 0 0;
width: 46px;
height: 15px;
text-align:center;
}
.button {
font-size: 10px;
color:#FFFFFF;
background:#666666;
border:none;
}

The first three sections never changed I just put that there to give you an idea where I put the code ( #login, design, span )


<div class="forms"><input type="password" name="pwd" id="pwd" size="9" class="textinput" /></div>

Also, I wanted to put the words "username" and "password" in the field themselves in a light gray color but when I put say value="password" in the input, it comes up at "********" when the page is viewed. No idea how to get that to work >.<

Thanks again

~Death Dream~

domedia
05-19-2008, 05:15 PM
Also, I wanted to put the words "username" and "password" in the field themselves in a light gray color but when I put say value="password" in the input, it comes up at "********" when the page is viewed. No idea how to get that to work >.< The value of an input password field will always come up like that.

I use an input field technique (http://www.jasongraphix.com/archive/2008/01/textbox_hints) I first found on Jason Beaird's blog (http://www.jasongraphix.com), he's also the author behind Sitepoint's 'The Principles of Beautiful Web Design (http://www.sitepoint.com/books/design1/)' book.

It basically involves using a background image with the word 'Password' in it.

If you're starting to get familiar with CSS, this should be easy for you :)

Death Dream
05-19-2008, 06:06 PM
The value of an input password field will always come up like that.

I use an input field technique (http://www.jasongraphix.com/archive/2008/01/textbox_hints) I first found on Jason Beaird's blog (http://www.jasongraphix.com), he's also the author behind Sitepoint's 'The Principles of Beautiful Web Design (http://www.sitepoint.com/books/design1/)' book.

It basically involves using a background image with the word 'Password' in it.

If you're starting to get familiar with CSS, this should be easy for you :)

Yeah I was thinking that would end up being the next step, The field actually has a background image too as you can see. I'll have to mess with it after I figure out how to fix the IE uglyness >.<

~Death Dream~

Death Dream
05-19-2008, 06:46 PM
ARGH!! I hate this not being able to edit a post after 30 mins!!!!

Anyways, I checked the demo version of what he had going and that is exactly what I am looking for, although it doesn't work in FF. At least it works in IE though, one of the few things I have done that have actually worked in IE but not FF. (unless one of my addon's are blocking it)

~Death Dream~

domedia
05-19-2008, 10:17 PM
Anyways, I checked the demo version of what he had going and that is exactly what I am looking for, although it doesn't work in FF. At least it works in IE though, one of the few things I have done that have actually worked in IE but not FF. (unless one of my addon's are blocking it) Works perfect cross browser. You're doing something wrong, or you might have some other code that is inflicting. Look at the implementation I did on the login box on top of this site http://twurl.nl/c25vg3

Death Dream
05-19-2008, 10:49 PM
Nah I didn't even start it, was just looking at the demo that was on the site and it didn't work on my laptop for some reason >.>

On my desktop now and it works fine on both sites.

~Death Dream~

Cary
05-20-2008, 03:01 AM
Alright, this is going to be hard to show since wordpress is on my local machine but I will try my best to show you my problem.

Oh, man... You'll just have to go in with Firebug and play around with tweaking different things. That's what I would do.

Death Dream
05-20-2008, 01:36 PM
Oh, man... You'll just have to go in with Firebug and play around with tweaking different things. That's what I would do.

Actually I uploaded it now, only took 2mins to take my WP code into this. Just took out the main portion of my PHP code.

http://dd.adesadesmoines.com/

I'll look at the Firebug for IE in a few hours, I have a busy morning ahead of me but figured I could get this uploaded really fast too.

I'll let you know if I figure anything out.

~Death Dream~

Death Dream
05-20-2008, 07:10 PM
Alright, firebug on IE is SOOOO not the same as it is in FF. The whole console thing is a bit odd >.> type some HTML in there and it has no idea what is going on.

After screwing around with that for about 40minutes >.< I went ahead and moved on to the comments, tried to code that with PHP which was working fine and dandy but my CSS is still screwy. So I ditched the PHP and went strait to CSS/HTML till I get it fixed first then merge my php in.

http://dd.adesadesmoines.com/Comments.html

The avatar on the left side is kind of in two divs, one to give the green boarder and the other for the greyish background (div commentleft). I gave the hieght of commentleft 100% to try to take up the whole height of the red div, but it isn't wanting to expand all the way down. If I give it a width of 100% it works fine, NO IDEA why this is not working >.<

Help >.<

~Death Dream~

domedia
05-20-2008, 08:40 PM
Hi DD, did you think about starting a new thread for each new 'topic'?
The reason for this is that you're limiting yourself here, few people are going to read through 10 pages of posts to get to your last post ;-) If you want to keep posting in this thread, that's fine as well, just wanted to give you some advice :)

Death Dream
05-20-2008, 09:36 PM
Hi DD, did you think about starting a new thread for each new 'topic'?
The reason for this is that you're limiting yourself here, few people are going to read through 10 pages of posts to get to your last post ;-) If you want to keep posting in this thread, that's fine as well, just wanted to give you some advice

The thought crossed my mind but I hate making multiple threads for one site. I just hate that >.< I already got 3 or 4 different threads going that pertain to this one site. Hell you've seen how I hate to even double post lol

While true, I understand CSS enough now (thanks to Cary:) ) that the thread could really use a name change. I know most wouldn't read 10 pages but when the question at hand changes every 3-4 posts it's just viewing the last page you can get a grasp of the question (I know unlikely).

Also, what I think is if someone wants to learn CSS, they could start at this thread and just read it all the way through. 90% of the code to the first site is on here and should be a great starting point for anyone. It gets more advance as the thread goes too I think.

I also really like working with Cary since he knows how I work and what direction I want to go :) If I started a new thread every question I would have to explain everything over and over again, thus spam on the forums.

This is just my opinion though and how I run my own sites. I try to treat other forums as if they are my own. Maybe this is going to far? Since this is not my forums I will do as you wish. If you want me to start breaking up the questions into sub threads I will. :)

Edit: Lol this thread is pretty big O.O

~Death Dream~

Death Dream
05-20-2008, 11:51 PM
http://dd.adesadesmoines.com/Comments.html

The avatar on the left side is kind of in two divs, one to give the green boarder and the other for the greyish background (div commentleft). I gave the hieght of commentleft 100% to try to take up the whole height of the red div, but it isn't wanting to expand all the way down. If I give it a width of 100% it works fine, NO IDEA why this is not working >.<

Help >.<

~Death Dream~

TOTALLY!!!! Forgot to reupload my DDStyle.css to the FTP ....ARGH >.< I ran my laptop battery dead and I don't have my powersupply cable with me to recharge it. Guess I'll worry about this tomorrow.

~Death Dream~

Cary
05-21-2008, 04:18 AM
Hi Death,

First I had to change a portion of your html because it was missing an opening form tag, had a closing li tag that wasn't needed and a span tag containing block level elements. So this was the original code:

<div id="login">
<img class="design" src="Images/design.gif" alt="" width="81" height="14">
<span>
<div class="forms"><input type="text" name="log" id="log" value="<?php echo wp_specialchars(stripslashes($user_login), 1) ?>" size="9" class="textinput" /></div>
<div class="forms"><input type="password" name="pwd" id="pwd" size="9" class="textinput" /></div>
<input name="rememberme" type="hidden" id="rememberme" value="forever" tabindex="90" />
<div class="bgbutton"><input type="submit" name="submit" value="login" class="button" class="button" /></div>
<input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>"/>
</form>
<a href="#">Register</a> | <a href="#">Lost Password?</a></li></span>
</div>

This is the modified code:

<div id="login">
<img class="design" src="Images/design.gif" alt="" width="81" height="14">
<form>
<div class="forms"><input type="text" name="log" id="log" value="<?php echo wp_specialchars(stripslashes($user_login), 1) ?>" size="9" class="textinput" /></div>
<div class="forms"><input type="password" name="pwd" id="pwd" size="9" class="textinput" /></div>
<input name="rememberme" type="hidden" id="rememberme" value="forever" tabindex="90" />
<div class="bgbutton"><input type="submit" name="submit" value="login" class="button" /></div>
<input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>"/>
</form>
<span><a href="#">Register</a> | <a href="#">Lost Password?</a></span>
</div>

Alright, this is going to be hard to show since wordpress is on my local machine but I will try my best to show you my problem.

http://img366.imageshack.us/img366/6994/ffieloginbarcc3.gif

Again, I think this might have to deal with the font size but was wondering if there is some kind of work around on this? It looks prefect in FF but in IE .. EW!!!

I tried this CSS after the #login rule:

#login form * {
padding: 0;
}

It takes the default padding off of everything within the form, and then your style rules with padding which follow it are applied. You can try to narrow down which element's padding needs to go if you wish or just use this.

The avatar on the left side is kind of in two divs, one to give the green boarder and the other for the greyish background (div commentleft). I gave the hieght of commentleft 100% to try to take up the whole height of the red div, but it isn't wanting to expand all the way down. If I give it a width of 100% it works fine, NO IDEA why this is not working >.<

Yep, 100% height and 100% width don't work the same way. You need to use some kind of faux column technique. You had the following 3 style rules:

.commentholder {
background:#FF0000; /* red */
float:left;
width:542px;
}
.commentleft {
height:100%;
float:left;
text-align:center;
vertical-align:middle;
background:#505c5b;
}
.commentwrapper {
width:500px;
float:left;
text-align:left;
}

Change them like this:

.commentholder {
background-color: #505C5B;
float:left;
width:542px;
}
.commentleft {
float:left;
text-align:center;
vertical-align:middle;
background:#505c5b;
}
.commentwrapper {
background-color: #FF0000; /* red */
width:500px;
float:left;
text-align:left;
}

Death Dream
05-21-2008, 05:00 PM
First I had to change a portion of your html because it was missing an opening form tag, had a closing li tag that wasn't needed and a span tag containing block level elements. So this was the original code:



Host likely when I was taking my php wordpress theme apart to put into this, that happened, was in a hurry.


Yep, 100% height and 100% width don't work the same way. You need to use some kind of faux column technique. You had the following 3 style rules:


Am I blind or did I see you only changed the background to background-color, removed the height, and it worked??

Does vertical-align:middle; not work anymore?

~Death Dream~

Death Dream
05-21-2008, 07:11 PM
I think I am going to have to make another CSS file for IE users on this login section.

~Death Dream~

Death Dream
05-21-2008, 08:03 PM
On the comments, I actually realized I have some extra div's that I did not need and used <p>'s instead. Check it out, I am rather happy I was able to do this :)

This is how it looks in wordpress: http://img502.imageshack.us/img502/8873/examplert6.gif


.commentholder {
background-color: #505C5B;
float:left;
width:542px;
margin: 4px 0 4px 0;
}
.commentleft {
float:left;
text-align:center;
vertical-align:middle;
background:#505c5b;
}
.commentavatar {
height:32px;
width:32px;
background:#bfdf00;
padding:1px;
margin: 8px 4px;
}
.commentcontent {
background: #303e3c url(Images/commentbg.gif) no-repeat bottom;
width:500px;
float:left;
text-align:left;
word-wrap:break-word; /*IE*/
overflow:hidden; /*firefox*/
}
.commentcontent p {
padding:0 0 0 4px;
}
.commentname {
margin:0;
}
.commentdate {
margin: 0px;
padding: 0 0 4px 4px;
color:#CCCCCC;
font-size:9px;
}


<div class="commentholder"><!--Start of holder-->
<div class="commentleft"><!--AvatarSide-->
<div class="commentavatar">
<img src="image.gif">
</div>
</div><!--End of Avatar-->

<div class="commentcontent"><!--Start of Comment area-->
<p class="commentname"><strong>UserName</strong> Said</p>
<p class="commentdate">Date Posted</p>

<p>Comment Content</p>
</div><!--End of comment Area-->
</div><!--End of Holder-->

I removed the PHP code to make it easier on the eye, but that is basically what I did :) Ignore the vertical align thing too, I actually like the way this looks. :)

~Death Dream~

Cary
05-22-2008, 02:37 AM
Am I blind or did I see you only changed the background to background-color, removed the height, and it worked??

Nope, using "background-color" didn't affect anything. Look closely and you'll see I change the red color to the one you wanted below the avatar, and I placed the red background on an inner div.

Does vertical-align:middle; not work anymore?

Perhaps not the way you thought. I know I don't understand it. This might make it clearer:

http://reference.sitepoint.com/css/vertical-align