CSS Multi columb attempt....

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
xEzMikex
Forum Commoner
Posts: 38
Joined: Sat Jan 21, 2006 10:18 pm
Location: Canada

CSS Multi columb attempt....

Post 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
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

:roll: moved to Client Side.
yum-jelly
Forum Commoner
Posts: 98
Joined: Sat Oct 29, 2005 9:16 pm

Post by yum-jelly »

What exactly are you trying to do?

yj!
xEzMikex
Forum Commoner
Posts: 38
Joined: Sat Jan 21, 2006 10:18 pm
Location: Canada

Post 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
User avatar
raghavan20
DevNet Resident
Posts: 1451
Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:

Post 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...
MinDFreeZ
Forum Commoner
Posts: 58
Joined: Tue Feb 14, 2006 12:28 pm
Location: Lake Mary, FL

Post 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.
User avatar
John Cartwright
Site Admin
Posts: 11470
Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:

Post by John Cartwright »

you can also google "negative margins" :wink:
MinDFreeZ
Forum Commoner
Posts: 58
Joined: Tue Feb 14, 2006 12:28 pm
Location: Lake Mary, FL

Post 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)
User avatar
CoderGoblin
DevNet Resident
Posts: 1425
Joined: Tue Mar 16, 2004 10:03 am
Location: Aachen, Germany

Post by CoderGoblin »

Or can just cheat and look at existing css templates. Some may be found here...
Open Source Web Design
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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)
Post Reply