Here is my html:
<div class="pagination">Page
«
1
2
<strong>3</strong>
4 ...
104
»
</div>
My css:
div.pagination { width: 90%; margin: 15px auto; float:right; text-align: right; }
div.pagination a { border: 1px solid #0667B9; background-color:#B4D6F2; padding: 3px 6px; color:#0667B9; margin: 1px; }
div.pagination strong { border: 1px solid #0667B9; background-color:#FFFFFF; padding: 3px 6px; color:#0667B9; margin: 1px; }
div.pagination a:hover { border: 1px solid #0667B9; background-color:#0667B9; padding: 3px 6px; color:#B4D6F2; margin: 1px; }
And what I am getting in result:
The problem you see, things are getting overlapped, what I would like to avoid.
Thanks in advance for any help. Cheers.
It's because you used float I think.
Can you get away with using display: inline instead?
EDIT:
BTW I would have used list-items to display the paginator.
add a line-height:30px; to div.pagination
I copied your code and it looks fine but try this
div.pagination a { border: 1px solid #0667B9; background-color:#B4D6F2; padding: 3px 6px; color:#0667B9; margin: 5px 10px; }
The padding pushes the border outside. So you might need some margin to push the links downward.
Add
display:block; width:10px; float:left;
to
div.pagination a
Related
I am trying to achieve something like the website here: http://bit.ly/1f55jUR (where it says Space Min.) but I fail miserably lol..
Here is what I have done until now:
<input type="text" class="textbox" id="box" /><span class="textbox2">TB</span>
.textbox {
border: 1px solid #cccccc;
outline:0;
height:22px;
width: 30px;
}
.textbox2 {
border: 1px solid #cccccc;
font-size: 16px;
background-color: #f0f0f0;
padding: 3px 6px 3px 6px;
}
Live example:
http://jsfiddle.net/55Nb3/
Any help would be highly appreciated.
Thank you!
You need to modify your html like this (span don't have the same properties than div):
HTML
<input type="text" id="textbox" /><label for="textbox" clhttp://jsfiddle.net/55Nb3/#forkass="textbox2">TB</label>
Here is the CSS
#textbox {
border: 1px solid #cccccc;
outline:0;
height:30px;
width: 30px;
border-radius: 4px 0 0 4px;
box-sizing: border-box;
font-size: 16px;
}
label {
display: inline-block;
vertical-align: top;
border: 1px solid #cccccc;
border-left: none;
font-size: 16px;
background-color: #f0f0f0;
line-height: 30px;
padding: 0 6px;
height: 30px;
border-radius: 0 4px 4px 0;
box-sizing: border-box;
}
Here is a link to it
They used Twitter Bootstrap on that website to get that styling: http://getbootstrap.com/components/#input-groups-basic.
I do it by using a mix of jQuery and CSS
jQuery
$('input[type="text"], input[type="email"], input[type="tel"], .post textarea').on('focus blur',function(e){
if(e.type == 'focus' || e.type == 'focusout'){
$(this).addClass('focussed');
} else {
$(this).removeClass('focussed');
}
});
CSS
input{
/* General style here */
}
input.focussed{
/*Different styles for focussed input here */
}
I've done an update on your fiddle: http://jsfiddle.net/55Nb3/5
It's mostly done by:
label {
display: inline-block;
}
And a few style adjustments.
It really doesn't matter if it is a label or something else.
I have made a 3 column widget area on Wordpress, however it appears that there is padding. Ive amended the margin, however its still not resizing the widget area to fit inside my "sidebar".
This is my site:
www.mammacoil.com
This is my CSS
#footer-widgets {
display: block;
width:950px;
margin-left:-50px;
background: #000000;
}
#footer-widget1 {
width: 260px;
float: left;
margin: 15px 10px 10px 15px;
padding: 10px;
background-color: #000000;
border: 1px solid #fff;
}
#footer-widget2 {
width: 260px;
float: left;
margin: 15px 10px 10px 15px;
padding: 10px;
background-color: #000000;
border: 1px solid #fff;
}
#footer-widget3 {
width: 260px;
float: left;
margin: 15px 10px 10px 15px;
padding: 10px;
background-color: #000000;
border: 1px solid #fff;
}
THIS IS NOW RESOLVED
You have used id footer-widget1 twice, which isn't valid HTML.
I recommend taking the id off the inner #footer-widget1 and applying a different style.
This will resolve your padding issue.
I have two "inline-block" buttons, see the image below:
But, if you click, you will see the other button two pixels down.
Example: http://jsfiddle.net/caio/EUjeY/.
.button {
border-radius: 2px;
border: 1px solid #ddd;
border-bottom: 3px solid #ccc;
background: #eee;
padding: 5px 10px;
display: inline-block;
}
.button:hover {
background: #e7e7e7;
}
.button:active {
border-bottom: 1px solid #ddd;
padding: 7px 10px 5px;
}
Can you help me to prevent this?
Thanks.
you can add this to your .button class:
vertical-align: top;
Working example: http://jsfiddle.net/uW7Sa/1/
Just give .button the css property float: left and both buttons will remain at the same location. This is because float: left removes the button from the flow of the document, so aside from the containing div, it isn't affected by other, inline elements:
.button {
border-radius: 2px;
border: 1px solid #ddd;
border-bottom: 3px solid #ccc;
background: #eee;
padding: 5px 10px;
display: inline-block;
float: left;
}
DEMO
I would provide more code because I'm using a float here, but I don't know what the rest of your document looks like, so I can't compensate.
I am trying to create 2 buttons of the same width that will look as following:
White text in a blue square with black border and with margin of lets say 5px from each side:
this is my css code:
a.button
{
background-color: Blue;
border-width: 2px;
border-color: Black;
color: White;
padding: 2px 5px 2px 5px;
width:100px;
margin: 5px;
}
But what I am getting is:
I am using Google Chrome browser, and when I click on "inspect element" I can see all my css properties there, but my application is ignoring them.
You need to declare the border style (solid in your case)
Try the following
a.button
{
background-color: Blue;
border: 2px solid black;
color: White;
padding: 2px 5px;
width:100px;
text-align:center;
margin: 5px;
display:inline-block;
text-decoration:none;
}
You will need to adjust the css, and add hover and active states.
Example: http://jsfiddle.net/3tKS7/
Make your element an inline-block:
a.button
{
background-color: Blue;
border-width: 2px;
border-color: Black;
color: White;
padding: 2px 5px 2px 5px;
width:100px;
margin: 5px;
display: inline-block;
}
Not sure if the capitalized color names are helping either.
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.