The span will just not expand to the height of the text input, I just want them to be the same height. I don't know why it wont expand
The code - http://jsfiddle.net/8Jxsd/
input{
font-size: 28px;
border: none;
margin: 0;
}
#searchbox{
font-family: 'Source Sans Pro', sans-serif;
outline: none;
font-size: 18px;
margin: 0 auto;
padding: 5px 0 5px;
-webkit-border-radius: 5px;
border: 1px solid #000;
background-color: #FFF
}
#searchinput{
padding: 5px;
-webkit-border-radius: 5px;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 0;
-webkit-box-shadow: none;
}
#searchgo{
padding: 5px;
background-image: url(images/arrow.png);
background-repeat:no-repeat;
width: 40px;
background-position: 0 -1px;
-webkit-border-radius: 0;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-box-shadow: none;
text-indent: -500em;
}
<span> is an inline element by default. Change inline element to a block element by
display:inline-block;
Inline elements are displayed on the same line of the parent but each block level element will occur on next line with own width and height. we need the span be in same line and block so you can have inline-block property for display so that in same line the span will take own width height.
replace rule font-size: 28px; in selector input {} with rule font-size: inherit;
use display:inline-block; with span class
#searchbox{
display:inline-block;
}
Js Fiddle
Related
I have a set of DIVs like so:
<div class = 'tag'><a href='#'>gifts for him</a></div>
And the CSS looks like this:
.tag a,
.tag {
float: left;
padding-left: 6px;
padding-right: 6px;
height: 37px;
line-height: 37px;
font-size: 12px;
color: #666;
background-color: #dcedf8;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-align: center;
}
.tag a:hover {
text-decoration: none;
background-color: #a5c5da;
color: #fff;
height: 37px;
line-height: 37px;
padding-left: 6px;
padding-right: 6px;
}
Basically I want them to look like the following (gifts for him as an example hover):
However mine look like this:
There is no gap and the hover ignores the padding (I'd like the hover to colour right up to the edges if possible).
If I add margin: 2px I get this, which is even worse:
What have I done wrong?
Thanks!!
i have make for you a fiddle.
DEMO
your css is wrong:
it should look like this:
.tag {
float: left;
padding-left: 6px;
padding-right: 6px;
height: 37px;
line-height: 37px;
font-size: 12px;
color: #666;
background-color: #dcedf8;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-align: center;
margin-right:5px;
}
.tag a{
color: #666;
text-decoration: none;
}
.tag:hover {
background-color: #a5c5da;
cursor:pointer;
}
.tag:hover a{
color:#FFF;
text-decoration: none;
}
In your CSS, you need to give the .tag alone a margin, not .tag a. Try adding this line:
.tag { margin: 2px; }
Also, give your .tag a a height and width of 100% - this will fill in the entire container:
.tag a { height: 100%; width: 100%; }
In your current CSS, you're giving both the div containing the anchor tag as well as the anchor tag styling, but you only need to be giving it to the .tag div in order to space out the containers.
try this
.tag a,
.tag {
float: left;
padding-left: 6px;
padding-right: 6px;
height: 37px;
line-height: 37px;
font-size: 12px;
color: #666;
margin:2px;
background-color: #dcedf8;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-align: center;
}
.tag a:hover {
height: 100%;
width: 100%;
text-decoration: none;
background-color: #a5c5da;
color: #fff;
height: 37px;
line-height: 37px;
padding-left: 6px;
padding-right: 6px;
}
<div class = 'tag'><a href='#'>gifts for him</a></div>
Try with this used only single
gifts for him
Demo:http://jsfiddle.net/stanze/hkkLz0re/
I have the following CSS to style a button and an anchor tag as they have the same button style but they are in different locations. SO I thought to give them the same CSS so that they would both render exactly the same. However, the button.enter has the text pushed down. The first one works fine. It would work with padding:0 but that would affect the first one.
Any ideas?
a.enter, button.enter {
text-decoration: none;
background: url('../img/enter-button_small.png') no-repeat 0px 0px;
height: 35px;
padding: 8px 0;
text-align: center;
color: white;
margin: 0 auto;
text-shadow: none;
font-size: 16px;
width: 300px;
vertical-align: middle;
}
Just add another style that will reset the padding on the button alone. Some of your css is unrequired as well. vertical-align:middle; does nothing in this case for example.
a.enter, button.enter {
text-decoration: none;
background: url('../img/enter-button_small.png') no-repeat 0px 0px;
height: 35px;
padding: 8px 0;
text-align: center;
color: white;
margin: 0 auto;
text-shadow: none;
font-size: 16px;
width: 300px;
}
button.enter {
padding:0;
}
You need to mention margin and padding as 0 coz button has the default margin and padding.
Add this below code
a.enter, button.enter {
text-decoration: none;
background: green url('../img/enter-button_small.png') no-repeat 0px 0px;
line-height: 35px;
padding: 8px 0;
text-align: center;
color: white;
margin: 0 auto;
text-shadow: none;
font-size: 16px;
width: 300px;
vertical-align: middle; display:inline-block; padding:0; margin:0; border:none
}
Here is working demo http://jsfiddle.net/6Ygc2/
On this page (responsive site in progress) the background image of the containing div (article) is as wide as the longest sentence (p). So they don't are as wide as the column (#main = 30em). What can I do with CSS to make all div's as wide as the column and still have their responsiveness intact?
#agenda #main article {
margin-bottom: 1em;
background: #fff url() repeat;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
border: 0;
}
#agenda #main article h3 {
color: #666;
letter-spacing: 0.2em;
text-transform: lowercase;
line-height: 100%;
margin-bottom: .4em;
padding-top: .4em;
}
#agenda #main article h4 {
color: #666;
letter-spacing: 0.2em;
text-transform: lowercase;
line-height: 100%;
margin-bottom: .4em;
padding-top: .4em;
}
#agenda #main article p {
color: #666;
}
You need to remove the float: left from the #main article in your css (line 402) or override it with float: none.
Can't really test the responsiveness on mobile devices at the moment, but it seems that you simply need to add a width:100% to your article elements:
#agenda #main article {
background: url("") repeat scroll 0 0 #FFFFFF;
border: 0 none;
border-radius: 6px 6px 6px 6px;
margin-bottom: 1em;
width: 100%;
}
Tried it in firebug and it looks fine even when I'm zooming in or out.
I have this html:
<div id="tagsCloud" class="feedBarSegment">
<div id="tagsCloudHeader" class="segmentHeader">Tags</div><span class="tag">Psalm 33</span><span class="tag">Edgar Allen Poe</span><span class="tag">John</span><span class="tag">Hello</span><span class="tag">Test</span></div>
With this CSS:
.segmentHeader {
font-size: 1.15em;
font-weight: bold;
border-bottom: #7792ad solid 1px;
margin-bottom: 5px;
}
.feedBarSegment {
width: 250px;
margin: 52px 20px 20px 25px;
}
#tagsCloud {
margin-top: 10px;
}
.tag {
display: inline-block;
background: #e9e3c4;
padding: 2px 4px;
border-top: 1px black solid;
border-right: 1px black solid;
}
.subject {
display: inline-block;
background: #f2b2a8;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 2px 3px 2px 3px;
border: black solid 1px;
margin: 2px;
}
I want to make it so that on each line, if no more tags fit that the tags on that line have padding added to them so that they completely span the entire line instead of having the extra space at the end. Is this possible to do?
If you can move from inline-block to inline for .tags you can use text-align: justify; on the container.
I believe what you're looking for is:
#tagsCloud {
text-align:justify;
}
http://www.w3schools.com/cssref/pr_text_text-align.asp
It seems like what you want is text-align: justify.
Maybe this is simple, but is making me nuts.
To understand the problem, the easy way is to look at the image.
Div width is truncating either word or the rounded border(also in case there is a space or dash between words). How can I force each "a" element to go into a new line if width is not enough to contain the element?
Here's the code
<div id="post-tags">
<span class="tag-title">Tagged:</span>
tag2
tag3
tag4
longtag5
<a href="#"li>longtag6</a>
longtag7
longtag8
longtag9
longtag10
longtag11
longtag12
</div>
And the CSS
#post-tags{
width: 560px;
float: left;
padding: 15px;
font-size: 11px;
}
#post-tags .tag-title{
color: #6b6b6b;
padding: 5px 0 0 5px;
}
#post-tags a{
line-height: 24px;
padding: 3px;
background: #a7d1e3;
padding: 4px 10px 4px 10px;
margin: 0 0 10px 0;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#post-tags a:hover{
color: #a7d1e3;
background: #205F82;
}
I found that it doesn't work corerctly in chrome. A solution could be to float the elements. so you add float:left; for the selectors #post-tags .tag-title and #post-tags a. Of course now you will see that there is need to modify and padding and margins. A solution close to yours is applying margin: 0 2px 10px; and padding: 0 10px; for #post-tags a so your new css will seems like the following:
#post-tags {
width: 560px;
padding: 15px;
font-size: 11px;
overflow:hidden;
}
#post-tags .tag-title {
color: #6b6b6b;
padding: 5px 0 0 5px;
float:left;
}
#post-tags a {
line-height: 24px;
padding: 3px;
background: #a7d1e3;
margin: 0 2px 10px;
padding: 0 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
float:left
}
#post-tags a:hover {
color: #a7d1e3;
background: #205F82;
}
here a live example: http://jsbin.com/adika4