?
Solved

Create and align image box with logos on home page

Posted on 2008-10-28
16
Medium Priority
?
254 Views
Last Modified: 2013-11-19
I work for a company that wanted me to add some logos to their website. Here's the corrent site:
www.globalsourcingintl.com
Here's what they want done:
www.novanetsolutions.com/GSI.jpg
I'm having trouble getting the box created that will fit exactly like that so the images can go in it. When I create the box it doesn't align exactly along the side of the web page. I created the box in my main screen.css file. Here's the code

.logos {
        float: right;
        width: 200px;
        margin-right: -225px;
        margin-top: -205px;
}

I'm not much of a web site designer so I've been adjusting the margins manually and refreshing the page to get it aligned but it never aligns exact and it shows up different in firefox than it does in IE. Thanks in advance.
0
Comment
Question by:bbrunning
[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
  • 9
  • 7
16 Comments
 
LVL 30

Expert Comment

by:Steggs
ID: 22824536
Hello,

IE6 'Double margin on float bug'

Fix by adding display:inline to #searchform

Thanks
0
 
LVL 10

Author Comment

by:bbrunning
ID: 22824741
I'm using IE7, and it actually looks worse in Firefox than in IE so I don't believe that's the problem.

Thanks
0
 
LVL 10

Author Comment

by:bbrunning
ID: 22824751
Oh I read that wrong. I understand what you mean now. I'll give it a try.

Thanks
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 30

Expert Comment

by:Steggs
ID: 22824875
Your talking about the orange box on the right, correct?
0
 
LVL 30

Expert Comment

by:Steggs
ID: 22824909
Where are the logos... I dont see them at all
0
 
LVL 10

Author Comment

by:bbrunning
ID: 22824915
No, the Orange box is floating properly. I want to make a new box (or add the logos in the jpg) under the orange box.
0
 
LVL 10

Author Comment

by:bbrunning
ID: 22824925
I haven't added the logos back in or the box due to problems. Refer to my link to the jpg for an example of what it needs to look like.
www.novanetsolutions.com/GSI.jpg
0
 
LVL 30

Expert Comment

by:Steggs
ID: 22825173
First of all:

add logos div underneath div#searchform

<div id="searchform"></div>
<div class="logos"></div>

.logos {
background:;
float:right;
margin:0px 10px 10px 0;
width:215px
}
0
 
LVL 10

Author Comment

by:bbrunning
ID: 22828661
I made adjustments to .logos as you said and edited my searchform.php adding div class logos but it puts it in the center of the page instead of underneath it.
I added 2 periods, you'll notice them in the center top of the page below the header.
0
 
LVL 10

Author Comment

by:bbrunning
ID: 22828706
Another note I should probably add. This website is designed with Ruby on Rails. I'm editing the individual pages through the admin control panel and I'm editing the css files and php files through ssl.
0
 
LVL 10

Author Comment

by:bbrunning
ID: 22828769
I worked with the sizing and got it aligned under the search box but there is a slight problem. I think the owner only wanted those logos to show up on the home page only. When added to searchform.php it adds whatever I do to the entire set of pages. I'm going to speak with him tomorrow and see if that's okay but if not, do you know how to do that?
0
 
LVL 30

Expert Comment

by:Steggs
ID: 22830150
Can you work out how its done by seeing how its done on this page http://www.globalsourcingintl.com/about_us/... that has content in the right column
0
 
LVL 30

Accepted Solution

by:
Steggs earned 2000 total points
ID: 22830215
Sorry, Ive just realised that my css was wrong for the .logos. What needs to be done is set up a right column on each page. Something like:

#rightCol {
float:right;
width:225px
}

<div id="rightCol">
<div id="searchform"></div>
<div class="logos"></div>
</div>

0
 
LVL 10

Author Comment

by:bbrunning
ID: 22834303
I changed the code a bit that you gave me and it matches up properly under the searchbox, but I need to know if there is a way to hide the logos box on every page but the home (about_us) page. check out the site and you'll see why I need to hide it on some of the other pages:
www.globalsourcingintl.com

.logos {
        background:;
        float:right;
        margin:0px 10px 10px 0;
        width:215px;
        margin-right: 0px;
        margin-top: 65px;
0
 
LVL 30

Assisted Solution

by:Steggs
Steggs earned 2000 total points
ID: 22834982
Well, if you want to it in css then you can. What you need is a 'hook' on each page. What I mean is, something unique to each page that you can use with css to hide the logos on certain pages. For example,

on all the pages on your site is an id in each body tag... like the 'Terms of sale' page has <body id="page_tos">. So, if you didnt want the logos to appear on that page, you would do this:

body#page_tos div.logos {
    display: none
}

Hope this helps
Steggs
0
 
LVL 10

Author Closing Comment

by:bbrunning
ID: 31510851
Thanks for all the help!
0

Featured Post

Stack Overflow Podcast - Developer Story

Welcome to the Stack Overflow podcast recorded Thursday July 20 at Stack Overflow Headquearters in NYC. Your hosts today are podcast regulars Jay Hanlon, David Fullerton, and Ilana Yitzhaki, plus the quite irregular Matt Sherman (Stack Overflow Engineering Manager extraordinaire)

Question has a verified solution.

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

Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
Suggested Courses

777 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