How can I make the background of .post_headline_signup the same height as the background of the paragraph inside the div.
Here is my code:
<div class="post_headline">
<p>Hello world<span class="post_headline_signup">text inside span</span></p>
</div>
This is my css:
.post_headline {
background:url(images/signup_bg.jpg) repeat-x;
border-left:1px solid #555;
border-right:1px solid #555;
padding-left:1em;
height:2em;
line-height:2em
}
.post_headline p {
text-transform:uppercase
}
.post_headline a {
font-weight:bold;
background:url(images/signup.jpg) repeat-x #900;
border-left:1px solid #000;
border-right:1px solid #000;
padding:1.2em; - **THE PROBLEM IS HERE - ONLY PADDING WORKS, LINE HEIGHT OR DIV HEIGHT DOESN'T**
margin-left:1em
}
.post_headline a:hover {
color:#FFF;
text-decoration:underline
}
Ty!
background images cannot (in css2) stretch to fit their container. if you need it to stretch then you will have to have it as an <img/> (which is not great either (presentation vs content) however that is a limitation of css2. Css3 may offer background stretching but I dont think I have seen it)
Related
I'm trying to achieve this in CSS:
I would like the green line to always be the width of the text (no fixed width). I have a constraint, the tex is contained in an H3 tag with no ability to add a span tag inside it.
you could maybe try this aproach also:
<div class="container">
<div class="line"></div>
<h3>RECENT EPISODES</h3>
</div>
.container {
width:100%;
position:relative;
}
h3 {
display:inline-block;
border-bottom:1px solid green;
padding-bottom:10px;
margin:0;
position:relative;
}
.line {
height:1px;
background-color:#ededed;
width:100%;
position:absolute;
bottom:0;
}
http://jsfiddle.net/az6pr1mz/
The grey line needs to go on a block level tag while the green needs to go on an inline tag. This means that you need two nested tags for it to work and that you must either add a span inside the h3 or a div surrounding it. An h3 can always be made inline if needed.
A slightly different approach would be to add the secondary element outside the h3 without surrounding it and position that so it lies directly under the h3.
In any case, you will need a minimum of two elements for the borders to cling to.
Update:
I missed that you don't need span inside the h3. I added a workaround. I am not sure whether this is the only solution. But I think it can be improved though. In the below code, I am using css content property to hide the border of the container.
NOTE: Use as many dots . as you can use to make it work on all resolutions.
CSS
.container {
border-bottom: 1px solid red;
padding-bottom: 10px;
position: relative;
max-width: 100%;
word-break: break-all;
}
.container:after {
content:"....................................................................................................................";
color: transparent;
border-bottom: 1px solid green;
padding-bottom: 10px;
position: absolute;
bottom: -1px;
}
Working Fiddle
For example this code: (is clearly and not uses absolute positions)
HTML:
<h3><span>Recent episodes</span></h3>
CSS:
h3{
text-transform:uppercase;
border-bottom:1px solid #ccc;
}
h3 span{
display:inline-block;
border-bottom:1px solid #080;
margin:0 0 -1px 0;
}
http://jsfiddle.net/tp0nnapu
I have the following CSS which I'm using to create a simple hover effect for a handful of links in a navbar:
#k9nav-inner ul li:hover {
background-color: black;
border-bottom: 2px solid red;
}
It works, but the border at the bottom is pushing the entire bottom part of the navbar those 2px (in other words, the navbar's height is increasing by 2px during the hover), resulting in a noticeable popping effect when the mouse moves over/off of the links. I see how that would happen with the box model, but is there any way to counteract it so the 2px border appears, but doesn't stretch the navbar by those same 2px?
Figured it out:
#k9nav-inner ul li:hover a {
box-shadow: 0 -2px red inset;
}
this will stop that that from happening
#k9nav-inner ul li:hover {
box-shadow: 0 0 0 2px red inset;
}
it's not officially a border , but it looks exactly like one, and won't mess up the box-model sizing
EDIT :
for bottom border only, this will work
#k9nav-inner ul li:hover {
box-shadow: 0 2px red;
}
example fiddle http://jsfiddle.net/qVD8K/
In some cases it can be useful to leverage outline instead of border. Outline does not increase size of a parent container. However, I don't believe an outline can be set on a single side (e.g. outline-bottom).
outline: 2px solid red;
If you add a 2px border to the list elements when they are not hovered using the container's background color for the border then you won't see the 2px shift on hover.
#k9nav-inner ul li {
border-bottom: 2px solid white;
}
You could set transparent border to #k9nav-inner ul li or (which is beter in my opinion) set parent background color.
For example:
HTML:
<div class="sadf sd1">Some text here</div>
<div class="sadf sd2">Some text here</div>
<div class="sadf sd3">Some text here</div>
<div class="sadf sd4">Some text here</div>
CSS:
.sadf {margin:5px; background:#aaa; height:40px;width:150px;}
.sd1:hover {border-bottom:2px solid #000;}
.sd2 {border-bottom:2px solid transparent;}
.sd2:hover {border-bottom:2px solid #f00;}
.sd3 {border-bottom:2px solid #fff;}
.sd3:hover {border-bottom:2px solid #f00;}
Proper working examples is .sd2 and .sd3. As you can see they are not ideal but works fine for me.
See working example on JSFiddle: http://jsfiddle.net/mZg4N/
I want to create h2 with this style
CSS:
h2 {
color: #158FFA;
border-bottom: 1px solid #CCC;
}
Code:
<h2>WHAT WE DO</h2>
But this only create a bottom line with a solid color. I want it with dark border beneath text.
You can wrap your text with a span, and give that a darker border than the header. Then use positioning to bump the text down a pixel to line the borders up:
HTML
<h2><span>WHAT WE DO</span></h2>
CSS
h2 {
color: #158FFA;
border-bottom:1px solid #CCC;
text-align:center;
}
span{
position:relative;
top:1px;
display:inline-block;
border-bottom:1px solid #AAA;
}
JSFiddle
Or if you wanted to use a pseudo element:
h2:before{
position:relative;
top:1px;
display:inline-block;
border-bottom:1px solid #AAA;
content:'What We Do';
}
The only issue here being that you need to add your text in the 'content' CSS property.
JSFiddle
I am making one div in that I want to align image on right of that div and fill up color of same image on other remaining free place of div but image is not aligning right to it.
The main problem is that I don't want to use <img> tag inside div, I want to to use image as background image of that div and that also should be right align.
My Fiddle
code :
<div class="inq_parent">
<div class="inq_header">
</div>
</div>
.inq_parent
{
height:560px;
width:90%;
background-color:#000;
margin-left:5%;
}
.inq_header
{
height:100px;
width:100%;
background-color:#333333;
border-bottom: 1px solid #f2f2f2;
background-image:url(http://i.stack.imgur.com/x9be2.png);
background-repeat:no-repeat;
text-align:right;
}
Add background-position:right;
.inq_header
{
height:100px;
width:100%;
background-color:#333333;
border-bottom: 1px solid #f2f2f2;
background-image:url(http://i.stack.imgur.com/x9be2.png);
background-repeat:no-repeat;
background-position:right;
text-align:right;
}
or in short
background:url(http://i.stack.imgur.com/x9be2.png) no-repeat right;
DEMO
Updated
.inq_header
{
height:100px;
width:100%;
border-bottom: 1px solid #f2f2f2;
background:#333333 url(http://i.stack.imgur.com/x9be2.png) no-repeat right;
}
Updated DEMO
I have a parent div with a child div inside it (the child div acts as a pop up menu). When the child div pops out it has a tiny space so that it's not lined up with the left of the parent div.
here's the styles:
.ButtonContent
{
display:none;
border: solid 1px black;
width:275px;
position:absolute;
left:0;
margin:0px;
padding:0px;
float:left;
background-color:#FFF;
border-radius:0 0 4px 4px;
}
.Button
{
margin:0px;
padding:0px;
border: solid 1px black;
border-radius:4px 4px 4px 4px;
width:276px;
text-align:center;
position:relative;
}
Here's the HTML:
<div class="Button" id="Button1" >
Add <br />
<div class="ButtonContent" id="ButtonContent1">
Date purchased:
<div class="Date" id="datePurchased1"></div><br/>
Purchase Location:<br />
<input type="text" maxlength="150" /><br />
<a>Add</a>
</div>
</div>
Since you have an absolutely positioned element inside a relatively positioned one with a border, left:0 positions it within the border which makes it look off by a pixel.
Quick fix: make them both the same width and use left:-1px; instead.
http://jsfiddle.net/RtGfc/
It looks to me like you don't need all this CSS to achieve the look you want, maybe a better fix (without touching your HTML):
.ButtonContent
{
border-top: solid 1px black;
background-color:#FFF;
border-radius:0 0 4px 4px;
}
.Button
{
border: solid 1px black;
border-radius:4px;
width:275px;
text-align:center;
}
http://jsfiddle.net/RtGfc/1/
It's two things: the 1px border from the outside <div> and the fact that you chose to put one <div> inside the other.
The 1px border is positioned outside the leftmost mark of left: 0px;. If you remove the border, it works.
Demo: http://jsfiddle.net/MmwYv/
You want .ButtonContent, which is the inner <div>, to be displayed outside .Button, which is the outer <div>. That is going to cause problems, because the inner one is going to be restricted by the measurements of the outer one. If you take .ButtonContent outside, it works too.
Demo: http://jsfiddle.net/NxCp4/