I have this login page made from HTML5 and CSS3 and I'm having trouble adjusting the Login Button. Every time I try to align it with the margin: attribute, it affects the "Welcome" text as well. How can I move the button only without affecting the text?
<!DOCTYPE html>
<head>
<style>
html {
background-image: url('http://image.downloadwap.co.uk/wallpapers/wp/18/nature/maligne-st_pJi7nPeU.jpg');
background-repeat: no-repeat;
min-height: 100%;
background-size: cover;
}
h1{
color: #ffffff;
font-size: 40px;
margin-top: 20px;
}
#Login{
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
background-color: #0095f0;
display: inline-block;
border: none;
color: #ffffff;
font-weight: bold;
border-radius: 4px;
size: 15px;
}
</style>
</head>
<body>
<form action="oof">
<button id="Login" >
Login
</button>
</form>
<h1 align="center">Hello<br /> Welcome!</h1>
<img src="http://image.downloadwap.co.uk/wallpapers/wp/18/nature/maligne-st_pJi7nPeU.jpg"
width="100%" height="100%" size=">
</body>
Where would you like to put the button? You could try in the button css:
position: absolute;
top: 20px;
right: 20px;
Also have a look at this css-tricks article on position
Use of absolute defines how an element is positioned in a document.
you can use left and right for their respective position
html {
background-image: url('http://image.downloadwap.co.uk/wallpapers/wp/18/nature/maligne-st_pJi7nPeU.jpg');
background-repeat: no-repeat;
min-height: 100%;
background-size: cover;
position: relative;
}
h1{
color: #ffffff;
font-size: 40px;
margin-top: 20px;
}
#Login{
position: absolute;
padding: 10px 20px;
text-align: center;
background-color: #0095f0;
display: inline-block;
border: none;
color: #ffffff;
font-weight: bold;
border-radius: 4px;
size: 15px;
left: 50px
}
<form action="#">
<button id="Login" >
Login
</button>
</form>
<h1 align="center">Hello<br /> Welcome!</h1>
<img src="http://image.downloadwap.co.uk/wallpapers/wp/18/nature/maligne-st_pJi7nPeU.jpg"
width="100%" height="100%" size=">
Related
EDIT: The background is simply an image & the section where I place the image is the one I have given
My webpage currently looks like this and I have indicated where I want the button, however I'm very new to coding in general and not sure how to achieve this.
Picture of website page:
This is my html code, very simple just needed to add the button
<section class="slide kenBurns">
<div class="content">
<div class="container">
<div><p class="ae-2">
</p></div>
<div class="wrap">
<div class="fix-7-12">
<!-- <h1 class="ae-1">Messes Make Memories</h1> -->
</div>
</div>
</div>
</div>
<img
src="assets/img/background/flood2.png"
width="1450"
height="850"
></img>
</section>
well, try this one code
<!DOCTYPE html>
<html>
<head>
<style>
.img {
width:100%;
height: auto;
top:0;
left:0;
position: relative;
z-index: 1;
}
.anybutton {
top:11%;
left:55%;
width:100px;
height:40px;
position: absolute;
z-index: 2;
background: orange;
}
</style>
</head>
<body style="text-align:center; margin: 0px;">
<div class="mycenter" id="">
<img src="assets/img/background/flood2.png" class="img" id="img" />
<input type="button" class="anybutton" id="myab" value="Right Here" />
</div>
</body>
</html>
There 2 types of a buttons
There the real button. Its used to fire an event for JavaScript. It works as in the example below and can by styled like below. You can insert it whereever you want.
button {
background-color: blue;
width: 200px;
font-size: 20px;
padding: 10px;
border-radius: 5px;
border: 3px solid yellow;
color: white;
cursor: pointer;
}
<button id="ID">I'm a Button</button>
Then there is the Pseudo-Button. Its not a real button. It is just a div box to style a link like a button:
.button {
background-color: blue;
width: 200px;
font-size: 20px;
padding: 10px;
border-radius: 5px;
border: 3px solid yellow;
color: white;
text-align: center;
}
<div class="button">I'm a Button</div>
Insert a <button> tag in the same parent div which has code for this particular section
Set the css property of the parent element to position: relative
Set the css property for the <button> to position: absolute
Lastly, use
top : 40px;
right : 100px;
for the css property of button tag
Note: Change the value of top and right property as per convenience.
.button {
border: none;
padding: 15px 42px;
border-radius: 15px;
color: magenta;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 8px 10px;
cursor: pointer;
}
.button3 {
background-color: pink;
left: 50%;
position: absolute;
}
<button class="button button3">Button 3</button>
.button {
border: none;
padding: 15px 42px;
border-radius: 15px;
color: magenta;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 8px 10px;
cursor: pointer;
}
.button3 {
background-color: pink;
left: 50%;
position: absolute;
}
I'm wondering why the elements in my nav bar appear to have blank space above them? I've checked the margin and padding and there doesn't seem to be an issue, but there is a large space above my #logo and #searchbox which is messing up my layout, how can I get rid of the space above the elements?
Thanks a lot!
Here's my Code:
li {
display: inline-block;
}
ul {
display: inline-block;
margin: 0px;
padding: 0px;
}
#main_nav, logo {
display: inline-block;
padding: 0px;
margin: 0px;
}
nav li a:link {
font-weight: bold;
display: inline-block;
text-decoration: none;
font-family: times;
font-size: 24px;
list-style: none;
padding: 5px;
border: 2px solid black;
border-radius: 5px;
color: black;
}
nav li a:visited {
color: rgba(0,0,0,0.7);
}
nav li a:hover {
background-color: rgba(0,0,0,0.6);
color: white;
}
nav li a:active {
color: black;
border-color: black;
}
nav {
width: 1000px;
height: 130px;
background-color: rgba(255,255,255,0.7);
padding: 10px;
margin: 0px auto;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
input[type=search] {
font-size: 16px;
}
#searchbox {
position: absolute;
right: 0px;
top: 0px;
}
#searchbox_div {
position: relative;
display: inline-block;
padding: 0;
width: 100%;
}
#logo {
display: inline-block;
width: 200px;
font-family: arial;
margin: 0px;
padding: 0px;
font-size: 26px;
}
#logo_jeff, #logo_arries, #logo_website {
margin: 0px;
}
#logo_jeff {
letter-spacing: 35.5px;
}
#logo_arries {
letter-spacing: 11px;
}
#logo_website {
letter-spacing: 4px;
}
#main_content {
width: 1000px;
min-height: 600px;
display: block;
background-color: rgba(255,255,255,0.7);
margin: 0 auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
position: relative; top: 0px;
padding: 10px;
}
#here_you_can_learn {
font-size: 47px;
color: gray;
margin: 0 auto;
margin-bottom: 10px;
text-align: center;
}
#welcome {
text-align: center;
color: rgb(0, 0, 110);
font-size: 100px;
margin: 0;
padding: 10px 10px 20px 10px;
}
#down_arrow {
height: 50px;
margin: auto;
display: block;
padding: 10px;
}
#most_frequent {
width: 600px;
vertical-align: top;
display: inline-block;
background-color: rgba(0,0,0,0.1);
border-radius: 3px;
}
#m_f_heading {
font-size: 30px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#m_f_show_more {
font-size: 20px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#recent_activity {
width: 375px;
display: inline-block;
background-color: rgba(0,0,0,0.1);
border-radius: 3px;
}
#r_a_heading {
font-size: 30px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_body {
font-size: 15px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_show_more {
font-size: 20px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_show_more_link:visited {
color: black;
}
#r_a_show_more_link:hover {
color: gray;
background-color: rgba(0,0,0,0.9);
}
#r_a_show_more_link:active {
color: black;
}
body {
background-image: url("../pictures/jeff_skiing.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
min-height: 500px;
margin: 0px;
padding: 0px;
}
aside {
position: absolute;
right: 0px;
background-color: rgba(255,255,255,0.9);
width: 170px;
height: 600px;
margin: 0;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
padding: 10px;
}
<!DOCTYPE html>
<head>
<title>Home | Jeff's Website</title>
<link href="styles/main_navigation.css" type="text/css" rel="stylesheet" />
<link href="styles/body.css" type="text/css" rel="stylesheet" />
<link href="styles/main_content.css" type="text/css" rel="stylesheet" />
</head>
<body>
<!--Main Nav-->
<header>
<nav>
<div id="searchbox_div">
<form action="" id="searchbox">
<input id="search_input" type="search" name="searchmysite" placeholder="Search my Site!">
<input type="submit" value="Search!">
</form>
</div>
<div id="logo">
<h1 id="logo_jeff">JEFF</h1>
<h1 id="logo_arries">ARRIES</h1>
<h1 id="logo_website">WEBSITE</h1>
</div>
<div id="main_nav">
<ul>
<li>Home</li>
<li>Blog</li>
<li>Trips</li>
<li>Politics</li>
<li>Pictures</li>
<li>Videos</li>
<li>Computer</li>
<li>Misc</li>
</ul>
</div>
</nav>
</header>
<!--Welcome to jeff's website-->
<div>
<h2 id="welcome">Welcome to my Website!</h1>
<a href="#here_you_can_learn">
<img src="pictures/down_arrow.png" id="down_arrow"/>
</a>
</div>
<!--right side nav-->
<aside>
<p>this is aside</p>
</aside>
<!--Main Content-->
<div id="main_content">
<h2 id="here_you_can_learn">Here you can learn about me and my adventures!</h2>
<!--Most Frequently visited pages: on left side of page-->
<div id="most_frequent">
<p id="m_f_heading">Most frequently visted pages!</p>
<p id="m_f_show_more">Show More</p>
</div>
<!--Recent Activity: on the right side of page-->
<div id="recent_activity">
<p id="r_a_heading">Recent Activity</p>
<p id="r_a_body">test</p>
<p id="r_a_show_more">Show More</p>
</div>
</div>
</body>
Your <nav> element has a padding of 10px.
EDIT: The absolutely positioned search form seems to be causing the problem. I made the following changes and the space went away:
#searchbox_div {
position: relative;
display: block;
padding: 0;
width: 100%;
}
#searchbox {
position: relative;
float: right;
}
#logo {
display: inline-block;
width: 200px;
font-family: arial;
margin: 0px;
padding: 0px;
font-size: 26px;
float: left;
}
#main_nav{
display: inline-block;
padding: 0px;
margin: 0px;
margin-top: 4em;
margin-left: 1em;
}
I noticed that you`re not using a css reset. A CSS Reset (or “Reset CSS”) is a short, often compressed (minified) set of CSS rules that resets the styling of all HTML elements to a consistent baseline.
In case you didn’t know, every browser has its own default ‘user agent’ stylesheet, that it uses to make unstyled websites appear more legible. For example, most browsers by default make links blue and visited links purple, give tables a certain amount of border and padding, apply variable font-sizes to H1, H2, H3 etc. and a certain amount of padding to almost everything. Ever wondered why Submit buttons look different in every browser?
Obviously this creates a certain amount of headaches for CSS authors, who can’t work out how to make their websites look the same in every browser.
Using a CSS Reset, CSS authors can force every browser to have all its styles reset to null, thus avoiding cross-browser differences as much as possible.
Also, sometimes if I have a problem with blank spaces, I run the html all together so there are no blank spaces between the tags. To make it look neat, I insert carriage returns in the middle of the html tag.
By default, most browsers have an 8px or so margin that is built in or "Added" to the page style. The super easy way to eliminate this is through CSS. Simply use:
html,body{
margin:0;
}
You can also add:
padding:0;
If it's still giving you problems!
You appear to need to reset/normalize your css as that
html,body{
margin:0;
padding:0;
}
The <nav> element is configured to have 10 pixels of padding on all sides.
I'm just getting started on HTML5 and CSS3 (working through The Odin Project) and the first project is to duplicate the Google homepage. I was able to get everything set up, but it seems like my CSS is somehow preventing my header links from acting like links. You can't click on them and the hover effects don't work.
They work fine on my footer and my nav text-decoration is applied, so I'm not sure what's making it act like it's not a link. I've only tested it in Chrome, so I'm not even worried about compatability issues yet. Am I doing the HTML5 wrong? Or is it some kind of weird rule like you can't use hover effects with inline-block or something? I'm not familiar enough with it yet to have learned all those nuances yet...
Here's the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Google</title>
<link rel="stylesheet" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
</head>
<body>
<nav>
<ul>
<li>+Mara</li>
<li>Gmail</li>
<li>Images</li>
<li><img src="images/options.png" width="35px"></li>
<li><img src="images/bell.png" width="35px"></li>
<li><img src="images/plus.png" width="35px"></li>
<li><img src="images/photo.jpg" width="40px" class="rounded_img"></li>
</ul>
</nav>
<div class="container">
<img class="logo" src="https://www.google.com/images/srpr/logo11w.png" width="320px"/>
<center><form action="#" method="post" name="google_search_form">
<input type="search" name="googlesearch" class="search"><br/><br/>
<input type="submit" value="Google Search" class="button">
<input type="submit" value="I'm Feeling Lucky" class="button">
</form></center>
</div> <!--End container-->
<footer>
<ul>
<span class="left"><li>Advertising</li></span>
<span class="left"><li>Business</li></span>
<span class="left"><li>About</li></span>
<span class="right"><li>Settings</li></span>
<span class="right"><li>Terms</li></span>
<span class="right"><li>Privacy</li></span>
</ul>
</footer>
</body>
</html>
And the CSS:
.container{
position: relative;
vertical-align: middle;
}
.logo {
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 270px;
clear: right;
}
.search {
width: 650px;
height: 35px;
margin-top: 40px;
font-size: 27px;
background: url('images/voice.gif') 97% 50% no-repeat;
opacity:0.6;
background-size: 17px;
border: blue solid 1px;
}
.button {
font-family: Helvetica, Roboto, sans-serif;
font-weight: bold;
color: black;
background: #f2f2f2;
border: #d6d6d6 solid 1px;
border-radius: 2px;
width: 140px;
height: 40px;
}
nav {
width: 600px;
height: 30px;
font-size: 1em;
font-family: Helvetica, Roboto, sans-serif;
font-weight: lighter;
text-align: center;
position: relative;
float: right;
}
nav ul {
height: auto;
padding: 0;
margin: 0;
}
nav li {
display: inline-block;
padding: 10px;
vertical-align: middle;
}
.atext {
text-decoration: none;
color: black;
}
.atext: hover {
text-decoration: underline;
background-color: yellow;
}
.aicon {
opacity: 0.6;
}
.aicon:hover {
opacity: 1.0;
}
footer {
width: 102%;
height: 40px;
left: -20px;
right: -20px;
font-size: 1em;
font-family: Arial, sans-serif;
position: absolute;
bottom: 0;
background: #f2f2f2;
border: #d6d6d6 solid 1px;
}
footer ul {
height: auto;
padding: 0;
margin: 0;
}
footer li {
display: table-cell;
padding: 10px;
vertical-align: middle;
}
footer li a {
text-decoration: none;
color: gray;
}
.left {
float: left;
margin-left: 20px;
}
.right {
float: right;
margin-right: 20px;
}
.rounded_img {
border-radius: 20px;
}
Any help will be greatly appreciated. Thanks!
Oh, and I haven't even started on JavaScript yet, so I'd like to avoid JavaScript if possible!
Here is a fiddle: http://jsfiddle.net/Lvfmwhvu/
The problem is your container element, if you remove the position relative it will work, but not sure if it will be maintained in the same position, but you can check it and modify your css accordingly:
.container{
vertical-align: middle;
}
Hope this helps.
Your main container isn't clearing the floated navbar. Because it falls later in your document, it has a higher layer index and covers the navbar. Try this:
.container {
...
clear: both;
}
Demo
So I've spent some time trying to figure this one out, but I've ended up turning to StackOverflow for help. I'm trying to get my search bar and go button to display on one line and am having trouble doing this.
The html code for the inputs is:
<nav class="sidebar">
<input type="text" id="search" placeholder="search">
<input type="button" name="button" value="Go" class="goButton">
</nav>
And the CSS for the two inputs is as follows:
#content .sidebar #search {
width: calc( 100% - 45px );
border-radius: 0px;
height: 42px;
text-align: center;
color: #333333;
font-size: 14px;
margin-bottom: 21px;
}
/* Go button for search*/
#content .sidebar .goButton {
position: relative;
top: -48px;
width: 45px;
background-color: #BA2022;
color: #F3EBDE;
border-style: none;
text-transform: uppercase;
margin-top: 8px;
border-radius: 0px;
height: 42px;
text-align: center;
font-size: 14px;
margin-bottom: 21px;
}
Can anyone suggest a fix for this? Currently, the inputs display as follows:
Thanks in advance.
It gets aligned when the text box is a little smaller and the margin-top of the button is removed:
#content .sidebar #search {
width: calc( 100% - 60px );
border-radius: 0px;
height: 42px;
text-align: center;
color: #333333;
font-size: 14px;
margin-bottom: 21px;
}
/* Go button for search*/
#content .sidebar .goButton {
position: relative;
width: 45px;
background-color: #BA2022;
color: #F3EBDE;
border-style: none;
text-transform: uppercase;
margin-top: 8px;
border-radius: 0px;
height: 42px;
text-align: center;
font-size: 14px;
margin-bottom: 21px;
}
FIDDLE: http://jsfiddle.net/s0y93L87/
try put this:
#content .sidebar #search {
border-radius: 0px;
height: 42px;
text-align: center;
color: #333333;
font-size: 14px;
margin-bottom: 21px;
float: left;
width: 200px;
}
/* Go button for search*/
#content .sidebar .goButton {
position: relative;
top: -48px;
width: 45px;
background-color: #BA2022;
color: #F3EBDE;
border-style: none;
text-transform: uppercase;
border-radius: 0px;
height: 48px;
text-align: center;
font-size: 14px;
margin-bottom: 21px;
float: left;
}
There are a few reason why applyingwidth: calc( 100% - 45px ); to the text input isn't leaving enough room for the 45px-width button:
The browser is adding padding to the text input (+2 pixels for left and right padding) (at least in Chrome)
The browser is adding a border to the text input (+2 pixels for left and right borders) (at least in Chrome)
Because the text input and button are not on the same line, there is a single whitespace character separating them, adding more width.
Define explicit padding and border for the text input so browsers can't reset it, and adjust the 45px to 47px accordingly (to account for left and right 1px borders):
#content .sidebar #search {
border:1px solid #aaa;
padding:0;
width: calc( 100% - 47px );
}
And remove the whitespace between the two inputs by putting them on the same line in the HTML:
<input type="text" id="search" placeholder="search"><input type="button" name="button" value="Go" class="goButton">
I also removed the top: -48px from your .goButton CSS.
Using a CSS reset can help eliminate this kind of problem of browsers adding unexpected styles.
Result: http://jsfiddle.net/k305a0jo/1/
Have you tried put it inside a table? something like this:
<nav class="sidebar">
<table>
<tr>
<td class='search'>
<input type="text" id="search" placeholder="search">
</td>
<td class='go'>
<input type="button" name="button" value="Go" class="goButton">
</td>
</tr>
</table>
</nav>
.sidebar #search {
width: calc(100%-45px);
border-radius: 0px;
height: 42px;
text-align: center;
color: #333333;
font-size: 14px;
}
/* Go button for search*/
.sidebar .goButton {
top:-48px;
background-color: #BA2022;
width:45px;
color: #F3EBDE;
border-style: none;
text-transform: uppercase;
border-radius: 0px;
height: 42px;
text-align: center;
font-size: 14px;
}
td.search {
}
td.go {
}
tr {
width: calc(100%);
margin-bottom: 21px;
}
Here is a jsfiddle:
http://jsfiddle.net/yzmkxfa7/4/
The problem I am having is I am trying to stop the text overflowing from the right, I have tried setting padding-right to try and address the issue but still no luck. How can I go around this?
Here is my html, css file.
.html
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<link rel="stylesheet" href="css/testing.css" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700' rel='stylesheet' type='text/css' />
<style type="text/css">
/* Importing Nomralized CSS */
#import url('css/normalize/normalize.css');
</style>
</head>
<body>
<div id="container">
<div class="header"></div>
<div class="content-main-top" id="dpb">
<p class="para">
Our new website is currently under<br/> development. It won't take long, please
</p>
<span id="clr" class="size" style="margin-top: 60px;"><h1 style="margin-top: 4px; margin-bottom: 3px;">sit tight!</h1></span>
<p class="para" style="margin-bottom: 10px; color: #808285; margin-top: 30px; font-weight:">
Fill in your email address and we<br/>
will let you know when we launch.
</p>
<input type="email" class="bubble_email"><input type="submit" name="sub" value="Notify me!" class="button">
</div>
<div class="chairs" id="dpb"></div>
<!-- end of container -->
</div>
<!-- Begin Footer -->
<div id="footer">
<!-- Start Container -->
<div id="container">
<!-- Footer Content -->
<div class="content-main-bottom">
<p id="clear_footer">
<span style="color: #808285; font-weight: bolder; line-height: 30px; font-size: 17px;">Get in touch</span><br/>
<!-- Tweet Pic -->
<span class="para">Phone: </span><span style="color: #808285; font-weight: bolder">0845 130 8022</span><br/>
info#titanhealthcare.co.uk
</p>
<p style="font-weight: lighter; font-size: 13px; color: #939598">
© Titan Healthcare Limited 2014. All rights reserved.
</p>
</div>
<!-- End of content for footer -->
</div>
<!-- End of Container -->
</div>
<!-- End of footer -->
</body>
</html>
body {
font-family: 'Open Sans', sans-serif;
}
.para {
color: #7c7b7b;
font-size: 15px;
margin-bottom: 0px;
margin-top: 6px;
}
.para_b {
color: #808285;
}
/*Misc ID'S */
#clr {
color: #34a4b5;
}
/*Size class*/
.size {
font-size: 43px;
}
.button {
background-color:transparent;
outline: none;
border: 0px solid;
margin-left: 1px;
color: #34a4b5;
font-weight: bold;
}
a:link {
color: #34a4b5;
text-decoration: none;
}
#dpb {
display: inline-block;
float: left;
}
#clear_footer {
clear: both;
padding-top: 30px;
}
#container {
width: 980px;
margin: 0 auto;
}
#footer {
background-image: url('img/bottom_bar.jpg');
width: 100%;
height: 3px;
clear: both;
}
.content-main-bottom {
padding-bottom: 10%;
}
/* Images .classes */
.header {
background-image: url('img/titan_header.jpg');
background-repeat: no-repeat;
padding-top: 40px;
/*Size properties */
width: 980px;
height: 143px;
}
.bubble_email {
background-image: url('img/speech_bubble.jpg');
background-repeat: no-repeat;
/*Size properties*/
width: 244px;
height: 49px;
/*Misc Prop*/
background-repeat: none;
border: none;
outline: none;
padding-top: 0px;
margin-top: 6px;
padding: 0 6px;
}
.chairs {
background-image: url('img/titan_chairs.jpg');
background-repeat: no-repeat;
/*Size properties*/
width: 559px;
height: 400px;
margin-left: 50px;
margin-top: 40px;
}
.tweet {
background-image: url('img/tweet_button.jpg');
background-repeat: no-repeat;
/*Size properties*/
width: 368px;
height: 72px;
float: right;
}
Thank you
Okay so the issue here is that you need to understand that when you add padding-right:20; and the width is set to 244px then your input field then becomes 264px wide with a right padding of 20px, not 244px with a right padding of 20px as you would assume. So, to fix your issue you need to add a right padding of e.g. 10px and make the width of your input 234px.
Basically as long as your input width + padding-left + padding-right is equal to the width of your background image you will get the desired effect.
Solution (assuming your image is 250px wide):
.bubble_email {
background-image: url('img/speech_bubble.jpg');
background-repeat: no-repeat;
height: 49px;
background-repeat: none;
border: none;
outline: none;
margin-top: 6px;
width: 238px;
padding: 0 6px;
}
Note the width being 238 + a padding of 6 on the left and 6 on the right = 250px.
Hope this helps.
Put the sppech bubble image in one class, like so:
.speechBubbleImage {
background-image: url('img/speech_bubble.jpg');
}
Then put the rest in another class, and change the width, like so:
.innerSpeechBubble
{
background-repeat: no-repeat; /*Size properties*/
width: 200px; /* This is what you change */
height: 49px; /*Misc Prop*/
background-repeat: none; /* This is redundant and I recommend don't use this */
border: none;
outline: none;
padding-top: 0px;
margin-top: 6px;
padding: 0 6px;
}
Without the img/speech_bubble.img image, its hard to tell you what width to put.
Now use this in HTML, like so
<div class='.speechBubbleImage">
<input type="email" class="innerSpeechBubble">
</div>
<input type="submit" name="sub" value="Notify me!" class="button">
This should work. Let me know what you get. And give the image if possible, so that i can put the exact width.
.bubble_email
{
background-image: url('img/speech_bubble.jpg');
background-repeat: no-repeat; /*Size properties*/
width: 244px;
height: 49px; /*Misc Prop*/
background-repeat: none;
border: none;
outline: none;
padding-top: 0px;
margin-top: 6px;
padding: 0 6px;
}
You just decrease the width to 240 or less in .bubble_email
OR
Add padding-right: 15px; or more in .bubble_email
OR
Stretch the background image like,
background-size:260px 50px;
background-repeat:no-repeat;
Try to Use overflow hidden that may solve this problem.