i can't figure out what makes an html button element appear to be pushed (right click an html button and then hover on and off to see what i mean).
the following two examples i've taken from other websites. the first has the typical button push effect. the second does not.
.button {
border:none 0;
background-color:Transparent; }
.button .l { background:url('img.gif') no-repeat 0 0;
padding-left:7px;
display:block;
height:32px; }
.button .c { background:url('img.gif') repeat-x 0 0;
display:block;
height:32px;
padding-top:7px; }
.button .r {
background:url('img.gif') no-repeat right top;
padding-right:7px;
display:block;
height:32px; }
and
.button {
background:#F0F0F0 url(img.gif) repeat-x scroll 0 0;
border:1px solid Black;
color:#333333;
font-size:12px;
height:20px;
padding-left:8px;
padding-right:8px; }
EDIT: # mr skeet, i want a button that will look the same in all browsers (ie. background image) but still behave like a real html button with the push effect. am i correct in assuming that i'll need javascript for this? and different css for the push state? an example/tutorial would be awesome
Either use
<input type="button" value="Click Me"/>
which will automatically act like a button, or use the :hover and :active CSS pseudo classes to get what you want...
a.likeAButton {
background-color:#67a0cf;
border:1px outset #2683cf;
color:#fff;
padding:3px 3px 3px 3px;
margin:1px;
text-decoration:none;
}
a.likeAButton:hover {
background-color:#5788af;
border:1px outset #2683cf;
color:#fcffdf;
padding:3px 3px 3px 3px;
margin:1px;
text-decoration:none;
}
a.likeAButton:active {
background-color:#67b4cf;
border:1px inset #1d659f;
color:#e0ffaf;
padding:4px 2px 2px 4px;
margin:1px;
text-decoration:none;
}
Fake Button
you can also add border radius to every element such as a.likeabutton, a.likeabutton:hover and all. this wil give it a good look. If we can make it like a list of Button then it will have a better Navbar feature, I tried this though, it position of these buttons does no remain same in Maximized and restored borwser.
Related
Im trying to make a Tumblr theme, and trying to make text go away from the border 20px, but it is also pushing the photos, videos, and other elements that are not text over, which is IS supposed to do, is there a way to only align the text?
.posts {
border:solid 1px #333333;
border-radius:15px 15px 15px 15px;
color:black;
margin-bottom:20px;
min-height:120px;
padding-left:20px;
text-align:left;
}
Thats my code.
http://puu.sh/83iTL.jpg
Thats what is happening, but I want to only align the text. Is this possible?
Thanks :)
EDIT: The entire code: http://pastebin.com/6q4hFyZL and the page is em202020.tumblr.com
<edit>
From your page : http://em202020.tumblr.com/
You could do:
.posts a:first-of-type img,
.posts iframe {
margin-left:-80px;
}
Or if you like it better :
.posts a:first-of-type img {
margin-left:-80px;
}
.posts iframe {
margin-left:-20px;
}
.</edit>
first guess answer irrelevant.
you can do :
.posts img:first-child {/* it will only select the first-child if it is an img tag */
margin-left:-20px;/* swallow that padding-left:20px; */
}
could you add css rules for .post img?
.posts {
border:solid 1px #333333;
border-radius:15px 15px 15px 15px;
color:black;
margin-bottom:20px;
min-height:120px;
padding-left:20px;
text-align:left;
}
#add this?#
.posts img {
padding:0px;
I'm trying to build a button that has some notification attached to it and am trying to emulate the facebook notification styles. A little red circle in the top right corner with a number in it.
I'm having some issues with it though. I can't seem to get the circle in the right place or to get the number to actually sit inside of it.
my button looks like this
<button class="btn btn-blue" id="noteBtn">Notes <span class="notification">1</span></button>
and I've tred to do this with my css
.notification:before {
content: ' \25CF';
font-size: 5em;
color:red;
}
here is a js fiddle I was working with
http://jsfiddle.net/N8cjB/5/
<span> and I don't get along, so I changed it to a <div>
Here you go: http://jsfiddle.net/aXvqW/3/
edit moved it out of the button a little bit, as requested.
To make it simple you don't need :before.
Add border-radius to the span, and to center the number use text-align: center
.notification {
border-radius: 30px;
text-align: center;
border: red;
width:20px;
height:10px;
background: red;
padding: 2px;
}
Check this in fiddle
Change <span> to <div> and make button position:relative; and notification position:absolute; using CSS then put it wherever you want.
Check it out here: http://jsfiddle.net/N8cjB/26/
Code
.button{
margin:20px 0px;
border:1px solid #e2e2e2;
background:#f9f9f9;
padding:5px 10px;
position:relative;
cursor:pointer;
transition:all 0.4s;
}
button:hover{
background:#333;
border:1px solid #333;
color:#fff;
}
.notifications {
position:absolute;
border-radius:2px;
font-size:14px;
background-color:red;
color:#fff;
padding:2px 5px;
top:-10px;
right:-10px;
}
<button class="button">
Notes<div class="notifications">1</div>
</button>
I'm pretty terrible at CSS/design so I'm struggling with some CSS here.
The page looks fine when loaded in a full screen browser at 1920x1080, however, as soon as you minimise or load the page on a mobile device the header content completely loses its placing but the body is fine.
Here's the CSS elements in question:
#header {
background: url(assets/header_bckg.gif) repeat-x ; height:120px;
}
#logo { display:inline-block; float:mid-left; padding:50px 0 0 570px; }
#logo { color:#FFFFFF; text-decoration:none; font-weight:bold; height:12px; font-size:20px; text-transform:uppercase;}
#login { display:inline-block; float:mid-right; padding-left:400px; padding-bottom: 7px; vertical-align:middle;}
#login{ color:#FFFFFF; text-decoration:none; font-weight:bold; height:12px; font-size:12px; text-transform:uppercase;}
#avatar { display:inline-block; position:absolute; margin-top:28px; float:mid-right; padding-left: 505px; padding-bottom: 15px; vertical-align:middle; }
#avatar_online {
background: linear-gradient(to bottom, #7BAFD6 5%, #506D92 95%) repeat scroll 0 0 transparent;
filter: none;
height: 50px;
width: 50px;
padding: 3px;
background-color: #545454;
border-radius: 3px 3px 3px 3px;
}
#avatar_offline {
background: linear-gradient(to bottom, #706C6B 5%, #4E4D4D 95%) repeat scroll 0 0 transparent;
filter: none;
height: 50px;
width: 50px;
padding: 3px;
border: 1px solid #545454;
border-radius: 3px 3px 3px 3px;
}
#avatar_playing {
background: linear-gradient(to bottom, #9BC861 5%, #789E4C 95%) repeat scroll 0 0 transparent;
filter: none;
height: 50px;
width: 50px;
padding: 3px;
border: 1px solid #545454;
border-radius: 3px 3px 3px 3px;
}
#menu {position: absolute; margin-left:550px; top:88px; color:#fff; text-align:center; margin-top:0px;}
#menu ul{ width:800px; margin:0 auto;list-style:none; padding:0; text-align:left;}
#menu ul li{display:inline}
#menu ul a { float:left; font-weight:bold; font-size:13px; text-decoration:none; color:#fff; padding:8px 10px; width:118px; text-align:center; text-transform:uppercase; background:url(assets/menu_active.gif) no-repeat bottom center; color:#232323; }
#menu ul a:hover {
color: #85B0DF;
cursor: pointer;
text-decoration: none;
}
As always, help is greatly appreciated.
Make sure your CSS and HTML are valid. As others have pointed out, there is no such thing as float:mid-left. Also, if your jsfiddle is indicative of your HTML, you're probably throwing browsers into quirksmode, because your HTML isn't structured properly (your first three tags need to be wrapped in a <head> tag, everything needs to be wrapped in an <html> tag, and the very first line should be <!DOCTYPE html>). Use the W3C's HTML validator and CSS validator to ensure your code is correct. Only then can you begin to fix other issues.
Learn what the various CSS declarations do. While your CSS may be valid, it doesn't mean it's right. This: #avatar { display:inline-block; position:absolute; margin-top:28px; float:mid-right; padding-left: 505px; padding-bottom: 15px; vertical-align:middle; } will technically validate once the float part is fixed. However, position: absolute and float are mutually exclusive -- float doesn't work when position is absolute or fixed. It will also help to learn how padding and margin affect the positioning of the element, and how they differ from one another. Finally, vertical-align doesn't work at all unless the element is a table cell, or display is set to table-cell (and the table-related set of display properties has its own quirks, so you can't necessarily just throw display: table-cell on an element and expect it to work a certain way).
Learn how elements naturally behave, so that you can work with them, instead of against them. Make sure you know how block, inline, and inline-block elements behave, and then work with them to get the layout you want, instead of throwing display: inline-block on everything and hoping for the best. The same goes for things like links (which will naturally have cursor: pointer on hover, unless you've disabled it elsewhere). Doing this will substantially clean up your CSS, making it easier to maintain. It may also clean up your HTML, as you find out what wrapper elements you truly need or can do without.
It's a little difficult to tell what the intended result should be at smaller or "mobile" widths, even with the screenshots that you included above.
It looks like there are a number of issues with your HTML, too. Be careful with things like the <font> tag (it's deprecated as of HTML4).
That said, fixing things in your CSS such as float: mid-right and float: mid-left, which are both invalid, should help a bit. Additionally, you might want to investigate CSS positioning - specifically, you'll likely want to use position: relative on your #header div.
Take a look at this slightly cleaned up version of your example - with background colors added to see where the header ends and what space the navigation occupies.
It looks like you have multiple issues but it is hard to tell without seeing your HTML as well. For starters, #menu { margin-left:550px; } is going to be part of the problem if you are trying to align on the left edge.. You should also know that float:mid-right; is not valid CSS. Check out http://www.w3schools.com/cssref/pr_class_float.asp for more information on float.
EDIT AFTER JSFIDDLE
Put your <div id='header'> inside of your <div id='main'> and change your #menu css to be:
`
#menu { margin: 0px auto; top:88px; color:#fff; text-align:center; width:800px;}
#menu ul{list-style:none; padding:0; text-align:left;}
`
Since you already have a width defined on your menu, you can use margin: 0 auto; to keep it centered based on window size. This will allow you to remove your margin-left and keep it from being pushed to the right.
http://www.pressedweb.com/beta/#portfolio
My anchor tags (highlighted in red dashed border) are being created by their own free will. I have no idea how to get rid of them and have been working at this for hours now.
Any ideas? Is this some freaky cross-browser bug? Or is it just a problem with my markup?
Thanks.
I thinkg this fix will work for you:
div .portfolio .works a img {
-moz-box-shadow:1px 2px 3px #222222;
opacity:0.8;
}
div .portfolio .works a {
border:1px solid #FF0000;
display:block;
float:left;
height:220px;
margin:0 10px 10px 0;
padding:4px;
width:280px;
}
Basically what i did was just switched some styling from img to anchor. You can see in this image that it does work ok.
I have to design a form with an input inside it. I use background image on the input so it would look like a button. Every time somebody clicks it, it would send $POST, a behavior I want to achieve.
But the problem is about the outline around the form. The outline shows when we click the form. It's minor, but it would be great to make the form (or input) lose the outline.
I test it using Firefox 3.6 and flock. Both of them show the outline behavior that I want to avoid.
<div id="hdrRight">
<form name="input" action="/home.html" method="post" id="buttonform" >
<input type="submit" value="" id="gohome" />
</form>
#----- CSS part
#hdrRight {
float:left; width:420px;
height:30px;
padding:0;
}
form#buttonform{
background-color:transparent;
border:none;
clear:both;
outline:none;
}
input#gohome{
padding:0;
margin:0;
background-color:transparent;
background-repeat:no-repeat;
width:280px;
height:60px;
border:none;
float:right;
background-image: url('images/gohome.png');
outline:none;
}
input#gohome:hover {
background-image: url('images/gohome_hover.png');
cursor:pointer;
outline:none;
}
Can you explain why this is happening and how to hide the outline?
Insert this in your CSS file for the site
form input
{
border: none;
outline: none;
}
And done.
Following Removing The Dotted Ouline:
This is default styling for the
purpose of accessibility. For folks
without the ability to use a mouse,
they still need some visual indicator
that they currently have a link active
(so, for example, they can press enter
to navigate to that link).
After creating a small test page locally, I see the following in Chrome:
Screen shot http://img714.imageshack.us/img714/7445/googlechromescreensnapz.jpg
With this CSS code (I added the borders so I can see where the form is and where the button is, note that the Lorem Ipsum is inside the form):
#hdrRight {
float:left; width:420px;
height:30px;
padding:0;
}
form#buttonform{
background-color:transparent;
border:1px solid black;
clear:both;
outline:none;
}
input#gohome{
padding:0;
margin:0;
background-color:transparent;
background-repeat:no-repeat;
width:280px;
height:60px;
border:1px solid black;
float:right;
background-image: url('images/gohome.png');
outline:none;
}
input#gohome:hover {
background-image: url('images/gohome_hover.png');
cursor:pointer;
border: 1px solid blue;
outline:none;
}
Actually, the "outline: none;" only works for anchor tags, not input tags or button tags (please try testing a sample HTML page in Firefox if you don't believe me).
Since the browser in question is Firefox, there is a browser specific rule for this.
input::-moz-focus-inner { border: 0; }
Appy...
border: none;
to your input