Page 1 of 1

CSS Multi columb attempt....

Posted: Sun Feb 19, 2006 2:45 pm
by xEzMikex
Allright i read some tutorials... uhm ima show u my code and hopefully somone can tell me where i went wrong...


HERES MY CSS CODE

Code: Select all

a:link {color: #000000;}
	a:visited {color: #ffdf7d;}
	a:active {color: #ffdf7d;}
	a:hover {color: #ffdf7d;}
	a {text-decoration: underline;}
	body{
	margin-top:0px;
	background:#000000;
	}
	div.pack{
	background:#FFFFFF;
	color:#fbcc3d;
	width:700px;
	height:inherit;
	margin:auto;
	}
	div.banner{
	background:url(images/logo.gif);
	width:642px;
	height:155px;
	margin:auto;
	}
	.col1 {
	background:url(images/left_border.gif);
	height:auto;
	width:29px;
	}
    .col2 {
	background:url(images/logo.gif);
	height:155px;
	width:642;
	}
 	.col3 {	
	background:url(images/right_border.gif);
	height:auto;
	width:29px;
	}
	ol {
    margin: auto;
    padding: 0;
	}
 
	li {
    margin: 0;
    padding: 0;
    line-height: 1.3em;
	}

HERES MY HTML CODE

Code: Select all

<html>
<head>
<title>Untitled Document</title>
<link href="skin/1/index.css" rel="stylesheet" type="text/css">
</head>
<body>

<div class="pack">

<ol>
  <li class="col1">Antelope</li>
  <li class="col2">Eland</li>
  <li class="col3">Meerkat</li>
</ol>

</div>

</body>
</html>
and here is what i get

http://img476.imageshack.us/my.php?image=15el.gif

Posted: Sun Feb 19, 2006 2:49 pm
by feyd
:roll: moved to Client Side.

Posted: Sun Feb 19, 2006 3:14 pm
by yum-jelly
What exactly are you trying to do?

yj!

Posted: Sun Feb 19, 2006 3:25 pm
by xEzMikex
well right now im tring to get the borders set and the logo set aswell it should be like this


BORDER LOGO BORDER

im going to add the content at a later time

Posted: Sun Feb 19, 2006 5:34 pm
by raghavan20
what is 15el.gif file,,,,then why are you trying to set images for columns that are of 1.3em line size....why do you have logo as background image to col2 and you have set that for banner as well....basically this 15el.gif image is hiding all other details...

Posted: Sun Feb 19, 2006 6:01 pm
by MinDFreeZ
honestly, for 3 column layouts.. you'll notice (if you look at other's examples) you're going to need to use float: once or twice to get those columns working... so things u need to know...

float and clear

and you're using a list for that.. might want to make that 3 separate divs with 1 container div..

if you need more help I can find or make u a quick 3 column layout.

Posted: Sun Feb 19, 2006 6:04 pm
by John Cartwright
you can also google "negative margins" :wink:

Posted: Sun Feb 19, 2006 8:21 pm
by MinDFreeZ
ahh yes, that's another thing you need to know about.. to get something centered (and other reasons) you position that bad boy %50 and then negative margin it to where you want it (makes things easier when dealing with multiple resolutions as well)

Posted: Mon Feb 20, 2006 3:13 am
by CoderGoblin
Or can just cheat and look at existing css templates. Some may be found here...
Open Source Web Design

Posted: Mon Feb 20, 2006 4:20 am
by matthijs
Or you could post a picture of what you would like to get and i'll give you the html/css needed to do that (the large parts of course)