I have a previous and a next button for a php pagination script, which both fall under the class paginate.
.paginate {
font-family:Arial, Helvetica, sans-serif;
padding: 3px;
width:400px;
}
.paginate a {
padding:2px 5px 2px 5px;
margin:2px;
text-decoration:none;
color: #fff;
width: 180px;
}
so i have given them both their own individual classes Next and previous
Next
.next {
background: url("../images/more.fw.png") no-repeat;
height: 87px;
width:128px;
padding:10px;
margin:50px;
font-family:Arial;
font-size:24px;
color:#fff;
position:fixed;
top:585px;
right:470px;
}
Previous
.previous {
background: url("../images/previous.fw.png") no-repeat;
height: 87px;
width:128px;
padding:10px;
margin:50px;
font-family:Arial;
font-size:24px;
color:#fff;
position:fixed;
top:585px;
right:620px;
}
As you can see in the link below these buttons fit perfectly side by side when set against the top of the page, however what i am trying to do is get the buttons to sit say 20 px below the section above. However if i change ti from top 558px, what happens is the buttons sit at different heights and will not sit next to one another.
Any ideas would be appreciated.
Thanks
you can set the button by position:absolute; on both the .next and .previous so that the potion of button wont change
You have the style set to position: fixed, so they wont move when the screen scrolls - is this what you want?
.paginate {
position: relative;
...
.next {
position: absolute;
display: block;
...
Now set your button top and right all relative to the paginate container
Related
Please refer this fiddle , http://jsfiddle.net/shrikanth/79AfQ/
After hovering header(h2), div element(popup) is displayed , which is as per design.
However I can't navigate to new div.(new div gets disappear soon after moving out h2 element)
Is there any fix for this , so that user can click on headrer then can click on contact of another div element?
HTML
<h2>What is CSS?</h2>
<div id="popup">
Contact
</div>
CSS
h2 {
position:relative;
top:22px;
left:44px;
width: 170px;
height:33px;
text-align:center;
}
#popup {
width: 240px;
background: #727272;
padding: 10px;
border-radius: 6px;
color: #FFF;
position: relative;
top:15px;
left:44px;
font-size: 12px;
line-height: 20px;
display:none;
}
h2:hover+ #popup {
display:inline-block;
}
h2:hover {
background-color:green;
}
#popup:before {
content:"";
display: block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 15px 15px 15px;
border-color: transparent transparent #727272 transparent;
position: absolute;
top: -15px;
left: 92px;
}
Just change the hover pseudo-selector rule to include the #popup element, too (assuming your goal is just to be able to click the contact link in the #popup)
h2:hover+ #popup, #popup:hover{
display:inline-block;
}
If you want to use this approach, I suggest adding padding to the h2 element to allow your mouse to leave it without immediately deactivating the hover state, or wrapping it with a larger, invisible element.
Another way would be to add the #popup inside the h2 and absolutely position it.
This way, when you're hovering over the popup, you'll be hovering over the h2 as well.
One thing to note here is not to leave any spaces between h2 and the popup, like ReeceJHayward suggested.
<h2>What is CSS?
<div id="popup">
Contact
</div>
</h2>
DEMO:
http://jsfiddle.net/79AfQ/7/
I have a div that I want to pop up when I hover over the link before it. The hover works great, but there is a link inside the div that appears that I want people to be able to click but it disappears when I try to go to it.
Here is the jsfiddle
I am trying to use just CSS here but if I need any jquery or anything then cool.
#soldoutinfo a {
padding:4px 2px;
font-size:10px;
}
#soldoutinfo, .soldout {
display:inline;
}
#soldoutinfo a {
color:#cc0000;
}
#soldoutinfo a:visited {
color:#cc0000;
}
#soldoutinfo + div {
display:none;
width:0;
height:0;
position:absolute;
}
#soldoutinfo:hover + div {
display:block;
height:60px;
width:250px;
background:#ffffff;
box-shadow: 0 0 4px #888888;
position: absolute;
padding: 8px;
top: 19px;
left:12px;
z-index:1000;
}
#soldoutinfo + div p {
font-size:12px;
}
<p id="soldoutinfo">
<sup><a>?</a></sup>
</p>
<div>
<p>Hope is not lost! Send us a message and we will see if our stores have any in stock to ship to you.
</p>
</div>
The problem is that the hover effect is on the element after the anchor. So when you leave the anchor, your hover effect will end to.
You could fix it like this, although it's not the cleanest solution:
Set your tooltip inside your anchor, using a span
<p id="soldoutinfo">
<sup><a>?</a></sup>
<span>Hope is not lost! Send us a message and we will see if our stores have any in stock to ship to you.</span>
</p>
#soldoutinfo span {
display:none;
width:0;
height:0;
position:absolute;
}
#soldoutinfo:hover span {
display:block;
height:60px;
width:250px;
background:#ffffff;
box-shadow: 0 0 4px #888888;
position: absolute;
padding: 8px;
top: 19px;
left:12px;
z-index:1000;
}
JSFiddle DEMO
Edited your fiddle:
http://jsfiddle.net/s8QWY/6/
See if this works for you. Basically what I did was this:
Make the hidden div be inside the div that you have to hover over to get it to show.
Make the position of the parent div relative
Make the position of the shown div be over where the hovered element so that the div still shows when you hover over the div itself.
<div id="soldoutinfo"><sup><a>?</a><div><p>Hope is not lost! Send us a message and we will see if our stores have any in stock to ship to you.</p></div></sup></div>
#soldoutinfo a {
padding:4px 2px;
font-size:10px;
}
#soldoutinfo, .soldout {
display:inline;
position: relative;
}
#soldoutinfo a {
color:#cc0000;
}
#soldoutinfo a:visited {
color:#cc0000;
}
#soldoutinfo div {
display:none;
width:0;
height:0;
position:absolute;
}
#soldoutinfo:hover div,
#soldoutinfo div:hover {
display:block;
height:60px;
width:250px;
background:#ffffff;
box-shadow: 0 0 4px #888888;
position: absolute;
padding: 8px;
top: 3px;
left:3px;
z-index:1000;
}
#soldoutinfo + div p {
font-size:12px;
}
Here a approach point:
When you hover the ?
$("#id").hover(function(){
$(this).find("#toShow").show();
}
and when he leaves the #toShow
$('#toShow').mouseout(function() {
$('#toShow').hide();
});
I see no JS code in this fiddle I don't know why. But solution to you would be to use setTimeout(); in this function you can specify after what period of time after hover the box should be hidden. You can also add to hide() param 'slow'.
You can also use ready solution which is Jquery UI ToolTip
i have tried designing my own input file base on this fiddle i need to align properly the button in input text of a bootstrap.
this is my code to design my input type. also the button of bootstrap is not aligning.
.forUplBtn {
background-color:#427db8;
width:50px;
display:inline-block;
border: none;
color: #fff;
padding:5px 20px 5px 20px;
border:none;
overflow:hidden;
text-align:center;
position:relative;
margin:0;
}
.forUplBtn a{
z-index:-1;
}
.forUplBtn input[type="file"]{
/*margin-left:-145px;*/
width: 100%;height:100%; position:absolute; left:0;top:0; opacity:0
}
Try adding vertical-align:top to .forUplBtn and add this for the upload button:
.uplPhot a button{
vertical-align:top;
}
Add the below css to your code
button {
position: absolute;
margin-left: -90px;
width: 90px;
margin-top:4px
}
Check this Fiddle
Also check Jasny's fork Bootstrap for file upload, easy to integrate.
I have an issue regarding style my blog. I want to make the header bar
position:fixed
The header bar looks like this:
.blurbheader {
position:fixed;
padding:4px;
width: 100%;
height: 40px;
margin-bottom:30px;
color:#fff;
background:#cc0000;
font: 12px Helvetica, Arial, sans-serif;
line-height:1.3em;
}
.blurbheader a {color: #fff;}
/* creates the triangle */
.blurbheader:after {
content:"";
position:absolute;
bottom:-40px;
left:210px;
border:20px solid transparent;
border-top-color:#cc0000;
/* reduce the damage in FF3.0 */
display:block; width:0;
}
But as soon and I do that, 2 navigation bars I made, which are shown as
.blurb {
position:relative;
padding:10px;
margin:20px 0 0.5em;
color:#fff;
background:#000;
font: 11px Georgia, Geneva, "Times New Roman", times;
line-height:1.3em;
}
.blurb a {color: #fff;}
/* creates the triangle */
.blurb:after {
content:"";
position:absolute;
top:-30px; left:20px;
border:15px solid transparent;
border-bottom-color:#000;
/* reduce the damage in FF3.0 */
display:block; width:0;
}
When try to make the headerbar (blurbheader) fixed, when I scroll, it looks like this:
The box on the right hand side is the navigation bar, which won't scroll under the header bar. What do I do?
It is a z-index issue.
try adding the following to your .blurbheader
z-index:1;
and whatever is holding the rest of the page, like the wrapper, add a
z-index:0;
that should fix the problem
I'm trying to style a button with the css 'sliding doors' technique, but it isn't working properly. I've only got access to firefox 3 at the moment so this issue may not occur in other browsers but I would like to solve it for firefox as well.
Here's a picture of what the problem is:
http://img131.imageshack.us/img131/3559/buttons.png
As you can see the second side is lower than the first by a pixel and also is not over to the right enough. Here is the code I am using:
button
{
font-weight: bold;
border: none;
background: top left url(../images/blue_button_left.gif) no-repeat #24AADF;
color: #FFFFFF;
height: 25px;
}
button span
{
display: block;
height: 25px;
background: top right url(../images/blue_button_right.gif) no-repeat;
position: relative;
}
<button class="important" type="button"><span>Register</span></button>
<button type="submit"><span>Submit</span></button>
How do I fix this problem? I tried relatively positioning the span using top: -1px right: -3px but then the text is mis-aligned.
Thanks.
http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html
I just did sliding doors on a div background, and the code from this site worked perfectly.
Try setting the padding for the button to zero, and then playing with the padding-left and width to put the text in the right place.
button { padding:0; padding-left:5px; width:90px; /* total width:95px */ }
button span { ... }
If you look at the HTML block display: padding gets added to the overall width of the object, and the background starts in the padding area, and the right half is padded
However please take note, that button elements are NOT suited for embeding any other nodes inside (like span). They may work OK in the browser, but IE can make your life really hard (not to mention that as far as I know, it's not valid)
Form elements like buttons are always hard to style, and riddled with minor bugs like these.
Instead of applying the class to the button element itself, perhaps try and apply the button's styling to an extra span element inside the actual button?
In short:
button {
background: white;
border: 0;
}
button div {
font-weight: bold;
border: none;
background: top left url(../images/blue_button_left.gif) no-repeat #24AADF;
color: #FFFFFF;
height: 25px;
}
button div div {
height: 25px;
background: top right url(../images/blue_button_right.gif) no-repeat;
position: relative;
}
And HTML:
<button type="submit"><div><div>Submit</div></div></button>
I use DIVs instead of buttons and have a function to build them in-place. It ends up looking like this:
alt text http://fb.staging.moveable.com/samplebutton.gif
inline script call:
<script type='text/javascript'>makeButton("Log in","login()")</script>
code:
function makeButton(text,action) {
document.writeln("<a class='titleGen' href='javascript:// "+action+"' onclick='"+action+";return false'><div class='btn'><div class='btnLeft'></div><div class='btnMiddle'><div class='btnText'>"+text+"</div></div><div class='btnRight'></div></div></a>")
}
css:
a.titleGen, .btnText, .btnGText {
text-decoration:none
}
a.titleGen:hover, .btnText:hover, .btnGText:hover {
text-decoration:none
}
.btn {
height:22px;
display:inline;
cursor:pointer;
margin-right:5px;
}
.btnLeft {
background-image:url(/images/bg_btnLeft.gif);
width:3px;
height:22px;
float:left;
}
.btnRight {
background-image:url(/images/bg_btnRight.gif);
width:5px;
height:22px;
float:left;
}
.btnMiddle {
background-image:url(/images/bg_btnMiddle.gif);
width:auto;
height:22px;
float:left;
}
.btnText {
color:#ffffff;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding-top:2px;
padding-left:10px;
padding-right:10px;
}