I have a common problem, although I have not been able to solve it with solutions found elsewehere on Stack Overflow. I'm trying to vertically align a logo and a search bar overlayed on an image in a header with unknown height (since the image shrinks when browser width decreases, since it's responsive)
The challenges are:
I have a header image (img, not a CSS background image) in one div block and a logo & search bar in two other div blocks that need to be overlayed on the background image.
The header image will shrink in size as browse width decreases, as it's a responsive site. That means I don't know the height of the header.
The logo is to be floated left and the search bar to the right.
I need to somehow center the logo and search bar vertically, so that they always appear nicely, regardless of the height of the header image that they are overlayed on.
Example: http://www-dev.channelaustin.org/about
Any suggestion?
The first answer here, essentially answers your question. As you only want vertical centring, you should remove the:
top: 50%;
Related
Due mostly to advice from this site (thanks) I created a fixed header with a simple nav and a partially transparent image. I managed to put in a body background image (which I also want fixed, and no repeat) but the only way I could get it to NOT overlay the header was by making it css position:fixed. My problem, now, is that the background image wont center no matter how nicely I ask it to.
Is there a way to get the header container and the background image container to line up and both be centered?
I am trying to position a logo just above the nav overlaying a responsive carousel. The trouble is, depending on the window size, the logo doesn't stay anchored to the nav. I don't know how to even approach this problem. Here is the project I am currently working on. Is there even a way to accomplish this?
The problem is that your logo (I assume you meant the transparent white round logo) is absolute positioned to the top of the browser, AND you're trying to make its position move with the resizing carousel. Try moving the logo inside the #slider1_container and absolute position, bottom:0 (instead of top:0)
This will force it to stick to the bottom of the carousel, regardless of the height of the slider, so it will appear to move with it.
Then, you've got the issue of resizing the logo to shrink with the window as well. If you set the logo's width to a percentage, and its height to auto, with a max-width set to whatever the greatest size you want to allow it to become, then that should manage that.
I got a navigation menu as image. I made a nav div with the image as background and a fixed width and height. Now in the little boxes under the lines I want nav links. So what I did is I made multiple divs in the nav div and positioned them in the little boxes. So they are all positioned perfectly inside firefox but, unfortunately in other browsers like chrome they have different positions (nothing extreme, but they arent perfectly aligned in the little boxes).
What I thought was that whenever you have a certain fixed height and width of the container div. The margins of the child divs will be the same on all browsers and screen sizes as they will always be the same size. How is this possible and what would be the best options to make this nav menu possible?
Try use this http://www.image-maps.com/ ... image maping tool lets you to set link coordinates.
If you know where these boxes are located pixel-wise in the background image, you could absolute position the nav divs and get them precisely where you want using top and left based on pixels of the parent div (with the image) instead of using margins.
This is kind of a peculiar problem. I am working on a header for a custom form where a logo is on the right side of the header and header text is centered within the logo banner.
In general, logos are narrow, so I want to center the text in the main container div like this:
In a few cases, if the logo is very long, I want to center the text on the left side. This is easy enough to do by creating a div that floats left and centering the text within:
The tricky part here (and I'm not sure it is even possible) is making the header text centered on the left side if and only if the image size is beyond a certain length. Oh--and I can't use Javascript.
Wondering if there are any CSS tricks that can get me there...
I have a fluid layout consisting of a header and a content area. The header is meant to occupy 10% of the window's height and the content area is expected to occupy the remaining 90%. Text in the entire screen should scale proportionally to the window's height. Also text in the header should be centered vertically. I am able to meet all these requirements except the last one. Anyone know how to do this?
Here's what I have so far: http://jsfiddle.net/nareshbhatia/h2s4h/
I am using Em units to do relative sizing of the text. I use JavaScript to change the font-size of the body element whenever the window is resized. This approach scales the fonts beautifully for the entire window. Finally, I tried to center the header text vertically by setting the line-height of the header to be the same as its height (i.e. 10%). This usually centers the text vertically (when the height is defined in pixels), but in this case the text does not center vertically. Any ideas on how to fix this?
Edit The jsFiddle is updated to show the suggested answer.
The line-height approach centers the text when you only have one line. You are using percentages, so I think this question might help in that respect.
What you could do instead is use some more jQuery or JS to, on load:
Measure the outer height of the paragraph (or whatever element you are using) in the .content
Calculate the bottom offset of this paragraph in relation with the .content (how much space you have remaining from the bottom border of the paragraph to the bottom border of the .content div)
Divide the remainder in two, and add that number as a top margin or top position for the paragraph.
This will let you have longer text without messing with the line-height.
If you want a pure css solution, check these alternative ways of centering vertically.