September 26th, 2003, 02:38 AM
|
|
|
|
Join Date: Apr 2007
Location: Birmingham, AL, USA
Posts: 4
Time spent in forums: < 1 sec
Reputation Power: 0
|
|
|
New to CSS, CSS is messed up, will not go to top...
Ok. I am new to CSS and not very good at design (I'm your programmer guy)... So I picked up a book from sitepoint.com, the book on CSS. (They only have three books out, so it's not hard to find)...
Well, following the book... I ended up with this:
Quote: <HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="style.css" />
</HEAD>
<BODY>
<?php
@mysql_connect("localhost","root","YouDidNotSeeMyPassword");
@mysql_query("USE clete2_site");
$sql = @mysql_query("SELECT * FROM news");
?>
<div class="border-left">
<div class="bar">
<div>Navigation</div>
</div>
<li>Home</li>
</div>
<div class="border-left">
<div class="bar">
<div>Me</div>
</div>
<li><a href="data/resume.php">My Resume</a></li>
<li><a href="data/history.php">My History</a></li>
<li><a href="MailTo:root@clete2.com">Contact Me</a></li>
</div>
<div class="border-left">
<div class="bar">
<div>Scripts</div>
</div>
<li><a href="data/scriptsfree.php">Scripts (free)</a></li>
<li><a href="data/scriptspaclass.php">Scripts (paid)</a></li>
</div>
<div class="border-middle">
<div class="bar">
<div>News</div>
</div>
</div>
<?php
while($myrow = mysql_fetch_array($sql)){
$context = substr($myrow['context'], 0, 100) ."...";
?>
<div class="border-middle">
<div class="bar">
<div><?=$myrow['title']?></div>
</div>
<?=$context?>
</div>
<?php
}
?>
<div class="border-right">
<div class="bar">
<div>Poll</div>
</div>
</div>
</BODY>
</HTML>
|
style.css:
Quote:
body {
color: #FFFFFF;
background-color: #FFFFFF;
}
a:hover, a:visited {
color: #FFFFFF;
text-decoration: none;
}
a {
text-decoration: none;
color: #000000;
}
.bar {
text-align: center;
font-weight: bold;
padding: 5px 0px 5px 5px;
background-color: #0066CC;
}
.border-left {
border: 2px solid #0092CC;
background-color: #0066CC;
padding-bottom: 10px;
margin-bottom: 20px;
margin-left: 2%;
width: 15%;
}
.border-middle {
border: 2px solid #0092CC;
background-color: #0066CC;
padding-bottom: 10px;
margin-bottom: 20px;
margin-left: 20%;
width: 57%;
}
/*
.border-middle {
position: absolute;
border: 2px solid #0092CC;
background-color: #0066CC;
padding-bottom: 10px;
margin-bottom: 20px;
width: 57%;
margin-left: 18%;
text-align: center;
}
.border-middle-news {
position: absolute;
border: 2px solid #0092CC;
background-color: #0066CC;
margin-bottom: 50px;
width: 57%;
margin-left: 18%;
margin-top: 50px;
text-align: center;
}
*/
.border-right {
border: 2px solid #0092CC;
background-color: #0066CC;
padding-bottom: 10px;
margin-bottom: 20px;
margin-left: 70%;
width: 15%;
}
|
Now, if you put that in, you will find that they kind of stack downwards on the page going in a diagonal line... Does anyone have any suggestions? (I'm not quite done with the book, but I have scanned the rest and I don't think it explains)... Probably some stupid mistake, but thanks for your time  ...
|
Codewalkers Forums Sponsor:
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
