[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

CSS Spacing & alignment

Posted on 2014-09-02
8
Medium Priority
?
109 Views
Last Modified: 2014-09-02
See attached html & CSS.

I am trying to get the image img src="images/metro50_2014_winners_plaque.jpg"> to appear next to the text "Oklahoma's Leading Wholesale ...." and at the top.

I don't want to screw up any of the existing CSS.

How can I do this?

See how it functions now at http://davispipe.com/default1.html

Thanks.
default1.html
style.css
0
Comment
Question by:Richard Korts
  • 5
  • 3
8 Comments
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40299085
Move the container for the image so it's the first item under <div class="feature_widgets">

Then on style.css line 304 change the width of this as shown:
#main .container .feature_widgets .widget_rt_rt {
    float: right;
    margin-left: 25px;
    width: 155px;
}

Adjust as necessary.

Then on styles.css line 299 change this item to float:left

#main .container .feature_widgets .widget_rt {
    float: left;
    margin-left: 25px;
    width: 150px;
}
0
 

Author Comment

by:Richard Korts
ID: 40299113
I think we might be looking at two different places. I am looking near the bottom at :

<div class="feature_widgets">
                          <div class="widgetn widget_text">
                            <div class="textwidget">
                              <h3>Oklahoma's leading wholesale distributor conveniently located in <strong>edmond</strong> and <strong>norman</strong>.</h3>
                            </div>
            </div>
This does not appear as Flash to me.

Thanks
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40299129
Sorry, our posts crossed. I figured out what you meant and changed my post.
0
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!

 

Author Comment

by:Richard Korts
ID: 40299206
To Tom Beck,

I did as you said EXCEPT I made special versions of the css that I included in the effected page only; I don't know what other pages might be effected by changing the global css.

See http://davispipe.com/default1.html

I want the image to be to the right of the text "Oklahoma's leading wholesale distributor conveniently located in ..." and for that text to be top aligned.

Thanks
0
 
LVL 38

Accepted Solution

by:
Tom Beck earned 2000 total points
ID: 40299343
Move the widget block...

<div class="widget_lt widget_text">
    <div class="textwidget">
      <img src="images/metro50_2014_winners_plaque.jpg">
    </div>
</div>

..so it's the second child div under <div class="feature_widgets">

Add these css rules to this page only to align the text to the top of the image and move the image closer to the text.

#main .container .feature_widgets .widgetn {
    margin-top: -12px;
}
#main .container .feature_widgets .widget_lt {
    margin-left: 0;
}

Then I would change the width of the css you added to the page for this item from 155px to 200px.

#main .container .feature_widgets .widget_rt_rt1 {
    float: right;
    margin-left: 25px;
    width: 200px;
}
0
 

Author Comment

by:Richard Korts
ID: 40299394
I did something wrong; it now stacks the WHOLE footer vertically in one column on the left.

http://davispipe.com/default1.html
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40299416
The markup is missing a </div> or the nesting is wrong. Hang on I'll try to find it.
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40299434
I think you removed the parent container for the widgets. I don't see it in the source.

Add this just inside <div class="container" id="homekey">

<div class="feature_widgets">
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

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

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

825 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