PDA

View Full Version : Resolved Help With CSS Relative Positioning



tasteslikebert
Mar 30th, 2010, 05:08 PM
Hey

I am a complete beginner to CSS, I just made my first website, but I'm having some problems with the positioning of <div> boxes.

Here is my site http://tasteslikealphabets.x10hosting.com/ I would like the main page content to line up with the "About Me" box, but I can't find a way to do it, I can only line it up to the "Links" box or below it.

Here is the CSS:



body {
background-color: #CCFFFF
}


#header {
margin-left: 25%;
}
span.sub {
font-size: 15px;
letter-spacing: 30px;
}
span.sub:hover {
color: #33FFCC;
}


h2 {
font: bold 30px helvetica, sans-serif;
letter-spacing: 10px;
color: #33FFCC;
}
h3:hover {
background-color: #33FFCC;
color: #CCFFFF
}
h3 {
font: bold 20px helvetica, sans-serif;
letter-spacing: 7px;
color: #33FFCC;
}
p {
font: 14px sans-serif;
line-height: 18px;
}
.boxes {
border: solid #33FFCC 2px;
background-color: #CCFFFF;
padding: 0px 5px 0px 5px;
margin-left: 15%;
margin-bottom: 1%;
width: 20%;
float: left;
text-align: justify;
clear: both;
}

#content {
padding-left: 1%;
width: 40%;
float: left;
text-align: justify;
}
a:link {
text-align: left;
}
a:visited {
color: #00CCFF;
text-align: left;
}
em {
font-family: times;
}
#blog {
font-size: 36px;
}


and the HTML:




<html>

<head>
<link rel="stylesheet" type="text/css" href="style/index.css" />
<title>tasteslikealphabetsblog</title>
</head>

<body>
<img id="header" src="tasteslikealphabets.png" height="99px" width=613px" title="tasteslikealphabets" alt="tasteslikealphabets header" />
<div align="center"><p><em><span class="sub">the blog</span></em></p></div>
<div id="box1" class="boxes">
<h2>ABOUT ME</h2>
<p>My name is Bert, I am a 22 year-old musician / web designer / video maker based in Oakville, ON / Bristol, England.</p>
</div>
<div id="box2" class="boxes">
<h2>LINKS</h2>
<p><a href="http://www.blackterror.bandcamp.com" title="Black Terror on bandcamp">Black Terror</a></p>
<p><a href="http://www.youtube.com/user/tasteslikealphabets?feature=mhw5" title="tasteslikealphabets YouTube Channel">tasteslikealphabets YouTube Channel</a></p>
</div>

<div id="content">
<h3>NEXT STOP - KING OF THE INTERNET</h3>
<p>I am going to keep changing the way this site looks all the time for two reasons, the first is to make it looks AWESOME and the second is to confuse the reader.</p>
<p>I want to make a cool header to go up there at the top, I think that is what I'm going to work on next, first I have to learn to use a program like Illustrator or one of those other fancy ones and then I have to have <strong>IDEAS!</strong> Ideas are very important in the design world, you have to make lots of them.</p>
<p>This next bit is just me testing how I can stream music, guess what, IT WORKS! If it doesn't work for you though, tell me and I can attempt to fix it.</p>
<p><strong>Big Star - Thirteen</strong></p>
<script type="text/javascript" src="swfobject.js"></script>

<div id="flashPlayer">

This text will be replaced by the flash music player.
</div>

<script type="text/javascript">
var so = new SWFObject("playerSingle.swf", "mymovie", "192", "67", "7", "#FFFFFF");
so.addVariable("autoPlay", "no");
so.addVariable("soundPath", "http://download132.mediafire.com/bmgbhbuj2t2g/dxdrgmjmumm/Thirteen.mp3");
so.write("flashPlayer");
</script>

<p><em>Monday, March 29 2010</em></p>
<hr />
<h3>I'M ON THE INTERNET!</h3>
<p>Hello! Now I am actually on the internet, which is quite an important event. As a starter, here is a video that I made very recently, it's definitely in the top 3 videos made by anyone ever, and the other 2 were made by me also.</p>
<object style="height: 344px; width: 425px"><param name="movie" value="http://www.youtube.com/v/J8P60HjwtB0"><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always"><embed src="http://www.youtube.com/v/J8P60HjwtB0" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="425" height="344"></object>
<p><em>Sunday, March 28 2010</em></p>
<hr />
<h3>A NEW BLOG!</h3>
<p>Hello world! This is Bert, I just made this blog today, using my crazy HTML skills that I just learnt.</p>
<p><em>Saturday, March 27 2010</em></p>
<hr />
</div>
</body>
</html>


Thanks!

Bert

Excavator
Mar 30th, 2010, 05:39 PM
Hello tasteslikebert,
That is not a terrible first attempt.
A few things need fixed though - errors (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Ftasteslikealphabets.x10hosting.com%2F)

The biggest one is the DocType. Read the link in my sig about DocTypes.
I would recomend you use an HTML 4.01 Strict.

Your content column probably drops because you use clear:both; on your .boxes? clear:left; might work better in this case but there is no point in messing with it till you get a DocType.
See how the clear property works (http://www.w3schools.com/Css/pr_class_clear.asp) with floats.

There are a couple 2 column layouts you can look at that may help you with your layout here - http://nopeople.com/design/CSS%20tips/index.html

tasteslikebert
Mar 30th, 2010, 07:35 PM
Thanks Excavator!

The pages you linked to have helped me, and with a little fiddling around I've managed to line it over to the right of the boxes.

Excavator
Mar 30th, 2010, 07:47 PM
Looks good.
To fix that charcter encoding (http://www.w3.org/International/O-charset) errror, make the top of your code look like this -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="style/index.css" />
<title>tasteslikealphabetsblog</title>