Blocks of writing

Evilaussie · #1 Jul 20th, 2007, 16:17

Hey webforumz,

Second topic in a matter of a day, going good eh? Alright, back on topic. As the title suggests, currently on my homepage (website in work) http://trent-catchlove.110mb.com - when you go there, you'll see 5 block's of code basically, header, left, right, middle columns and a footer. What i'm trying to do, but i cant quite pinpoint how, is add another block above the left column so i can put in another css menu. I've attached a picture which hopefully show's you what i mean.

So far, i've tryed making another id which i could use with a div tag, but when i tryed that, the whole page went wacko, so i tryed google and nothing came up so i'm back to you guys! Any idea's?

Thanks
-Evil

Lchad · #2 Jul 20th, 2007, 17:04

Ok I redid your code..I was thinking you might want to see how this is done without tables.

When you are using div's you don't need tables. The div's act as tables.
Isn't that great!

So here's your html

Code: Select all

<body><div id="container">
    <div id="header">
    <ul class="menu">
  <li><a href="index.html">Home</a>
  <li><a href="computer.html">Computer</a>
  <li><a href="cricket.html">Cricket</a>
  <li><a href="about.html">About me</a>

  </ul>
  <h1><br><br>My personal website dedicated to me Trent<br> Catchlove and all my interests.</h1>
    
    </div>

<div id="left-col">
<div class="menu2">Put your new navigation here</div>
<h2>Recent events i've been doing lately</h2>
  
  <p>It's currently the school holiday's so it's been very boring on the home front, i've basically done
  jackshit, but school's starting back up next week so that should entertain me alittle more... *cough*</p>
    
    <p><em>
    Also, dont forget to check out the other parts of the website as-well! It's a work in
  progress but it's something to do... right?    </em></p>

    
  </div>
  
    <div id="mid-col">feel free to check out the website, there's afew thing's which
    will be rusty but dont worry, i'll be working on fixing them, so enjoy the website
    and what it has to offer!</div>
    
    <div id="right-col">Firstly, if you have any
    questions or comments, feel free to <a href="mailto:catchy18744@aapt.net.au">email me</a>

    
    </div>
    
    <div id="footer">&copy; 2007 Trent Catchlove, All rights reserved.</div>
</div>
</body>
</html>

Here's your new css:

Code: Select all

font-align: center; }


http://trent-catchlove.110mb.com/style.css

html, body {

background-color: black; 

margin: 1;

padding: 0;

color: white; }



h1 {

text-decoration: none;

text-align: center; 

font-size: 18px; }

h2 {
    font: Arial, Helvetica, sans-serif;
    font-size: 14px;
    }

ul.menu {

position: absolute;

left: 26em;

margin: 0;

padding: 0;

word-spacing: 0em;

float: left;

font: bold 13px Arial;

background: white; }

p {
    font:"Times New Roman", Times, serif;
    font-size: 14px;
    margin-bottom: 20px;
    }

.menu li {

display: inline; }



.menu li a {

float: left;

color: red;

padding: 9px 11px;

text-decoration: none;

border-right: 0px solid white; }



.menu li 

a:visited {color: red; }

a:link {color: red; }

a:hover {background: black; }



#container {

width: 100%;

margin: 0 auto;

border: 1px solid black;

}

#header {

height: 120px;

margin-bottom: 2px;

background: black;

}

#left-col, #right-col {

width: 150px;

float: left;

}
#mid-col {

width: 60%;

margin: 0 2px 2px 2px;

float: left;

background: black;

}

#footer {

clear: both;

text-align: center;

background-color: black;

height: 20px;

}

I didn't check to see what fonts you are using and what size, so go ahead and change those to match your needs.

Evilaussie · #3 Jul 21st, 2007, 03:44

Lchad my new Life saver! Cheers, worked perfectly.

-Evil

Lchad · #4 Jul 21st, 2007, 12:31

Awesome.... Now Evil... no more Tables OK!!!

Or else we will have to send the tables police after you!!!

Pádraig · #5 Jul 21st, 2007, 12:51

Did you code all of that Lchad?

Evilaussie · #6 Jul 21st, 2007, 13:50

Quote:

Originally Posted by Pádraig

Did you code all of that Lchad?

Nah, i coded most of it. Lchad just helped me with my second menu problem by adding:

Code: Select all

<div class="menu2">Put your new navigation here</div>

plus taking out the tables in my left-column. But i didn't compare css code from my orginal sheet to the new, so she might have changed some bits of that which were faulty/bad.

Quote:

Originally Posted by Lchad

Awesome.... Now Evil... no more Tables OK!!!

Or else we will have to send the tables police after you!!!

Hahaha, yes boss, no more tables. I promise.

-Evil

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Aligning menu blocks horizontally	dooglex	Web Page Design	2	Apr 9th, 2008 21:19
Writing an XML playlist??	DoghouseTV	Other Programming Languages	0	Aug 14th, 2006 01:15
Gradient background appearing in blocks ???	j4mes_bond25	Web Page Design	2	Jul 4th, 2006 15:01
Aligning blocks at the bottom of a containing block	nomis80	Web Page Design	2	Jul 25th, 2005 22:05

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Blocks of writing