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
Related
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'm trying to create in a single box, two arrows, one as a pointer and the other one into the box just behind.
Can not find the way to get the arrow right behind.
Someone can help me??
here i post the link with the sample: http://jsfiddle.net/7Esu2/
CSS:
.arrow {
width:210px;
height:40px;
background-color:#CBCBCB;
border: 1px solid #CBCBCB;
position:relative;
text-align:center;
font-size:20px;
font-weight:bold;
line-height:40px;
}
.arrow:after {
content:'';
position:absolute;
top:-1px;
left:210px;
width:0;
height:0;
border:21px solid transparent;
border-left:15px solid #CBCBCB;
}
.arrow:before {
content:'';
position:absolute;
top:-1px;
left:211px;
width:0;
height:0;
border:21px solid transparent;
border-left:15px solid #CBCBCB;
}
HTML:
<div class="arrow">
FLECHA
</div>
I prefer using inline-blocks over absolute positioning. Also, :before and :after create child elements (inside) the element you specify them on (at the beginning and end). For this, it would probably be best to have a wrapper (or inner) block, like so:
<div class="arrow">
<div class="inner-arrow">
FLECHA
</div>
</div>
Then the inner block is going to get most of the styling, as the wrapper is primarily there to contain the :before and :after. The wrapper (.arrow) needs to have font-size: 0 (or some other method to make the white-space around the inner block, .inner-arrow, go away).
.arrow {
font-size: 0;
}
.inner-arrow {
width:210px;
height:40px;
display: inline-block;
background-color:#CBCBCB;
text-align:center;
font-size:20px;
font-weight:bold;
line-height:40px;
vertical-align: middle;
}
Most of the styles for .arrow:before and .arrow:after will be the same, so we'll group those. Then specify the differences below (they have to be below to override the common styles).
.arrow:before,
.arrow:after {
content:'';
display: inline-block;
width:0;
height:0;
border:20px solid transparent;
vertical-align: middle;
}
.arrow:before {
border-top-color: #CBCBCB;
border-bottom-color: #CBCBCB;
border-right-color: #CBCBCB;
}
.arrow:after {
border-left-color: #CBCBCB;
}
This is all in the a fiddle.
I have this site here http://jamessuske.com/freelance/paoladi/ and I applied a border-top and bottom to my nav so I have two borders inbetween. But for some reason the two borders are at the top... What am I doing wrong?
.navigation{
border-top:1px solid #000;
border-bottom:1px solid #000;
text-transform:uppercase;
}
above this class is a header class and inside the header class is a logo class and socialMedia class, one floats left and the floats right. the header class does not have a float assigned.
Add float: left to the .navigation class
All your li elements are floated left. You need to clear after the list.
Try adding
<div class="clearboth"></div>
after the ul
There are a few ways of doing this.
Option 1.
Try applying display:inline-block and width:100%;
For Instance:
.navigation {
border-bottom: 1px solid #000000;
border-top: 1px solid #000000;
display: inline-block;
text-transform: uppercase;
width: 100%;
}
WORKING SOLUTION
Option 2.
Using a fixed height in pixels.
For Instance:
.navigation {
border-bottom: 1px solid #000000;
border-top: 1px solid #000000;
height: 65px;
text-transform: uppercase;
}
WORKING SOLUTION
Hope this helps.
The background color, font color and border are being lost when I drop an element.
How do I keep these properties intact? Here is the project in jsFiddle:
http://jsfiddle.net/n2learning/tV4n7/48/
Thanks!
Just needed a minor change to your CSS. I've removed the #routinefilter from this rule so it applies to all .droptrue elements, no matter what their parent element is:
.droptrue{
background: lightgray;
color: navy;
margin:10px;
padding:5px;
border:2px solid #666;
}
Here's the working example.
Your CSS rule:
#routinefilter .droptrue{
only applies to elements with a class droptrue WHILE they are in the container routinefilter. Once you drop them in the box, they are no longer inside routinefilter and the rule doesn't apply. Try changing that to just:
.droptrue{
Your CSS selector was specific to the point of origin, but not to the dropping-point. Add #dropTargetframe .droptrue to your selector, to give:
#routinefilter .droptrue,
#dropTargetframe .droptrue {
background: lightgray;
color: navy;
margin:10px;
padding:5px;
border:2px solid #666;
}
Updated JS Fiddle.
Or you could simply remove the ancestor id from the selector, to give simply:
.droptrue {
background: lightgray;
color: navy;
margin:10px;
padding:5px;
border:2px solid #666;
}
Updated JS Fiddle demo.
This should do the trick.
#routinefilter .droptrue, #dropTargetframe .droptrue{
background: lightgray;
color: navy;
margin:10px;
padding:5px;
border:2px solid #666;
}
The .droptrue elements will keep the same css style when inside the box as well!
Edit:
You can also change it to only .droptrue if you want those boxes to use this style wherever they are.
Change
#routinefilter .droptrue
into
.droptrue
Edit: Whoops, too late :)
Add to CSS
.droptrue
{
font: 16px serif
background: none repeat scroll 0 0 lightgray;
border: 2px solid #666666;
color: navy;
margin: 10px;
padding: 5px;
}
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)