I have a problem with 2 buttons with CSS. I want to align two buttons next to each other. But CSS does not even like I wanted it. Because a button is bottom and a another button is top. See image: http://home.arcor.de/freedownload/buttonwrong.jpg
Maybe you have a solution for me? That would be fully appreciated.
Here is HTML Code:
<head>
<link href="formular.css" type="text/css" rel="stylesheet">
</head>
<span id="form1"><input type="text" id="form_username" name="username"></span><span id="form2"><input type="image" src="loginbutton.png"></span>
And here is CSS Code:
#form_username {
background: white url(username.png) left no-repeat;
background-position: 8px;
color: #adadad;
padding: 8px;
padding-left: 32px;
font-family: Verdana;
font-size: 12px;
width: 200px;
border: 1px solid #e4e4e4;
outline: 3px solid #efefef;
}
Try adding this style to your #form_username
float: left;
Demo
Related
The following CSS apparently results in the following Button. As you can see there is a weird gray plain button within the white padding. How do I fix this?
How do I make the gray go away?
.button_style {
background-color: white;
color: white;
padding: 15px 15px;
text-align: center;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
}
NOTE: The green space is the background, the white space and gray space are both clickable button.
Use border: 0 or border: none to remove that. By the way, what browser are you using?
HTML
<button class="button_style">hello</button>
CSS
.button_style {
border: 0;
background-color: white;
padding: 15px 15px;
text-align: center;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
}
This is what I had previously, which was giving me the plain gray button:
<p><span class="button_style">Website</span> </p>
I changed it to the following, which resolved my problem:
<input class="button_style" type="button" onclick="location.href = 'http://www.botequotes.com';" value="Visit Site" />
NOTE: JavaScript must be enabled in order to use 'onclick="location.href'
I have a button that I was to put on top of my background image, but whenever I put it down it fills the whole screen. Could someone show me how to put it at the top left of the page? https://www.codecademy.com/byteSurfer77914/codebits/cV0Szc/edit
I don't see your button anywhere, but look at a few of my comments in your code and you should get an idea of where to start modifying your code.
<!DOCTYPE html>
<html>
<p> <!--you can't have a p tag in the <head>-->
</p>
<head>
<link rel='stylesheet' href='style.css'/>
<script src='script.js'></script>
</head>
<body><p2><!--No such thing as a p2 tag-->
</p2>
</body>
</html>
Now your CSS
body {
background-image: url('http://i.ytimg.com/vi/E_gnIn3IBdI/maxresdefault.jpg');
background-repeat: no-repeat;
background-size: cover;
}
//You have multiple body tags. So your css above is being overwritten by this next block. You probably want this to be assigned to an a tag or a button.
body {
display: inline-block;
padding: 8px 13px;
background: #073763 url('http://dabuttonfactory.com/button.png?w=1&h=42&bgt=gradient&bgc=f40808&ebgc=073763') repeat-x;
background: -moz-linear-gradient(#f40808, #073763);
background: -o-linear-gradient(#f40808, #073763);
background: -webkit-linear-gradient(#f40808, #073763);
background: linear-gradient(#f40808, #073763);
border-radius: 8px;
color: #fff;
font: normal 400 26px/1 "Pacifico", cursive;
text-align: center;
text-shadow: 1px 1px 0 #000;
}
Ive used the CSS :after selector to create an arrow for my links. This works fine but now I want to do the same thing to form inputs.
If I use the same class on the submit button then the :after is ignored, im assuming because the element cant contain other other elements.
If I apply the class to a div containing the submit button then it looks fine, but the arrow and padding outside of the actual submit button isnt clickable.
Is there a solution to this?
http://jsfiddle.net/jn7Vj/5/
.button-style {
background: -moz-linear-gradient(top, #02AD85, #019975);
background: -webkit-linear-gradient(top, #02AD85, #019975);
background: linear-gradient(top, #02AD85, #019975);
padding: 0.7em;
border-radius: 0.5em;
border-bottom: 4px solid #003E30;
box-shadow: 0 2px 0px #252D42;
font-size: 15px; //findme
margin-top: 15px;
display: inline-block;
margin-top: 10px; //findme
border-top: none;
border-right: none;
border-left: none;
color: white;
font-size: 12px;
}
.button-style:after {
content: '';
display: inline-block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0.4em 0 0.4em 0.7em;
border-color: transparent transparent transparent #FFF;
margin-left: 0.75em;
}
.button-style input {
background: none;
border: none;
color: white;
font-size: 12px;
margin: 0;
padding: 0;
}
Here is a link
<form class="webform-client-form" enctype="multipart/form-data" action="/cchetwood/4/contact" method="post" id="webform-client-form-4" accept-charset="UTF-8"><div><div class="form-item webform-component webform-component-textfield" id="webform-component-full-name">
<input type="text" id="edit-submitted-preferred-times-to-contact-optional" name="submitted[preferred_times_to_contact_optional]" value="" size="60" maxlength="128" class="form-text">
<input type="submit" class="button-style" value="Submit">
<div class="button-style">
<input type="submit" value="Submit">
</div>
</form>
The CSS after pseudo element doesn't work on input fields (https://stackoverflow.com/questions/9840768/css-after-input-does-not-seem-to-work). Unfortunately your only solution here is to add the triangle as a background image on the input field or surround the field with something like a div or a span and add the after selector to that element.
As for your button, I would suggest changing it from an input element to a button, you can then apply the after selector to that.
EDIT
After reading your question again, I'm not sure if you want to add the triangle to your text input but here is a jsFiddle with the style added only to the buttons: http://jsfiddle.net/jn7Vj/9/
add for .button-style position:relative; padding: 0;
add for .button-style input padding: 0.7em 2em 0.7em 1em; --> you can change this sizes, main idea is move padding from .button-style to .button-style input
add next css-rules for .button-style:after
position:absolute;
top:50%;
right:10%;
margin: -0.2em 0 0 0;
<style type="text/css">
.button2 {
font-family: "Georgia Pro", Georgia;
background: #000;
color: #fff;
text-decoration: none;
padding: 5px 15px;
border: 3px solid #000;
font-size: 14px;
}
.button2:hover {
border: 3px solid #000;
background: #fff;
color:#000;
}
</style>
<span>ADD TO SHOPPING BAG</span>
This is my code. I want to make it so that when the user moves over the link, the hover box moves from the bottom or top and comes in? I am very new to CSS3 transitions and don't understand the whole s and width thing or height? The only thing is I want it more or less maybe fluid and better to handle responsive design.. think em and auto height??
jsFiddle: http://jsfiddle.net/Ysr7W/2/
Sample hover:
Although i think CSS isn't the right language for this effect, i did try to create something for you. The code isn't perfect, but it does what you requested: http://jsfiddle.net/Ysr7W/9/
The HTML structure i used:
<a href="#" class="button">
<span class="white">ADD TO SHOPPING BAG</span>
<span class="black">ADD TO SHOPPING BAG</span>
</a>
Greetings. I'm having troubles with the following legacy code. It's fine in everything except IE7, where the submit button disappears. Space is still left for it on the page, but it doesn't show. I've tried various ways of forcing hasLayout, but without success. Any suggestions?
XHTML (XHTML 1.0 Strict DOCTYPE):
<div id="headerFunctionality" class="clearfix">
<div id="headerSearch" class="clearfix">
<form action="http://foo.com" method="GET">
<label for="q">Search</label>
<input id="q" name="q" type="text" class="text" />
<input type="submit" id="btn_search" value="Search">
</form>
</div>
</div>
CSS:
#headerFunctionality {
float: right;
display: inline;
margin: 24px 14px 25px 0;
}
#headerSearch{
float: left;
margin-left: 20px;
width: auto;
}
#headerSearch label{
position: absolute;
top: -5em;
color: #FFF;
}
#headerSearch input.text{
width: 133px;
height: 18px;
border: 1px solid #999;
font-size: 0.69em;
padding: 2px 3px 0;
margin: 0 6px 0 0;
float: left;
}
/* Replace search button with image*/
input#btn_search {
width: 65px;
height: 20px;
padding: 20px 0 0 0;
margin: 1px 0 0 0;
border: 0;
background: transparent url(../images/btn.search.gif) no-repeat center top;
overflow: hidden;
cursor: pointer; /* hand-shaped cursor */
cursor: hand; /* for IE 5.x */
}
form>input#btn_search { /* For non-IE browsers*/
height: 0px;
}
input#btn_search:focus, input#btn_search:hover {
background: transparent url(../images/btn.search.over.gif) no-repeat center top;
}
have you made sure that display:block has been added to the css on the input? That oughta do the trick.
This sounds like a text-indent / image-to-replace-button issue in IE6.0 and 7.0. This solution has worked for me a few times.
Make a separate stylesheet for these browser versions and put this code in your header:
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->
In the CSS file, try something like this (you can change this to input#btn_search or whatever you're targeting specifically)
#btn_search {
width: 85px;
height: 20px;
padding: 20px 0 0 0;
margin: 1px 0 0 0;
border: 0;
background: transparent url(../images/btn.search.gif) no-repeat center top;
cursor: pointer; /* hand-shaped cursor */
cursor: hand; /* for IE 5.x */
font-size: 0;
color: #fff;
text-align: right;
text-indent: 0;
}
"color" should be the same colour as your background.
"width" should be like 20-30 pixels MORE than the width of your image.
More information and help can be found here: http://mydrupalblog.lhmdesign.com/theming-search-submit-button-css-cross-browser-compatible-solution
There are two things I can see from the code that could cause this:
1 - the image btn.search.gif is either completely transparent, the colour of the background or not found. The button has no background colour and no border, so would not appear if not for the image/text
2 - the button visibility is set to none, which leaves space on the page but doesn't render the button. Can you look at the styles in firebug?
I finally sorted this by removing the:
form>input#btn_search { /* For non-IE browsers*/
height: 0px;
}
I had always included this with CSS image replacements after reading it somewhere ages ago, but leaving it out doesn't seem to have affected any other browser and has fixed the problem in IE7.
if you add a name attribute, does it work?
The problem likely comes from the Guillotine Bug. It's a bug in IE6 and IE7 that occurs when certain mixtures of :hover, float, and layout are present (see link for details). I believe that inserting this:
<div class="clear"><!-- --></div>
right before </form> and then applying the following CSS to it:
.clear {clear:both;}
would fix it.