Jump to content
Please Use CODE Tags

quick html/css help

pzt
By pzt
in Programming
 Share
Posted

im a total noob and today is my first day of really messing with this stuff. Was wondering if someone could explain to me how to make on a website how like (ok dont shoot me but overclock.net is a good example of what i mean) on their website the main background is blue but then the center of the webpage is white and everything takes place in the center of the page?

 

Like so far in designing my site I have a navigation bar that is centered and is i believe 780px wide and I want the rest of the website to take place within the constraints of the website and all the way down the page?

 

understand what i mean?

 

Thanks peeps!

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

So you want the bg to be blue but the center content to be white?

Life is pain. Anyone who says any different is either selling something or the government.

 

----CPU: FX-6300 @ 4.2ghz----COOLER: Hyper 212 EVO----MOBO: MSI 970A-G46----PSU: OCZ 600watt----CASE: Black Corsair C70----GPU: Sapphire 7870 dual fan ghz edtion----2 random HDD'S----A couple fans here and there. Mouse: Gigabyte M6900-------Keyboard: Logitech G105-----Mousepad: Steel series something something.

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

It's pretty simple, if you know CSS.

 

Edit: Made some changes to simulate the layout of overlock.net a tiny bit.

 

HTML Demo: 

<!DOCTYPE html><html><head>	<title>Here's a demo</title>	<link rel="stylesheet" type="text/css" href="site.css" /></head><body><div id="wrapper">	<div id="header"><h1>Here's the blue header</h1></div>	<div id="content"><p>Here's the white content</p></div></div></body></html>

CSS Demo:

body, html {	margin: 0;	padding: 0;	background: #FEFEFE;}#wrapper {        padding: 15px;        max-width: 1240px;        margin:0 auto;}#header {	background: #258AAB;	height:200px;}#content {	padding:40px;        background:#FFF;}

Cheers,

Linus

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

What he^ said.

Life is pain. Anyone who says any different is either selling something or the government.

 

----CPU: FX-6300 @ 4.2ghz----COOLER: Hyper 212 EVO----MOBO: MSI 970A-G46----PSU: OCZ 600watt----CASE: Black Corsair C70----GPU: Sapphire 7870 dual fan ghz edtion----2 random HDD'S----A couple fans here and there. Mouse: Gigabyte M6900-------Keyboard: Logitech G105-----Mousepad: Steel series something something.

Link to comment
Share on other sites
Link to post
Share on other sites
Posted 

<!DOCTYPE html><html><head>	<title>Here's a demo</title>	<link rel="stylesheet" type="text/css" href="site.css" /></head><body><section>	<h1>Here's the blue header</h1>	<article>Here's the white content</article></section></body></html>

honestly don't know what part of ocn you're referring to specifically, but if you're going to use a html5 doctype, you should be using html5 recommended html.

Link to comment
Share on other sites
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×