Forum Moderators: not2easy
When i try to text-align: center within a float: left; div the text does not align. Also, my float: right; div is breaking under the div i have my text in.
Here is my source code:
<!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">
<head>
<title>yesmilwaukee.org ¦ Yesiva Elementary School ¦ Milwaukee, Wisoconsin ¦ Premier Jewish School K-8</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body { background: url(images/bg.gif); min-width: 760px; max-width: 1200px; text-align: center; margin: 0;
width: 100%;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 10pt;
}
.container { min-width: 730px; max-width: 1200px; min-height: 202px; max-height: 202px; background: url(images/headerbg.gif); margin-left: auto; margin-right: auto; text-align: center;}
.leftshadow { float: left;}
.rightshadow { clear: none; float: right;}
.logo {
float: left;
max-width: 1170px;
text-align: center;
height: 202px;
}
.logo img {margin-top: 5px; }
.quicklinks {
align: center;
width: 450px;
padding-top: 5px;
color: #FFF200;
}
.quicklinks a:link { color: #FFF200;}
.quicklinks a:hover { color: #8B010D;}
.quicklinks a:visited { color: #FFF200;}
.quicklinks a:active { color: #FFF200;}
</style>
</head>
<body>
<div class="container">
<div class="leftshadow"><img src="images/headleftds.gif" width="15" height="202"></div>
<div class="logo"><img src="images/logo.png" class="logo"></div>
<div class="quicklinks"><a href="#">Admissions</a> ¦ <a href="#">Employment @ YES</a> ¦ <a href="#">Contact Us</a> ¦ <a href="#">Donate to YES</a></div>
<div class="rightshadow"><img src="images/headrightds.gif" width="15" height="202"></div>
</div>
</body>
</html>
Welcome to WebmasterWorld!
Two things that I see right now are:
.logo img {margin-top: 5px; }
.quicklinks {
[b]align: center;[/b]
width: 450px;
padding-top: 5px;
color: #FFF200;
} The bolded code should be: text align: center;
Next, this section of code:
.quicklinks a:link { color: #FFF200;}
.quicklinks a:hover { color: #8B010D;}
.quicklinks a:visited { color: #FFF200;}
.quicklinks a:active { color: #FFF200;} Your links should be in this order: LVHA
so your links should look like this:
.quicklinks a:link { color: #FFF200;}
.quicklinks a:visited { color: #FFF200;}
.quicklinks a:hover { color: #8B010D;}
.quicklinks a:active { color: #FFF200;} Give these two things a go and see what happens.
