Website Design Forum

**x360** · 07-23-2007, 09:00 PM

Okay everyone. I think I finally figured out how to get rid of my ugly table websites and start getting good professional layouts. For example my two main inspirations or whatever are www.teamxbox.com and www.planetxbox360.com

So, I know what I'm trying to do. I'm trying to use background images underneath all of the text just like how they do it. The problem is I just don't know how. So, to make it easier to help/understand me a made a possible sample layout. ALL IMAGES IN MY SAMPLE LAYOUT ARE FROM PLANET XBOX 360 AND I JUST FOUND IT EASIER TO USE THOSE TO SHOW YOU GUYS WHAT I'M TRYING TO GET AT.

The only thing I actually know how to do there is image 1. Everything else I don't understand. I know you need to make a CSS style sheet but I don't understand how you tell it where you want all the links/text/images to go so that they are perfectly lined up and in position with everything else. I always get good help here and it would be much appreciated if you could help again as I'm still learning but would really like a site with a nice layout like such. I'll answer any questions and whatnot you may have if you're confused on what I'm trying to do here. Thank you.

As of this post I have gotten this far: http://xboxattacker.freehostia.com using this CSS http://xboxattacker.freehostia.com/css/xathemesheet.css but I know I'm not doing it right, especially since the second link to "forum" you see will not line up correctly no matter what pixels from the left I make it. Please help!

**LadynRed** · 07-23-2007, 10:17 PM

First, put a proper DOCTYPE on your pages. It WILL aid in getting more consistent rendering of your CSS cross-browser.

Second, you appear to be missing some crucial html - like the <body> tag - which comes AFTER </head> and ends before </html>

Next, don't use position:absolute for your navigation, you're complicating things for yourself that way. Rather than using paragraphs for your nav, use an unordered list. You can then apply your images to the UL, the Div the UL sits in AND add a rollover effect if you put the button image in as the background of the <a> tag.

Look at the code for the menu on this site:
http://home.comcast.net/~drt603/sanom/index.htm

That's a test page for now, but if you look at the source you can see how the navigation is set as an unordered list. There's a roll-over effect only on the text, but it could be altered to change the button too by putting the background on the <a> rather than the <li>

This is the CSS for that navigation:

Quote:

#navMenu{
margin: 0;
padding: 0;
list-style: none;
color: #fff;
font-size: 90%;
font-weight: bold;
}

#navMenu li{
background: url(images/menu_tab.png) no-repeat;
height: 32px;
margin: 0px 0 2px 0px;
}

#navMenu li a:link, a:visited, a:focus{
display: block;
color: white;
text-decoration: none;
padding: 6px 2px 4px 2px;
text-align:center;
height: 2.0em 32px;
}

#navMenu li a:hover{
color: #422A20;
text-decoration: underline;
}

You might want to go thru this tutorial on lists:
http://css.maxdesign.com.au/listutorial/

For basic CSS, you should try www.w3schools.com

**x360** · 07-23-2007, 11:59 PM

Quote:

First, put a proper DOCTYPE on your pages. It WILL aid in getting more consistent rendering of your CSS cross-browser.

Honestly, I have no clue what that means. I don't know much about this. Hence why I'm asking for so much help.

Quote:

Second, you appear to be missing some crucial html - like the <body> tag - which comes AFTER </head> and ends before </html>

I know. Didn't really care about that as I was just trying to make a navbar and didn't plan to use any of this as final.

Quote:

Next, don't use position:absolute for your navigation, you're complicating things for yourself that way. Rather than using paragraphs for your nav, use an unordered list. You can then apply your images to the UL, the Div the UL sits in AND add a rollover effect if you put the button image in as the background of the <a> tag.

Look at the code for the menu on this site:
http://home.comcast.net/~drt603/sanom/index.htm

That's a test page for now, but if you look at the source you can see how the navigation is set as an unordered list. There's a roll-over effect only on the text, but it could be altered to change the button too by putting the background on the <a> rather than the <li>

I look at the code on many sites. It never helps me though.

Quote:

You might want to go thru this tutorial on lists:
http://css.maxdesign.com.au/listutorial/

I found that earlier today. It didn't help me to figure out what I'm trying to do here.

Quote:

For basic CSS, you should try www.w3schools.com

I go here all the time. I know the site inside and out. But that still does not help me for things like this. For example, if I even had a nav bar, header, right nav bar, footer, and main content like I want, I wouldn't know how to position them right anyway. Whatever I add it always just puts it right under each other. Just now I tried to add some text to the page with the navbar I made. Well, the text was under it, not beside it.

Quote:

This is the CSS for that navigation:

I just spent about 30 minutes trying to alter that to work with my images/links/html & CSS. No luck. I just don't understand. Could you please show me how it works with the two images I posted, and basically no other formatting than verdana, gray/bold/underline text, and hover green text like how I already have it? All the formatting from that site completely confuses me.

Thanks

**LadynRed** · 07-24-2007, 02:55 PM

Quote:

I know. Didn't really care about that as I was just trying to make a navbar and didn't plan to use any of this as final.

The <body> tag is REQUIRED, you can't just leave it out.

DOCTYPES - learn here grasshopper: http://www.alistapart.com/stories/doctype/

Quote:

I go here all the time. I know the site inside and out. But that still does not help me for things like this.

Ok, you need to start at the very beginning and learn CSS from the ground up. I would highly recommend this book: http://www.sitepoint.com/books/css2/

You're trying to jump in with two feet and you can't even swim ! You need to learn at least the basics of HTML, and you need to learn what CSS is, how it works and what the different selectors and methods do.

To make the menu stay left and not have everything else fall under it, you need to FLOAT the navbar to the left. More on different types of layouts are here: http://css-discuss.incutio.com/?page=FloatLayouts

I'll try looking at your layout, but it'll have to wait until I'm at home.