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.
Page 1 of 3 123 LastLast
Results 1 to 15 of 38
  1. #1
    New Coder
    Join Date
    Jan 2012
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Moving around text...

    Hello,

    I'm new to CSS and i've made a little website for my band.
    I wonder, how would I put text in the right bottom corner like on the picture?

    The date on the picture is added in photoshop. I just wanna know how to place it there using CSS and regular text.

    Thank you.


  • #2
    Regular Coder
    Join Date
    Dec 2011
    Location
    NW England
    Posts
    194
    Thanks
    8
    Thanked 15 Times in 15 Posts
    <p style="text-align: right;">Jan, 1st. 2012</p>

  • #3
    New Coder
    Join Date
    Jan 2012
    Location
    Scarborough,United Kingdom
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    is the box a fixed height?

  • #4
    New Coder
    Join Date
    Jan 2012
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by melloorr View Post
    <p style="text-align: right;">Jan, 1st. 2012</p>
    Didn't work. The text goes up about 15px from the bottom of the box.

    Quote Originally Posted by thewebguy2011 View Post
    is the box a fixed height?
    Nope.

  • #5
    Regular Coder
    Join Date
    Dec 2011
    Location
    NW England
    Posts
    194
    Thanks
    8
    Thanked 15 Times in 15 Posts
    try float:right instead then

    also, a link would be helpful, or atleast the html code

  • #6
    New Coder
    Join Date
    Jan 2012
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Code:
    <div class="leftbar">
            	<div class="main_post">
                	<table width="100%">
                        	<td width="210px">
                            	<h1>The website is uploaded! Stay tuned for more updates.</h1>
                            </td>
                    </table>
                 </div>
            	<div class="main_post">
                	<table width="100%">
                        	<td width="200px">
                            	<ul class="piclink">
                            		<a href="https://www.recordunion.com/Music/Album/11640" target="_blank"><img height="200px" width="200px" src="album.jpg" /></a>
                                </ul>
                            </td>
                            <td width="300px">
                            Demo released at 1st of January, 2012. Click on the album image for more info.<br /><br />
      						You can also click on one of the four stores below to get instant access to our songs.<br /><br />
                            	<ul class="piclink">
      								<a href="http://open.spotify.com/album/6JtKvPQVI83MT0zZleKWCL" target="_blank"><img id="piclink1" height="40px" width="40px" src="spotify_icon.png" /></a>
      								<a href="http://itunes.apple.com/us/album/scream-out-single/id491714832" target="_blank"><img id="piclink1" height="40px" width="40px" src="itunes_icon.png" /></a>
      								<a href="http://downloads.cdon.com/index.phtml?country=se&page=product&albumid=104925983" target="_blank"><img id="piclink1" height="40px" width="40px" src="cdon_icon.png" /></a>
      								<a href="http://www.amazon.com/gp/product/B006PWT9LS/ref=dm_sp_alb?ie=UTF8&qid=1325521575&sr=1-11" target="_blank"><img id="piclink1" height="40px" width="40px" src="amazon_icon.png" /></a>
      							</ul>
                            <p style="text-align: right;">Jan, 1st, 2012.</p>
                            </td>
                    </table>
                 </div>
            </div>
    Float:right; same thing.

  • #7
    Regular Coder
    Join Date
    Dec 2011
    Location
    NW England
    Posts
    194
    Thanks
    8
    Thanked 15 Times in 15 Posts
    Well, if it goes up 15px, have you tried

    <p style="text-align: right; margin-top: 15px;">Jan, 1st, 2012.</p>

  • #8
    New Coder
    Join Date
    Jan 2012
    Location
    Scarborough,United Kingdom
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    deleted message i was talking rubbish
    Last edited by thewebguy2011; 01-26-2012 at 11:20 PM. Reason: rubbish

  • #9
    New Coder
    Join Date
    Jan 2012
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Fixed by adding:

    Code:
    p {margin: 0px auto;}
    to the CSS Sheet.

  • #10
    New Coder
    Join Date
    Jan 2012
    Location
    Scarborough,United Kingdom
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok this should work.

    You box must have a fixed width for this to work.

    Lets say your box is 200px in width as example.

    put your date like this

    <div style="position:absolute;">Date Here</div>

    and place this as the very last item in the <td>

    Now change the code like this:

    <div style="position:absolution; margin: -15px 0px 0px 0px;">Date Here</a>

    Adjust the -15px until the date is at the correct position at the bottom of the box.

    Now change the code again:

    <div style="position:absolute; margin: -15px 0px 0px 0px; left: 170px;">Date Here</a>

    The left part is the box width minus a few to keep away from right edge of the box.

    You might have to add your fixed width to the TD, like <td style="width:200px;">


    Hope this helps

    I have added this to my blog for other people with the same question, feel free to comment on it: http://thewebsolutionprovider.com/un...ther-with-css/
    Last edited by thewebguy2011; 01-26-2012 at 11:36 PM. Reason: added blog post

  • #11
    Regular Coder
    Join Date
    Dec 2011
    Location
    NW England
    Posts
    194
    Thanks
    8
    Thanked 15 Times in 15 Posts
    Quote Originally Posted by thewebguy2011 View Post
    Ok this should work.

    You box must have a fixed width for this to work.

    Lets say your box is 200px in width as example.

    put your date like this

    <div style="position:absolute;">Date Here</div>

    and place this as the very last item in the <td>

    Now change the code like this:

    <div style="position:absolution; margin: -15px 0px 0px 0px;">Date Here</a>

    Adjust the -15px until the date is at the correct position at the bottom of the box.

    Now change the code again:

    <div style="position:absolute; margin: -15px 0px 0px 0px; left: 170px;">Date Here</a>

    The left part is the box width minus a few to keep away from right edge of the box.

    You might have to add your fixed width to the TD, like <td style="width:200px;">


    Hope this helps

    I have added this to my blog for other people with the same question, feel free to comment on it: http://thewebsolutionprovider.com/un...ther-with-css/
    If the position is absolute, why have margin to change where it goes? why not use:
    <div style="position:absolute; top: 15px; left: 170px;">Date Here</a>

  • #12
    New Coder
    Join Date
    Jan 2012
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Maybe u guys can help me with another problem...

    Is it possible to make overflow scroll if necessary?

    Like if u use a screen on 1024x768 resolution it will add a scrollbar, and if using 1920x1080 it won't?

  • #13
    Regular Coder
    Join Date
    Dec 2011
    Location
    NW England
    Posts
    194
    Thanks
    8
    Thanked 15 Times in 15 Posts
    What so if the screen size is smaller than the width of your website, then it adds a scroll bar? You can do that with a wrapper
    Code:
    #wrapper{
         margin: 0 auto;
         width: 1240px;
    }

  • #14
    New Coder
    Join Date
    Jan 2012
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by melloorr View Post
    What so if the screen size is smaller than the width of your website, then it adds a scroll bar? You can do that with a wrapper
    Code:
    #wrapper{
         margin: 0 auto;
         width: 1240px;
    }
    Okey, didn't get your point there.

    1. Who, today, 2012, uses a screen resolution with a width smaller than 1020px?
    2. You basically mean that I should make a big wrapper over the whole screen with a height of 1080px?

  • #15
    New Coder
    Join Date
    Jan 2012
    Location
    Scarborough,United Kingdom
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by melloorr View Post
    If the position is absolute, why have margin to change where it goes? why not use:
    <div style="position:absolute; top: 15px; left: 170px;">Date Here</a>
    because that would position it in the wrong place. try them both


  •  
    Page 1 of 3 123 LastLast

    Posting Permissions

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