I'm trying to center the entire link and i'm struggling for a solution. I'm using a simple sliding door style for my link and I'd like it to be center.
Here's a demo you can interact with: http://jsbin.com/ibidu3
<style>
a.btn_blue {
background:url("http://img291.imageshack.us/img291/2600/btnblueleft.gif") no-repeat scroll left top transparent;
float:left;
text-decoration:none;
margin-right:4px;
padding-left:5px;
color:#fff;
}
a.btn_blue span{
background:url("http://img826.imageshack.us/img826/1531/btnblueright.gif") no-repeat scroll right top transparent;
float:left;
padding:6px 10px 10px 4px;
}
</style>
<span>Learn More: <strong>Benefits</strong></span>
If you are talking about text not being centered within the anchor tag then that is due to ppadding in a.btn_blue span being different on the left and right side. padding:6px 10px 10px 6px;
Related
I have a small text in the footer. The text is aligned to right but i want the text to move up slightly? how can I do that? my code
#foot tag {
width:1000px;
height:30px;
padding:10px;
border:5px solid white;
margin:0px;
text-align:right;
padding-top: 10px;
}
#foot tag {
width:1000px;
height:30px;
padding:10px 10px 20px 10px;
/* You can adjust the above 4 values to add padding to top, right, bottom and left */
border:5px solid white;
margin:0px;
text-align:right;
}
You can do a couple things, it's tough to say without seeing the live site.
1) decrease the top padding by changing:
padding: 5px 10px 10px 10px;
2) use a negative top margin:
margin: -5px 0 0 0;
You can try this. Top and left css property will move you p in parent div
<div style="position: relative"><p style="position: absolute; top: 1px"></p></div>
I am having a problem using fixed positioning with my top navigation bar. I have taken off the code that I have tried and just put it back to normal so maybe someone can see why I am having these problems of formatting when I try to fix the position.
#main-header {
/*background:url(images/house.jpg) no-repeat center top;*/
height:734px;
border-bottom:10px solid #162b4b;
}
.epicFullscreen {max-height:735px !important}
.epicFullscreen img {min-height:735px !important}
#top-bar {background: #162b4b; height:60px; margin-top:-98px; margin-bottom:70px}
#top-bar nav {padding-left:260px; padding-top:10px; color:#9297a2; width:75%; float:left}
#top-bar nav a {color:#9297a2; margin-right:30px; text-decoration:none}
#phone {float:right; color:white; padding-top:5px; position:relative; right:90px; top:-15px}
#phone a span {font-size:30px; font-weight:bold; color:#93da04; !important; cursor: default}
#phone > span {font-size:18px; font-weight:bold; color:#white; !important; cursor: default}
a[href^=tell] {color:inherit}
#logo {
width:233px;
height:98px;
background:white;
position:relative;
-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.7);
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.7);
display:block;
cursor:pointer;
}
#logo img {position:absolute; top:10px; left:30px}
When fixing the position, it will take away my top blue bar that sits under the nav text, and fix the nav text to the top and screw up the formatting I have with my phone number (which is a dynamic phone number for split testing purposes with call tracking metrics and analytic's).
I can get it to scroll with the page, but besides the formatting being wrong, while I scroll, it goes underneath some objects and text on the page, not all, while I am scrolling.
Any insight would be greatly appreciated, I have read through some of the questions around this issue others have had and the answers are close, but I have not found a solution that works 100% for my website yet.
This works for me, I have assumed your main header div contains your navigation bar.
#main-header{
height:734px;
top: 0px;
position: fixed;
border-bottom:10px solid #162b4b;
}
I'm using the following css technique to design a box shadow around a div element...
-webkit-box-shadow:0 0 10px #303030;
-moz-box-shadow:0 0 10px #303030;
box-shadow:0 0 10px #303030;
But is there a way to tell the css to stop the shadow effect at the top of the div? I just want to the left, right and bottom of the div element to have the effect.
Thanks for any advice
Demo
div{
height: 300px;
width: 300px;
-webkit-box-shadow:0 5px 10px #303030;
-moz-box-shadow:0 5px 10px #303030;
box-shadow:0 5px 10px #303030;
}
To entirely get rid of the top shadow without lengthening the bottom shadow, my solution would be to include another element inside the div with a white background and absolutely position it to hide the top shadow.
<div>
<span></span>
</div>
div {
margin-top:20px;
height:300px;
width:300px;
-webkit-box-shadow:0 0 10px #303030;
position:relative;
}
span {
display:block;
position:absolute;
top:-10px;
height:10px;
width:100%;
background:#fff;
}
http://jsfiddle.net/QE8Bh/1/
According to the specifications, the second value is the vertical inset. Just update that value in order to have a "drop shadow" effect:
box-shadow: 0 10px 10px #303030;
Also, check this article for some other cool effects you can achieve with box-shadow.
This is what I want the chicklet box to look like:![]1
For some reason I can not use negative margins to get the twitter image to go to the center of the box. Is there something wrong with my parent-child relationship?
My css is in an external sheet, but here it is:
<style type="text/css">
#chicklet_container {
margin:20px auto 0px auto;
width:540px;
height:215px;
}
#chicklet_box {
margin:0px 0px 10px 0px;
width:190px;
height:160px;
border-style:solid;
border-width:33px 5px 5px 5px;
border-color:#45BA88;
position:relative;
}
#chicklet_box2 {
margin:-30px 0px 10px 0px;
width:190px;
height:160px;
border-style:solid;
border-width:0px 0px 30px 0px;
border-color:#3f4040;
}
#chicklet_text {
text-align:center;
margin:-196px 0px 0px 0px;
color:#FFF;
width:190px;
font-family:"Verdana, Geneva, sans-serif";
font-size:27px;
line-height:20px;
}
#chicklet_text2 {
text-align:center;
margin:139px 0px 0px 0px;
color:#FFF;
width:190px;
font-family:"Proxima, Nova, Ultralight";
font-size:26px;
line-height:20px;
}
#chicklet_box img {
margin:-250px 0px auto 5px;
}
</style>
Here is the html:
<div id="chicklet_container">
<div id="chicklet_box">
<div id="chicklet_box2">
</div>
<div id="chicklet_text">Follow Me</div>
<div id="chicklet_text2">#soandsoandso</div>
<img src="images/twitter.jpg" alt="">
</div>
</div>
Why are you using so much margin to align the twitter bird image or text. Use as low margins as possible. Instead this, try using that image position:absolute; and top ,left properties. It'll be more clean. But one thing to remember if you are using absolute position for an element ,check if its outer or parent element is positioned or not, if it is not then things may go worse and that child element might go somewhere else.
Negative margins are not a hack - W3C even says: "Negative values for margin properties are allowed..."
Read More: http://www.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/
I do agree in this case though they may be over-emphasized.
Why do you have Chicklet Box 2 inside of Chicklet Box 1? I'm assuming each box represents an icon... am I wrong?
How to stylize input box like image below using pure "CSS". I know this can be done via jquery, but I am enthusiast if there is way to do so using CSS. I took image from Android's Developer website.
What I did is HTML,
<form>
<label>Email Address: </label>
<div class='left'></div>
<input type='text' class='input'/>
<div class='right'></div>
</form>
And CSS,
.left {
display:inline-block;
height:7px;
border-left:1px solid #ccc;
position:absolute;
margin-top:23px;
}
.right {
display:inline-block;
height:7px;
border-left:1px solid #ccc;
position:absolute;
margin-top:23px;
margin-left:-1px;
}
.input {
display:inline-block;
height:30px;
font-size:16px;
width:250px;
border:1px solid #ccc;
border-width:0px 0px 1px 0px;
padding:0px 5px;
outline:none;
}
.input:hover, .input:focus {
border-color:#4ab5d9;
}
What I am trying is => Also on jsfiddle link
The only problem is, I can't found way to change the color of left and right border on hover & on focus.
One option is this
I used the sibling selector to get the hover and focus working:
.input:hover, .input:focus,
.input:hover + .right,
.input:focus + .right {
border-color:#4ab5d9;
}
and removed the "left" div. Then made these changes to the right one:
margin-top:23px;
margin-left:-260px;
width:258px;
pointer-events: none;
I was having the same problem, and I've just created a style like this that doesn't require additional markup. See http://codepen.io/killercup/pen/CBeAq for a demo.
My solution was to use multiple background images (actually, linear-gradient) which are resized using background-size. It works on Android 4.3, but I haven't tested it on any other mobile platform.
The following works in Chrome (and supports focus/hover color changes) using the background CSS property without any additional tags in the HTML:
HTML:
<input type='text' class='holo'></input>
CSS:
input.holo[type='text'] {
/* You can set width to whatever you like */
width: 200px;
font-family: "Roboto", "Droid Sans", sans-serif;
font-size: 16px;
margin: 0;
padding: 8px 8px 6px 8px;
position: relative;
display: block;
outline: none;
border: none;
background: bottom left linear-gradient(#a9a9a9, #a9a9a9) no-repeat, bottom center linear-gradient(#a9a9a9, #a9a9a9) repeat-x, bottom right linear-gradient(#a9a9a9, #a9a9a9) no-repeat;
background-size: 1px 6px, 1px 1px, 1px 6px;
}
input.holo[type='text']:hover, input.holo[type='text']:focus {
background: bottom left linear-gradient(#0099cc, #0099cc) no-repeat, bottom center linear-gradient(#0099cc, #0099cc) repeat-x, bottom right linear-gradient(#0099cc, #0099cc) no-repeat;
background-size: 1px 6px, 1px 1px, 1px 6px;
}
Demo: http://jsfiddle.net/QKm37/