SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2005
    Location
    France
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    table less design - layout?

    Hi folks,
    New to this but trying a design without tables.

    Question is, how can I get text and pics side by side without having to get creative with even more divs? See sig link for layout example. This is what I'm changing.

    Any ideas - links etc?

    Thanks in advance.

  2. #2
    CTO htmlguy's Avatar
    Join Date
    Feb 2005
    Location
    North Carolina
    Posts
    420
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile You really can't

    Without extra divs or tables you can't really align a picture and text but you could put it side by side. There is no way out of the maze of tables and divs!
    Hope this helps,
    HTMLGuy

  3. #3
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Like htmlguy said you need a div or p, etc that you can give a position

    But you can make very plain pages very effective using style sheets and div's

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    	<title>12345 12345 12345 12345 12345</title>
    	<style type="text/css">
    	<!--
    	.pa,.pab,.pac,.pad,.pb,.pbb,.pbc,.pbd{position:absolute;left:0px;top:0px;}
    	.pb,.pbb,.pbc,.pbd{top:100px;}
    	.pab,.pbb{left:100px;}
    	.pac,.pbc{left:200px;}
    	.pad,.pbd{left:300px;}
    	-->
    	</style>
    	
    </head>
    <body topmargin="0" leftmargin="0">
    
    <div class="pa"><img src="or.jpg" alt="" width="100" height="100" border="0"></div>
    <div class="pab">12345</div>
    <div class="pac"><img src="or.jpg" alt="" width="100" height="100" border="0"></div>
    <div class="pad">12345</div>
    <div class="pb">12345</div>
    <div class="pbb"><img src="or.jpg" alt="" width="100" height="100" border="0"></div>
    <div class="pbc">12345</div>
    <div class="pbd"><img src="or.jpg" alt="" width="100" height="100" border="0"></div>
    </body>
    </html>

    only with inline styling

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    <head>
    	<title>12345 12345 12345 12345 12345</title>
    	
    </head>
    <body leftmargin="0" topmargin="0">
    <div style="position:absolute;left:0px;top:0px;"><img src="or.jpg" alt="" width="100" height="100" border="0"></div>
    <div style="position:absolute;left:100px;top:0px;">12345</div>
    <div style="position:absolute;left:200px;top:0px"><img src="or.jpg" alt="" width="100" height="100" border="0"></div>
    <div style="position:absolute;left:300px;top:0px">12345</div>
    <div style="position:absolute;left:0px;top:100px">12345</div>
    <div style="position:absolute;left:100px;top:100px"><img src="or.jpg" alt="" width="100" height="100" border="0"></div>
    <div style="position:absolute;left:200px;top:100px">12345</div>
    <div style="position:absolute;left:300px;top:100px"><img src="or.jpg" alt="" width="100" height="100" border="0"></div><!--  -->
    </body>
    </html>
    Last edited by all4nerds; Mar 28, 2005 at 12:10.

  4. #4
    SitePoint Zealot Kaystarmaker's Avatar
    Join Date
    Jan 2005
    Location
    The Netherlands
    Posts
    183
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <img style="float:right" src="....... />
    will display the image next to any text in the same div...but only right and left, you'll need a second div to display text to the other side

    still, its less.

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2005
    Location
    Canton, Ohio
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Even better, descendent selectors. Create a rule that floats all images within each parent div over to one side. The text will line up next to it. Apply clear:[float direction] <---[pseudo code] and your image/text combinations will stack on top of each other.

    Now, if you want to prevent text from wrapping underneath pictures, that would require floating the text in the other direction and setting width for your paragraphs or margins to avoid the picture, or any one of a number of methods, depending on how you want to achieve whatever it is you're specifically trying to achieve.

    For discussion sake, is there a valid argument that it actually makes sense to use tables in this scenario? The pictures and the text have a relationship that must be expressed by how the two are related to each other on the page. Does that qualify the content as being tabular data? Hmm...I'm 50/50 on that one.
    Equentity LLC - Creative, compelling and professional
    development for the professional world.

    IWDN Forums - International Web Developers Network, just like
    Sitepoint, only a wee bit smaller...err..."cozier"

  6. #6
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dmcl
    Hi folks,
    New to this but trying a design without tables.

    Question is, how can I get text and pics side by side without having to get creative with even more divs? See sig link for layout example. This is what I'm changing.

    Any ideas - links etc?

    Thanks in advance.
    The divs replace your <td> tags, and you don't need the <table> or the <tr>s.

    Bottom line is; You have to have your text and images in some sort of containing element, such as a div, a <p>, or a <span> so you can apply the style rules to them.

    Your example page would require the image set as the background on the body, or a container div.

    From there it would be basically a 3 colum layout, with a top horizontal navbar in a header, then the left, center, and right colums.

    The most complicated part of the layout is the navbar. You can find a good tutorial on creating a horizontal navbar, as well as a 3 colum layout, here
    http://css.maxdesign.com.au/listutorial/index.htm

  7. #7
    SitePoint Enthusiast
    Join Date
    Jan 2005
    Location
    France
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks very much folks - off to try this stuff now.

  8. #8
    SitePoint Enthusiast
    Join Date
    Jan 2005
    Location
    France
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kaystarmaker
    Code:
    <img style="float:right" src="....... />
    will display the image next to any text in the same div...but only right and left, you'll need a second div to display text to the other side

    still, its less.
    thats the one

    Thanks.


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
  •