I have some CSS challenge here. To describe what I am after is challenge as well :) so hope it makes sense.
I need text title that will align in the middle of DIV container.
The title needs to have a background image that will apply to its left side and different background image that will apply to its right side.
The background behind the TITLE text must be transparent.
~~~~bg image1~~~~ TITLE ~~~~bg image2~~~~
The width of DIV container varies as well as the TITLE text length.
I've tried to apply content with :before and :after markup
h1 {margin: 0 auto;display: table;}
h1:before {content: url('image_left.png');}
h1:after {content: url('image_right.png');}
however this does not work for me as the width of :before and :after element equals to the width of content image and I can not figure out how to make it responsive.
Any hints appreciated :)
Related
I'm having an issue where I have a min-height set up in a div above the footer. In order to get the text in the footer to align center, I am using clear:both in the CSS. The only issue is that now there is a large space between the content and the footer?
Here's the site I'm working on:
http://brimbar.com/no_crawl/RiverHollow/about.html
Thanks!
It's because you have that floated image with the giant margin-bottom. clear: both means "no elements should be on either side of this element", so the footer has to be below that 600px margin.
The reason that the footer text isn't centered without clear: both is because it's only centering within the width between the start of the div and the left side of that image (plus its giant margin).
What you should do is change the markup so that your image appears in another column div inside the content div, since you seem to want to display it in its own column rather than floated. If you do this, you won't need the giant margin, nor will you need clear: both on your footer elements.
Here's a demo: http://jsbin.com/uxiqer/1/edit
Note you can use floats or position: absolute to position the .images div on right; I just find position: absolute easier to work with.
If you don't need images to display in their own column then you can simply keep the float on the image and remove that margin-bottom, then the text will wrap nicely around the image and its margin. This is the intended purpose of float. Then without the giant margin overflowing the content div, the footer text can be centered properly without any need for clear: both.
Remove the clear: both and add a specific height to the footer not just min-height. I can't get your text to align but I bet it would if you removed "position:static" on it.
Since you hard-coded the 1550px height on the container itself, the footer is taking up the rest of the space available to it since it only has a "minimum-height" requirement not max.
I have box with nested image and div with text information. I'm doing simple CSS trick with positioning and display parameter changes on hover, so text box is only seen if hover on main box.
Here's my problem, text box has background with opacity, how can I match height of the box with background to its parent when it's show on hover.
Here's live example: http://jsfiddle.net/Mamaduka/jDYu5/16/
If I understand correctly, all you need to do is give texts a height of 100%
.box:hover .texts {
display: block;
height:100%;
}
Worked for me when I edited your fiddle.
I am trying to use <span> to move some text in my navbar. My navbar is a <ul> and the elements are all <li>s but the text is aligned to the top of the navbar and I want it to be vertically centered. As you can see in the JSFiddle, I am using an a:hover property in CSS to change the background and color of the text when it's hovered over. When I apply the span to just the text, the whole hovering section gets moved too. See if you can understand what I mean.
My JSFiddle is here:
http://jsfiddle.net/G8CJ7/
Basically I just want the text vertically aligned in a simple, concise way. Originally I was using '' tags and setting a margin on them but I want to avoid using header tags for this purpose for improved SEO. Thanks.
http://jsfiddle.net/G8CJ7/1/
Added line-height:40px to center the text vertically. IE7 will have issues with this as it is not fully supported, so a conditional stylesheet with a padding-top on the li will solve it.
Adding line height works, you could also adding padding to the top:
.class { padding-top: 10px; }
Adjust the padding to center.
Updating this a couple years later but there's always the option of using:
display:table;
display:table-row;
display:table-cell;
with vertical-align:middle; in order to center the items. I prefer this approach these days because you can apply responsive rules to the display style (for example, change it to display:block and display:inline-block etc. if you need to update it for other screen sizes. Here is a fiddle:
http://jsfiddle.net/G8CJ7/68/
There are a lot of questions regarding side-by-side divs. I didn't miss those. But I need something that spans the whole width of the screen. This is the situation:
I need three divs positioned side-by-side. The left, middle, and right divs we'll call them. The middle div holds the header contents of the site and is a fixed width (800px). I want the left and right div to span the rest of the screen width on either side. So..
<-LEFT-> | MIDDLE | <- RIGHT ->
The reason I want to do it this way is because the middle (content holding) div has a backgrond that is a gradient. Let's say the left side of the gradient is white and the right side is black. I need the Left div to be white so it is a continuation and the Right div to be black. This way it looks like one fluid heading that spans the whole width of the screen.
Thanks.
A solution for this problem I once implemented was using 2 div elements, absolutely positioned, with the center div as an overlay. I have a working example here:
jsFiddle solution
This way, it doesn't matter how wide the screen is: The div's span 50% of your screen, and the middle part is behind the centered div.
Note that you might have to use a javascript workaround for the height-issues.
Do you want content in the left or right divs? If not, Simply stick with your one center div, give it a width and position it using margin: 0 auto; in your css. You can then set the background image of the body tag with an image (say 1px by 2400px) that is half white and half black.
If you want that effect just behind your header, then you could create a div the same height as the heading and give it the following css properties:
position: absolute;
width: 100%;
z-index: -1;
that way it should sit behind your container (middle) div.
You should consider having just one centered div and on the body put a background-image of 1px height and large enough width and centered. That image will have the left half white and the right one black.
Hope this helps, Alin
...WWWWW| DIV |BBBBB...
Anyway I don't think it's possible without using a table.
Usually floatting div are size-fixed and center div is fluid.
what do the background refer to in the box model (content, padding, border and margin)?
in other words, which part of the box model will be set to display a background color if i set it to green?
and is it just block elements (div, heading etc) that applies to the box model? do inline elements (span, text) got padding, border and margin too?
The elements full occupancy, not including space occupied by margins. You could test this with the following markup/css:
.block { margin:5px; padding:0; width:25px; height:25px;
background-color:orange; float:left; }
<div class="block"></div>
<div class="block"></div>
Render that, and you'll find a total of 10px between the orange boxes - our margins.
Inline elements do have padding and margins too, but you can't always use them the same way, since they're inline, not block-level.
This small chart will demonstrate how a box appears within the browser:
box-chart http://img132.imageshack.us/img132/2692/boxchart.jpg
As you can see, the margin is the space between the box itself and any content that might be surrounding it. The border is simply a line around the box. The padding is the space between the edge of the box and the content within the box. Any backgrounds you set will fill the entire box (within the borders) still maintaining the margin (blank space) around the box.
Just about every element can use margin, background, and border I believe. However, some elements do not support padding unless it is block-level, because it would basically be the exact same thing as margin. You can always test out different styles to see what works and what doesn't and how things get moved around based on the styles you set up.