Webmaster Forum

Go Back   Webmaster Forum > Web Development > Coding Forum

Coding Forum Problems with your code? Discuss coding issues, including JavaScript, PHP & MySQL, HTML & CSS, Flash & ActionScript, and more.


Closed Thread
 
Thread Tools Display Modes
Share |
  #1  
Old 07-11-2016, 12:57 AM
dennis.M dennis.M is offline
Junior Member
 
Join Date: 11-09-15
Posts: 30
iTrader: 0 / 0%
Aligning images and texts

Hi guys,

I am having trouble making my text and images in line. From the screenshot here you can see what I mean:



As you can see, the section with Non-Verbal Communication is two lines of writing and the others are 1, which is why the picture is lower than the other two. I am trying to get all the images the same alignment and they should be low like the third one. I played around with it but can't get it right, this is the link http://skillsplaza.com if anyone can please help that would be great.

Thank you!
 

Advertisement

Advertisement

  #2  
Old 07-11-2016, 11:56 AM
snakeair snakeair is offline
Super Moderator - Rest in Peace 2018
 
Join Date: 12-31-07
Location: Medford, NJ
Posts: 54,771
iTrader: 3 / 100%
Looks like the title is just to long and that's why it's not aligning right. Short the title of that one image and see if it aligns right.

Your other choice is to change the font size to be smaller for the text.
 
  #3  
Old 07-11-2016, 12:08 PM
dennis.M dennis.M is offline
Junior Member
 
Join Date: 11-09-15
Posts: 30
iTrader: 0 / 0%
Thanks for the response. Yes, if I shorten the title it will fix and if I make the text smaller it will also fix. But I need the pictures to be aligned without shortening the title or making the text smaller if that is possible somehow.
 
  #4  
Old 07-11-2016, 01:10 PM
ScriptMan's Avatar
ScriptMan ScriptMan is offline
Super Moderator
 
Join Date: 02-10-07
Location: Central Kentucky
Posts: 14,014
iTrader: 4 / 100%
Well you won't find it on the approved list but a simple <br /> at the end of text lines 1 & 2 may solve the problem for you.

The approved option is probably going to require separate divs for the text and images.
 
  #5  
Old 08-07-2016, 03:54 AM
daylight18 daylight18 is offline
Junior Member
 
Join Date: 08-07-16
Posts: 4
iTrader: 0 / 0%
Talking vertical-align values

Code:
vertical-align values <?xml version="1.0" ?> <head> <title>Vertical Align Values</title> <style rel="stylesheet" type="text/css"> body { color: green; background-color: red; font-family: arial, sans-serif; font-size: 16px; } td { border-style: solid; border-width: 1px; border-color: blue; } td.none { border-style: none; } .plain { color: orange; } .baseline { vertical-align: baseline; } .sub { vertical-align: sub; } .super { vertical-align: super; } .top { vertical-align: top; } .texttop { vertical-align: text-top; } .middle { vertical-align: middle; } .bottom { vertical-align: bottom; } .textbottom { vertical-align: text-bottom; } .oneHundredPercent { vertical-align: 100%; } .fiftyPercent { vertical-align: 50%; } </style> </head> <body> <h1>vertical-align</h1> <table> <tr><td> <span class="plain">Programming Code Examples</span> <span class="baseline">baseline</span><img class="baseline" src="/images/Kissing-in-the-rain-with-umbrella.jpg" width="50" height="50" alt="block" /> </td></tr> <tr><td class="none"> </td></tr> <tr><td> <span class="plain">Programming Code Examples</span> <span class="sub">sub</span><img class="sub" src="/images/Kissing-in-the-rain-with-umbrella.jpg" width="50" height="50" alt="block" /> </td></tr> <tr><td class="none"> </td></tr> <tr><td> <span class="plain">Programming Code Examples</span> <span class="super">super</span><img class="super" src="/images/Kissing-in-the-rain-with-umbrella.jpg" width="50" height="50" alt="block" /> </td></tr> <tr><td class="none"> </td></tr> <tr><td> <span class="plain">Programming Code Examples</span> <span class="top">top</span><img class="top" src="images/Kissing-in-the-rain-with-umbrella.jpg" width="50" height="50" alt="block" /> </td></tr> <tr><td class="none"> </td></tr> <tr><td> <span class="plain">Programming Code Examples</span> <span class="texttop">texttop</span><img class="texttop" src="images/Kissing-in-the-rain-with-umbrella.jpg" width="50" height="50" alt="block" /> </td></tr> <tr><td class="none"> </td></tr> <tr><td> <span class="plain">Programming Code Examples</span> <span class="middle">middle</span><img class="middle" src="with-umbrella.jpg" width="50" height="50" alt="block" /> </td></tr> <tr><td class="none"> </td></tr> <tr><td> <span class="plain">Programming Code Examples</span> <span class="bottom">bottom</span><img class="bottom" src="/images/Kissing-in-the-rain-with-umbrella.jpg" width="50" height="50" alt="block" /> </td></tr> <tr><td class="none"> </td></tr> <tr><td> <span class="plain">Programming Code Examples</span> <span class="textbottom">textbottom</span><img class="textbottom" src="images/Kissing-in-the-rain-with-umbrella.jpg" width="50" height="50" alt="block" /> </td></tr> <tr><td class="none"> </td></tr> <tr><td> <span class="plain">Programming Code Examples</span> <span class="oneHundredPercent">100%</span><img class="100percent" src="/images/Kissing-in-the-rain-with-umbrella.jpg" width="50" height="50" alt="block" /> </td></tr> <tr><td class="none"> </td></tr> <tr><td> <span class="plain">Programming Code Examples</span> <span class="fiftyPercent">50%</span><img class="50percent" src="/images/Kissing-in-the-rain-with-umbrella.jpg" width="50" height="50" alt="block" /> </td></tr> </table> </body> </html>
 
  #6  
Old 10-02-2016, 07:24 PM
jermain08 jermain08 is offline
Contributing Member
 
Join Date: 09-23-16
Posts: 54
iTrader: 0 / 0%
If you can't fix it by css then you should try with JavaScript, just update the position of those images at run time. This solution is worst but it works
 
Go Back   Webmaster Forum > Web Development > Coding Forum

Closed Thread


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
[FREE] Cash Texts! - Get Paid to Read Texts! textcashincome.com The Webmaster Marketplace 0 11-11-2011 01:12 AM
Vertical Aligning List Images with CSS Fruit & Veg Coding Forum 3 03-19-2004 09:12 AM


V7N Network
Get exposure! V7N I Love Photography V7N SEO Blog V7N Directory


All times are GMT -7. The time now is 12:54 AM.
Powered by vBulletin
Copyright 2000-2014 Jelsoft Enterprises Limited.
Copyright © 2003 - 2018 VIX-WomensForum LLC