WEB CSS gurus, a question. Moving text around? (example inside)

Discussion in 'OT Technology' started by dmora, Oct 18, 2007.

  1. dmora

    dmora Guest

    http://www.cnn.com/2007/WORLD/asiapcf/10/18/pakistan.bhutto/index.html

    I'm speaking about the part where the text of the story gets broken up with the graphic of the crying lady.
    I've yet been unable to figure out how to do that on my own. :(


    And this appears to be the code. And i dont know why there is so much white space.
    Code:
    div class="cnnStoryPhotoBox"><div id="cnnImgChngr" class="cnnImgChngr">
    					
    						    
    						
    						
    						
    
    
    
    
    
    
    
    
    
    	
    
    
    <div id="cnnImgChngrNested">
    	
    	<img src="http://i.l.cnn.net/cnn/2007/WORLD/asiapcf/10/18/pakistan.bhutto/art.bhutto.afp.gi.jpg" alt="art.bhutto.afp.gi.jpg" height="219" hspace="0" vspace="0" width="292">
    	
    	
    	<div class="cnnStoryPhotoCaptionBox">
    		<div class="cnn3pxTB9pxLRPad">	
    	<p>
    		Former Pakistani PM Benazir Bhutto cries upon landing at Karachi International Airport Thursday.
    	</p>
    		</div>
    	</div>
    	
    
    </div>
    
    <div class="cnnStoryPhotoBoxNavigation">
    	<div id="cnnImgChngrPrvsLbl">
    		<a style="cursor: default;" href="#" onclick="CNN_ArticleChanger.CNN_navChngBack(); return false;" onmouseout="CNN_changeImg('cnnImgChngrPrvsBtn')" onmouseover="CNN_changeImg('cnnImgChngrPrvsBtn',1)"><img src="http://i.l.cnn.net/cnn/.element/img/2.0/content/in_the_news/left_gray_btn.gif" alt="Click to view previous image" title="Click to view previous image" id="cnnImgChngrPrvsBtn" border="0" height="19" width="26"></a>
    	</div>
    	<div id="cnnImgChngrLbl">1 of 3</div>
    	<div id="cnnImgChngrNxtLbl">
    		<a href="#" onclick="CNN_ArticleChanger.CNN_navChngFrwd(); return false;" onmouseout="CNN_changeImg('cnnImgChngrNxtBtn')" onmouseover="CNN_changeImg('cnnImgChngrNxtBtn',1)"><img src="/.element/img/2.0/global/pic_changer/next.gif" alt="Click to view next image" title="Click to view next image" id="cnnImgChngrNxtBtn" border="0" height="19" width="26"></a>
    	</div>
    
    	
    		
    			
    				
    			
    		
    	
    		
    	
    		
    	
    		
    	
    		
    	
    		
    	
    		
    	
    		
    	
    		
    	
    		
    	
    		
    	
    		
    	
    		
    			
    				
    			
    				
    			
    				
    			
    				
    			
    				
    			
    		
    	
    		
    	
    		
    	
    		
    	
    		
    			
    				
    			
    		
    	
    		
    	
    		
    	
    		
    	
    		
    	
    		
    	
    		
    	
    		
    	
    		
    	
    		
    	
    		
    	
    		
    	
    		
    	
    		
    	
    		
    	
    
    </div>
     
  2. eskarinna

    eskarinna New Member

    Joined:
    Apr 18, 2006
    Messages:
    1,114
    Likes Received:
    0
    Location:
    Dallas
  3. dmora

    dmora Guest

    .
     
  4. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,918
    Likes Received:
    10
    Location:
    Los Angeles
    It is just a simple float on the image container.
     
  5. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,918
    Likes Received:
    10
    Location:
    Los Angeles
    Little too advanced for what he needs.

    What the OP wanted can be accomplished like so:

    Code:
    float: left;
    
     
  6. Slid.

    Slid. I'm a guy.

    Joined:
    Oct 25, 2001
    Messages:
    1,928
    Likes Received:
    0
    Location:
    NH
    You can also use the non-CSS align="left" in the img tag.

    Code:
    <img src="rar.gif" align="left">This text is to the right of the image.
    
     
  7. eskarinna

    eskarinna New Member

    Joined:
    Apr 18, 2006
    Messages:
    1,114
    Likes Received:
    0
    Location:
    Dallas
    hmm i was under the impression he wanted to learn how its done. I doubt giving him just float : left would help. He wouldn't know what to float or how float works in relation with other elements like paragraphs other divisions or other images.
     
  8. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,918
    Likes Received:
    10
    Location:
    Los Angeles
    What are you babbling about?

    The tutorial you gave had NOTHING to do with text wrap around an image. The tutorial you listed just gives empty padding around a background placed image.

    It DOESN'T work in relation with other elements. You apply the attribute to the image or image container on it's own. float: left; simply floats the image to the left.
     
  9. eskarinna

    eskarinna New Member

    Joined:
    Apr 18, 2006
    Messages:
    1,114
    Likes Received:
    0
    Location:
    Dallas
    from the tutorial i linked:

    "The image to the left is "floated" to allow text wrap and, even though the image is placed within a paragraph, the text of subsequent paragraphs will also wrap around the float image. But what about complex images? A single image regardless of its actual shape is still using as a two dimensional rectangle when inserted into html code and displayed by a visual user-agent. As useful as it is to "image text wrap" it can be rather boring.
    Before the advent of cascading style sheets, image wrapping text in a detailed, line by line, form following fashion, was near impossible. Table layouts certainly did not allow it and if complex table were created to mimic image wrapping text, true continuous text flow was not possible. There is a surprisingly simple method that will allow highly detailed text wrap around just about any image. Here is an example of a simple, but very effective CSS image text using only three sandbag divs Karen's Molested Apple, and another using five Starting from Zero."

    How is that not related to what he asked ?
     
  10. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,918
    Likes Received:
    10
    Location:
    Los Angeles
    Do you not see the differences between your example and what he's asking? They're two completely different things. If I ever see a website that has made an image in an article a background image like shown in your example that is NOT inclusive to the layout, I will close my browser immediately and never return to that website.

    And to the OP, I just spent 30 seconds completing this task for you. It's easy and why this has turned into a debate is well beyond me.

    Just copy and paste this into your editor and you'll see how it works.
    Code:
    <div id="container">
      <p>
        KARACHI, Pakistan (CNN) -- Vowing to help return democracy to Pakistan, former Prime Minister Benazir Bhutto ended 
        eight years of self-imposed exile and returned Thursday to her native country, where she was greeted by a massive 
        crowd of supporters.
      </p>
      
      <img src="image.jpg" alt="image" class="left" />
      
      <p>
        Shortly after arriving in the southern port city of Karachi, Bhutto entered the bustling city streets in an armored 
        motorcade for protection against the crush of supporters celebrating her arrival.
      </p>
      <p>
        Bhutto said she was "emotionally overwhelmed" by the welcome, but she wasted no time addressing the political 
        situation in Pakistan.
      </p>
      <p>
        Minutes after her arrival at Karachi International Airport, Bhutto called for a return to democracy to repair Pakistan's 
        tarnished image as a haven for terrorists.
      </p>
      <p>
        "The people that you see outside are the real image of Pakistan," she told reporters. "These are the decent, hard-working, 
        middle classes and working classes of Pakistan who want to be in power so that they can build a moderate modern nation 
        where everybody has equality.
      </p>
      <p>
        "This is the real Pakistan, and if we get democracy, this is the face of Pakistan the world will see, not the face of 
        extremists who have thrived under dictatorships."
      </p>
    </div>
    
    Code:
    #container {
      width: 700px;
      border: 1px solid black;
    }
    
    #container img.left {
      float: left;
      padding-right: 10px;
    }
    
    #container p {
      font-size: small;
      font-family: verdana;
    }
    
     
  11. dmora

    dmora Guest

    yea, i'd like to learn how to do it, My example shows where its fucking up, but i dont fully understand how to fix it. :(
     
  12. dmora

    dmora Guest

    This is what i want it to look like, more or less.

    [​IMG]


    Mind you all i have learned from CSS has been opening source windows and trying to duplicate stuff on my projects.
     
  13. eskarinna

    eskarinna New Member

    Joined:
    Apr 18, 2006
    Messages:
    1,114
    Likes Received:
    0
    Location:
    Dallas
    I was just saying you should see the whole article before you start flaming. YES it does explain how to do the background image, but after that it has example with regular image that is not a background. Mind you, is not "my example" its simply a tutorial how to work with float in css with nice explanation and code samples so the OP can actualy comprehand what he is doing and understand the logic behind it.

    the reason why this has turned into a debate is because you have a short fuse, didn't read or even scroll through the whole article and then decided to act like an asshole.
     
  14. eskarinna

    eskarinna New Member

    Joined:
    Apr 18, 2006
    Messages:
    1,114
    Likes Received:
    0
    Location:
    Dallas
    If you want to have a resource for css, from which you can learn or use as refference i suggest you look there http://www.w3.org/Style/CSS/learning
    If you have never learned by book css i suggest you read through the begginers guilde, to fill the gaps you may have from learning through experience. They also have css and markup validators and other languages at the main site. :hsd:
     
  15. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,918
    Likes Received:
    10
    Location:
    Los Angeles
    Sigh.

    I've read this article years ago. This article has nothing to do with what's being discussed. Did you even read it? Yes, it's doing visual text-wrapping. From a technical point of view, no, it's not. It's using block placement over left floated image.

    As I've said for the third time now, this has nothing to do with what the OP was asking. It's really not a hard concept to understand. Trust me, it's not. You can learn it too.

    This is the method the tutorial suggests:
    Code:
        <div id="sml-01"></div>
    
        <div id="smr-00"></div>
        <div id="sml-02"></div>
        <div id="smr-01"></div>
        <div id="sml-03"></div>
        <div id="smr-02"></div>
        <div id="sml-04"></div>
        <div id="smr-03"></div>
        <div id="smr-04"></div>
        <div id="sml-05"></div>
    
        <div id="smr-05"></div>
        <div id="smr-06"></div>
        <div id="smr-07"></div>
        <div id="sml-06"></div>
        <div id="sml-07"></div>
        <div id="sml-08"></div>
        <div id="sml-09"></div>
        <div id="smr-08"></div>
        <div id="sml-10"></div>
    
        <div id="smr-09"></div>
        <div id="sml-11"></div>
        <div id="smr-10"></div>
        <div id="sml-12"></div>
        <div id="smr-11"></div>
        <div id="smr-12"></div>
    
    Those are individual block containers that's used to manually push text over to the right, thus giving the effect that it's wrapping text. This is great for pushing text to the right of left justified images and background images that are inclusive to the layout and design.

    These are two completely different methods, dear. These methods have no correlation with eachother.

    After further observations of what the OP wanted, I've even come to the conclusion that the tutorial is even more irrelevant to what he wants.

    If you consider this flaming, then I'm sorry, maybe OT isn't the forum for you. :dunno: I don't recall flaming you.
     
  16. VD

    VD Active Member

    Joined:
    Aug 18, 2004
    Messages:
    71,510
    Likes Received:
    0
    Location:
    TWIN CITIES
    Why aren't you just able to do:



    <img src="blah.jpg" align="left" />

    and set up any padding/spacing through some margins/padding? :confused:
     
    Last edited: Oct 19, 2007
  17. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,918
    Likes Received:
    10
    Location:
    Los Angeles
    The "align" attribute is depreciated. Hence why we use float.
     
  18. dmora

    dmora Guest

    and the text wont wrap around the <div>content that im trying to make.
     
  19. dmora

    dmora Guest

    AH HA!!! I fixed it.... sort of.

    I forgot a ";" after float. Surprised you guys missed it. :hs: So now this is what its doing..

    [​IMG]

    Here's the code.

    Code:
    .ElementBox {
    	float:right;
    	text-align:left;
    	height:110px;
    	width:100px;
    	border: 1px #336699 solid;
    	}
    #box {
    	border: 1px #336699 solid;
    	padding: 8px;
    	margin: 5px;
    	list-style-image: none;
    	list-style-type: none;
    }
    Code:
    <div class="ElementBox"><p>text</p></div>
    		<h3>Surveillance</h3>
    		
            <p id="box"><a href="tuberculosis.htm">Tuberculosis</a><a href="blank.htm"></a> | <a href="blank.htm">Surveillance</a> | <a href="blank.htm">link</a></p>
            <p> The Surveillance Program reports the following communicable diseases to the Department of State Health Services as required under the State of Texas Health and Safety Code.</p>
     
  20. Ebtek

    Ebtek Afraid of 138

    Joined:
    Mar 19, 2000
    Messages:
    152,817
    Likes Received:
    1,031
    i need to learn css. im still using tables :o
     
  21. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,918
    Likes Received:
    10
    Location:
    Los Angeles
    Yeah, it can be fixed adding this to your #box element:
    Code:
    margin-right: 110px;
    
    If that's the code you're going to use, you should probably clean your code up a bit. Also, things like putting content in it's own container and using lists for your navigation menu.

    I did a rewrite so you can see what I'm talking about.

    Code:
    <div id="elementBox">
      <p>text</p>
    </div>
    
    <div id="contentArea">
      <h3>Surveillance</h3>
    
      <ul id="navigation">
        <li><a href="tuberculosis.htm">Tuberculosis</a></li>
        <li><a href="blank.htm"></a></li>
        <li><a href="blank.htm">Surveillance</a></li>
        <li><a href="blank.htm">link</a></li>
      </ul>
      
      <p>The Surveillance Program reports the following communicable diseases to the Department of State Health Services as required under the State of Texas Health and Safety Code.</p>
        
    </div>
    
    Code:
    #elementBox {
      float:right;
      height:110px;
      width:100px;
      border: 1px #336699 solid;
    }
    #contentArea {
      width: 100%;
    }
    #contentArea #navigation {
      list-style-type: none;
      margin: 0;
      padding: 10px;
      margin-right: 110px;
      border: 1px #336699 solid;
    }
    #contentArea #navigation li {
      display: inline;
    }
    
    
     
  22. dmora

    dmora Guest

    Yea i want to try to clean it all up, like i said everything i learn is from looking at source windows of sites i like. :hsd:

    The 'inline' tag would be good for the horizontal list right?
     
  23. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,918
    Likes Received:
    10
    Location:
    Los Angeles
    The inline attribute displays elements inline with each other, so yes, that means horizontally. It'll work with any other elements as well, it's just commonly used in lists for horizontal navigational purposes. Pretty useful attribute to accomplishing things like that.

    Also useful if you want to place two elements with the same class next to eachother.
     
  24. drpepper

    drpepper Active Member

    Joined:
    Nov 13, 2006
    Messages:
    38,076
    Likes Received:
    2
    Location:
    San Antonio
    is it really? ive always used <p align=xxx> with some of my projects.
    do we have to encase even single images in divs now just for alignment?
     
  25. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,918
    Likes Received:
    10
    Location:
    Los Angeles
    Yeah, it's depreciated.

    And nope, you can apply the tags directly to the images. You don't need a div to do so.

    Code:
    <img src="blah.jpg" alt="blah" style="float: left;" />
    


    Code:
    img.left {
      float: left;
    }
    
    <img src="blah.jpg" alt="blah" class="left" />
    
     

Share This Page