...

View Full Version : CSS Columns for layout-ish



doctordew
07-29-2007, 04:38 AM
Ok so here's what I'm using.

HTML


</DIV>

<DIV class="rightcolumn">

Contents of right column.
</DIV>

</DIV>

<DIV class="leftcolumn">

Contents of left column.
</DIV>
CSS CODE


.leftcolumn {
position: absolute;
width: 100;
top: 0px;
left: 0px;
background-color: #00FFFF;
}

.rightcolumn {
position: absolute;
width: 700;
top: 0px;
left: 100px;
background-color: #32cd32;
}

My question is that is this the most effective way to get my page split? I am wondering if this is a good way to be splitting my page or if there is a better way?

BWiz
07-29-2007, 05:13 AM
In my opinion, I would say that this is a bad way to be splitting your page. If you're overall layout is going to be 800 pixels thick, then try something this:



<style type="text/css">
#container { width: 800px; border: 1px solid #000; }
#lftCont { width: 700px; }
#lftCont .cont { padding: 20px; }
#rgtCont { width: 100px; float: right; }
#rgtCont .cont { padding: 5px; }
</style>

<div id="container">
<div id="lftCont">
<div class="cont">
<p>
I used this to add padding.
</p>
</div>
</div>
<div id="rgtCont">
<div class="cont">
<ul>
<li>
<a href="index.php?id=1">Homepage</a>
</li>
<li>
<a href="index.php?id=2">About Me</a>
</li>
</ul>
</div>
</div>
</div>


I haven't tested this at all, so I don't know if it will work, just posted it quickly. Sorry if it doesn't - getting late.

You could opt to replace the absolute widths with percentages.

doctordew
07-29-2007, 05:21 AM
So I would just put that in place of my html code, and leave my css code the same or vis versa?

BWiz
07-29-2007, 05:29 AM
Just paste the <style> into your <head> and the <div>'s into your <body> and check if it works first.

Apply it, change it to suit your needs. I just bashed the thing together. You gave no indication of what you were doing or what you required, so I just put something together.

Given your HTML and CSS, I'm guessing you have knowledge of both - so this task shouldn't be difficult for you.

Like I said, I didn't bother testing it out - it's just too late at night for that.

doctordew
07-29-2007, 05:41 AM
+rep thanks for the help. I just had to adjust a few things. My question though is I want the CSS in a seperate document, and to connect it with a tag such as this



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

How would I get this to work on a seperate document?

BWiz
07-29-2007, 05:43 AM
I'm unsure what you mean, though if you're using the <link> tag - it's basically having the CSS in that page. You can use all your classes and ids normally.

If you mean about linking it up and such, just make sure that the href is relative to the page which you are calling it from. Then, inside the external stylesheet; if you're using any background images or such - they have to be relative to the .css file.

doctordew
07-29-2007, 02:51 PM
No I mean I don't want to have to paste that code into every single page. I'm using a seperate css document and linking it in. The code you gave me was for in the html document.

jlhaslip
07-29-2007, 03:07 PM
#container { width: 800px; border: 1px solid #000; }
#lftCont { width: 700px; }
#lftCont .cont { padding: 20px; }
#rgtCont { width: 100px; float: right; }
#rgtCont .cont { padding: 5px; }
Place that code into the trial.css, link to the trialcss file and delete that coding from the html document.

doctordew
07-29-2007, 11:03 PM
Thanks JLHaslip, I'll try that now.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum