?
Solved

Adjust text placement next to images

Posted on 2013-06-23
6
Medium Priority
?
305 Views
Last Modified: 2013-06-23
I am on the 91st page out of 190 restyling an old table based wesite with css & html5
in this page i have 6 small images in the center of the page with text to the right of each image
http://roofgenius.com/Price_Per_Sq_Pages/Test.asp
i fooled with the text placement enough to make it acceptable by using floats and <br> tags
in the 3rd image from the top with the text: ( "In the roof pitch drop down list select 6/12")
 I would have moved the text down a few px if i knew how.
If i remove the floats the text is too low against the image.
How do i do this ?
0
Comment
Question by:isnoend2001
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
6 Comments
 
LVL 15

Expert Comment

by:Jagadishwor Dulal
ID: 39269466
I did not test your code with any validator do it yourself. One of the important part of your page is you are using padding-top that is the main problem. Decrease the value of padding like below and you are not using p tag in that line add <p> tag.
.section_area .middlepanel p {
    color: #000000;
    font: 13px/18px Verdana,Geneva,sans-serif;
    padding-top: 14px;
}

Open in new window

0
 

Author Comment

by:isnoend2001
ID: 39269475
Thanks  jagadishdulal, but I cannot change the style sheet as many pages are already
referring to the styles and that might mess them up
0
 
LVL 15

Expert Comment

by:Jagadishwor Dulal
ID: 39269484
Again you can manage that line add a separate class for that line.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:isnoend2001
ID: 39269519
Thanks  jagadishdulal could you give an example ?
0
 
LVL 15

Accepted Solution

by:
Jagadishwor Dulal earned 2000 total points
ID: 39270107
Add <p class="lower_spacer">Content here.</p>

.lower_spacer{
             padding-top: 14px;
}

Open in new window

0
 

Author Closing Comment

by:isnoend2001
ID: 39270151
Thanks
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Suggested Courses
Course of the Month8 days, 10 hours left to enroll

764 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question