[HTML & CSS] Making left section for content boxes [HTML & CSS]
Hey Guys.
Just wondering how I can make a left section for content boxes on my Website. I have created the layout from nothing, and I'm quite proud of it.
Anyway.
I have created a DIV and tryed everything to position is to the left, so I can make content boxes.
Here's what the site looks like:
http://imagehoster.webs.com/website.png
And here's the source.
HTML
Code:
<!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=utf-8" />
<title>Layout One :: Main Page [Home]</title>
<link href="styles/navimenu.css" rel="stylesheet" type="text/css" />
<link href="styles/newsStyle.css" rel="stylesheet" type="text/css" />
<link href="styles/body.css" rel="stylesheet" type="text/css" /></head>
<body alink="#000000" vlink="#000000" link="#000000" id="homePage">
<div id="header-container">
<div id="container">
<div id="navmenu">
<ul>
<li><a href="#" id="homePageLink1">Button 1</a></li>
<li><a href="#">Button 2</a></li>
<li><a href="#">Button 3</a></li>
<li><a href="#">Button 4</a></li>
<li><a href="#">Button 5</a></li>
<li><a href="#">Button 6</a></li>
</ul>
</div>
</div>
</div>
<div id="body-container">
</div><br /><br /><br />
<table width="865" border="0" cellspacing="0">
<tr>
<td width="25" height="27" background="imgs/table_left_corner.png"> </td>
<td width="812" align="center" background="imgs/table_middle.png" id="newsTitle">Artical Not Added...</td>
<td width="25" background="imgs/table_right_corner.png"> </td>
</tr>
<tr>
<td height="1" colspan="3" valign="top" bgcolor="#F2DB7B"><div id="newsTop">Date Created: null --- Category: None.</div>
<p id="paragraphNews">Artical not added...<strong></strong></p>
</td>
</tr>
</table>
<p> </p>
<table width="865" border="0" cellspacing="0">
<tr>
<td width="25" height="27" background="imgs/table_left_corner.png"> </td>
<td width="812" align="center" background="imgs/table_middle.png" id="newsTitle">Artical Not Added...</td>
<td width="25" background="imgs/table_right_corner.png"> </td>
</tr>
<tr>
<td colspan="3" bgcolor="#F2DB7B"><div id="newsTop">Date Created: null --- Category: None.</div>
<p id="paragraphNews">Artical not added...<strong></strong></p>
</td>
</tr>
</table>
<p> </p>
<table width="865" border="0" cellspacing="0">
<tr>
<td width="25" height="27" background="imgs/table_left_corner.png"> </td>
<td width="812" align="center" background="imgs/table_middle.png" id="newsTitle">Artical Not Added...</td>
<td width="25" background="imgs/table_right_corner.png"> </td>
</tr>
<tr>
<td colspan="3" bgcolor="#F2DB7B"><div id="newsTop">Date Created: null --- Category: None.</div>
<p id="paragraphNews">Artical not added...</p>
</td>
</tr>
</table>
<p> </p>
<table width="865" border="0" cellspacing="0">
<tr>
<td width="25" height="27" background="imgs/table_left_corner.png"> </td>
<td width="812" align="center" background="imgs/table_middle.png" id="newsTitle">Artical Not Added...</td>
<td width="25" background="imgs/table_right_corner.png"> </td>
</tr>
<tr>
<td colspan="3" bgcolor="#F2DB7B"><div id="newsTop">Date Created: null --- Category: None.</div>
<p id="paragraphNews">Artical not added...</p>
</td>
</tr>
</table>
<p> </p>
<table width="865" border="0" cellspacing="0">
<tr>
<td width="25" height="27" background="imgs/table_left_corner.png"> </td>
<td width="812" align="center" background="imgs/table_middle.png" id="newsTitle">Artical Not Added...</td>
<td width="25" background="imgs/table_right_corner.png"> </td>
</tr>
<tr>
<td colspan="3" bgcolor="#F2DB7B"><div id="newsTop">Date Created: null --- Category: None.</div>
<p id="paragraphNews">Artical not added...</p>
</td>
</tr>
</table>
<div id="leftContainer">
Bleh LOL
</div>
</body>
</html>
CSS - body.css
Code:
@charset "utf-8";
/* CSS Document */
#body-container {
width: 850px;
margin: 0px auto;
}
#leftcontainer {
float: left;
margin: auto 0px;
width: 250px;
}
body {
background-image: url(../imgs/background_img.png);
background-repeat: repeat-x;
}
CSS - navmenu.css
Code:
@charset "utf-8";
body {
margin: 0px;
padding: 0px;
height: 20px;
}
#container {
text-align: center;
top: 20px;
}
#navmenu {
width: 1112px;
height: 36px;
padding: 0px 0px 0px 75px;
margin: 0px auto;
}
#navmenu ul {
list-style-type: none;
margin: 0px;
padding: 0px;
text-align: center;
}
#navmenu ul li {
width: 172px;
float: left;
margin: 50px 0px 8px 0px;
}
#navmenu ul li a {
font-family: Verdana;
text-decoration: none;
display: block;
width: 172px;
height: 36px;
line-height: 36px;
font-size: 11pt;
background-image: url(../imgs/button.png);
background-position: 0 -0px;
}
#navmenu a:hover {
background-position: 0 -36px;
font-weight: bold;
color: #000000;
}
#homePage #homePageLink1 {
background-position: 0px -36px;
font-weight: bold;
}
#link-home {
background-position: 0 180px;
}
CSS - newsStyle.css
Code:
@charset "utf-8";
table {
margin: 0px auto;
}
#newsTitle {
font-family: verdana;
font-weight: bold;
font-size: 13px;
}
#newsTop {
background-color: #FFCC66;
font-family: verdana;
font-size: 9px;
font-weight: bold;
}
p {
font-family: verdana;
font-size: 11px;
}
Also, 1 more thing. With the navigation. Let's take button 5. (I know there's 6 buttons in HTML, but I never up-dated image) I have 1 main image which is for my buttons and I define the hover state through CSS. Say if I wanted the 5th button to be a different colour from the others. As the default state is what's displayed. But I wanted the 5th button to be the same, but green, blue, or any colour. But using my image that my buttons are on. If you get what I'm saying..
Thanks in advanced'
YeImANutter
Re: [HTML & CSS] Making left section for content boxes [HTML & CSS]
add to #container
Code:
float:left;
margin-left:20px;
Should work depending on how big your browser is,
Re: [HTML & CSS] Making left section for content boxes [HTML & CSS]
Nopes.
Didn't work. Just edited the Top DIVs.
Re: [HTML & CSS] Making left section for content boxes [HTML & CSS]
did you put
Code:
<div id="leftContainer">
Bleh LOL
</div>
above the container (in the code)?
Re: [HTML & CSS] Making left section for content boxes [HTML & CSS]
No. It's in a seprate Style Sheet.
Re: [HTML & CSS] Making left section for content boxes [HTML & CSS]
Quote:
Originally Posted by
YeImANutter
No. It's in a seprate Style Sheet.
No the HTML code.
Re: [HTML & CSS] Making left section for content boxes [HTML & CSS]
Oh. No. It's below it. You can check in the Soruce on my first post.
