SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    Team SitePoint AlexW's Avatar
    Join Date
    Apr 2000
    Location
    Melbourne
    Posts
    832
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Got a CSS layout problem.

    I have three elements being pulled from a database. A pic, the body text, and a quote. That is the order they will be presented in the code, as in

    - pic
    - text
    - quote

    Now, I want the text to wrap around the quote like
    this, but I don't want to have to break the text into 2 parts to do it (i.e. Part before the quote, part after the quote).

    I can use CSS position the quote left and up but the text runs under rather than wrapping. Any idea?
    Alex Walker
    SitePoint Developer
    SitePoint - Learnable

  2. #2
    will code HTML for food Michel V's Avatar
    Join Date
    Sep 2000
    Location
    Corsica
    Posts
    552
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm afraid you can't do that with CSS only.
    The method here would be to put the quote in a table, then apply align='left' to the table.
    [blogger: zengun] [blogware contributor: wordpress]

  3. #3
    Team SitePoint AlexW's Avatar
    Join Date
    Apr 2000
    Location
    Melbourne
    Posts
    832
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    But that will start the quote to the left but below the last line on of the text won't it? It will finish rendering the text, then start the table (i think?)
    Alex Walker
    SitePoint Developer
    SitePoint - Learnable

  4. #4
    SitePoint Guru sowen's Avatar
    Join Date
    Feb 2001
    Location
    Stockport, UK
    Posts
    729
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can do it with css sort of, somthing like this;

    in you css file
    Code:
    .quote {  
    		font-style: italic; 
    		font-weight: bold; 
    		text-align: left; 
    		float: left; 
    		clear: none; 
    		width: 20%
    	}
    in your html


    Code:
    <p> Some text for your para <span class="quote">Some text for your quote</span> the rest of your para text</p>
    It works ok, but you obviously have to drop the quote into the required paragraph.

  5. #5
    Team SitePoint AlexW's Avatar
    Join Date
    Apr 2000
    Location
    Melbourne
    Posts
    832
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Yeah, I'm trying to not split the text either side of the quote (in the source).

    At the moment the call to the DB that renders each element (pic, text, quote) is a single line command for each. I'm trying to get away without writing extra code to segment the text block 3/4 of the way into it, and 'splicing' the quote into it.

    Rather, kind of render each element as discrete units, then use CSS to force the quote up into it from below.

    Relative positioning puts the quote where I want it, but the textblock runs under it, which isn't quite what I was looking for (Also leaves a gap where the quote should have been)

    I'm getting the idea it's *probably* not possible.

    Oh well, worth a try!
    Last edited by AlexW; Apr 19, 2001 at 04:42.
    Alex Walker
    SitePoint Developer
    SitePoint - Learnable

  6. #6
    SitePoint Enthusiast Damage's Avatar
    Join Date
    Apr 2001
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hmm, if I'm reading this right...

    So you want the quote element of that page to be in the lower left corner and text wrapped around it right? Why not drop it into a table and have that table aligned to the bottom left? Text should wrap around it.


    Or am I just totally wrong here?


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
  •