SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict tlacaelelrl's Avatar
    Join Date
    Apr 2011
    Location
    Mexico city, Mexico
    Posts
    353
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    cebtering multiple divs inline

    I have a small script that generates, based on the day, the days left to an specific event, this is an example

    Code HTML4Strict:
    <!-if looking for tommorrow then I have to create a div->
    <div>1</div><!-the number 1 represents 1 day left to the event->
    <!-if looking for tten days from now then I have to create 2 divs->
    <div>1</div><div>0</div><!-the number 1 and 0 represent 10 days left to the event->

    and so on, if 100 days left then 3 divs will be created, well they could be a div a p an h3 or any other text containing tag, the reson I am separating them by each character is because I am styling them to have a border around each number so it could well be 1, 2, 10, 100, 1000 days left or any other amount of days so my question is how can I align this elements to have around 5px in between and at the same time center them inside the container, the container is 180px wide, I can do it if I knew how many divs will be created, but in my situation it could be any amount of divs from 1 to no more than 4 or 5 but they are created dinamically

  2. #2
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    1) use an inline-level container like span or set display:inline;

    2) set text-align:center;

    3) add padding.

    though I think I'd have to see a larger data set and an actual render of what you are trying to accomplish. Honestly just dumping out numbers blindly like that without any sort of semantics sounds REALLY bad -- but not knowing what the data is actually for I'm just guessing wildly while blindfolded.

  3. #3
    SitePoint Addict tlacaelelrl's Avatar
    Join Date
    Apr 2011
    Location
    Mexico city, Mexico
    Posts
    353
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    1) use an inline-level container like span or set display:inline;

    2) set text-align:center;

    3) add padding.

    though I think I'd have to see a larger data set and an actual render of what you are trying to accomplish. Honestly just dumping out numbers blindly like that without any sort of semantics sounds REALLY bad -- but not knowing what the data is actually for I'm just guessing wildly while blindfolded.
    This is the code I got

    Code HTML4Strict:
    <script
    type='text/javascript'
    src='https://ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools.js'>
    </script>
    <style type="text/css">
    div#tlak_count_down_ {
    	height:auto;
    	min-height:126px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        width: 195px;
    	background:green;
    	overflow:visible;
    }
    div#tlak_count_down_ a:link, a:visited {
    	text-decoration: none;
    	}	
    div#tlak_count_down_ a:hover, a:active {
    	text-decoration: none;
    	}
    div#tlak_count_down_ div#tlak_top_message {
    	height:auto;
    	max-height:84px;    
    	margin-left: auto;
        margin-right: auto;
    	text-align:center;
    	color: blue;
        font-size: 25px;
    	background:gray;
    	font-family:"Times New Roman", Times, serif;
    }
    div#tlak_count_down_ div#tlak_count_display_ {  
        border: solid 1px #aaa;  
        text-align: center;  
        letter-spacing: 35px;  
        white-space: nowrap;    
        overflow: hidden;  
    }
    div#tlak_count_down_ div#tlak_count_display_ div#tlak_margin {
    	width:20px;
    	margin:0 3px 0 3px;
    	padding-left:2px;
    	height:35px;
    	text-align:center;
    	color: blue;
        font-size: 30px;
    	border: solid 2px;
    	background:black;
    	float:left;
    	display: inline-block; 
    	vertical-align: middle;
    }
    div#tlak_count_down_ div#tlak_count_display_ div#tlak_margin_ {
    	width:20px;
    	margin:0 3px 0 3px;
    	padding-left:2px;
    	height:35px;
    	text-align:center;
    	float:left;
    	display: inline-block; 
    	vertical-align: middle;
    }
    div#tlak_count_down_ div#tlak_bottom_message {
    clear:both;
    	height:auto;
    	max-height:84px;    
    	margin-left: auto;
        margin-right: auto;
    	text-align:center;
    	color: blue;
        font-size: 20px;
    }
    </style>
    <script
    type='text/javascript'
    src='http://localhost/joomla16/libraries/joomla/form/fields/js/moo.js'>
    </script>
    <script type="text/javascript">
    window.addEvent("domready", function(){
    //important ---> to php
    var minimum_digits = 3;//the amount of digits to display, default 3 if the number of days left to the event = 1 then the counter display will display 001 if set to 4 then 0001 the maximum is 6 digits including the number of days left.
    var where_to = "http://www.republica-tecnologica.com/";
    var a_start = "<a href='" + where_to + "'>";
    var a_end = "</a>";
    if (where_to == ""){
    a_start = "";
    a_end = "";
    }
    var end_date = "10/16/2011";
    var looking_for_ = "day";
    var inicial_message_ = "World Food Day";
    var end_message_ = "Days left";
    var if_day_message_top_ = "Today is the day";
    var if_day_message_middle_ = "Today is the day";
    var if_day_message_bottom_ = "Today is the day";
    //important ---> to php
    var build_counter_ = a_start + "<div id='tlak_top_message'>" + inicial_message_ + "</div><div id='tlak_count_display_' ></div>" + "<div id='tlak_bottom_message'>" + end_message_ + "</div>" + a_end;
    $("tlak_count_down_").set("html", build_counter_);
    var today_ = new Date();
    var the_day = Date.parse(end_date);
    var count_down = today_.diff(the_day, looking_for_);
    count_down = count_down + "";
    var counter_reset = count_down.length;
    var counter_reset_ = 0;
    var construct_count_down_display;
    var current_html;
    while (counter_reset >= 1){
    construct_count_down_display = "<div id='tlak_margin'>" + count_down.charAt(counter_reset_) +"</div>";
    current_html = $("tlak_count_display_").get('html');
    $("tlak_count_display_").set("html", current_html + construct_count_down_display);
    counter_reset --;
    counter_reset_ ++;
    }
    if (count_down == 0){
    $("tlak_top_message").set("html", if_day_message_top_);
    $("tlak_count_display_").set("html", if_day_message_middle_);
    $("tlak_bottom_message").set("html", if_day_message_bottom_);
    }
    });
    </script>
    <div id="tlak_count_down_" >
    </div>

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    I'd use an inline element as Jason suggested but I'd set it to inline-block so that you can style it nicely.

    Something like this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    .test {
        min-height:126px;
        margin:0 auto 10px;
        text-align: center;
        width: 195px;
        background:green;
        line-height:1.2;
    }
    .test b {
        display:inline-block;
        padding:2px 5px;
        border:1px solid #000;
        background:#fcf;
        color:#f00;
        margin:2px;
    }
    </style>
    </head>
    <body>
    <p class="test"><b>0</b></p>
    <p class="test"><b>1</b><b>0</b><b>0</b><b>0</b></p>
    <p class="test"><b>2</b><b>5</b></p>
    </body>
    </html>
    I used a p element as the container because I guessed that you were saying something like "100 days left....". The p could be changed for a div or other more suitable tag if the context is not as I guessed.


Bookmarks

Posting Permissions

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