What am i doing wrong?? (noob) CSS problem

J

jord070

New Member
HI all,
First ill introduce myself,

Im a first year Multimedia design student, and have got this assignment to great a simple 4 page website, Easy!

Iv only got around 3 weeks of CSS/HTML under my belt and we're encouraged to used text edit and notepad for this assignment, as we will be going onto using dreemweaver in the comming week.

most of the class went for a easier approuch of using photoshop and than using tables to creat their sites, but in my oppinion tables look ugly, and i dont like using them, SO i went down the CSS road.


How ever, im now at a standstill because i cant figure out what is wrong with my code,

My plan was to have the intire template inside the wrapper ID, wich would give it a white background and have blocks inside of that, All was working great untill last night when i re-wrote some of the code, and its now gone all wierd for me.

Here is a link to the site and style sheet
http://test.jord070.com/index.html
http://test.jord070.com/style.css

these are the two problems i have.

#sidebar

Is positioned in the correct place *inside the white border of the wrapper* but the H1 properties arnt working *the #sidebar h1 tag* that is its not displaying the grey background color for the H1 tag.

and the second problem is my

#content
its displaying correctly, But its sitting out side the white box, Its inside the wrapper tag, But it doesnt seem to be wrapped inside of the border. (before i rewrote it, it was working fine. i dont know what i did to change it)

anyhelp would be great
Jordan
 
J

jord070

New Member
OK i figured out the sidebar problem, i had a capital in the html.

But now it all comes down to the two "elements" side bar, and Content not being held inside the wrappers border

anyhelp will be great!

Just a thought has it got something to do with them being floated Left and Right?
 
A

AdExpressions

New Member
Hello jord070:

My name is Bert and I work for AdExpressions. I want to help you out. First, let me say that I made a couple of alterations to your .html and .css coding. It was not a whole lot, but I think it should solve your problem if I understood you correctly. To be safe, you should rename your current .html and .css files to something else besides index.html and style.css. Renaming these files just makes it so if my code, provided below, isn't what you wanted you could just delete the new files you are going to be making and rename your old files back to their original file names. Now, make a new index.html and style.css and insert the code that I have provided below to their appropriate files.

Eventually, probably not for this assignment, you will want to include the section before the copy and paste sentence.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Copy and paste the following into the new index.html file:

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<title>Welcome To Just Pens...</title>

</head>


<body>

<div id="wrapper">
<div id="header">
<div id="logo">
<h1><a href="index.html">Just Pens</a></h1>

</div>

<div id="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li> <li><a href="faq.html">FAQ</a></li>

<li><a href="#"></a></li>
</ul>
</div>


</div>

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

<div id="sidebar">
<h1>We're Here</h1>
<div align="center"><img src="http://www.webdesignforum.com/images/1.jpg" alt="Quill tip Pen"/><br>
<a href="#">The New Quill</a></br>

</div>
</div>


<div id="content">
<h1>Welcome to Just Pens</h1>
<br/>
<div id="contentt">
<p>At 'Just Pens' we specialize in all things pens! From fountain pens, felt tip pens, ball point pens, quill tip pens, and even reed pens<br/>
</p>
<p>Come in and see what our friendly staff can do for you, whether you need the most elegant of all pens, or just a biro, 'Just Pens' has what you need!</p>
<p> After Selecting your new pen, you can come into the conveniently placed in-store coffee shop and write to your heart’s desire.</p>
<p>
<div align="center"><h3>CHOOSE 'JUST PENS' FOR THE BEST PRICED PENS IN AUSTRALIA</h3></div>
</div>
</p>
</div>
<div id="footer"><table width="100%" border="0">
<tr>
<td height="34" align="left" valign="bottom"><a href="#">Just Clock's</a></td>
<td align="right" valign="bottom"><i>Designed By: <a href="http://www.jord070.com"><b>Jordan Crawford</b></a></i></td>
</tr>
</table>
</div>

</div>




</body>
</html>

Copy and paste the following into your new style.css file:


body {
margin: 0px;
padding: 0px;
background: #242323;
font: 14px Arial, Helvetica, sans-serif;
color: #444444;
}

h1 {
color:white;
}

#wrapper {
width: 900px;
height:690px;
margin: 0px auto;
border: 10px solid #FFFFFF;
background-color:#ffffff;
}

#header {
width: 900px;
height: 100px;
margin: 0px auto;
background-color:#444444;
border-bottom:10px solid #FFFFFF;
}

#header a {
text-decoration: none;
font-style:strong;
color: #FFFFFF;
}

#header-pic{
background-color:#999999;
width: 900px;
height: 200px;
position:left;
float: left;

}


#logo {
float: left;
padding-left: 20px;
}

#logo h1, logo h3 {
padding: 25px 0px 0px 0px;
}


#menu {
float: right;
font-size:15px;
}

#menu ul {
margin: 0px;
padding: 49px 0px 0px 0px;
list-style: none;
line-height: normal;
}

#menu li {
float: left;
margin-left: 35px;
margin-right:5px;
}





#content {
width: 590px;
position: relative;
float: right;
}
#contentt {
float: right;
width: 580px;
}


#content h1 {
background-color:#444444;
text-align: right;
padding-top:3px;
padding-bottom:3px;
padding-left:10px;
padding-right:10px;
}



#sidebar {
width: 300px;
float: left;
height: 335px;

}

#sidebar img {
border:2px solid #444444;

}

#sidebar h1 {

background-color:#444444;
text-align: right;
padding-top:3px;
padding-bottom:3px;
padding-left:10px;
padding-right:10px;
}

#sidebar a{
color:#444444;
text-decoration: none;
}



#faq {
position:relative;

}

#faq h1 {
background-color:#444444;
text-align: left;
padding-top:3px;
padding-bottom:3px;
padding-left:10px;
padding-right:10px;
}

#faq ul {
position:relative;
left: 50px;
}


#footer {
width:900px;
height:40px;
background-color:#444444;
color:#FFFFFF;
float: left;

}

#footer a{
color:#ffffff;
text-decoration: none;
padding-top:10px;
}

#footer i {
float:right;
padding-right:10px;
padding-top:10px;
}



Hopefully this solves the problems that you were having. I did include one table in your footer section just to line up the text.
 
Last edited:
You must log in or register to reply here.
Top