PDA

View Full Version : pls help..



rahulgreed
Sep 8th, 2007, 06:13 AM
hi guys...im posting some code here.. now if you notice the " Article One, Article Two and the News & Updates" column.. im trying to replicate the same columns below so that i can have same columns aligned below each other. but it doesn't properly align.. can any1 pls help me with that ? i will be very grateful...


please, i really need the help. thanks a lot in advance.

here is the css file:



body {
margin: 0;
padding: 0;
text-align: left;
font: 75% arial, tahoma, "Trebuchet MS", verdana, arial, verdana, sans-serif;

}

#container {
width: 100%;
\width: 100%;
w\idth: 99%;
border: 0px solid #eee;
margin-left: auto;
margin-right: auto;
padding: 0;
line-height: 1.5em;
}

#banner {
height: 175px;
padding: 0;
margin-bottom: 20px;
background: #fff url(images/image00.jpg) no-repeat;
color: #333;
}

/* TOP NAVIGATION */
#navlist {
width: 100%;
padding: 4px 5px 5px 0;
margin: 0 0 20px 0;
text-align: left;
letter-spacing: 3px;
color: #fff;
background: #476042;
}
#navlist li {
list-style: none;
margin: 0;
display: inline;
}
#navlist li a {
padding: 5px .75em;
margin: 0;
color: #fff;
background: #476042;
text-decoration: none;
}
#navlist li a:link { color: #fff;
background: #476042;
}
#navlist li a:visited {
color: #fff;
background: #476042;
}
#navlist li a:hover {
color: #000;
background: #6A9662;
}
#navlist li a#current {
color: #fff;
background:#6A9662;
}

/* LEFT MENU */
.menu ul li {
line-height: 1.8em;
margin: 0 10px 0 0;
padding: 0;
list-style-type: square;
color: #6A9662;
background: inherit;
}
.menu ul li a {
color: #F17C0B;
background: inherit;
}
.menu ul li a:hover {
color: #6A9662;
background: inherit;
}

/* MAIN CONTENT */
#content {
padding: 0 20px 0 20px;
margin-left: 170px;
margin-right: 170px;
border-left: 1px dashed #333;
border-right: 1px dashed #333;
color: #555;
background-color: #fff;
}

/* ARTICLES */
.intro {
float:left;
width: 25%;
margin: 3px 0 5px 0;
padding: 5px;
text-align:left;
}
.intro2 {
float: left;
width: 25%;
margin: 3px 0 5px 20px;
padding: 5px;
}
.intro3 {
float:right;
width: 33%;
margin: 3px 0 5px 0;
padding: 5px;
}

/* LEFT SIDEBAR */
#sidebar-a {
float: left;
width: 150px;
\width: 160px;
w\idth: 150px;
margin-right: 5px;
padding: 0 5px 0 5px;
color: #666;
background-color: #fff;
}

/* RIGHT SIDEBAR */
#sidebar-b {
float: right;
width: 150px;
\width: 160px;
w\idth: 150px;
margin: 0 0 0 5px;
padding: 0 5px 15px 5px;
color: #333;
background-color:#FAF8E9;
}

/* FOOTER */
#footer {
clear: both;
padding: 5px;
margin: 0;
background-color: #476042;
color: #fff;
}
#footer a {
text-decoration: none;
color: #fff;
background-color:#476042;
}
#footer a:hover {
text-decoration: none;
color: #FE3F22;
background-color:#476042;
}

/* LINKS */
a {
text-decoration: none;
color: #F17C0B;
background-color: #fff;
}
a:hover {
text-decoration:underline;
color: #666;
background-color:#fff;
}
a img {
border: 0;
}

/* IMAGE PROPERTIES */
.border {
padding: 10px;
margin: 10px;
border: 1px solid #476042;
}
.imgleft {
float: left;
border: 1px solid #90b905;
margin: 5px 10px 10px 15px;
padding: 5px;
}

/* HEADING PROPERTIES */
h1 {
width: 30%;
font-size: 200%;
letter-spacing: 5px;
color:#6A9662;
background: #fff;
}
h2 {
font-size: 130%;
text-transform: uppercase;
letter-spacing: 10px;
color:#476042;
background: #fff;
}
h3 {
padding: 5px;
text-transform: uppercase;
font-size: 110%;
color:#fff;
background: #6A9662;
}
h4 {
padding: 5px;
text-transform: uppercase;
font-size: 110%;
color:#fff;
background: #F17C0B;
}


here is the html file...




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "(URL address blocked: See forum rules)">
<html xmlns="(URL address blocked: See forum rules)">

<head>

<title></title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link href="style.css" rel="stylesheet" type="text/css" />

<style type="text/css">
<!--
.style2 {
color: #6A9662;
font-size: 1.5em;
}
-->
</style>
</head>

<body>

<div id="container">

<div id="banner">|
<p class="style2">&nbsp;</p>
</div>

<!-- Begin Top Menu -->
<ul id="navlist">
<li id="active"><a id="current" href="#">HOME</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Links</a></li>
</ul>
<!-- End Top Menu -->

<div id="sidebar-a">
<h2><img class="imgleft" src="images/image02.jpg" alt="box" /></h2>
<h2>&nbsp;</h2>
<h2>&nbsp;</h2>
<h2>Links</h2>
<div class="menu">

<ul>
<li><a href="#">Links</a></li>
<li><a href="#">Links</a><a href="#" title="OpenWebDesign"></a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Links</a> </li>
<li><a href="#">Links</a></li>
</ul>
</div>

<p align="justify">some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text </p>

</div>

<div id="sidebar-b">

<h3>Information</h3>

<p>Anything you want. </p>

<h3>FeaTURED Project</h3>
<img class="border" src="images/image02.jpg" alt="box" />
<p><span class="update">Details Details </span><span class="update">Details Details </span><span class="update">Details Details </span><span class="update">Details Details </span><span class="update">Details Details </span><span class="update">Details Details </span><span class="update">Details Details </span><span class="update">Details Details </span><span class="update">Details Details </span><span class="update">Details Details </span><span class="update">Details Details </span></p>

</div>

<div id="content">

<h2>TEXT TEXT TEXT TEXT TEXT TEXT TEXT </h2>

<p><img class="imgleft" src="images/image02.jpg" alt="box" /></p>

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div class="intro">

<h3>Article One</h3>

<p class="update">Details<span class="update">etails</span><span class="update">Details</span><span class="update">Details</span><span class="update">Details</span></p>
<p class="update"><span class="update">Details</span></p>
</div>

<div class="intro2">

<h3>Article Two</h3>

<p class="update"> Details Details Details Details </p>
<p class="update"><span class="update">Details </span></p>
</div>

<div class="intro3">

<h4>News & Updates</h4>

<p class="update">Details Details </p>
<p class="update">Details </p>
</div>

</div>


<div id="footer">some text | footer links | so on and so forth...</div>
</div>
</body>
</html>

iota
Sep 8th, 2007, 07:32 AM
I don't understand why -


width: 100%;
\width: 100%;
w\idth: 99%;