Log in

View Full Version : Stuck on Making a List


sunxyre
04-20-2012, 07:12 AM
Hey, I'm stuck on something, can't seem to figure it out.

Trying to make it something like this:
http://i43.tinypic.com/2rc4jzs.jpg

But getting this instead:
http://i42.tinypic.com/20jzo0.jpg

My HTML looks like this:


<ul class="zxy">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>


Basically I'm trying to make all the content in "zxy" to be centered. And each <li> to be 200px in width and height while having 5px space between each other. Help please.
traq
04-20-2012, 04:24 PM
You might share your CSS...?

Your question is unclear.
Please provide more information, and be as specific as possible.
What do you want to accomplish? What have you already tried? What problems did you encounter?
Also, please be sure that you have included all relevant code and/or a link to the page in question.
coothead
04-20-2012, 09:58 PM
Hi there sunxyre,

and a warm welcome to these forums. ;)

Here is an example for you to try...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>boxes</title>

<style type="text/css">
body {
background-color:#f0f0f0;
}
#boxes {
width:828px;
padding:10px 5px 5px 10px;
border:1px solid #ccc;
margin:20px auto 0;
list-style-type:none;
overflow:hidden;
box-shadow:#666 6px 6px 12px;
background-color:#fff;
}
#boxes li {
float:left;
width:200px;
height:200px;
border:1px solid #ccc;
margin:0 5px 5px 0;
box-shadow:#666 2px 2px 2px;
background-color:#fbfbfb;
}
</style>

</head>
<body>

<ul id="boxes">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

</body>
</html>

coothead
ajfmrf
04-21-2012, 01:05 AM
Coothead that looks very nice.Thanks for sharing more of your talent with us.