Goonky
09-20-2010, 01:05 AM
Hi all,
Very new to CSS. Currently reading "CSS, The Missing Manual". Overall, it's been good, but I can't get this to look right.
I want these four boxes - which I tagged as div's inside a larger div. I believe it's something that I don't understand with floats, but I'm not sure how to solve it. Here's the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Background Images</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<style type="text/css">
body {
background-color:#006699;
}
h3 {
font-family:Arial, Helvetica, sans-serif;
color:#003F84;
font-weight:bold;
font-size:25px;
}
h4 {
font-family:Arial, Helvetica, sans-serif;
color:#000;
font-weight:bold;
font-size:16px;
}
p {
font-family:Arial, Helvetica, sans-serif;
color:#003F84;
font-weight:bold;
font-size:15px;
}
.container {
width:940px;
border-top: 2px solid #000;
border-bottom: 2px solid #000;
border-left: 2px solid #000;
border-right: 2px solid #000;
margin:0 0 0 100px;
padding:25px 25px 25px 25px;
}
.box1 {
float:left;
width: 200px;
height:310px;
text-align:center;
margin-top:75px;
margin-left: 40px ;
margin-right: auto ;
background-color:#E6E6E6;
padding: 5px 5px 5px 5px;
border: 1px solid #6D7B8D;
}
.box2 {
float:left;
width: 200px;
height:310px;
text-align:center;
margin-top:75px;
margin-left: auto ;
margin-right: auto ;
background-color:#E6E6E6;
padding: 5px 5px 5px 5px;
border: 1px solid #6D7B8D;
}
.box3 {
float:left;
width: 200px;
height:310px;
text-align:center;
margin-top:75px;
margin-left: auto ;
margin-right: auto ;
background-color:#E6E6E6;
padding: 5px 5px 5px 5px;
border: 1px solid #6D7B8D;
}
.box4 {
float:left;
width: 225px;
height:360px;
text-align:center;
margin: 50px 0px 0 -2px;
background-color:#E6E6E6;
padding: 5px 5px 5px 5px;
border: 2px solid #6D7B8D;
}
.box hr {
background-color:#6D7B8D;
height:1px;
}
.bigbox hr {
background-color:#6D7B8D;
height:1px;
}
</style>
</head>
<body>
<div class="container">
<div class="box1">
<h3>
FREE
<br>
$0
<hr>
<h4>
5 Levels of Access
</h4>
<p>
Just want to look around?
</p>
<br>
<img src="images/redsignup.png">
<br>
<a href="http://thepracticeroom.net">Learn more...</a>
</div>
<div class="box2">
<h3>
MONTHLY
<br>
$9.95
<hr>
<h4>
Full Access for 1 Month
</h4>
<p>
Need to cram for an upcoming audition?
</p>
<img src="images/redsignup.png">
<br>
<a href="http://thepracticeroom.net">Learn more...</a>
</h3>
</div>
<div class="box3">
<h3>
ANNUAL
<br>
$59.95
<hr>
<h4>
Full Access for 1 Year
</h4>
<p>
Want to become a Sight Singing Zen Master?
</p>
<img src="images/redsignup.png">
<br>
<a href="http://thepracticeroom.net">Learn more...</a>
</h3>
</div>
<div class="box4">
<h3>
EDUCATOR
<br>
$99.95
<hr>
<h4>
Full Access for 1 Year
<br>
All Reproducible ebooks
<br>
Online Quizzes
</h4>
<p>
Help your students become AMAZING Sight Singers!
</p>
<img src="images/redsignup.png">
<br>
<a href="http://thepracticeroom.net">Learn more...</a>
</h3>
</div>
</div>
</body>
</html>
I've attached a picture of what it looks like now. I just want the four gray boxes inside the box with the black border.
What am I doing wrong?
Thanks in advance for any help.
Very new to CSS. Currently reading "CSS, The Missing Manual". Overall, it's been good, but I can't get this to look right.
I want these four boxes - which I tagged as div's inside a larger div. I believe it's something that I don't understand with floats, but I'm not sure how to solve it. Here's the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Background Images</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<style type="text/css">
body {
background-color:#006699;
}
h3 {
font-family:Arial, Helvetica, sans-serif;
color:#003F84;
font-weight:bold;
font-size:25px;
}
h4 {
font-family:Arial, Helvetica, sans-serif;
color:#000;
font-weight:bold;
font-size:16px;
}
p {
font-family:Arial, Helvetica, sans-serif;
color:#003F84;
font-weight:bold;
font-size:15px;
}
.container {
width:940px;
border-top: 2px solid #000;
border-bottom: 2px solid #000;
border-left: 2px solid #000;
border-right: 2px solid #000;
margin:0 0 0 100px;
padding:25px 25px 25px 25px;
}
.box1 {
float:left;
width: 200px;
height:310px;
text-align:center;
margin-top:75px;
margin-left: 40px ;
margin-right: auto ;
background-color:#E6E6E6;
padding: 5px 5px 5px 5px;
border: 1px solid #6D7B8D;
}
.box2 {
float:left;
width: 200px;
height:310px;
text-align:center;
margin-top:75px;
margin-left: auto ;
margin-right: auto ;
background-color:#E6E6E6;
padding: 5px 5px 5px 5px;
border: 1px solid #6D7B8D;
}
.box3 {
float:left;
width: 200px;
height:310px;
text-align:center;
margin-top:75px;
margin-left: auto ;
margin-right: auto ;
background-color:#E6E6E6;
padding: 5px 5px 5px 5px;
border: 1px solid #6D7B8D;
}
.box4 {
float:left;
width: 225px;
height:360px;
text-align:center;
margin: 50px 0px 0 -2px;
background-color:#E6E6E6;
padding: 5px 5px 5px 5px;
border: 2px solid #6D7B8D;
}
.box hr {
background-color:#6D7B8D;
height:1px;
}
.bigbox hr {
background-color:#6D7B8D;
height:1px;
}
</style>
</head>
<body>
<div class="container">
<div class="box1">
<h3>
FREE
<br>
$0
<hr>
<h4>
5 Levels of Access
</h4>
<p>
Just want to look around?
</p>
<br>
<img src="images/redsignup.png">
<br>
<a href="http://thepracticeroom.net">Learn more...</a>
</div>
<div class="box2">
<h3>
MONTHLY
<br>
$9.95
<hr>
<h4>
Full Access for 1 Month
</h4>
<p>
Need to cram for an upcoming audition?
</p>
<img src="images/redsignup.png">
<br>
<a href="http://thepracticeroom.net">Learn more...</a>
</h3>
</div>
<div class="box3">
<h3>
ANNUAL
<br>
$59.95
<hr>
<h4>
Full Access for 1 Year
</h4>
<p>
Want to become a Sight Singing Zen Master?
</p>
<img src="images/redsignup.png">
<br>
<a href="http://thepracticeroom.net">Learn more...</a>
</h3>
</div>
<div class="box4">
<h3>
EDUCATOR
<br>
$99.95
<hr>
<h4>
Full Access for 1 Year
<br>
All Reproducible ebooks
<br>
Online Quizzes
</h4>
<p>
Help your students become AMAZING Sight Singers!
</p>
<img src="images/redsignup.png">
<br>
<a href="http://thepracticeroom.net">Learn more...</a>
</h3>
</div>
</div>
</body>
</html>
I've attached a picture of what it looks like now. I just want the four gray boxes inside the box with the black border.
What am I doing wrong?
Thanks in advance for any help.