12 replies [Last post]
SR_6274
Offline
newbie
Orlando, FL
Last seen: 12 years 31 weeks ago
Orlando, FL
Timezone: GMT-4
Joined: 2009-09-25
Posts: 4
Points: 0

Hello. I am new to designing in CSS, and trying to learn it desperately. I am running into a problem when I am trying to align text to the bottom of a div. I have a container div to center everything, then a header div where I am trying to get this text to align correctly.

Here is the code

HTML

<!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=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="RDstyle.css"  />  </head>
 
<body>
<!--Start Centering Container-->
<div id="container">
 
<!--Start Header-->
	<div id="header">
 
	<!--Start Logo-->
		<div id="logo"></div>
	<!--End Logo-->
 
	<p class="headtext">WE COVER ALL YOUR GRAPHIC DESIGN NEEDS<br />
	WEB DESIGN | PRINT MEDIA | BUSINESS PACKAGES | 3D DESIGN | FLASH ANIMATION | LOGO DESIGNS</p>
 
	</div>
<!--End Header-->
 
<!--End Centering Container-->
</div>
</body>
</html>

CSS

body
{
text-align: center;
background-color: #000000;}
 
#container {
margin-left: auto;
margin-right: auto;
width: 750px;
text-align: left;
}
 
#header{
background-image: url(images/gradient_BG_03.jpg);
height: 100px;
background-repeat: repeat-x;
border: 1px #4D4D4D solid;
padding-right: 5px;
padding-bottom: 0em;
}
 
#logo {
background-image: url(images/Logo_03.jpg);
background-repeat: no-repeat;
width: 150px;
height: 100px;
float: left;}
 
p.headtext {
color: #ffffff;
font-family: Verdana, Helvetica, Arial, sans-serif;
text-align: right;
font-size: 9px;
}
 
a:link {}
 
a:visited {}
 
a:hover {}
 
a:active {}

I know I'm just missing something basic, but I just can't figure it out. Any help would be appreciated. Thank you in advance.

SR_6274
Offline
newbie
Orlando, FL
Last seen: 12 years 31 weeks ago
Orlando, FL
Timezone: GMT-4
Joined: 2009-09-25
Posts: 4
Points: 0

Here is a link to the page

Here is a link to the page as I have it now. This version is not CSS, but pure HTML with tables. You can see at the top how the text should be in the header.

http://www.russellsdesigns.com

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 7 years 20 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

I dont see any text outside

I dont see any text outside the header. Maybe you can tell us exactly what text you're referring too. But right now before you do anything else, get your code to validate.

SR_6274
Offline
newbie
Orlando, FL
Last seen: 12 years 31 weeks ago
Orlando, FL
Timezone: GMT-4
Joined: 2009-09-25
Posts: 4
Points: 0

It's the text inside of the

It's the text inside of the header that I am trying to get to align to the bottom. The "We cover all your graphic design needs" part that is inside of the header div.

I know my code for my old site doesn't validate correctly, which is why I'm trying to learn CSS to make sure everything is fine.

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 7 years 20 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

you have text "web design |

you have text "web design | print media..." at the bottom. where is that text supposed to be? The other text is directly above it. Both lines of text are inside the div, and positioned at the bottom in my browser.

t-bone
Offline
newbie
Los Angeles
Last seen: 13 years 18 weeks ago
Los Angeles
Joined: 2009-09-25
Posts: 10
Points: 0

Suggested Solution

Everyone codes a little differently.

I generally develop two stylesheets:

with

html>body #master_container
{
margin: 0px auto;
width:1013px;
}

And the second for older IE browsers.

which is just
#master_container or .master_container / what have you.

My solution would be as follows.

html>body .headtext
{
position:absolute;
margin: 0 0 0 0;
color: #ffffff;
font-family: Verdana, Helvetica, Arial, sans-serif;
text-align: right;
font-size: 9px;
}

Margin property is your movement. It consists of 4 numbers.

so margin:10px 0 0 100px; moves it 10 pixels down and 100 pixels to the right. So you customize those numbers. Negative values can even push it out of the container.

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 7 years 20 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

t-bone

t-bone wrote:

position:absolute;
margin: 0 0 0 0;
color: #ffffff;
font-family: Verdana, Helvetica, Arial, sans-serif;
text-align: right;
font-size: 9px;
}
Margin property is your movement. It consists of 4 numbers.

so margin:10px 0 0 100px; moves it 10 pixels down and 100 pixels to the right. So you customize those numbers. Negative values can even push it out of the container.

This is sloppy and incorrect. With absolute positioning, you need to specify top or bottom and left or right values for placement, not margin.

t-bone
Offline
newbie
Los Angeles
Last seen: 13 years 18 weeks ago
Los Angeles
Joined: 2009-09-25
Posts: 10
Points: 0

Why is it Sloppy?

I appreciate your comments and really am looking to improve my strategies.

I would appreciate it if you could elaborate your point.

Using that method I can control exact positioning I can change the value to 5px 0 0 10px; in the style sheet hit save and refresh and watch it move exactly five pixels down and ten right.

I understand there are many ways to do things.

What is the error? I would like to know. I understand you can do left:20px; right:50px and what have you. I think it is just easier to control the entire thing with one declaration and 4 numbers.

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 7 years 20 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

ill let w3c explain

ill let w3c explain it.

"The box's position (and possibly size) is specified with the 'top', 'right', 'bottom', and 'left' properties."

SR_6274
Offline
newbie
Orlando, FL
Last seen: 12 years 31 weeks ago
Orlando, FL
Timezone: GMT-4
Joined: 2009-09-25
Posts: 4
Points: 0

I'm testing it in Firefox

I'm testing it in Firefox and IE, but in both the text is showing at the top of the div for me. The link I provided is my old site, with no CSS, but just how it should look like. I'll upload the new CSS site so they can be compared side by side, and see if it's just something on my end not positioning the text right. Thank you for the help so far though, I do appreciate it.

t-bone
Offline
newbie
Los Angeles
Last seen: 13 years 18 weeks ago
Los Angeles
Joined: 2009-09-25
Posts: 10
Points: 0

Thanks

I appreciate the note and will take it into consideration.

I am specifying the size of the container by setting it's width and height. And moving the element relative to that container.

I am not seeing that the method is flawed.

I like to do it this way. Because I can set a series of container elements and specify their size. And either flow the text/content down the container. Or/and also position it manually relative specifically to that container.

I generally do not place every last element that way. But if it is a single navigation menu in a header. It sure is really easy to put the entire thing exactly where you want it.

abbreviated sample.

html>body #master_container
{
margin: 0px auto;
width:1013px;
}

html>body .header
{
width: 1013px;
height: 170px;
margin: -5px 0 0 0;
background-image:url(images/header_middle.gif);
background-repeat:no-repeat;
}

html>body .links
{
z-index:200;
position:absolute;
margin: 15px 0 0 500px;
}

t-bone
Offline
newbie
Los Angeles
Last seen: 13 years 18 weeks ago
Los Angeles
Joined: 2009-09-25
Posts: 10
Points: 0

Do this and watch What you get

Bro:

Try this and see what happens.

#header{
background-image: url(images/gradient_BG_03.jpg);
height: 100px;
width: SPECIFYpx;
background-repeat: repeat-x;
border: 1px #4D4D4D solid;
padding-right: 5px;
padding-bottom: 0em;
}

p.headtext {
position:absolute; (This says this element is positioned absolutely in relation to the width and height of # header.)
margin: 0 0 0 0; (This is top left) margin: 10px 0 0 0; (Drops Element 10px.) margin: 0 0 0 100px; (Moves the element 100px to the right.)
color: #ffffff;
font-family: Verdana, Helvetica, Arial, sans-serif;
text-align: right;
font-size: 9px;
}

I can promise you that is valid working CSS code.

t-bone
Offline
newbie
Los Angeles
Last seen: 13 years 18 weeks ago
Los Angeles
Joined: 2009-09-25
Posts: 10
Points: 0

There you go inline

Untitled Document

body
{
text-align: center;
background-color: #000000;}

#container {
margin-left: auto;
margin-right: auto;
width: 750px;
text-align: left;
}

#header{
height: 100px;
background-image:black;
background-repeat: repeat-x;
border: 1px #4D4D4D solid;
padding-right: 5px;
padding-bottom: 0em;
}

#logo {
background-image: url(images/Logo_03.jpg);
background-repeat: no-repeat;
width: 150px;
height: 100px;
float: left;}

.headtext {
position:absolute;
margin: 2px 0 0 410px;
overflow:hidden;
height:100px;
color: #ffffff;
font-family: Verdana, Helvetica, Arial, sans-serif;
text-align: right;
font-size: 8px;
}

a:link {}

a:visited {}

a:hover {}

a:active {}

I can control the placement of this entire block of text by editing the bold propertyp.headtext {
position:absolute;
margin: 20px 0 0 220px;
color: #ffffff;
font-family: Verdana, Helvetica, Arial, sans-serif;
text-align: right;
font-size: 8px;
}