Jump to content

<p> css help, align..


UnknownPlayer

Recommended Posts

I have this css codes:

.align-left  { text-align: left; }
.align-right { text-align: right; }

/* display and additional classes  */
.clear {    clear: both; }
.blue   { color: #3791D7; }
.info { 
    margin: 20px 10px 5px 10px; 
    padding: 3px 0;
    border-top: 1px dashed #EFF0F1;    
}

 

Now i use this code like this:

<p class="info align-right clear"><a href="" class="date" ></a>'.$date.'</p>

And it looks like this:

fgdfe.png

Now, i wonna put Text in left and date on right, how can i do that, i tryed with:

<p class="info align-left clear">Text</p> <p class="info align-right clear"><a href="" class="date" ></a>'.$date.'</p>

But it doesn't work.

Pls help.

Link to comment
Share on other sites

I am not quite sure why you are using p tags but with divs this is very easily achieved. Instead of using aligns you would use floats. Here is a basic example:

 

 

<div style="width:100px;">     <div style="float:left; width:50px; text-align:left;">Text Here</div>     <div style="float:right; width:50px; text-align:right;">Date Here</div></div>

 

 

I set widths on the divs so that the content would not overflow and push it down to the next line. I also had to use the text align property because of setting the width to 50px or the text on the right would be aligned to the left. You could extract the styles and put them in into styles if you wanted to. Hopefully that will help you get your desired result.

Link to comment
Share on other sites

It works on comments but not on news :S

See pic:

20100917141640.png

Code for News is(where div dont work, part 1):

 

                    <div class="info clear">                        <div style="float:right; text-align:right;">                            <a href="kategorije.php?id='.$kat_id.'" class="readmore" >Kategorija: '.$kategorija.'</a> |                            <a href="http://dota.rs/forum/profile/'.$autor.'/" class="comments" >Autor: '.$autor.'</a> |                            <a href="vesti.php?id='.$vid.'#Komentari" class="comments" >Komentari('.$br_kom.')</a> |                            <a href="" class="date" ></a>'.$datum.'                        </div>                    </div>

 

And part 2, where div works:

 

                          <div class="info clear">                               <div style="float:left; text-align:left;">Text Here</div>                               <div style="float:right; text-align:right;"><a href="" class="date" ></a>'.$datum.'</div>                          </div>

 

 

Anyway, class info is:

 

.info {     margin: 20px 10px 5px 10px;     padding: 3px 0;    border-top: 1px dashed #EFF0F1;    }

 

 

What is wrong there? :S

Why on news it shows in front of text ?

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.