...

View Full Version : display element



kamkam
05-09-2009, 09:48 AM
Hi;
How i can display elements from left to right and the first element stat from the left of 20px, and the distance between each element is 20px.
Could any one help me, please, thanks

my code does not work for the distance between each element is 20px.

<html>
<head>
<style type="text/css">
.number{
position: relative;
left: 20px;
float: left;
}
</style>
</head>
<body>
<span class="number">1</span>
<span class="number">2</span>
<span class="number">3</span>
<span class="number">4</span>
</body>
</html>

abduraooft
05-09-2009, 10:06 AM
Like
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
*{
margin:0;
padding:0;
}
#wrapper{
padding-left:20px;
}
.number{
width: 20px;
float: left;
border:1px solid #000;
}
</style>
</head>
<body>
<div id="wrapper">
<span class="number">1</span>
<span class="number">2</span>
<span class="number">3</span>
<span class="number">4</span>
</div>
</body>
</html> ?

kamkam
05-09-2009, 10:42 AM
Thanks for help, but how i can make the distance for each box is 20px??




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
*{
margin:0;
padding:0;
}
#wrapper{
padding-left:20px;
width: 200px;
}
.number{
overflow: scroll;
width: 50px;
height:50px;
float: left;
border:1px solid #000;
}
</style>
</head>
<body>
<div id="wrapper">
<span class="number">1213123212313123123211232313</span>
<span class="number">2321313213131132121331232123131312312</span>
<span class="number">331231312123213414311</span>
<span class="number">431213331231311311313113132121313231313131321231321</span>
</div>
</body>
</html>

_Aerospace_Eng_
05-09-2009, 10:45 AM
If you are going to be using those numbers then I suggest you use a table as what you are displaying currently is tabular.

kamkam
05-09-2009, 11:12 AM
when i use tables, the distance for each table are not 20px, and the each table's width and height are not 80px and 50px.
How i can control that, please.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
*{
margin:0;
padding:0;
}
#wrapper{
padding-left:20px;
width: 200px;
}
.number{
left: 20px;
width: 80px;
height:50px;
float: left;
border:1px solid #000;
}
</style>
</head>
<body>
<div id="wrapper">
<table class="number"><tr><td>1213123212313123123211232313</td></tr></table>
<table class="number"><tr><td>2321313213131132121331232123131312312</td></tr></table>
<table class="number"><tr><td>331231312123213414311</td></tr></table>
<table class="number"><tr><td>431213331231311311313113132121313231313131321231321</td></tr></table>
</div>
</body>
</html>

_Aerospace_Eng_
05-09-2009, 11:25 AM
Okay I think you are missing the point. I also think you should touch up on HTML/CSS and more specifically semantics. Also how do you expect four items that are 82px wide to fit in a 200px container? Here is one way. Also you those long numbers you are entering will expand the boxes in a not so pretty way. There needs to be spaces. Realistically you'll probably never use a number like that.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
padding:0;
margin:0;
}
table.data {
width:416px;
margin:auto;
background:#F00;
}
table.data td {
border:1px solid #000;
width:80px;
height:50px;
margin-left:20px;
display:block;
float:left;
}
</style>
</head>

<body>
<table class="data" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</body>
</html>

kamkam
05-09-2009, 11:59 AM
Thanks for your time and helpping, that's what i want.


cheers



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum