SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member Xizor's Avatar
    Join Date
    Jul 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    image layout question?

    I am not sure how to word this or what the technique is called? But i want to have a image that is in two <divs> that are side by side but the image looks like one whole image.
    For instance in magazines or books on the front cover their one part of the image and on the back cover their is the other part of the continuing image. Also in magazines you will see a picture compete for space between two different section of a page like a picture that spans the header and body or a picture between two column paragraphs.

    How do i go about doing this?
    What is this technique called?
    Is splitting the image between two divs the best way to achieve the look i am going for?

    If you need more information i will try my best to provide it, but i am having a hard time trying to explain a visual style.

    Thanks!

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,519
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    It's not clear how you wish to display this 2-part image on your web site. A sketch of your intent might help. Why two divs? Is it unreasonable to join the two parts in a paint program? (assuming the image is in two parts.)

    An image that spans the header and body simply sounds like a larger than average image. How do you envision it? Do you expect text to print over the lower part of the image?

    An image between two columns is tricky but possible. See http://www.sitepoint.com/forums/show...nter-revisited

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,801
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    In the PRINT world that technique is called: "text-wrap" . TMK, there is really no specific term for doing a text-wrap across columns of text except a "spanning text wrap". In the web world the technique is not entirely feasible and most likely not practical at all.


    take a look at this technique/example:
    Code:
    CSS:
    
    		#page-wrap { width: 60%; margin: 80px auto; position: relative; }
    	
    		#image { position: absolute; top: 0; left: 50%; margin-left: -185px; }
    
    		#l, #r { width: 49%; }
    		#l { float: left; }
    		#r { float: right; }
    		
    		#l:before, #r:before { content: ""; width: 205px; height: 389px; }
    		
    		#l:before { float: right; }
    		#r:before { float: left; }
    
    
    MARKUP:
    	<div id="page-wrap">
    		<img src="http://www.clermontanimal.net/images/lop_rabbit_easter.jpg" id="image">
    		<div id="l">
    			<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
    			<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
    		</div>
    		
    		<div id="r">
    			<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
    			<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
    		</div>
    	</div>

    It works in limited circumstances. See the only way to make content wrap around is with float. But FLOAT makes an element 'float to the top' ( not really the top.. but its hard to explain other wise) of it's container. Also you can only float left or right. So for the example I actually positioned the image in with absolute positioning and created pseudo elements on each columns to open up the space. This already convoluted and I am not done with the explanation yet! Your CSS has to know the specific size of you image content... meaning you would need to change technique for each image. second, while with even MORE wrangling you could make it so that the image is not at at the top.. then the layout would break if the page is fluid or if the user changes text sizes.

    But really that shouldn't be what discourages you form that technique...

    What should discourage you has to do with UI and usability. Web users don't read column like they do in print. they dont scroll don to the bottom of a block of text only to have to scroll back up again continue reading the same story. If you have done this you have made a truly bad website experience for your users. In order to keep the image in context, spanning text wrap assumed the image was wrapped on all sides by columns of the same story. Imagine your text goes over one screen height.. are you willing to make your users have to scrollup and down and up and down and up and down just so you can keep this print design effect?


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
  •