Solved

media query logo centering problem

Posted on 2012-04-08
13
157 Views
Last Modified: 2012-04-10
I have a page with a logo. When The browser pulls in there is media query code and the css changes. The top  menu drops down to the second line and the logo is supposed to be centered. For some reason the logo is still flush left and I can't figure out why
---index-09.html
0
Comment
Question by:designaire
  • 5
  • 4
  • 3
  • +1
13 Comments
 
LVL 16

Expert Comment

by:HagayMandel
ID: 37822355
Change the "logo" style to this:
.logo{
	width: 161px;
	height: 216px;
	margin-right: auto;
	margin-left: auto;
}

Open in new window


Another tip: Don't use the alt tag on images, use the title tag instead.
0
 

Author Comment

by:designaire
ID: 37823259
No, it didn't work. I think it's because of the .menuBackground style. It has a background when it's full frame but if the browser is smaller then the buttons move to the next line but it's still in a div with a class called .menubackground. I don't need it anymore and I plan to put the background to none if I didn't in the sample, but if I hide it the logo and buttons won't show up.

Thanks for the tip on the alt tag.
0
 
LVL 30

Expert Comment

by:LZ1
ID: 37823296
Can you show a sample URL?  It's going to be difficult to try and see what your talking about with no images.
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
LVL 16

Expert Comment

by:HagayMandel
ID: 37823507
It works!
Checked with IE7 & 8, Chrome and Firefox.
If it doesn't work on your code, there must be something else,  so it's better to have a live page as LZ1 suggested.
0
 

Author Comment

by:designaire
ID: 37823884
I'll post it up later tonight. I ended up using a left margin, but if I can't get it working it centered, I'd rather do that.
0
 
LVL 6

Expert Comment

by:uzzidesign
ID: 37823928
It's because of the float you have on the logo. Remove the float.

Floats remove the element from its normal relative flow in the tree and forces the adjacent elements to fill the space once occupied by it. The margin: 0 auto only works when those left and right margins can calculate themself (auto) relative to it's parent and adjacent elements, but floating it makes the element "unaware" of it's parent and adjacent elements.
0
 

Author Comment

by:designaire
ID: 37826012
http://designaste.com/class/__fin_04.htm

Here's the link. You have to pull the browser in befor it changes to center. I have a clear on the left in the logo. It still doesn't work.

Thanks for you help.
0
 
LVL 30

Expert Comment

by:LZ1
ID: 37826091
On line 92 of http://designaste.com/class/__fin_04.htm, you have a .logo class which is still maintaining a float:left.  This is your issue.  

To the other .logo class on line 201, add float:none !important; and you should be fine
0
 
LVL 16

Expert Comment

by:HagayMandel
ID: 37826262
I can only address you to my answer above (#37822355):
in the .logo class:
REMOVE:  float: left;
ADD: margin-right: auto;
          margin-left: auto;
0
 

Author Comment

by:designaire
ID: 37827211
It has to have float: left in the beginning before the media query otherwise it drops down too early.
0
 

Author Comment

by:designaire
ID: 37827282
Float: none; worked. Then margin: 0 auto or margin-left: auto and margin-right: auto.

I didn't realize there was a float none. Why doesn't Float: clear work???
0
 
LVL 30

Accepted Solution

by:
LZ1 earned 500 total points
ID: 37827285
I'm saying to add float:none !important to the media query .logo class.

Line 201 in your page you posted above:

                  .logo{
                        width: 161px;
                        margin-left: auto;
                        margin-right: auto;
                        clear: left;
                        float:none !important;
                  }
0
 
LVL 30

Assisted Solution

by:LZ1
LZ1 earned 500 total points
ID: 37827291
Because clear is not a valid property for float.  Clear is a separate property itself.

Clear: left, right and none.
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
CSS Header Navigation Not Responsive 4 30
Html form and modal / img src -problem 3 30
html input 8 42
..ignore the Question 1 8
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
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.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

860 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