I am trying to make a iframe for website demos so I want to add a fixed header. Why does my right Buy Now Button will keep getting lower then it should? I have tried a few things but I am not a coder.
Here is my code:
#headerfix {
height: 60px;
background-color:#000;
border-bottom: 2px solid gold;
z-index: 99999;
position: fixed;
width: 100%;
}
.button {
border: 2px solid gold;
background: #ff9900;
background: -webkit-gradient(linear, left top, left bottom, from(#ffff00), to(#ff9900));
background: -webkit-linear-gradient(top, #ffff00, #ff9900);
background: -moz-linear-gradient(top, #ffff00, #ff9900);
background: -ms-linear-gradient(top, #ffff00, #ff9900);
background: -o-linear-gradient(top, #ffff00, #ff9900);
background-image: -ms-linear-gradient(top, #ffff00 0%, #ff9900 100%);
padding: 7.5px 15px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
-moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
text-shadow: #303030 0 1px 0;
color: #000000;
font-size: 18px;
font-family: helvetica, serif;
text-decoration: none;
vertical-align: middle;
}
.button:hover {
border: 2px solid #d9ff00;
text-shadow: #1e4158 0 1px 0;
background: #ffff00;
background: -webkit-gradient(linear, left top, left bottom, from(#ff9900), to(#ffff00));
background: -webkit-linear-gradient(top, #ff9900, #ffff00);
background: -moz-linear-gradient(top, #ff9900, #ffff00);
background: -ms-linear-gradient(top, #ff9900, #ffff00);
background: -o-linear-gradient(top, #ff9900, #ffff00);
background-image: -ms-linear-gradient(top, #ff9900 0%, #ffff00 100%);
color: #fff;
}
.button:active {
text-shadow: #1e4158 0 1px 0;
border: 2px solid #d9ff00;
background: #ff9900;
background: -webkit-gradient(linear, left top, left bottom, from(#ffff00), to(#ffff00));
background: -webkit-linear-gradient(top, #ffff00, #ff9900);
background: -moz-linear-gradient(top, #ffff00, #ff9900);
background: -ms-linear-gradient(top, #ffff00, #ff9900);
background: -o-linear-gradient(top, #ffff00, #ff9900);
background-image: -ms-linear-gradient(top, #ffff00 0%, #ff9900 100%);
color: #000000;
}
#preview-frame {
margin: 0 auto;
display: block;
padding-top: 60px;
width:100%;
height: 581px;
}
<div id="headerfix">
<section style="width:15%; float:left;"><img style='padding-left: 10px; padding-top: 2.5px;' src="https://turnkey-shop.com/wp-content/uploads/2017/11/demo-tunkey-icon.png" alt="Turnkey-Shop.com"></section>
<section style='padding-left:15%; padding-top:8px; width:70%; text-align:center; float:none; font-size:25px; color:gold;'>Product Name</section>
<section style='padding-left:15%; width:70%; text-align:center; float:none; font-size:12px; color:gold;'>SKU</section>
<section style='padding-left:85%; width: 15%; float:none; '><a href='https://turnkey-shop.com/' class='button'>Buy Now</a></section>
</div>
<iframe id="preview-frame" src="https://turnkey-shop.com/" frameborder="0"></iframe>
I want my button to be center in the top bar.
Use margin-top property in the section to properly align your button
Fiddle: http://jsfiddle.net/sanchitpatiyal95/QQKc4/184/
Related
I have to color 50% of the progress bar with red color. Here is what I have tried , my css and html:
.progress {
width:100%;
display: inline-block;
height: 0.4615384615384615em;
padding: 0.0769230769230769em;
background: #fff;
border: 1px solid #c0c0c0;
position: relative;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
background: #f9f9f9;
background: -moz-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));
background: -webkit-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
background: -o-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
background: -ms-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
background: linear-gradient(to bottom, #ffffff 0, #f2f2f2 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#f2f2f2, GradientType=0);
filter: none \9;
}
.progress.complete {
height: 0.9em;
position: relative;
}
<div id="id1" class="progress complete">
<span title="" style="background: red; left: 0%; width: 50%; box-shadow: 0px 2px 1px rgba(0,0,0,0.2), inset 0px 2px 1px rgba(0,0,0,0.2);" rel="tooltip"></span>
</div>
How to color it without adding any text to <span> element in the output?
You have forgot to mention height & position to span tag
.progress {
width:100%;
display: inline-block;
height: 0.4615384615384615em;
padding: 0.0769230769230769em;
background: #fff;
border: 1px solid #c0c0c0;
position: relative;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
background: #f9f9f9;
background: -moz-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));
background: -webkit-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
background: -o-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
background: -ms-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
background: linear-gradient(to bottom, #ffffff 0, #f2f2f2 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#f2f2f2, GradientType=0);
filter: none \9;
}
.progress.complete {
height: 0.9em;
position: relative;
}
<div id="id1" class="progress complete">
<span title="" style="background: red; left: 0%; width: 50%; box-shadow: 0px 2px 1px rgba(0,0,0,0.2), inset 0px 2px 1px rgba(0,0,0,0.2);height: 100%; position: absolute;top: 0;" rel="tooltip"></span>
</div>
If you want to do that without span tag then use pseudo selector ::after as below to style that,
.progress {
width:100%;
display: inline-block;
height: 0.4615384615384615em;
padding: 0.0769230769230769em;
background: #fff;
border: 1px solid #c0c0c0;
position: relative;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
background: #f9f9f9;
background: -moz-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));
background: -webkit-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
background: -o-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
background: -ms-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
background: linear-gradient(to bottom, #ffffff 0, #f2f2f2 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#f2f2f2, GradientType=0);
filter: none \9;
overflow:hidden;
}
.progress:after{
content:'';
position:absolute;
background: red;
left: 0%;
top:0;
width: 50%;
height:10px;
box-shadow: 0px 2px 1px rgba(0,0,0,0.2), inset 0px 2px 1px rgba(0,0,0,0.2);
z-index:9;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
}
<div id="id1" class="progress complete">
</div>
Span tag default display is inline so you need to change that to inline-block and height to it.
.progress {
width: 100%;
display: inline-block;
height: 0.4615384615384615em;
padding: 0.0769230769230769em;
background: #fff;
border: 1px solid #c0c0c0;
position: relative;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
background: #f9f9f9;
background: -moz-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));
background: -webkit-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
background: -o-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
background: -ms-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
background: linear-gradient(to bottom, #ffffff 0, #f2f2f2 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#f2f2f2, GradientType=0);
filter: none \9;
overflow: hidden;
}
.progress.complete {
height: 0.9em;
position: relative;
}
span {
background: red;
left: 0%;
width: 50%;
height: 15px;
display: block;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.2), inset 0px 2px 1px rgba(0, 0, 0, 0.2);
}
<div id="id1" class="progress complete">
<span title="progress bar" rel="tooltip"></span>
</div>
I found this awesome app that allows me to pick my button exactly the way I want it and copy it to my code with CSS: http://livetools.uiparade.com/button-builder.html#
But I would like my button to extend from one end of the div to the other like in this w3 tutorial using "online scripts": http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_button_block&stacked=h
Is it possible for me to create a button with CSS in that button builder and make it appear like in the w3 tutorial (filling the width of the div)?
Also, how do I reduce the (vertical) space between buttons?
Yes you can, if you will use bootstrap just add the class btn-block to your buttons, else add width: 100%, display: block; if you want that all buttons are (filling the width of the div) I add a script that set the class to all buttons, if not set the class only to the desired.
For remove the vertical space if you are using bootstrap just add this style
.btn-block + .btn-block{
margin-top: 0;
}
note that in the snippet I add !important that is because in the snippet the bootstrap's style is after mine but normally is not.
$(document).ready(function(){
allbuttons = $(".button");
allbuttons.addClass("btn-block");
})
.btn-block + .btn-block{
margin-top: 0 !important;
}
.button {
border: 1px solid #0a3c59;
background: #3e779d;
background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d));
background: -webkit-linear-gradient(top, #65a9d7, #3e779d);
background: -moz-linear-gradient(top, #65a9d7, #3e779d);
background: -ms-linear-gradient(top, #65a9d7, #3e779d);
background: -o-linear-gradient(top, #65a9d7, #3e779d);
background-image: -ms-linear-gradient(top, #65a9d7 0%, #3e779d 100%);
padding: 10.5px 21px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 1px 0;
-moz-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 1px 0;
box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 1px 0;
text-shadow: #7ea4bd 0 1px 0;
color: #06426c;
font-size: 17px;
font-family: helvetica, serif;
text-decoration: none;
vertical-align: middle;
}
.button:hover {
border: 1px solid #0a3c59;
text-shadow: #1e4158 0 1px 0;
background: #3e779d;
background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d));
background: -webkit-linear-gradient(top, #65a9d7, #3e779d);
background: -moz-linear-gradient(top, #65a9d7, #3e779d);
background: -ms-linear-gradient(top, #65a9d7, #3e779d);
background: -o-linear-gradient(top, #65a9d7, #3e779d);
background-image: -ms-linear-gradient(top, #65a9d7 0%, #3e779d 100%);
color: #fff;
}
.button:active {
text-shadow: #1e4158 0 1px 0;
border: 1px solid #0a3c59;
background: #65a9d7;
background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#3e779d));
background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
background: -moz-linear-gradient(top, #3e779d, #65a9d7);
background: -ms-linear-gradient(top, #3e779d, #65a9d7);
background: -o-linear-gradient(top, #3e779d, #65a9d7);
background-image: -ms-linear-gradient(top, #3e779d 0%, #65a9d7 100%);
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div id="x">
<a href='#' class='button'>Button</a>
<a href='#' class='button'>Button</a>
</div>
Hello I've created a webpage with a banner on it and a button is centered under the banner. When I go to access my website on a large screen the banner resizes to fit the screen but the button stays the same size. I've tried looking for an answer but could not find it.
Here is my code:
HTML
<a href='http://www.aporiagrand.com/shop/' class='button'>SHOP</a>
CSS
.button {
border: 2px solid #ffffff;
background: #000000;
background: -webkit-gradient(linear, left top, left bottom, from(#000000), to(#000000));
background: -webkit-linear-gradient(top, #000000, #000000);
background: -moz-linear-gradient(top, #000000, #000000);
background: -ms-linear-gradient(top, #000000, #000000);
background: -o-linear-gradient(top, #000000, #000000);
background-image: -ms-linear-gradient(top, #000000 0%, #000000 100%);
padding: 12px 24px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
-webkit-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
-moz-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
text-shadow: #000000 0 1px 0;
color: #ffffff;
font-size: 18px;
font-family: helvetica, serif;
text-decoration: none;
vertical-align: center;
position:relative;
transition: .5s ease;
top: 1px;
left: 45%;
right: -45%;
bottom: -20%;
}
.button:hover {
border: 2px solid #ffffff;
text-shadow: #ffffff 0 1px 0;
background: #ffffff;
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ffffff));
background: -webkit-linear-gradient(top, #ffffff, #ffffff);
background: -moz-linear-gradient(top, #ffffff, #ffffff);
background: -ms-linear-gradient(top, #ffffff, #ffffff);
background: -o-linear-gradient(top, #ffffff, #ffffff);
background-image: -ms-linear-gradient(top, #ffffff 0%, #ffffff 100%);
color: #000000;
}
.button:active {
text-shadow: #dbdbdb 0 1px 0;
border: 2px solid #dbdbdb;
background: #dbdbdb;
background: -webkit-gradient(linear, left top, left bottom, from(#dbdbdb), to(#ffffff));
background: -webkit-linear-gradient(top, #dbdbdb, #dbdbdb);
background: -ms-linear-gradient(top, #dbdbdb, #dbdbdb);
background: -o-linear-gradient(top, #dbdbdb, #dbdbdb);
background-image: -ms-linear-gradient(top, #dbdbdb 0%, #dbdbdb 100%);
color: #dbdbdb;
}
I assume you are using this
position:relative;
transition: .5s ease;
top: 1px;
left: 45%;
right: -45%;
bottom: -20%;
as a way to center your button; might I suggest instead you try to use something along the lines of:
margin: 0 auto; max-width:25%; text-align:center;
Your button currently won't scale with your site as I believe the only thing giving it any size is the padding you've applied. Using percentages is generally a good way to deal with these kind of issues.
I noticed that your font-size for the button in css is fixed, so the button size is not being small in small screens.
See this code:
1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger
in stackoverflow link
and try changing font-size:18px; to something like font-size: 4.0vw; according to your requirements.
I am struggling with image inside a link. I don't know hot to make the first link (with image) be the same size as other links in paginations. I also don't know how to align them ?
.content .pagination a {
text-decoration: none;
color: #717171;
border: 1px solid #c0c0c0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 3px 8px;
margin: 0 1px;
background-color: #fff;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
background-image: -webkit-linear-gradient(top, #fff, #ededed);
background-image: -moz-linear-gradient(top, #fff, #ededed);
background-image: -ms-linear-gradient(top, #fff, #ededed);
background-image: -o-linear-gradient(top, #fff, #ededed);
background-image: linear-gradient(top, #fff, #ededed);
}
.content .pagination a.prev {
padding: 11px;
position: relative;
vertical-align: middle;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAICAYAAADaxo44AAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAB4SURBVHjaYvj//z8DDBcWFqYBcTuIzQgiQKCoqCgNSM1kgAArsASyYEhICIMVEDB/+vTJDMjfiCSYBWSuZ7KxsdGFamd49OjRMiA1HcQGGWV5DAjWrFkDk0/v6+ubBbM8Eyg3DUnSnAHJuSDJ/1u2bAEy/5sBBBgAv6VOHKw5pxYAAAAASUVORK5CYII=) 8px 7px no-repeat;
border: 1px solid #d9d9d9;
line-height: 0;
font-size: 0;
color: transparent;
}
HTML code:
<div class="pagination">
‹
1</div>
Are you talking about this ? :
<img src="path">
<img src="path">
</div>
May be the easier way to get that is to use an unicode character
CSS
.pagination a {
text-decoration: none;
color: #717171;
border: 1px solid #c0c0c0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
width: 18px;
padding: 3px 8px;
margin: 0 1px;
background-color: #fff;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
background-image: -webkit-linear-gradient(top, #fff, #ededed);
background-image: -moz-linear-gradient(top, #fff, #ededed);
background-image: -ms-linear-gradient(top, #fff, #ededed);
background-image: -o-linear-gradient(top, #fff, #ededed);
background-image: linear-gradient(top, #fff, #ededed);
}
.pagination a.prev:before {
content: "\03c";
}
fiddle
If you are interested in this technique, shapecatcher can be a valuable resource
Here is the link to my site. When you have a wide resolution there is no issue with the dispaly, but if with the brower I try to simulate a little resolution, I come across an issue :
The nav bar won't fill the entire page but only the width of the browser, even though I used width : 100%;
Here the code in CSS
header {
width: 100%;
/*min-width: 1000px;*/
-webkit-box-shadow: 0px 1px 1px 0px rgba(250, 250, 250, .5);
-moz-box-shadow: 0px 1px 1px 0px rgba(250, 250, 250, .5);
box-shadow: 0px 1px 1px 0px rgba(250, 250, 250, .5);
padding-top: 60px; /* Gere l'espace entre le top et la barre de menu */
background: url('../img/binding_dark.png');
}
nav {
margin-bottom: 30px;
width: 100%;
background: -moz-linear-gradient(top, #353535 0%, #222222 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#353535), color-stop(100%,#222222));
background: -webkit-linear-gradient(top, #353535 0%,#222222 100%);
background: -o-linear-gradient(top, #353535 0%,#222222 100%);
background: -ms-linear-gradient(top, #353535 0%,#222222 100%);
background: linear-gradient(top, #353535 0%,#222222 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#353535', endColorstr='#222222',GradientType=0 );
border-width: 1px 0 1px 0;
border-style: solid;
border-color: #000;
}
The header is the wide black block and the nav is inside it.
Here is an exemple of the issue:
The header won't fill all the page (horizontally), the li element would overflow, and gradient background would split.
Is there a solution to this please ?
Here is your corrected css and fiddle link
header {
width: 100%;
-webkit-box-shadow: 0px 1px 1px 0px rgba(250, 250, 250, .5);
-moz-box-shadow: 0px 1px 1px 0px rgba(250, 250, 250, .5);
box-shadow: 0px 1px 1px 0px rgba(250, 250, 250, .5);
padding-top: 60px; /* Gere l'espace entre le top et la barre de menu */
background: url('../img/binding_dark.png');
}
hgroup,
main,
nav {
margin-bottom: 30px;
width: 100%;
background: -moz-linear-gradient(top, #353535 0%, #222222 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#353535), color-stop(100%,#222222));
background: -webkit-linear-gradient(top, #353535 0%,#222222 100%);
background: -o-linear-gradient(top, #353535 0%,#222222 100%);
background: -ms-linear-gradient(top, #353535 0%,#222222 100%);
background: linear-gradient(top, #353535 0%,#222222 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#353535', endColorstr='#222222',GradientType=0 );
border-top:1px solid #000;
border-bottom:1px solid #000;
}
/* nav:before {
border-top: 1px solid #444;
}
nav:after {
border-top: 1px solid #333;
}*/
nav ul {
/*width: 808px;*/
height: 45px;
margin: 0 auto;
/*border-left: 1px solid #111;
border-right: 1px solid #444;*/
}
nav li {
float: left;
list-style-type:none;
}
nav li a {
display: inline-block;
/*width: 200px;*/
width:auto;
padding:0 50px;
height: 45px;
font: bold 15px 'Arial', sans-serif;
color: #fff;
text-decoration: none;
text-align: center;
line-height: 48px;
text-shadow: 1px 1px 0px #111;
filter: dropshadow(color=#111, offx=1, offy=1);
border-left: 1px solid #444;
border-right: 1px solid #111;
background-color:#2B2B2B;
}
nav li a:hover {
background: -moz-linear-gradient(top, #444 0%, #222 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#444), color-stop(100%,#222));
background: -webkit-linear-gradient(top, #444 0%,#222 100%);
background: -o-linear-gradient(top, #444 0%,#222 100%);
background: -ms-linear-gradient(top, #444 0%,#222 100%);
background: linear-gradient(top, #444 0%,#222 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444', endColorstr='#222',GradientType=0 );
/*background-color:#2F2F2F;*/
}
nav li a:active {
background: #222;
-webkit-box-shadow: inset 0px 0px 3px 1px rgba(0, 0, 0, .3);
-moz-box-shadow: inset 0px 0px 3px 1px rgba(0, 0, 0, .3);
box-shadow: inset 0px 0px 3px 1px rgba(0, 0, 0, .3);
}
nav li a:active:after {
content: "";
display: block;
width: 100%;
height: 4px;
position: relative;
bottom: 6px;
background: -moz-linear-gradient(top, #ff5e1f 0%, #ff3410 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff5e1f), color-stop(100%,#ff3410));
background: -webkit-linear-gradient(top, #ff5e1f 0%,#ff3410 100%);
background: -o-linear-gradient(top, #ff5e1f 0%,#ff3410 100%);
background: -ms-linear-gradient(top, #ff5e1f 0%,#ff3410 100%);
background: linear-gradient(top, #ff5e1f 0%,#ff3410 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5e1f', endColorstr='#ff3410',GradientType=0 );
}
There are other issues with the layout, but for the immediate problem, you could try
#page-wrap header {min-width: 1400px;}
Try increasing the width of the nav ul.
nav ul {
width: 809px;
height: 45px;
margin: 0 auto;
border-left: 1px solid #111;
border-right: 1px solid #444;
}
You can use Developer Tools(F12) to inspect elements.
Check this .