I have got an issue in a header where I want the middle element to stay centered between the two flash end pieces. I put the middle element after the right div in the html, thought I specified the css right, but when I STRETCH the page to the right, the middle element does not move/stay centered. Are you able to see what I'm doing wrong?
From looking at the code on the page you supplied, you need to remove the float:left from the headerCenter div
Related
I am creating basic html page and i have one main container div and it contains one header div that is fixed at the top and working fine. and next to header, i have animation div, images div and next to images I have one description div and i have divided the description div into two div. div1{float:left} and div2{float left}... Now when i open the page and scroll down to reach the div 1 and div2. I want that div2 should be fixed under the header when it reaches to the header bottom...
Is it possible to solve with simple css or javascript or something else required.
if possible with css then how to proceed
Ok I think I see what you mean. You want the float-menus div to not go on top of the menu block (static-header div). Correct? In that case you just need it to be a higher z-index. Float-menus is currently z-index:201; so just make static-header a bigger number.
#static-header{
z-index:301;
}
See my updated fiddle: https://jsfiddle.net/z9bxhbfs/
I'm trying to achieve the following: I have a central div (wrapper) exactly in the center of my page, both vertically and horizontally. Inside that div I want to have another 2 divs, one of which will contain a logo and the other some text. The logo image also has to be aligned vertically and horizontally to the center of its div. Currently this is what I have:
Here's the jsfiddle with my HTML and CSS: http://jsfiddle.net/7cQhG/
How can I center the logo div (only centered horizontally, and have a 10px margin-top) and have the logo image centered inside that div, both horizontally and vertically, just as it is now)?
Is there any reason you have to have the logo as an img?
I've taken the starting point you gave, and put together a jsFiddle fork : http://jsfiddle.net/mori57/HDmkZ/
I've taken out the img tag, and used it as a background image. "center center" should theoretically center it within its container, and as it's a transparent png, your background color still shows up as you wanted.
Let me know if this works for you, or if you have any other questions.
As a sidebar, you really don't need (and you really shouldn't) to specify your tags in your CSS. The only place that's really appropriate is if you're assigning defaults to a specific tag... otherwise, rules of specificity are already going to take over when you're using those IDs you've got in there.
Note that I wasn't clear what you wanted to do with the text below the logo, so I didn't do any styling, there.
for reference here is a jsfiddle link:
http://jsfiddle.net/STmwz/4/
To start off with, there is only the top div. When the user clicks the edit button, I have some javascript to replace the top div with the bottom div. Problem is, when the replace happens, there is a slight twitch of sorts: everything jumps a couple of pixels.
I think the best way to fix this would be to have the top div vertically aligned. I have a height set for the top div that matches the height of the bottom div when it replaces the top one. So if both are aligned vertically, then no jump!
Problem is, vertical-align isn't working on the top div.
Any idea on what I could do?
I believe the elements that you want to vertically align must have "inline" or "table-cell" display.
Source: https://developer.mozilla.org/en/CSS/vertical-align
Here's an example of it working: http://jsfiddle.net/STmwz/19/
In a percentage-width container, a H2 is floated left and an image is floated right.
As the browser width is decreased, the image is pushed left towards the H2. When they meet, the logo is pushed down below the H2.
Example JSFiddle:
http://jsfiddle.net/VgS8B/1/
How can I make it so that the text starts wrapping over multiple lines before the image drops down underneath it? Like a sort of CSS "force whitespace wrap"?
This is probably simple but my brain isn't working :(
Is it necessary that the heading be floated left? You could left align it, remove its float, and place it below the image within the HTML to get your desired effect.
try this:
http://jsfiddle.net/VgS8B/5/
black is the browser window in the image bellow.
I want to accomplish the image in the right
I have a div which is centered (blue) and has a fixed width
I have a div which is inside (red)
I want the red div to span from one side of the screen to the other while still aligning all else in the center.
How should I do this?
Should I break it in 3 divs(first fixed and centered, the second to span all width, the third like the first)
Here's an example of how to do it if you want the red div on top. If it's behind the blue, then put it first in the markup and you don't need the third div: http://jsfiddle.net/mGnpr/2/
Well, you answered your own question. I suggest you break it in 3 divs. Seeing how HTML elements function, it's pretty hard to 3-dimensionally stack them ( and making it look good :).
Write two classes in your CSS file: one with the fixed width and second with the "100%" width. Use the first class for top and bottom divs, the latter class for the middle div.