I am a beginner at CSS's programming and have a question about text positioning. I have to design download button in CSS without symbol font or images in it. I've done that, but text doesn't want to fit inside box (picture 1).
This is my CSS code:
#download{
background-color: rgb(0, 230, 0);
border-top-left-radius: 100px;
border-top-right-radius: 100px;
border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px;
width: 235px;
height: 65px;
}
#download p{
font-family: 'Roboto Slab', serif;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
font-size: 30px;
color:white;
padding-left: 50px;
padding-bottom: 300px;
}
#ikonad{
border-radius: 150px;
border-color: rgb(0, 179, 0);
border-width: 3px;
border-style: solid;
background-color: rgb(242, 242, 242);
height: 58px;
width: 58px;
padding-left: 1px;
padding-top: 1px;
}
.kvadrat{
width: 15px;
height: 20px;
background: rgb(0, 179, 0);
margin-left: 20px;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
padding-top: 8px;
}
#trikotnik {
padding-top: 10px;
margin-left: 12.5px;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 20px solid rgb(0, 179, 0);
}
This is my HTML code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Gumbi</title>
</head>
<body>
<div id="download">
<div id="ikonad">
<div class="kvadrat"><p>Download</p></div>
<div id="trikotnik"></div></div>
</div>
I would be glad, if anyone told me, what I did wrong. Thank you very much! :)
Just remove the margin from your <p> element:
#download p {
margin: 0;
}
(Side question: what is padding-bottom: 300px doing in there? Is that really necessary?)
Here's your markup with the added CSS rule:
#download {
background-color: rgb(0, 230, 0);
border-top-left-radius: 100px;
border-top-right-radius: 100px;
border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px;
width: 235px;
height: 65px;
}
#download p {
font-family: 'Roboto Slab', serif;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
font-size: 30px;
color: white;
margin: 0;
padding-left: 50px;
padding-bottom: 300px;
}
#ikonad {
border-radius: 150px;
border-color: rgb(0, 179, 0);
border-width: 3px;
border-style: solid;
background-color: rgb(242, 242, 242);
height: 58px;
width: 58px;
padding-left: 1px;
padding-top: 1px;
}
.kvadrat {
width: 15px;
height: 20px;
background: rgb(0, 179, 0);
margin-left: 20px;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
padding-top: 8px;
}
#trikotnik {
padding-top: 10px;
margin-left: 12.5px;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 20px solid rgb(0, 179, 0);
}
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
<div id="download">
<div id="ikonad">
<div class="kvadrat">
<p>Download</p>
</div>
<div id="trikotnik"></div>
</div>
</div>
Related
Need to make lines opposite to each other, now the lines are under each other. Tried a lot of methods but nothing work, please help! Really stuck with that. See the code below and a picture that shows the desired result, idk what to do. Tried to add margin; top; bottom; padding, these methods didn't do anything.
Here's the CSS and HTML:
.crypto-card{
width: 250px;
height: 230px;
background: white;
-webkit-box-shadow: 0px 3px 8px 0px rgba(194,192,194,1);
-moz-box-shadow: 0px 3px 8px 0px rgba(194,192,194,1);
box-shadow: 0px 3px 2px 0px rgba(240,240,240,1);
border-radius: 6px;
transition: .3s;
margin-left: 15px;
margin-right: 25px;
margin-bottom: 20px;
border: 1px solid rgb(245, 245, 245);
}
.crypto-card:hover{
transform: translateY(-1px);
-webkit-box-shadow: 0px 3px 6px 2px rgba(240,240,240,1);
-moz-box-shadow: 0px 3px 6px 2px rgba(240,240,240,1);
box-shadow: 0px 3px 6px 2px rgba(240,240,240,1);
}
.crypto-card .body{
width: 100%;
border-top: 1px solid rgb(240, 240, 240);
padding: 10px;
}
.crypto-card .logo-sprite{
width: 29px;
height: 29px;
margin: 10px;
}
.crypto-symbol{
border-left: 1px solid rgb(220, 220, 220);
padding-left: 10px;
font-size: 1.3rem;
/* font-family: 'Loto', sans-serif; */
letter-spacing: 5px;
text-transform: uppercase;
/* color: #3c3c3c; */
font-weight: 500;
color: rgb(70, 70, 70);
padding-bottom: 4px;
position: relative;
top: 4px;
}
.crypto-card .price-label{
width: 100%;
text-align: left;
color: rgb(190, 190, 190);
font-weight: 500;
font-size: .8rem;
}
.crypto-card .price{
font-size: 1.5rem;
font-weight: 100;
right: -60px;
top: 4px;
text-align: right;
}
<div class="d-flex justify-content-left" style="margin-top: 10px; padding-left: 5%; padding-right: 5%;">
<div class="row" style="">
<div class="crypto-card">
<span>
<img src="https://s2.coinmarketcap.com/static/img/coins/64x64/1.png" class="logo-sprite" width="16" height="16" alt="Bitcoin">
<span class="crypto-symbol">BTC</span>
</span>
<div class="body">
<span class="price">$3865.58</span>
<div class="price-label"><span class="title">Price</span></div>
<span class="volume">$67,585,868,137</span>
</div>
</div>
But I need it similar to this
Using a display: grid would make this super easy.
Here's and example:
* {
box-sizing: border-box;
}
.container {
width: 500px;
margin: auto;
padding: 20px;
}
.card {
display: grid;
grid-template-columns: 50px auto;
grid-template-rows: 50px 200px;
border: 1px solid #eee;
border-radius: 5px;
}
.card .image {
display: block;
align-self: stretch;
justify-self: stretch;
padding: 5px;
border: 1px solid #eee;
border-top: 0;
border-left: 0;
}
.card .header {
padding: 10px;
border-bottom: 1px solid #eee;
}
.card .side {
border-right: 1px solid #eee;
white-space: nowrap;
display: flex;
align-items: center;
}
.card .side .text {
rotate: -90deg;
translate:-12px 0;
}
.card .content {
padding: 10px;
}
<div class="card">
<img
src="https://s2.coinmarketcap.com/static/img/coins/64x64/1.png"
class="image"
alt="Bitcoin"
/>
<div class="header">BTC is a scam</div>
<div class="side">
<div class="text">BIG SCAM</div>
</div>
<div class="content">content in here</div>
</div>
Please refer to attached
image
How can hide the red line (its a span) from out of div?
Margin left not worked because the line left the other side.
How can fix it?
#keyframes linewidth1 {
0%{
border-bottom: 4px solid white;
width: 0%;
}
25%{
border-bottom: 4px solid white;
border-bottom: 4px solid white;
width: 0%;
}
60%{
border-bottom: 4px solid white;
border-bottom: 4px solid white;
}
75%{
border-bottom: 2px solid transparent;
border-bottom: 2px solid transparent;
}
90%{
width: 100%;
border-bottom: 2px solid #e10000;
border-bottom: 2px solid #e10000;
}
}
.line2 {
left: 0;
animation: linewidth1 3s;
border-bottom: 2px solid #e10000;
width: 100%;
float: left;
height: 1px;
display: inline-block;
margin-top: 57px;
}
.single_style {
position: relative;
padding-top: 15px;
background-color: rgb(238, 238, 234);
background-repeat: repeat;
background-size: auto auto;
border-bottom-color: cadetblue;
border-bottom-left-radius: 57px;
border-bottom-right-radius: 11px;
border-bottom-style: solid;
border-left-color: cadetblue;
border-left-style: solid;
border-right-color: cadetblue;
border-right-style: solid;
border-top-color: cadetblue;
border-top-left-radius: 170px;
border-top-right-radius: 39px;
border-top-style: solid;
border-top-width: 4px;
border-right-width: 2px;
border-left-width: 1px;
border-bottom-width: 1px;
margin-left: 20px;
margin-right: 3%;
margin-top: auto;
max-width: 1200px;
margin-bottom: 5px;
margin-top: 5px;
}
<body>
<div class="single_style" style="height:200px;">
<span class="line2"></span>
</div>
</body>
How can hide the red line (its a span) from out of div?
Margin left not worked because the line left the other side.
How can fix it?
added overflow: hidden; to .single_style
.line2 {
left: 0;
animation: linewidth1 3s;
border-bottom: 2px solid #e10000;
width: 100%;
float: left;
height: 1px;
display: inline-block;
margin-top: 57px;
}
.single_style {
position: relative;
padding-top: 15px;
background-color: rgb(238, 238, 234);
background-repeat: repeat;
background-size: auto auto;
border-bottom-color: cadetblue;
border-bottom-left-radius: 57px;
border-bottom-right-radius: 11px;
border-bottom-style: solid;
border-left-color: cadetblue;
border-left-style: solid;
border-right-color: cadetblue;
border-right-style: solid;
border-top-color: cadetblue;
border-top-left-radius: 170px;
border-top-right-radius: 39px;
border-top-style: solid;
border-top-width: 4px;
border-right-width: 2px;
border-left-width: 1px;
border-bottom-width: 1px;
margin-left: 20px;
margin-right: 3%;
margin-top: auto;
max-width: 1200px;
margin-bottom: 5px;
margin-top: 5px;
overflow: hidden;
}
<body>
<div class="single_style" style="height:200px;">
<span class="line2"></span>
</div>
</body>
Simply create this line using background:
.single_style {
background:linear-gradient(#e10000,#e10000) 0 57px/100% 2px no-repeat;
animation: linewidth1 3s;
padding-top: 15px;
background-color: rgb(238, 238, 234);
border-radius:170px 39px 11px 57px;
border-top: 4px solid;
border-right: 2px solid;
border-left: 1px solid;
border-bottom: 1px solid;
border-color: cadetblue;
margin:5px 3% 5px 20px;
max-width: 1200px;
}
#keyframes linewidth1 {
0%,25%{
background-size:0% 2px;
background-image:linear-gradient(#fff,#fff);
}
60%{
background-size:100% 4px;
}
75%{
background-size:100% 0px;
background-image:linear-gradient(#fff,#fff);
}
75.01%{
background-size:100% 0px;
background-image:linear-gradient(#e10000,#e10000);
}
90%{
background-size:100% 2px;
background-image:linear-gradient(#e10000,#e10000);
}
}
<body>
<div class="single_style" style="height:200px;">
</div>
</body>
Float the span to the right side and decrease its width to 95%
.line2 {
left:0;
animation: linewidth1 3s;
border-bottom: 2px solid #e10000;
width: 95%;
float: right;
height: 1px;
display: inline-block;
margin-top: 57px ;
}
.single_style{
position: relative;
padding-top: 15px;
background-color: rgb(238, 238, 234);
background-repeat: repeat;
background-size: auto auto;
border-bottom-color: cadetblue;
border-bottom-left-radius: 57px;
border-bottom-right-radius: 11px;
border-bottom-style: solid;
border-left-color: cadetblue;
border-left-style: solid;
border-right-color: cadetblue;
border-right-style: solid;
border-top-color: cadetblue;
border-top-left-radius: 170px;
border-top-right-radius: 39px;
border-top-style: solid;
border-top-width: 4px;
border-right-width: 2px;
border-left-width: 1px;
border-bottom-width: 1px;
margin-left: 20px;
margin-right: 3%;
margin-top: auto;
max-width: 1200px;
margin-bottom: 5px;
margin-top: 5px;
}
<body>
<div class="single_style" style="height:200px;">
<span class="line2"></span>
</div>
</body>
I'm trying to create an input form and the right side of my input boxes keep getting cut off. My code is as follows:
HTML/CSS
.add_idea_box {
background-color: #ffffff;
min-width: 1110px;
margin: 0px 20px 20px 20px;
overflow: hidden;
border: solid 1px #6a6a6a;
box-shadow: 3px 3px 3px #cecdcd;
-moz-box-shadow: 3px 3px 3px #cecdcd;
-webkit-box-shadow: 3px 3px 3px #cecdcd;
text-align: center;
padding-right: 25px;
}
.add_idea_box_left {
float: left;
overflow: hidden;
width: 130px;
height: 200px;
}
.add_idea_box_left_top {
width: 100%;
padding: 15px 20px 20px 0px;
}
.add_idea_box_left_bottom {
width: 100%;
text-align: left;
padding-left: 22px;
}
.add_idea_box_left_bottom_row {
width: 100%;
height: 27px;
font-family: "Arial";
font-size: 85%;
color: #363636;
}
.red_circle {
display: inline;
float: left;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #ff5f57;
margin-right: 7px;
}
.yellow_circle {
display: inline;
float: left;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #ffbd2e;
margin-right: 7px;
}
.green_circle {
display: inline;
float: left;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #29cb41;
margin-right: 7px;
}
.add_idea_box_right {
overflow: hidden;
text-align: left;
min-height: 200px;
padding: 20px 0px 0px 25px;
border-left: solid 1px #bab6b6;
}
.add_idea_box_right_top {
overflow: visible;
width: 100%;
}
.add_idea_box_right_bottom {
overflow: hidden;
float: right;
height: 40px;
margin-top: 10px;
margin-bottom: 10px;
}
input[type=submit] {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #ffffff;
padding: 10px 10px;
background: -moz-linear-gradient(
top,
#fa8e00 0%,
#ab0000);
background: -webkit-gradient(
linear, left top, left bottom,
from(#fa8e00),
to(#ab0000));
border: 1px solid #7d0000;
-moz-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 2px rgba(255,255,255,0.7);
-webkit-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 2px rgba(255,255,255,0.7);
box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 2px rgba(255,255,255,0.7);
text-shadow:
0px -1px 0px rgba(000,000,000,0.4),
0px 1px 0px rgba(255,255,255,0.3);
}
input[type=text] {
width: 100%;
height: 20px;
padding: 10px 10px;
border: 1px solid #bab6b6;
-webkit-border-radius: 6px;
border-radius: 6px;
font-family: "Arial";
color: #bab6b6;
background: #efeeee;
}
textarea {
width: 100%;
height: 60px;
padding: 10px 10px;
border: 1px solid #bab6b6;
-webkit-border-radius: 6px;
border-radius: 6px;
margin-top: 10px;
font-family: "Arial";
color: #bab6b6;
background: #efeeee;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="application/xml; charset=utf-8">
<meta name="viewport" content="initial-scale=1">
<html lang="en">
<head>
<title>GroupTrades</title>
<!-- CSS -->
<link type="text/css" href="css/ideaboard2.css" rel="stylesheet" media="screen">
</head>
<body>
<!-- ADD AN IDEA BOX -->
<div class="add_idea_box">
<div class="add_idea_box_left">
<div class="add_idea_box_left_top">
</div>
<div class="add_idea_box_left_bottom">
<div class="add_idea_box_left_bottom_row">
<div class="green_circle"></div>5 accepted
</div>
<div class="add_idea_box_left_bottom_row">
<div class="yellow_circle"></div>2 pending
</div>
<div class="add_idea_box_left_bottom_row">
<div class="red_circle"></div>3 rejected
</div>
</div>
</div>
<div class="add_idea_box_right">
<form method="post" action="dashboard.php">
<div class="add_idea_box_right_top">
<input type="hidden" name="group" value="<?echo $group;?>">
<input type="text" name="title" value="Title" autofocus>
<textarea value="idea" id="idea">Idea</textarea>
</div>
<div class="add_idea_box_right_bottom">
<input type="submit" id="Submit" name="Submit" value="Add Idea">
</div>
</form>
</div>
</div>
<br><br><br>
</body>
A live version is at: http://quickid.net/test2/ideaboard2.html ... You can see that the right side of the input box and the text box are both getting cut off and their right borders are not showing.
Any help would be greatly appreciated. Thanks!
Add box-sizing property to input and text-area and style accordingly
CSS
.add_idea_box_right_top input[type="text"],
.add_idea_box_right_top textarea{
box-sizing:border-box;
}
hope this helps..
It's because you have set all of these properties on your input element:
width: 100%
padding: 10px
border: 2px
So the input element takes up 100% of the width and it also has 10px padding both left and right on top of that and 2px border on top of that. They all add up so the total width of your element is more than 100% of the width of the containing element.
Try modifying the padding of this class, so try this one.
FROM THIS:
.add_idea_box_right {
overflow: hidden;
text-align: left;
min-height: 200px;
padding: 20px 0px 0px 25px;
border-left: solid 1px #bab6b6;
}
TO THIS:
.add_idea_box_right {
overflow: hidden;
text-align: left;
min-height: 200px;
padding: 20px 25px 0px 25px;
border-left: solid 1px #bab6b6;
}
Let me know if it helped you.
It is because 100% width as suggested is interfering with some of the padding, reduce the width to a smaller percentage and center your input field for it to scale better with increasing resolutions.
Edit: If you inspect element on mozilla you can clearly see where the overlap happens with the pick element thing!
This is what I have so far:
<style type="text/css">
.signupsubmit {
line-height: 32px;
position: absolute;
left: 36px;
color: white;
top: 527px;
font-family: arial;
font-size: 17px;
font-weight: 600;
width: 137px;
height: 30px;
border-color: #00297A;
border-radius: 4px;
border: 1px solid black;
border-style: solid;
background-color: #FFB630;
text-indent: 30px;
}
<style>
<div class = "signupsubmit">Continue</div>
Can someone write an example of how to make the Continue button look 3D instead of 2D?
https://jsfiddle.net/zt2x0bct/
Just add a box-shadow. Probably the simpliest way:
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24);
Edit: Based on your comment, sounds like you are looking for a "gradient". See updated fiddle. You can also use an online gradient generator to help with this. Here's one that you can modify the "start" and "end" background color. Or you can click on the "showcase" and find a button that is close to what you are looking for:
http://css3button.net/
Thanks guys for all your help. I finally got the answer and I will be writing it down. Thanks Niloct for you guide on using inspect element.
<div class = "signupsubmit">Continue<div>
<style type = "text/css">
.signupsubmit {
webkit-appearance: none;
align-items: flex-start;
background-attachment: scroll;
background-clip: border-box;
background-color: #FFA500;
background-origin: padding-box;
background-size: auto;
border-bottom-color: black;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: black;
border-left-style: solid;
border-left-width: 1px;
border-right-color: black;
border-right-style: solid;
border-right-width: 1px;
border-top-color: black;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-top-style: solid;
border-top-width: 1px;
box-shadow: #80B2FF 0px 1px 1px 0px inset;
box-sizing: border-box;
color: rgb(255, 255, 255);
cursor: pointer;
direction: ltr;
display: inline-block;
font-family: 'Arial', 'Helvetica Neue', 'Segoe UI', 'Malgun Gothic', Meiryo, 'Microsoft JhengHei', helvetica, arial, sans-serif;
font-size: 12px;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-weight: bold;
height: 31px;
letter-spacing: 1px;
line-height: 15.12px;
margin-bottom: 10px;
margin-left: 0px;
margin-right: 0px;
margin-top: 10px;
min-width: 194px;
padding-bottom: 7px;
padding-left: 20px;
padding-right: 20px;
padding-top: 7px;
position: relative;
text-align: center;
text-indent: 0px;
text-rendering: optimizeLegibility;
text-shadow: rgba(0, 0, 0, 0.498039) 0px 1px 2px;
text-transform: none;
width: 194px;
word-spacing: 0px;
writing-mode: lr-tb;
-webkit-writing-mode: horizontal-tb;
zoom: 1;
left: 37px;
top: 515px;
position: absolute;
}
</style>
I'm not sure about 3D but you can make it as though it is in a 3D environment with 'rotate' command.
.signupsubmit {
transform: rotateY(70deg) rotateX(70deg);
-webkit-transform: rotateY(70deg) rotateX(70deg);
transition: 2s;
line-height: 32px;
left: 36px;
color: white;
text-align: center;
top: 527px;
border: none;
font-family: arial;
font-size: 17px;
font-weight: 500;
width: 137px;
height: 30px;
border-radius: 2px;
background-color: #FFB630;
text-indent: 30px;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24);
}
.signupsubmit:hover {
-webkit-transform: rotateY(0deg) rotateX(0deg);
transform: rotateY(0deg) rotateX(0deg);
}
<button class="signupsubmit">continue</button>
<p>You can also make a smooth transition with transition: (ex:2s);</p>
Copied from and credits goes to this
div {
transform:
perspective(75em)
rotateX(18deg);
box-shadow:
rgba(22, 31, 39, 0.42) 0px 60px 123px -25px,
rgba(19, 26, 32, 0.08) 0px 35px 75px -35px;
border-radius: 10px;
border: 1px solid;
border-color:
rgb(213, 220, 226)
rgb(213, 220, 226)
rgb(184, 194, 204);
}
I'm having trouble finding out why the right section of the header goes under the left section when you zoom out in Safari, Chrome and Opera.
Here is the demo of the header.
If you open the demo in safari, chrome or opera you'll see that the right section of the header goes beneath the left section of the header.
I want to make the header stay in one line when you zoom out in different browsers.
Here is the code I have.
HTML:
<body class="body">
<div id="white-background">
<div class='top-head'>
<div class='left'>
<a class="logo"></a>
<div id="search">
<form id="searchbox">
<input type="text" id="search-bar" required placeholder="What are you looking for?">
<input type="submit" id="submit" value="Search">
</form> <!-- end of form id -->
</div> <!-- end of search id -->
</div> <!-- end of left class -->
<div class='right'>
<a class="login" href="#" alt="Login">Login</a>
<a class="create-account" href="#" alt="create-account">Create Account</a>
<div class="language-wrapper">
<a class="language-icon" href="#" alt="choose-your-language">Language
<div class="arrow-up"></div>
<div class="arrow-down"></div>
</a>
<a class="delivery-country-icon" href="#" alt="choose-your-delivery-country">Delivery Country
<div class="arrow-up"></div>
<div class="arrow-down"></div>
</a>
</div> <!-- end of right class -->
</div> <!-- end of top-head -->
</div><!-- end of white-background class -->
</div> <!-- end of body class -->
CSS:
#white-background {
width: 1024px;
height: 1400px;
background: white;
position: relative;
z-index: 0;
margin: 0 auto 30px auto;
}
.top-head{ height: 45px; }
.left{ padding-left: 15px; padding-top: 14px; float:left; }
.right{ line-height: 24px; padding-top: 7px; padding-right: 15px; float:right; }
.logo {
background:url(http://placehold.it/140x20);
background-position: left top;
background-repeat: no-repeat;
width: 140px;
height: 20px;
display: block;
margin: 0px 0px 0px 0px;
cursor: pointer;
}
#search {
position: relative;
margin-left: 150px;
bottom: 25px;
}
#search-bar {
display: inline-block;
box-shadow: 0px 1px 0px #f2f2f2;
background: #fff;
border: 1px solid #d3d3d3;
height: 26px;
padding-right: 80px;
padding-left: 5px;
color: #202020;
font-size: 12px;
font-family: 'Open Sans', Verdana, Arial;
}
#search-bar:hover { border: 1px solid #c6c6c6; box-shadow: 0px 1px 0px #e5e5e5; }
#search-bar:active { border: 1px solid #d13030; }
#submit {
box-shadow: 0px 1px 0px #f2f2f2;
background: #f8f8f8;
border: 1px solid #d3d3d3;
width: 80px;
height: 26px;
font-size: 12px;
font-weight: bold;
font-family: 'Open Sans', Verdana, Arial;
color: #656565;
}
#submit:hover { border: 1px solid #c6c6c6; box-shadow: 0px 1px 0px #e5e5e5; color: #000; }
#submit:active { background: #dcdcdc; color: #242424; }
.login {
font-weight: bold;
border: 1px solid #d3d3d3;
color: #202020;
padding-right: 15px;
padding-left: 15px;
display: inline-block;
font-size: 11px;
text-align: right;
box-shadow: 0px 1px 0px #f2f2f2;
text-decoration: none;
background: #f8f8f8;
}
.login:hover {
background: #f4f4f4;
box-shadow: 0px 1px 0px #e5e5e5;
}
.create-account {
font-weight: bold;
border: 1px solid #d13030;
color: #fff;
padding-right: 15px;
padding-left: 15px;
display: inline-block;
font-size: 11px;
text-align: right;
text-decoration: none;
background: #d13030 ;
}
.create-account:hover {
background: #c42d2d;
box-shadow: 0px 1px 0px #e5e5e5;
}
.arrow-down {
width: 0;
height: 0;
position: absolute;
right: 5px;
top: 40%;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #202020;
}
.language-icon:hover .arrow-down:hover {
border-top: 5px solid #d13030;
}
.language-icon:hover .arrow-up {
width: 0;
height: 0;
position: absolute;
right: 5px;
top: 40%;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
.language-wrapper:hover .language-dropdown {
opacity: 1;
display: block;
}
.language-wrapper {
display: inline-block;
}
.language-icon {
border: 1px solid #d3d3d3;
color: #202020;
padding-right: 20px;
padding-left: 27px;
display: inline-block;
font-size: 11px;
width: auto;
text-align: right;
text-decoration: none;
box-shadow: 0px 1px 0px #f2f2f2;
background: #f8f8f8 url("http://placehold.it/25x25") no-repeat 0 0 ;
position: relative;
left: 0; top: 0;
}
.language-icon:hover {
background: #fff url("http://placehold.it/25x25") no-repeat 0 -20px ;
color: #d13030;
border: 1px solid #c6c6c6;
box-shadow: 0px 1px 0px #e5e5e5;
}
.delivery-country-icon {
position: relative;
left: 0; top: 0;
border: 1px solid #d3d3d3;
color: #202020;
padding-right: 20px;
padding-left: 27px;
display: inline-block;
font-size: 11px;
text-align: right;
text-decoration: none;
box-shadow: 0px 1px 0px #f2f2f2;
background: #f8f8f8 url("http://placehold.it/25x25") no-repeat top left ;
}
.delivery-country-icon:hover {
background: #fff url("http://placehold.it/25x25") no-repeat 0 -20px ;
color: #d13030;
border: 1px solid #c6c6c6;
box-shadow: 0px 1px 0px #e5e5e5;
}
You can fix this by setting fixed widths for the child elements (inputs, etc..).
But why would you zoom to 25%?