I've been looking around and have figured out how to put 2 divs left and right by putting them into a bigger div. My other question is how do you center all content for the website? Nothing on mine goes wider than 750, but I want it centered for people with 1024 monitors... Is there an overarching Center tag or something?
Also (I'm new to css... really new):
Sometimes in the style info it will be listed like this:
.navigation
and sometimes like this:
#navigation
Whats the difference?
I have a little diagram showing what I want, if anyone is interested in helping me out:
<!-- m --><a class="postlink" href="http://www.davidjcubberly.com/temp/css.jpg">http://www.davidjcubberly.com/temp/css.jpg</a><!-- m -->
Thanks!!!!!The container div should be like this :
#mydiv {
position:relative;
width:750px;
margin:auto;
}
That will centre the page.
# - is for id's while . is for classes.
(An id is unique. A class is for more than one element).Here's a complete HTML document to begin with, along with a bunch of CSS comments explaining what's going on.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Center whole layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
<!--
/* text-align: center; will center the layout for IE5-Win and IE6-Win
running quirks mode (no DOCTYPE tag at beginning of document). */
body {
margin: 0;
padding: 0;
text-align: center;
}
/* The auto left and right margins center the layout in standards
browsers, IE6-Win (in standards mode) and IE5-Mac. */
#wrapper {
margin: 0 auto 0 auto;
text-align: left; /* Reset text alignment for Western languages. */
width: 770px;
}
/* Standards browsers will cut off portions of the left and right edges
of a layout if the browser viewport is too narrow, unless the
#wrapper <div> has a left and right border. Internet Explorer is not
affected by this, and the style rules are hidden. Setting the border
color to transparent initially returns a CSS syntax error at the W3C
CSS validator, so for the sake of validation, the border color is
set to transparent on a separate line. IE5-Mac sometimes seems to read
this style declaration, so hide from IE5-Mac: \*/
html>body #wrapper {
border: 1px solid #fff;
border-color: transparent;
border-top: 0;
border-bottom: 0;
} /* End IE5-Mac hiding */
-->
</style>
</head>
<body>
<div id="wrapper">
<!-- Place all HTML for the entire page here. -->
</div>
</body>
</html>
It's the same philosophy as what BonRouge used, just more complete.hey thanks so much guys! I think i finally figured out css today (well, you know, just for starters!)...
I can see how this can totally open the door to all sorts of wonderful stuff...
Just the fact that you can have a single file with all the style info is so fantastic. I've always had to go through each and every file and bit of code just to change the overall font of a site. now i can do it with ONE file. AMAZING.
Now I see why everyone yells at you if you mention table or iframe!!!!!!!
thanks!!Originally posted by avatarbilbo
hey thanks so much guys! I think i finally figured out css today (well, you know, just for starters!)...
I can see how this can totally open the door to all sorts of wonderful stuff...
Just the fact that you can have a single file with all the style info is so fantastic. I've always had to go through each and every file and bit of code just to change the overall font of a site. now i can do it with ONE file. AMAZING.
Now I see why everyone yells at you if you mention table or iframe!!!!!!!
thanks!!
It is all part of the master plan
!!! hehe another converted table user 
Also (I'm new to css... really new):
Sometimes in the style info it will be listed like this:
.navigation
and sometimes like this:
#navigation
Whats the difference?
I have a little diagram showing what I want, if anyone is interested in helping me out:
<!-- m --><a class="postlink" href="http://www.davidjcubberly.com/temp/css.jpg">http://www.davidjcubberly.com/temp/css.jpg</a><!-- m -->
Thanks!!!!!The container div should be like this :
#mydiv {
position:relative;
width:750px;
margin:auto;
}
That will centre the page.
# - is for id's while . is for classes.
(An id is unique. A class is for more than one element).Here's a complete HTML document to begin with, along with a bunch of CSS comments explaining what's going on.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Center whole layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
<!--
/* text-align: center; will center the layout for IE5-Win and IE6-Win
running quirks mode (no DOCTYPE tag at beginning of document). */
body {
margin: 0;
padding: 0;
text-align: center;
}
/* The auto left and right margins center the layout in standards
browsers, IE6-Win (in standards mode) and IE5-Mac. */
#wrapper {
margin: 0 auto 0 auto;
text-align: left; /* Reset text alignment for Western languages. */
width: 770px;
}
/* Standards browsers will cut off portions of the left and right edges
of a layout if the browser viewport is too narrow, unless the
#wrapper <div> has a left and right border. Internet Explorer is not
affected by this, and the style rules are hidden. Setting the border
color to transparent initially returns a CSS syntax error at the W3C
CSS validator, so for the sake of validation, the border color is
set to transparent on a separate line. IE5-Mac sometimes seems to read
this style declaration, so hide from IE5-Mac: \*/
html>body #wrapper {
border: 1px solid #fff;
border-color: transparent;
border-top: 0;
border-bottom: 0;
} /* End IE5-Mac hiding */
-->
</style>
</head>
<body>
<div id="wrapper">
<!-- Place all HTML for the entire page here. -->
</div>
</body>
</html>
It's the same philosophy as what BonRouge used, just more complete.hey thanks so much guys! I think i finally figured out css today (well, you know, just for starters!)...
I can see how this can totally open the door to all sorts of wonderful stuff...
Just the fact that you can have a single file with all the style info is so fantastic. I've always had to go through each and every file and bit of code just to change the overall font of a site. now i can do it with ONE file. AMAZING.
Now I see why everyone yells at you if you mention table or iframe!!!!!!!
thanks!!Originally posted by avatarbilbo
hey thanks so much guys! I think i finally figured out css today (well, you know, just for starters!)...
I can see how this can totally open the door to all sorts of wonderful stuff...
Just the fact that you can have a single file with all the style info is so fantastic. I've always had to go through each and every file and bit of code just to change the overall font of a site. now i can do it with ONE file. AMAZING.
Now I see why everyone yells at you if you mention table or iframe!!!!!!!
thanks!!
It is all part of the master plan
!!! hehe another converted table user