...

View Full Version : a few questions...<div> and css3



petergriffen
10-28-2006, 03:18 AM
Okay here is my site, its hardly anything yet... http://www.newenglandsurfer.com

First question is that on the <div> that starts with 08/06/06: called "text" how do I get that div to align to the left, not just the text but to have the div against the left border?

Also is my css up to date, i tried my best but I'm just getting started with css.

Thanks for the help in advance!



here is the css code

body {
margin: 0;
padding: 0;
background-color:#555555;
}


.page {
width: 800px;
height: 1000px;
margin: 0 auto;
text-align: center;
background: #FFFFFF
}


.header {
width: 800px;
margin: 0 auto;
text-align: center;
background: #FFFFFF;
}


.text {
width: 400px;
border: 1px solid #060C6F;
margin: 0 auto;
background: #FFFFFF;
}



h1,h2,h3,h4,h5,h6{
margin-bottom: 0px;
padding-bottom: 0px;
}

h1 {
font-family:Verdana,sans-serif;
font-size:60%;
}

h2 {
font-family:Verdana,sans-serif;
font-size:60%;
}

h3 {
font-size:60%;
}



a:link {
color: blue }
a:visited {
color: purple }

Arbitrator
10-28-2006, 03:34 AM
First question is that on the <div> that starts with 08/06/06: called "text" how do I get that div to align to the left, not just the text but to have the div against the left border?Remove the code that youíre using to center it: margin: 0 auto. To left-align the text you would use text-align: left. The reason the text is centered is because you applied text-align: center to a parent element (i.e., .page) and the children elements (e.g., .text) are inheriting that style.


Also is my css up to date, i tried my best but I'm just getting started with css.Looks up-to-date to me.

I would generally apply margin: 0; padding: 0 to everything though so that browsersí differing default margins and padding donít cause problems and so that you donít end up declaring margins or padding to be zero over and over later: * {margin: 0; padding: 0;}. You can also condense hexadecimal codes (#ffffff would become #fff) or use keywords (white) for readability. Zero doesnít require a unit so margin-bottom: 0px could be margin-bottom: 0.

petergriffen
10-28-2006, 04:03 AM
one more quick question how would i align that h3 tag "Copyright © 2006 www.NewEnglandSurfer.com All Rights Reserved " to the bottom of the page.

Arbitrator
10-28-2006, 04:16 AM
one more quick question how would i align that h3 tag "Copyright © 2006 www.NewEnglandSurfer.com All Rights Reserved " to the bottom of the page.

.page {
position: relative;
}
h3 {
position: absolute;
bottom: 0;
}

petergriffen
10-28-2006, 05:23 AM
thanks for your help so far i tried to get that tag centered properly...i tought that
h3 {
font-size:60%;
position: absolute;
bottom: 0;
left:50%;
}
is the way to do it but it did not work

Arbitrator
10-29-2006, 06:42 PM
thanks for your help so far i tried to get that tag centered properly...To center the footer horizontally, you would make the h3 elementís width equal to that of the layout and use text-align: center to center its content. Remember that when you absolutely position a div element, it no longer expands automatically; instead it expands with its content.

petergriffen
10-29-2006, 10:50 PM
to get it to align at the bottom of the page causes it to not center with the page and not color through the entire width

h3 {
font-size:60%;
bottom: 0;
position: absolute;
background:#FFF;
text-align: center
}

Arbitrator
10-30-2006, 01:31 AM
I just tried the code and instructions I provided in my prior two posts, in the context of your page, and it works fine. text-align: center is not necessary after all though since your footer is inheriting that style from a parent element already. In plain English (or CSS, rather), here again is the code you need in case you still donít get it:


.page {
position: relative;
}
h3 {
position: absolute;
bottom: 0;
width: 100%; /* "you would make the h3 element's width equal to that of the layout" */
}

petergriffen
10-30-2006, 06:16 AM
thanks for the help...im sorry i really dont know this stuff. So you need to specify the width because its absolute?

Arbitrator
10-30-2006, 08:39 AM
So you need to specify the width because its absolute?Unless you want the elementís width to expand with its content like a table, yes. Absolutely positioned elements, like floated elements, are removed from normal document flow and lose the expand-horizontally-to-fill-all-available-space property.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum