Solved

Adjust text placement next to images

Posted on 2013-06-23
6
277 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
  • 3
  • 3
6 Comments
 
LVL 15

Expert Comment

by:Jagadishwor Dulal
Comment Utility
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
Comment Utility
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
Comment Utility
Again you can manage that line add a separate class for that line.
0
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 

Author Comment

by:isnoend2001
Comment Utility
Thanks  jagadishdulal could you give an example ?
0
 
LVL 15

Accepted Solution

by:
Jagadishwor Dulal earned 500 total points
Comment Utility
Add <p class="lower_spacer">Content here.</p>

.lower_spacer{
             padding-top: 14px;
}

Open in new window

0
 

Author Closing Comment

by:isnoend2001
Comment Utility
Thanks
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

762 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

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now