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 14 of 14
  1. #1
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Position/align text and photo with CSS

    Hello all-

    I am trying to create a very simple page (template kind of thing). The page consists of a photo and underneath it 2 sets of text. One aligned with the left edge of the photo, and the other (this one is multiple lines, but first line should be on the same line as the left set of text) aligned with the right edge of the photo.

    I am trying to do this without using numbers on the horizontal axis, as I will be using the page language on a variety of different photo sizes.

    I will add the code that I'm working with right now in the following post- don't expect beautiful code obviously and I've been trying a lil guessing/trial and lots of error, so this may not be what I started with.

    Thanks!
    Last edited by mntamimi; 02-05-2005 at 05:17 PM.

  • #2
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    HTML Code I have thus far...

    Code:
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="style.css" rel="stylesheet" type="text/css">
    </head>
    
    <body>
    <div><a href="/Gallery/index.htm" title="Joshua's Gallery">Gallery</a> &gt;&gt; <a href="/Gallery/interior exterior/index.htm">Interior/Exterior</a> &gt;&gt; {File Name}
    </div>
    <div class="main"><div class="pic"><img src="destruction-myth.jpg"></div>
    <div class="info"><span class="title">Creation Myth</span> 
    <div class="info-rt">
    <span class="date">2001</span>
    <span class="media">paint, chalk, pencil on canvas</span>
    </div>
    </div>
    </div>
    </body>
    </html>
    Here's the CSS:

    Code:
    body {
    	margin-right: auto;
    }
    
    .main {
    	margin-right: auto;
    	position: relative;
    }
    .title {
    	float: left;	
    }	
    .date {
    }
    .media {
    }
    .info {
    }
    .info-rt {
    	position: absolute;
    	margin-left: auto;
    }

  • #3
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts

    Question

    You're not using any tables for your layout, I assume?

    Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #4
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Correct. No tables. I'm kind of new to all this (obviously) and was under the impression that tables were mildly discouraged. Plus I'd like to do all the positioning in CSS if possible.

  • #5
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    Yeah. well I'm not the best person for positioning, but I'll take a look

    Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #6
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    Could you post the dimesnsions of your image?

    Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #7
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well there will be different image sizes, but this one is 610x524 pixels.

    Thanks.

  • #8
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    My mosue batteries died, and Ive got to go, but be back on this case ASAP

    Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #9
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Whiz!

    If you get this figured out, I'll even root for your birds tomorrow

  • #10
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If it helps, this is my thinking (though clearly I'm wrong somwhere, or else it would be working I think):

    If there is a div tag containing both the picture and text, shouldn't that box be just big(wide) enough to hold the largest element, in this case the picture.

    Shouldn't I then be able to align with the right side of that main div box that holds everything?

    That was my thinking (still is) but I must not be understanding correctly.

  • #11
    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
    sorry to barge in on ya whiz but is this what u want?
    Code:
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    body {
    	margin-right: auto;
    }
    
    .main {
    	margin-right: auto;
    }
    .title {
    	float: left;	
    }	
    .date {
    }
    .media {
    }
    .info {
    width:610px;
    }
    .info-rt {
    float:right;
    }
    </style>
    </head>
    
    <body>
    <div><a href="/Gallery/index.htm" title="Joshua's Gallery">Gallery</a> &gt;&gt; <a href="/Gallery/interior exterior/index.htm">Interior/Exterior</a> &gt;&gt; {File Name}
    </div>
    <div class="main"><div class="pic"><img src="destruction-myth.jpg" width="610" height="524"></div>
    <div class="info"><span class="title">Creation Myth</span> 
    <div class="info-rt">
    <span class="date">2001</span>
    <span class="media">paint, chalk, pencil on canvas</span>
    </div>
    </div>
    </div>
    </body>
    </html>

  • #12
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey Thanks. I want the two (year & media) on the right to be on seperate lines, but I imagine I could figure that out from your example.

    It looks like I want, but I was wondering there is a way to do it without using this piece
    Code:
    .info {
    width:610px;
    }
    I'm not trying to be difficult, but I'd like to use a single base stylesheet for a wide variety of image sizes. Is that not possible?

    If it isn't possible, I guess I could use the style sheet as you have it (but link to it) and then in each page just have that .info width style set for the image size in that particular page. If I can't do it the first/above way, will this work?

    Hey guys, thanks for your help!
    Last edited by mntamimi; 02-06-2005 at 02:52 AM. Reason: typo

  • #13
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    to get the year & media on different lines, try putting <br /> between the two spans (date & media) it worked on my computer.

    Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #14
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    I was trying to see if this would work:

    name image as img
    <image src="img_src" name="img" />

    Javascript will make img.width equal the width of your image.
    then you could somehow use js to write img.width as div tag width

    <div class="info" width="img.width"></div>
    ---------------or-----------------------
    .info
    {
    width:img.width;
    }

    problems with this:

    don't know if you can even do this with CSS, also wont work, because "img" has to be defined BEFORE you can call it with JS.

    <div class="info" width="img.width"></div>
    Divs don't have the width attribute inside the tag.

    I hope this will give someone else a spark of brilliance as to how this can be done

    Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION


  •  

    Posting Permissions

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