7 Replies - 453 Views - Last Post: 12 April 2011 - 03:57 AM

#1 Race_me  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 15
  • Joined: 04-April 11

Positioning text with picture

Posted 10 April 2011 - 05:24 AM

I have a picture to the right and I have some text on the left of the page. I want the text centered vertically with the picture, right now the text appears at the very top of the page. How would I do this?

Thanks!
Is This A Good Question/Topic? 0
  • +

Replies To: Positioning text with picture

#2 Slice  Icon User is offline

  • sudo pacman -S moneyz


Reputation: 239
  • View blog
  • Posts: 693
  • Joined: 24-November 08

Re: Positioning text with picture

Posted 10 April 2011 - 05:50 AM

Well if you set it in a table, the <td> containing the text can be set to "valign="center""

example:

<table>
<tr>
<td valign="center">
<p>this is my text</p>
</td>
<td>
<img src="link/to/image.jpg">
</td>
</tr>
</table>



Thats one way of doing it. :)
Was This Post Helpful? 1
  • +
  • -

#3 Race_me  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 15
  • Joined: 04-April 11

Re: Positioning text with picture

Posted 10 April 2011 - 02:53 PM

Thank you :)
Was This Post Helpful? 0
  • +
  • -

#4 Lemur  Icon User is offline

  • Pragmatism over Dogma
  • member icon



Reputation: 1335
  • View blog
  • Posts: 3,398
  • Joined: 28-November 09

Re: Positioning text with picture

Posted 10 April 2011 - 03:17 PM

I would avoid using tables, working or not it's generally frowned upon in the professional world.

Look into css floats for this one, contain the text in a <p> tag with a class or img_text or something else relevant and add a float:right; to it (or left) and make sure to add a clear float after it, normally well places in a <br /> tag.
Was This Post Helpful? 0
  • +
  • -

#5 TheBlind  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 4
  • Joined: 11-April 11

Re: Positioning text with picture

Posted 11 April 2011 - 01:12 PM

Hi, Race_me! If you're still looking for an answer on this topic, could you tell us inside which kind of code your image and text are? They are inside DIVs? You are using tables? I ask this so we can suggest codes that match your website's design style.

See ya!
Was This Post Helpful? 0
  • +
  • -

#6 Race_me  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 15
  • Joined: 04-April 11

Re: Positioning text with picture

Posted 11 April 2011 - 02:40 PM

both of the suggestions work. I am pretty much just trying to play around with a few things and trying to figure out how all this works for now. I dont really have a "style" yet :) I am curious as to why using the table example is not good practice professionally though.
Was This Post Helpful? 0
  • +
  • -

#7 gregwhitworth  Icon User is offline

  • Tired.
  • member icon

Reputation: 216
  • View blog
  • Posts: 1,602
  • Joined: 20-January 09

Re: Positioning text with picture

Posted 11 April 2011 - 06:27 PM

For layout it is not good practice. Back in the 90's tables were used to create layouts because of the lack of CSS. But now that we have that you have greater control over your layout by using CSS. For instance if we take a tabled layout:


<table>
<tr>
<td>
<img src="...">
</td>
<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nunc nulla, pretium vel suscipit vel, blandit sit amet ipsum. Pellentesque at mi est. Nam id interdum orci. Suspendisse potenti. Donec lobortis nisl dui, vel luctus quam. Praesent metus ipsum, lobortis nec consectetur vitae, lobortis eu augue. Nulla et ante et risus euismod sodales in vel leo. Suspendisse dolor lorem, tempus nec ornare sit amet, adipiscing vel lorem. Donec condimentum, lectus in dignissim semper, turpis tortor vestibulum urna, in ultricies odio erat sit amet est. Nam feugiat hendrerit nisl, sit amet laoreet arcu elementum eget.

Mauris eget nibh sed sem vehicula lobortis sit amet eu nisl. Cras egestas, dui at ultrices pharetra, purus lacus elementum ante, id fringilla ante tortor commodo magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam bibendum consequat turpis, sed eleifend leo ornare vel. Nunc a nibh eu ipsum pellentesque auctor eget ac magna. Phasellus a ligula eget nunc mattis aliquam. Nullam interdum velit eu elit fringilla eget elementum arcu varius. Ut nisl dolor, suscipit facilisis tristique sed, lacinia ac turpis. Fusce venenatis commodo venenatis. Sed interdum, libero sit amet viverra rhoncus, metus ipsum semper nisl, id pharetra eros nisl non lectus. Suspendisse eu consectetur orci. Donec eu faucibus nibh.

Curabitur rutrum semper congue. Donec posuere lorem id elit adipiscing gravida. Mauris ac nunc id mauris consectetur lacinia. In hac habitasse platea dictumst. Fusce eros nisi, sollicitudin ut euismod non, elementum viverra dui. Aenean eu tincidunt metus. Fusce molestie faucibus nisi, id tempor dolor facilisis nec. Phasellus suscipit pretium massa, at laoreet est fringilla ac. Fusce eleifend pharetra arcu cursus sodales. Vivamus eu augue at nunc sagittis pretium sed dictum nisl. Aliquam in arcu sed tellus dignissim porttitor sed eget augue. Aliquam id odio tortor, eget gravida justo. Sed in dui mauris. Sed lobortis molestie turpis id tempus. Curabitur urna felis, dignissim ut gravida ac, fermentum eu justo. Integer non rutrum lorem. Ut luctus nulla eu risus cursus porta.

Nunc interdum lectus congue nisi pretium et iaculis nibh porta. Proin dui mauris, vulputate eu dictum id, dictum vel purus. Maecenas posuere bibendum urna ut blandit. Aliquam ut diam dui. Proin accumsan accumsan mauris, semper faucibus libero tempus in. Phasellus fermentum ultricies rhoncus. Morbi eros est, venenatis sed porta a, luctus vitae orci. Vivamus nec nisi vitae erat vehicula consectetur. Mauris ac diam vitae felis condimentum feugiat nec vitae arcu. Proin vel eleifend enim. Nullam nec eros eget purus sollicitudin semper a non tortor. Curabitur vitae orci sit amet nisi pellentesque rutrum eu quis dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed lectus tellus, bibendum at convallis sit amet, fringilla in urna. Etiam vitae dolor eget magna aliquet posuere nec eget nibh. Aenean nec ante nec urna pharetra pellentesque eu in velit. Nunc pretium molestie ornare. Cras urna arcu, tempus nec congue facilisis, egestas sed libero. Aliquam sit amet nulla nulla, vel aliquet lacus.

Praesent placerat, nisl aliquam elementum ultrices, erat nisl lacinia risus, bibendum volutpat metus quam id massa. Donec condimentum faucibus leo, eget eleifend tellus tempor non. Pellentesque aliquam, lectus eget mollis viverra, velit mauris imperdiet nunc, eu vehicula sem leo a lorem. Phasellus at dignissim est. Sed pellentesque blandit tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius lectus at metus mollis sagittis. Integer eu mi eget erat adipiscing molestie. Ut placerat ante ante, sit amet consectetur eros. Morbi vitae justo eu dolor tempor auctor a non metus. Phasellus in egestas mauris. Proin sit amet porttitor turpis. Cras nibh odio, hendrerit eu sollicitudin eu, tristique id neque. Aliquam tempus tempus dolor. Suspendisse semper enim non mauris dapibus semper. Cras malesuada sodales enim et viverra. Vestibulum eu nisi eros. 
</td>
</tr>
</table>



This accomplishes control over the layout putting the image on the left, but the second we want to move the image to the right we have to actually cut the td and move it. Now with this example that seems simple, but with a real situation it can be a mess. Now look at it with CSS:

<img src="..">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nunc nulla, pretium vel suscipit vel, blandit sit amet ipsum. Pellentesque at mi est. Nam id interdum orci. Suspendisse potenti. Donec lobortis nisl dui, vel luctus quam. Praesent metus ipsum, lobortis nec consectetur vitae, lobortis eu augue. Nulla et ante et risus euismod sodales in vel leo. Suspendisse dolor lorem, tempus nec ornare sit amet, adipiscing vel lorem. Donec condimentum, lectus in dignissim semper, turpis tortor vestibulum urna, in ultricies odio erat sit amet est. Nam feugiat hendrerit nisl, sit amet laoreet arcu elementum eget.

Mauris eget nibh sed sem vehicula lobortis sit amet eu nisl. Cras egestas, dui at ultrices pharetra, purus lacus elementum ante, id fringilla ante tortor commodo magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam bibendum consequat turpis, sed eleifend leo ornare vel. Nunc a nibh eu ipsum pellentesque auctor eget ac magna. Phasellus a ligula eget nunc mattis aliquam. Nullam interdum velit eu elit fringilla eget elementum arcu varius. Ut nisl dolor, suscipit facilisis tristique sed, lacinia ac turpis. Fusce venenatis commodo venenatis. Sed interdum, libero sit amet viverra rhoncus, metus ipsum semper nisl, id pharetra eros nisl non lectus. Suspendisse eu consectetur orci. Donec eu faucibus nibh.

Curabitur rutrum semper congue. Donec posuere lorem id elit adipiscing gravida. Mauris ac nunc id mauris consectetur lacinia. In hac habitasse platea dictumst. Fusce eros nisi, sollicitudin ut euismod non, elementum viverra dui. Aenean eu tincidunt metus. Fusce molestie faucibus nisi, id tempor dolor facilisis nec. Phasellus suscipit pretium massa, at laoreet est fringilla ac. Fusce eleifend pharetra arcu cursus sodales. Vivamus eu augue at nunc sagittis pretium sed dictum nisl. Aliquam in arcu sed tellus dignissim porttitor sed eget augue. Aliquam id odio tortor, eget gravida justo. Sed in dui mauris. Sed lobortis molestie turpis id tempus. Curabitur urna felis, dignissim ut gravida ac, fermentum eu justo. Integer non rutrum lorem. Ut luctus nulla eu risus cursus porta.

Nunc interdum lectus congue nisi pretium et iaculis nibh porta. Proin dui mauris, vulputate eu dictum id, dictum vel purus. Maecenas posuere bibendum urna ut blandit. Aliquam ut diam dui. Proin accumsan accumsan mauris, semper faucibus libero tempus in. Phasellus fermentum ultricies rhoncus. Morbi eros est, venenatis sed porta a, luctus vitae orci. Vivamus nec nisi vitae erat vehicula consectetur. Mauris ac diam vitae felis condimentum feugiat nec vitae arcu. Proin vel eleifend enim. Nullam nec eros eget purus sollicitudin semper a non tortor. Curabitur vitae orci sit amet nisi pellentesque rutrum eu quis dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed lectus tellus, bibendum at convallis sit amet, fringilla in urna. Etiam vitae dolor eget magna aliquet posuere nec eget nibh. Aenean nec ante nec urna pharetra pellentesque eu in velit. Nunc pretium molestie ornare. Cras urna arcu, tempus nec congue facilisis, egestas sed libero. Aliquam sit amet nulla nulla, vel aliquet lacus.

Praesent placerat, nisl aliquam elementum ultrices, erat nisl lacinia risus, bibendum volutpat metus quam id massa. Donec condimentum faucibus leo, eget eleifend tellus tempor non. Pellentesque aliquam, lectus eget mollis viverra, velit mauris imperdiet nunc, eu vehicula sem leo a lorem. Phasellus at dignissim est. Sed pellentesque blandit tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius lectus at metus mollis sagittis. Integer eu mi eget erat adipiscing molestie. Ut placerat ante ante, sit amet consectetur eros. Morbi vitae justo eu dolor tempor auctor a non metus. Phasellus in egestas mauris. Proin sit amet porttitor turpis. Cras nibh odio, hendrerit eu sollicitudin eu, tristique id neque. Aliquam tempus tempus dolor. Suspendisse semper enim non mauris dapibus semper. Cras malesuada sodales enim et viverra. Vestibulum eu nisi eros. 



And our CSS:
img {
float: left;
}



So then if we want to switch it to the right, we don't have to move a thing we just change left to right.

And that is the tip of the iceberg, there are SEO and loading reasons that you can easily google to find out why using CSS over tables for layout is the way to go.
Was This Post Helpful? 1
  • +
  • -

#8 TheBlind  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 4
  • Joined: 11-April 11

Re: Positioning text with picture

Posted 12 April 2011 - 03:57 AM

About the layout, you can google for "table" vs "tableless" layout and learn a lot of tips. What I can tell you from my personal experience is that you should use tables only to display tabular data, as a way to organize information. With tableless (CSS/HTML) design you can speed up your website update and reorganize things just by changing CSS properties.

About CSS, you should try the combination of floats and clear. It works for me, let's see if the experts think that this example is a good practice:

HTML:
<html>
  <head>
  </head>
  <body>
    <div class="container">
      <div class="head">Put your LOGO here</div>
      <div class="col01">Put a MENU here</div>
      <div class="col02">Put CONTENT here</div>
    </div>
  </body>
</html>



And the CSS:
div.container {
  width: 1000px;
}

div.head {
  width: 1000px;
  height: 200px;
  background-color: #ff8888;
  float: left;
}

div.col01 {
  width: 200px;
  height: 300px;
  background-color: #88ff88;
  float: left;
  clear: both;
}

div.col02 {
  width: 800px;
  height: 300px;
  background-color: #8888ff;
  float: left;
}



So, what you do with float is arranging the DIVs like boxes to the left. When you include "clear:both;", it's like jumping down a "line". If you do not use it, the DIVs will keep grouping one after another to the left side of the previous DIV (like I did with the "col02" DIV).

The container DIV is there so you can assign properties later to it like centering your website, etc.

Well, as usual this is ONE WAY to do it... and once you understand and get confident with it, you can go further with tableless design.
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1