Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7

Thread: display element

  1. #1
    Regular Coder
    Join Date
    Dec 2006
    Posts
    306
    Thanks
    24
    Thanked 0 Times in 0 Posts

    display element

    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.
    PHP Code:
    <html>
    <
    head>
    <
    style type="text/css">
    .
    number{
    positionrelative;
    left20px;
     
    floatleft;
    }
    </
    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

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,854
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Like
    Code:
    <!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>
    ?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    Dec 2006
    Posts
    306
    Thanks
    24
    Thanked 0 Times in 0 Posts
    Thanks for help, but how i can make the distance for each box is 20px??



    Code:
    <!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>

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    If you are going to be using those numbers then I suggest you use a table as what you are displaying currently is tabular.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    Regular Coder
    Join Date
    Dec 2006
    Posts
    306
    Thanks
    24
    Thanked 0 Times in 0 Posts
    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.

    Code:
    <!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>

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.

    Code:
    <!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>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    Regular Coder
    Join Date
    Dec 2006
    Posts
    306
    Thanks
    24
    Thanked 0 Times in 0 Posts
    Thanks for your time and helpping, that's what i want.


    cheers


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •