I need help with my css code!!?

by **mohammed47** » Thu May 10, 2012 9:25 am

Below is my code. Im having a problem with the header and footer, They are showing up square and not rounded. What did I miss? Another issue is the table. The second column is showing up below the first one instead of side to side. How can i fix that? Any help would be greatly appreciated!

<html>
<head>
<title></title>

<style type="text/css">

body {
background: #333333;
font-family: arial;
}

#pagewrap {
width: 700px;
margin: 40px auto 0px auto;
background: #993366;
padding: 15px 0px 15px 0px;
}

#header {
color: 993366;
background:993366;
padding: 15px 0px 15px 0px;
margin: 15px auto 15px auto;
border-top-left-radius: 25px;
-moz-border-top-left-radius: 25px;
border-top-right-radius: 25px;
-moz-border-top-right-radius: 25px;
}

#subheader {
height: 100px;
background: #993366;
background-image: url("http://newton.ncc.edu/gansonj/ite10…
background-repeat: no-repeat;

}

#subheader2 {
text-align: center;
color: #333333;
font-weight: bold;
font-size: 1.45em;
background: #FFCC00;
padding: 15px 0px 15px 0px;
border-radius: 25px;
margin:15px auto 15px auto

}

#content{
background: #FFFFFF;
border-radius: 25px;
width:700px;
height:400px;
padding: 25px 0px 25px 0px;
margin: 15px 0px 15px 0px;
}

.greenbox {
background:#669966;
color:#FFCC00;
width: 250px;
height: 150px;
margin: 15px 0px 15px 0px;
border-radius: 25px;
font-weight:bold;
font-align: center;
box-shadow: 5px 3px 5px 3px;
}

.greentitle {
color: FFFFFF;
font-weight: bold;
text-align: center;
}

.formtext {
margin-top: 15px;
}

.fieldstyle {
background: #FFCC00;
width: 300px;
padding: 8px;
border: 2px black solid;
border-radius: 25px;
-moz-border-radius: 25px;

}

#button{
background: #333333;
color: #333333;
border: #FFCC00;

}

#button:hover {
Background:#cccccc;

}

#footer {
background: #993366;
padding: 15px 0px 15px 0px;
margin: 15px auto 15px auto:
border-radius: 25px;
color: #FFFFFF;
font-weight: bold;
font-size: 1.45em;
text-align: center;

}
</style>
</head>
<body>
<div id="pagewrap">

<div id="header">
</div>

<div id="subheader">
</div>
<div id="subheader2">
Register| Login | Help | Movies | TV | Videos
</div>

<div id="content">
<table>
<tr>
<td>
<div class="greenbox">
<div class="greentitle">
At The Box Office Now
</div>
<ol>

<li> Think like a man</li>
<li>The pirates</li>
<li>the lucky one</li>
<li>The Hunger Games</li>
<li>The Five-Year Engagement
</ol>
</div>
<div class="greenbox">
<ol>
<div class="greentitle">
Opening This Week
</div>
<li>Opening This Week</li>
<li>The Five-Year Engagement</li>
<li>The Raven</li>
<li>The Pirates! Band Of Misfits</li>
<li>Safe</li>
<li>Sound of My Voice</li>
</ol>
</div>
</td>
</tr>
<tr>
<td>

<form>
<div class="formtext">Search Movies By Title</div>
<input type="text" class="fieldstyle">

<div class="formtext">Search Movies By Director</div>
<input type="text" class="fieldstyle">

<div class="formtext">Search Movies By Genre</div>
<select class="fieldstyle">
<option>Action</option>
<option>Comedy</option>
<option>Horror</option>
</select>

<div style="margin-top:20px;">
<input type="button" value="Search Movies" id="button">
</div>

</form>
</div>
</div>
</td>
</tr>
</table>

</div>
<div id="footer">
Thanks for choosing Movietalk.com
</div>

</div>
</body>
</html>

by **golding** » Thu May 10, 2012 9:29 am

They were rounded, your positioning of the header was incorrect as well as a few other things. Your table was set up as 1 column not 2.

Your picture link was shortened, so you will have to add the correct link back in for your subheader, then you may still have to tweak some settings, but this was close to what I think you wanted:

<html>
<head>
<title></title>

<style type="text/css">
body {
background: #333333;
font-family: arial;
}

#pagewrap {
width: 700px;
height: 660px;
margin: 40px auto 0px auto;
background: #993366;
padding: 15px 0px 15px 0px;
}

#header {
color: #993366;
background: #993366;
padding: 15px 0px 15px 0px;
margin: -45px auto 15px auto;
border-width:medium;
border-top-left-radius: 25px;
-moz-border-top-left-radius: 25px;
border-top-right-radius: 25px;
-moz-border-top-right-radius: 25px;
}

#subheader {
height: 100px;
background: #993366;
background-image: url("your_image");
background-repeat: no-repeat;

}

#subheader2 {
text-align: center;
color: #333333;
font-weight: bold;
font-size: 1.45em;
background: #FFCC00;
padding: 15px 0px 15px 0px;
border-radius: 25px;
margin:15px auto 15px auto

}

#content{
background: #FFFFFF;
border-radius: 25px;
width:700px;
height:400px;
padding: 25px 0px 25px 0px;
margin: 15px 0px 15px 0px;
}

.greenbox {
background:#669966;
color:#FFCC00;
width: 250px;
height: 150px;
margin: 15px 0px 15px 0px;
border-radius: 25px;
font-weight:bold;
font-align: center;
box-shadow: 5px 3px 5px 3px;
}

.greentitle {
color: FFFFFF;
font-weight: bold;
text-align: center;
}

.formtext {
margin-top: 15px;
}

.fieldstyle {
background: #FFCC00;
width: 300px;
padding: 8px;
border: 2px black solid;
border-radius: 25px;
-moz-border-radius: 25px;

}

#button{
background: #333333;
color: #333333;
border: #FFCC00;

}

#button:hover {
Background:#cccccc;

}

#footer {
background: #993366;
padding: 15px 0px 15px 0px;
margin: 15px auto 15px auto;
border-radius: 25px;
color: #FFFFFF;
font-weight: bold;
font-size: 1.45em;
text-align: center;

}
.greenbox1 {background:#669966;
color:#FFCC00;
width: 250px;
height: 150px;
margin: 15px 0px 15px 0px;
border-radius: 25px;
font-weight:bold;
font-align: center;
box-shadow: 5px 3px 5px 3px;
}
.greenbox11 {background:#669966;
color:#FFCC00;
width: 250px;
height: 150px;
margin: 15px 0px 15px 0px;
border-radius: 25px;
font-weight:bold;
font-align: center;
box-shadow: 5px 3px 5px 3px;
}
</style>
</head>
<body>
<div id="pagewrap">

<div id="header">
</div>

<div id="subheader">
</div>
<div id="subheader2">
Register| Login | Help | Movies | TV | Videos
</div>

<div id="content">
<table align="center">
<tr align="left">
<td width="308">
<div class="greenbox">
<div class="greentitle">
At The Box Office Now
</div>
<ol>

<li> Think like a man</li>
<li>The pirates</li>
<li>the lucky one</li>
<li>The Hunger Games</li>
<li>The Five-Year Engagement
</ol>
</div></td>
<td width="294"><div class="greenbox1">
<div class="greenbox11">
<ol>
<div class="greentitle"> Opening This Week </div>
<li>Opening This Week</li>
<li>The Five-Year Engagement</li>
<li>The Raven</li>
<li>The Pirates! Band Of Misfits</li>
<li>Safe</li>
<li>Sound of My Voice</li>
</ol>
</div>
</div></td>
</tr>
<tr>
<td>
<form>
<div class="formtext">Search Movies By Title</div>
<input type="text" class="fieldstyle">

<div class="formtext">Search Movies By Director</div>
<input type="text" class="fieldstyle">

<div class="formtext">Search Movies By Genre</div>
<select class="fieldstyle">
<option>Action</option>
<option>Comedy</option>
<option>Horror</option>
</select>
<div style="margin-top:10px;">
<input type="button" value="Search Movies" id="button">
</div>

</form>
</td></tr>
</table>

</div>
<div id="footer">
Thanks for choosing Movietalk.com
</div>

</div>
</body>
</html>

Advertisments:

Sponsor Links: