My first site ever that I fully coded and designed. Portfolio.

http://img228.imageshack.us/img228/7205/templaten.jpg

I started this yesterday and just finished template.

It works best in Firefox 3.5.

www.stoopidwiseman.co.cc

CnC?

Will be here shortly.

I'm a nub at coding. :(

(Sorry for the double post...forgot about the 5 min rule)

http://69.65.47.196/%7Eflashadv/images/stoopid.png

#1. The layout is really sort of bland. I won't say you should redo it, but you should try to keep things as interesting as possible. 2 column layouts are just...bleh...you know? There's so much better ways to use your space and give content a home. Speaking of content, you need to throw some in here, so we can see what you plan to do with it. Content can make this look good or bad, so it's kind of necessary.

#2. I'm willing to bet, judging by the code, the loading time, and the way each image loaded individually, that you sliced and coded this with photoshop. While I'll give it to you since it's your first time, don't ever ever ever ever ever ever ever ever EVER do this again. And I'll tell you why.

- It's messy. Look at your code and count the number of blank p elements you see in the layout (blank also includes non-breaking spaces, or  ). TOO MANY. This is messy code, and it makes your browser work twice as hard. It's cluttered and it slows things down.

- Photoshop slices things and uses tables to lay them out. While this was acceptable when photoshop first introduced the "publish to html" feature, it is outdated and considered taboo with the introduction of CSS. What is CSS? It's the answer to tables and their unholy presence in the design world. Why are tables considered taboo? Because back in the day, we designers had to use tables to make our designs and layouts nice and pretty. But because of the fact that tables were never intended to be used in such a fashion, alot of crap ensued. Things were buggy, and it took forever to get things just right. Now, with css (this is years back now), all your troubles are over. And instead of 20-30 images coupled in table cells, you have 4-5 divs that do the work for you. It's smarter, and more efficient. If you are using tables for anything besides tabular data, YOU ARE WRONG!

- It's lazy.

- See reason above.

I could go on and on about the reasons why I hate the publish to html feature in photoshop, but you get the idea.

That brings me to my next points.

#4. Navigations, unless for some ungodly reason and purpose, should be done using the following two methods: 1. As an unordered list (this gives you spacing and horizontal or vertical placement). 2. As text. Navigations are usually vital to the success of certain layouts and designs, and if they are images, well they have to uh...load. Take this lesson to a certain degree and consider the following: Most of the text in your design should be static text, not images. If you want to use a font that your viewers may not have, and you simply cannot use a web-safe font, then fine, use images sparingly. But in this day and age, you should be considerate enough to make your text static, not individual images. Bad boy.

Other than that, since this is your first, you're off to a decent start. It's good to make mistakes right off the bat so you don't have to slam into them later, but please, please consider the suggestions I've made. I assure you I do not lead you astray; times have changed in the webdesign world, and this is just one of many things that have evolved.

Another point I wanted to make:

You should decide whether you want to have a horizontal navigation or a vertical one. You see sites with this sort of layout when there's alot of subsections for a page, or it needs to be broken down in some way. But you've got the same links on both bars, and this is a little unnecessary. Make less work for yourself and confine yourself to either one or the other. Usability wise, it makes no sense to have the same bar twice on one page. It's confusing more than anything else.

Take Sol's advice mate he's like a guru at this stuff

Quote:

Originally Posted by Solaris

(Sorry for the double post...forgot about the 5 min rule)

Best critique I've ever received. Thanks. :D

I'm actually working on a site right now using every suggestion you gave me. :)

I just found out how to add a background image to a div tag. :P

@ rein

http://webdeveloper.econsultant.com/css-cheat-sheets/

;)

Everytime I try to add a margin or padding to one of my div tags, it expands the div tag too so it gets everything out of place on my template. Is there anyway to fix this? :(

It's making me raaaaaage.

Post the code here and I'll take a look for you :)

Sorry for double post.

PICS:

Without padding:
http://i563.photobucket.com/albums/s...an/margin1.jpg

With padding:
http://i563.photobucket.com/albums/s...an/margin2.jpg

What am I doing wrong?

I got one of the headers in the top image higlighted for some reason, didn't make that a div tag yet.

Here's the CSS code for that one div tag, or do you want the full html code?

#site_layout_content1 {
background-color: #FFF;
height: 512px;
width: 480px;
background-image: url(http://images.gfxvoid.com/forums/images/textbox1.png);
font-size: 12px;
font-family: Verdana, Geneva, sans-serif;
margin: 0px;
padding: 15px;
}

Can you show me what you want it to look like, or is the first one the way you want it?

And show me everything. Show me the html, and then show me the css. I'll see if I can hit multiple birds with one stone.

I want it to look like this:

http://img401.imageshack.us/img401/3707/51657960.jpg

Here's the html:

(I haven't made all the images backround images yet. Haven't made buttons yet either. :P)

Code:

<html> <head> <title>Stoopid Wiseman's Portfolio</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css">  </style> <link href="site_layout.css" rel="stylesheet" type="text/css"> <link href="site_layout_content1.css" rel="stylesheet" type="text/css"> <link href="site_layout_content2.css" rel="stylesheet" type="text/css"> </head> <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <div id="site_layout"> <table width="1001" height="901" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01"> <tr> <td colspan="4" rowspan="5"> <img src="images/logo.png" width="357" height="151" alt="Stoopid Wiseman Logo"></td> <td colspan="20"> <img src="images/header1.png" width="643" height="90" alt="Header"></td> <td> <img src="images/spacer.gif" width="1" height="90" alt=""></td> </tr> <tr> <td rowspan="5"> <img src="images/header2.gif" width="15" height="65" alt=""></td> <td colspan="2" rowspan="2"> <img src="images/homebutton1.png" width="82" height="39" alt="Home"></td> <td rowspan="5"> <img src="images/header3.gif" width="15" height="65" alt=""></td> <td colspan="4" rowspan="3"> <img src="images/graphicsbutton1.png" width="101" height="43" alt="Graphics"></td> <td rowspan="5"> <img src="images/header4.gif" width="17" height="65" alt=""></td> <td rowspan="2"> <img src="images/beatsbutton1.png" width="71" height="39" alt="Beats"></td> <td colspan="2" rowspan="5"> <img src="images/header5.gif" width="16" height="65" alt=""></td> <td colspan="2" rowspan="3"> <img src="images/templatesbutton1.png" width="118" height="43" alt="Templates"></td> <td rowspan="5"> <img src="images/header6.gif" width="20" height="65" alt=""></td> <td> <img src="images/linksbutton1.png" width="55" height="36" alt="Links"></td> <td rowspan="5"> <img src="images/header7.gif" width="20" height="65" alt=""></td> <td rowspan="2"> <img src="images/donatebutton1.png" width="89" height="39" alt="Donate"></td> <td colspan="2" rowspan="5"> <img src="images/header8.png" width="24" height="65" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="36" alt=""></td> </tr> <tr> <td rowspan="4"> <img src="images/portfolio_16.gif" width="55" height="29" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="3" alt=""></td> </tr> <tr> <td colspan="2" rowspan="3"> <img src="images/portfolio_17.gif" width="82" height="26" alt=""></td> <td rowspan="3"> <img src="images/portfolio_18.gif" width="71" height="26" alt=""></td> <td rowspan="3"> <img src="images/portfolio_19.gif" width="89" height="26" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="4" alt=""></td> </tr> <tr> <td colspan="4" rowspan="2"> <img src="images/portfolio_20.gif" width="101" height="22" alt=""></td> <td colspan="2" rowspan="2"> <img src="images/portfolio_21.gif" width="118" height="22" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="18" alt=""></td> </tr> <tr> <td colspan="4"> <img src="images/portfolio_22.gif" width="357" height="4" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="4" alt=""></td> </tr> <tr> <td colspan="2"> <img src="images/2header1.png" width="220" height="38" alt=""></td> <td colspan="4"> <img src="images/2header2.png" width="194" height="38" alt="Stoopid Wiseman's Porfolio"></td> <td colspan="5"> <img src="images/2header3.png" width="127" height="38" alt=""></td> <td colspan="7"> <img src="images/2header5.png" width="251" height="38" alt="Graphics, Beats, Templates, and more."></td> <td colspan="6"> <img src="images/2header6.png" width="208" height="38" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="38" alt=""></td> </tr> <tr> <td colspan="24"><div id="banner"></div></td> <td> <img src="images/spacer.gif" width="1" height="97" alt=""></td> </tr> <tr> <td colspan="3"><img src="images/3header1.png" width="326" height="19"></td> <td colspan="12"> <img src="images/3header2.png" width="334" height="19" alt="Purchase graphics, beats, and templates for extremely low prices."></td> <td colspan="9"> <img src="images/3header3.png" width="340" height="19" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="19" alt=""></td> </tr> <tr> <td colspan="17"> <img src="images/4header1.png" width="752" height="43" alt=""></td> <td colspan="7"> <img src="images/4header2.png" width="248" height="43" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="43" alt=""></td> </tr> <tr> <td> <img src="images/sidebar1.png" width="21" height="512" alt=""></td> <td colspan="8"><div id="site_layout_content1">test</div></td> <td><div id="textboxmiddle"></div></td> <td colspan="13"><div id="site_layout_content2">test</div></td> <td> <img src="images/sidebar2.png" width="21" height="512" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="512" alt=""></td> </tr> <tr> <td colspan="24"> <img src="images/footer2.png" width="1000" height="14" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="14" alt=""></td> </tr> <tr> <td colspan="24"><div id="footer"><span id="main"><span id="footer2">  </span></span></div></td> <td> <img src="images/spacer.gif" width="1" height="22" alt=""></td> </tr> <tr> <td> <img src="images/spacer.gif" width="21" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="199" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="106" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="31" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="15" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="42" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="40" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="15" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="32" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="12" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="28" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="29" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="17" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="71" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="2" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="14" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="78" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="40" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="20" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="55" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="20" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="89" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="3" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="21" height="1" alt=""></td> <td></td> </tr> </table> </div> </body> </html>

And the css codes:

"site_layout.css"

Code:

#site_layout { background-color: #0B0B0B; background-image: url(http://images.gfxvoid.com/forums/images/bg.jpg); background-repeat: repeat; height: 100%; width: 100%; padding-top: 30px; } #site_layout { background-image: url(http://images.gfxvoid.com/forums/images/bg.jpg); background-repeat: repeat; height: 100%; width: 100%; padding-top: 30px; } #banner { background-image: url(http://images.gfxvoid.com/forums/images/photo.jpg); height: 97px; width: 1000px; } #textboxmiddle { background-image: url(http://images.gfxvoid.com/forums/images/textbox2.png); height: 526px; width: 12px; } #textboxmiddle { background-image: url(http://images.gfxvoid.com/forums/images/textbox2.png); height: 512px; width: 12px; } #footer { background-image: url(http://images.gfxvoid.com/forums/images/footer.png); height: 22px; width: 1000px; text-align: left; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #FFF; } #site_layout #Table_01 tr td #site_layout_content1 { }

"site_layout_content1.css"

Code:

#site_layout_content1 { background-color: #FFF; height: 512px; width: 480px; background-image: url(http://images.gfxvoid.com/forums/images/textbox1.png); font-size: 12px; font-family: Verdana, Geneva, sans-serif; margin: 0px; padding: 15px; }

"site_layout_content2.css"

Code:

#site_layout_content2 { background-color: #FFF; height: 512px; width: 466px; }

Okay, first question:

Why do you have multiple css files?

Quote:

Originally Posted by Solaris

Okay, first question:

Why do you have multiple css files?

I don't know. :(

I think I'm gonna start over with the coding part, it won't take long. :P I kinda screwed everything up.

Haha okay. Gimme a sec.

Okay take out your last 2 rss links in the head section, and make this your single css file:

Quote:

#site_layout {
background-color: #0B0B0B;
background-image: url(http://images.gfxvoid.com/forums/images/bg.jpg);
background-repeat: repeat;
height: 100%;
width: 100%;
padding-top: 30px;
}

#banner {
background-image: url(http://images.gfxvoid.com/forums/images/photo.jpg);
height: 97px;
width: 1000px;
}
#textboxmiddle {
background-image: url(http://images.gfxvoid.com/forums/images/textbox2.png);
height: 526px;
width: 12px;
}

#footer {
background-image: url(http://images.gfxvoid.com/forums/images/footer.png);
height: 22px;
width: 1000px;
text-align: left;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
color: #FFF;
}

#site_layout_content1 {
background-color: #FFF;
height: 512px;
width: 480px;
background-image: url(http://images.gfxvoid.com/forums/images/textbox1.png);
font-size: 12px;
font-family: Verdana, Geneva, sans-serif;
margin: 0px;
padding: 15px;
}

#site_layout_content2 {
background-color: #FFF;
height: 512px;
width: 466px;
}

I removed your duplicate selectors. Remember, you only need one per property.

As for your html. Honestly, I would start from scratch. Since you want to go with divs and css, you need to let go entirely of tables. Tables can be completely replaced by divs. If you want, I can do a basic html structure for you.

I also noticed you used padding incorrectly. See this diagram for some specific details:

http://www.w3.org/TR/CSS2/images/boxdim.png

It isn't very clear, but the way you discern padding from margins is the box model. Inside divs you may want to constrain your content, so it doesnt hit the very edge of the box. This is padding. If you want to nudge the whole actual div to the left or right, up or down, this is margin.

OKay, I prepared a base structure for both your html document and the css. I didn't apply any graphics, but you can get a basic idea of how I did it by looking at the 2 documents.

HTML

Code:

<!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"> <head> <link rel="stylesheet" type="text/css" href="style.css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>stoopid wiseman</title> </head> <body> <div id="container"> <div id="header"><h1>STOOPID WISEMAN</h1></div> <div id="subheader"> <div id="subleft"><h2>STOOPID WISEMAN'S PORTFOLIO</h2></div> <div id="subright"><h2>GRAPHICS, BEATS, TEMPLATES, AND MORE</h2></div> <div id="subbottom"> </div> </div> <div id="content-container"> <div id="title"><h2>Home</h2></div> <div id="content-left"><h2>Content Here</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean porta ligula at ante tincidunt cursus. Proin volutpat metus sit amet lorem eleifend lobortis. Quisque iaculis convallis lectus, vitae dignissim lectus hendrerit ut. Donec laoreet cursus dui, eget rutrum augue tempus hendrerit. Vivamus condimentum urna eu lectus feugiat quis vestibulum magna convallis. Aenean tempor, justo vitae aliquam varius, odio risus dapibus orci, sit amet euismod magna turpis a tortor. Ut tincidunt enim et lectus sodales ut venenatis quam malesuada. Phasellus ac pharetra mi. Duis congue, orci non venenatis sodales, sem ipsum accumsan urna, vitae accumsan orci sem quis massa. Donec rutrum metus ut magna imperdiet sit amet sollicitudin enim dictum. Nunc tellus elit, volutpat a posuere eu, aliquet non ligula. </p></div> <div id="content-right"><h2>Content Here</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean porta ligula at ante tincidunt cursus. Proin volutpat metus sit amet lorem eleifend lobortis. Quisque iaculis convallis lectus, vitae dignissim lectus hendrerit ut. Donec laoreet cursus dui, eget rutrum augue tempus hendrerit. Vivamus condimentum urna eu lectus feugiat quis vestibulum magna convallis. Aenean tempor, justo vitae aliquam varius, odio risus dapibus orci, sit amet euismod magna turpis a tortor. Ut tincidunt enim et lectus sodales ut venenatis quam malesuada. Phasellus ac pharetra mi. Duis congue, orci non venenatis sodales, sem ipsum accumsan urna, vitae accumsan orci sem quis massa. Donec rutrum metus ut magna imperdiet sit amet sollicitudin enim dictum. Nunc tellus elit, volutpat a posuere eu, aliquet non ligula. </p></div> <div id="clear"> </div> </div> </div> </body> </html>

And CSS

Code:

@charset "utf-8"; /* CSS Document */ body { font-family:Arial, Helvetica, sans-serif; background-color:#000; } h1 { font-size: 2em; color:#FFF; } h2 { font-size: 1.1em; color: #FFF; } #container { width: 960px; height: 900px; background-color:#999; margin-left: auto; margin-right: auto; border-color:#FFF; border: solid; } #header { width: 940px; height: 150px; background-color:#F00; padding: 10px; } #subheader { background-color:#CCC; } #subleft { width: 50%; text-align:center; float: left; } #subright { width: 50%; text-align:center; float: right; } #subbottom { width: 100%; background-color: #333; height: 80px; clear:both;} #content-container { width: 93%; margin-left: auto; margin-right: auto; } #title { background-color: #F00; height: 30px; } #content-left { width: 48%; height: 400px; float: left; background-color: #CCC; padding: 8px; } #content-right { width: 48%; height: 400px; float: right; background-color: #CCC; padding: 8px;} #clear { clear: both; }

Hope this helps you.

Given sample creates this:

http://69.65.47.196/%7Eflashadv/images/sw.png

Solaris is a beast.

I uploaded the files in case you wanted to see it live.

demonstration

Thanks for the html layout, but I already started coding before I saw that post. :(

But I need help again.

This is what I have:

http://stoopidwiseman.x10hosting.com/#

HTML:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Stoopid Wiseman's Portfolio</title> <style type="text/css">  </style> <link href="css/layout.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wraparound"> <div id="logo"><a href="index.html"><img src="images/logo.jpg" width="1000" height="250" alt="Stoopid Wiseman's Portfolio Logo" /></a></div> <div id="banner"></div> <div id="border"></div> <div id="navigation"><a href="#">Home</a> <a href="#">Graphics</a> <a href="#">Beats</a> <a href="#">Templates</a> <a href="#">Donate</a> <a href="#">Links</a> <a href="#">About</a> <a href="#">Contact</a></div> <div id="border2"></div> <div id="welcomebar"><img src="images/welcomebarhome.jpg" width="1000" height="30" /></div> </div> </body> </html>

CSS

Code:

@charset "utf-8"; * { margin: 0px; } #wraparound { background-color: #F7f7f7; width: 1000px; margin-right: auto; margin-left: auto; border-right-width: 1px; border-left-width: 1px; border-right-style: solid; border-left-style: solid; border-right-color: #EAEAEA; border-left-color: #EAEAEA; } #wraparound #logo { height: 250px; background-color: #FFF; } #wraparound #banner { height: 100px; background-image: url(../images/banner.jpg); padding: 15px; } #wraparound #border { height: 5px; width: 1000px; background-image: url(../images/border.jpg); } #wraparound #navigation { height: 35px; background-image: url(../images/rolloverbg.jpg); background-repeat: repeat-x; } #wraparound #welcomebar { height: 30px; width: 1000px; } #wraparound #border2 { background-image: url(../images/border.jpg); background-repeat: no-repeat; height: 5px; width: 1000px; } #wraparound #navigation a { font-family: Arial, Helvetica, sans-serif; font-size: 16px; text-decoration: none; font-weight: bold; color: #DFE0DB; display: block; height: 35px; width: 125px; float: left; text-align: center; line-height: 32px; background-image: url(../images/rollover.jpg); background-repeat: no-repeat; background-position: left top; } a img { border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; } #wraparound #navigation a:hover { background-position: bottom; } #wraparound #contentarea { border-right-color: #EAEAEA; border-left-color: #EAEAEA; border-right-width: 1px; border-left-width: 1px; width: 1000px; } #wraparound #contentarea #contentarea1 { height: 485px; width: 475px; border-right-width: 1px; border-left-width: 1px; border-right-color: #EAEAEA; border-left-color: #EAEAEA; background-image: url(../images/contentbox1.png); float: left; }

What I'm trying to accomplish (w/o green strokes & text obviously):
http://img268.imageshack.us/img268/4420/fmlo.jpg

What I get when I'm trying to accomplish that:
http://img30.imageshack.us/img30/8821/fml2p.jpg

It gets rid of my #wraparound 1 px border on the sides, too.

What my html and css codes are for trying to accomplish that:

CSS:

Code:

@charset "utf-8"; * { margin: 0px; } #wraparound { background-color: #F7f7f7; width: 1000px; margin-right: auto; margin-left: auto; border-right-width: 1px; border-left-width: 1px; border-right-style: solid; border-left-style: solid; border-right-color: #EAEAEA; border-left-color: #EAEAEA; } #wraparound #logo { height: 250px; background-color: #FFF; } #wraparound #banner { height: 100px; background-image: url(../images/banner.jpg); padding: 15px; } #wraparound #border { height: 5px; width: 1000px; background-image: url(../images/border.jpg); } #wraparound #navigation { height: 35px; background-image: url(../images/rolloverbg.jpg); background-repeat: repeat-x; } #wraparound #welcomebar { height: 30px; width: 1000px; } #wraparound #border2 { background-image: url(../images/border.jpg); background-repeat: no-repeat; height: 5px; width: 1000px; } #wraparound #navigation a { font-family: Arial, Helvetica, sans-serif; font-size: 16px; text-decoration: none; font-weight: bold; color: #DFE0DB; display: block; height: 35px; width: 125px; float: left; text-align: center; line-height: 32px; background-image: url(../images/rollover.jpg); background-repeat: no-repeat; background-position: left top; } a img { border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; } #wraparound #navigation a:hover { background-position: bottom; } #wraparound #textarea { width: 1000px; } #wraparound #textarea #textareabox1 { height: 500px; width: 490px; float: left; background-image: url(../images/contentbox1.png); } #wraparound #textarea #textareadivider { background-image: url(../images/contentdivider.png); float: right; height: 500px; width: 20px; } #wraparound #textarea #textareabox2 { height: 500px; width: 490px; float: right; background-color: #FFF; }

HTML:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Stoopid Wiseman's Portfolio</title> <style type="text/css">  </style> <link href="css/layout.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wraparound"> <div id="logo"><a href="index.html"><img src="images/logo.jpg" width="1000" height="250" alt="Stoopid Wiseman's Portfolio Logo" /></a></div> <div id="banner"></div> <div id="border"></div> <div id="navigation"><a href="#">Home</a> <a href="#">Graphics</a> <a href="#">Beats</a> <a href="#">Templates</a> <a href="#">Donate</a> <a href="#">Links</a> <a href="#">About</a> <a href="#">Contact</a></div> <div id="border2"></div> <div id="welcomebar"><img src="images/welcomebarhome.jpg" width="1000" height="30" /></div> <div id="textarea"> <div id="textareabox1"></div> <div id="textareadivider"></div> <div id="textareabox2"></div> </div> </div> </body> </html>

Any idea on how I could fix this?

:(

Okay first thing's first, remove the extraneous "wraparound" div id selector from everything except the original. CSS selectors don't act as paths, which is what they look like here. Each id is separate. The only time you would use more than one would be when you want to use the same properties for multiple divs. This is done by way of a comma. (ex. #div1, #div2 { })

Fix that, and see what happens.

amazing! 10/10

OMG, Solaris is an animal at this stuff. Never seen so in-depth CnC before. Unbelievable +Repp