using css to make simple layout template

« on: May 06, 2008, 12:42:33 PM »

metrazaman Offline

Newbie

Posts: 4

<div id="logo" style="position: absolute; width: 100%; height: 100px; top: 0px; left: 0px;
background-color: #99CCFF;">
Logo
</div>

<div id="nav" style="position: absolute; width: 200px; top: 100px; left: 0px;
background-color: #99CCFF;">
<p>Home</p>
<p>Company info</p>
<p>contact</p>
</div>

<div id="links" style="position: absolute; width: 175px; top: 100px; right: 0px;
background-color: #99FF99;">
<p>Link1</p>
<p>link2</p>
<p>link3</p>
</div>

<div id="content" style="position: absolute; top: 100px; left: 200px; right: 175px;">
Content
</div>


	Report to moderator Logged

Re: using css to make simple layout template

« Reply #1 on: October 13, 2008, 07:44:41 PM »

Wispofcloud Offline

Newbie

Posts: 10

Hey thanks, I'll have to take a look at this. I'm currently just teaching myself CSS, but I'm finding it pretty easy as I've already got a strong background in HTML.


	Report to moderator Logged

Re: using css to make simple layout template

« Reply #2 on: October 14, 2008, 03:13:25 AM »

Floobynooby Offline

Newbie

Posts: 25

Wouldn't it be simpler to add all the styling to a .css style sheet, that way the code doesn't bloat the page.


	Report to moderator Logged

Bead sales - van leasing

Re: using css to make simple layout template

« Reply #3 on: November 30, 2008, 06:27:41 PM »

Primate

Newbie

Posts: 14

You should only use position: absolute when you absolutely have to. It can cause all sorts of problems, because different browsers will display absolutely positioned items differently. Instead, use a margins, padding, and floated elements.

You'll also want to put your CSS in an external stylesheet and link to it using the following:

Code:

This helps separate the presentation (CSS) from the structure (HTML), which makes your website much cleaner. You can also place CSS code in <style> tags, which go in the head of your document.


	Report to moderator Logged

Pages: [1]

Send this topic | Print

« previous next »