I have made a list based navigation bar for my newest project and I have added two information bars on each side of the navigation. It is coming out as desired in Firefox and IE but oddly enough Safari is acting up. It is making a large space between the navigation bar and the right side information bar.
CSS
body{
background-color:#4c7094;
background-image: url(images/bg.gif);
background-repeat:repeat-x;
font-size:.9em;
color:#FFF;
margin-top:0px;
font-family: Tahoma, Geneva, sans-serif;
}
#nav {
float:left;
padding: 0px 0px 0px 3px;
margin: 0px 0px 0px 0px;
list-style:none;
border:0px solid #000;
}
#nav li {
float:left;
margin: 3px 3px 0px 0px;
font-family:Tahoma, Geneva, sans-serif;
background-color:#e7ebf0;
border:3px double;
display: inline;
border-color:#99aabb;
}
#nav a {
float:left;
display: block;
color:#1d4c7b;
padding: 5px 15px 5px 15px;
font-size: .8em;
vertical-align:middle;
text-decoration:none;
font-family: Georgia, "Times New Roman", Times, serif;
}
#nav a:hover {
float:left;
display: block;
color:#FFF;
padding: 5px 15px 5px 15px;
font-size: .8em;
background-color:#5b7290;
vertical-align:middle;
text-decoration:none;
font-family: Georgia, "Times New Roman", Times, serif;
}
#phonebar{
padding: 0px 6px 9px 6px;
background-image: url(images/phonebg.gif);
background-repeat: repeat-x;
background-color:#335b83;
color:#FFF;
float:left;
border:0px solid #000;
width:15%;
text-align:center;
}
#asseenbar{
padding: 0px 9px 9px 6px;
margin-right: 0px;
background-image: url(images/phonebg.gif);
background-repeat: repeat-x;
background-color:#335b83;
color:#FFF;
float:right;
display:inline;
border:0px solid #000;
width:19.7em;
text-align:center;
}
h2 {
font-size:1.5em;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
display: inline;
font-family:Georgia, "Times New Roman", Times, serif;
}
#phone {
font-size:1em;
margin: 0px 0px 0px 0px;
padding: 8px 0px 0px 0px;
font-family:"Times New Roman", Times, serif;
}
#asseen {
font-size:.8em;
margin: 0px 0px 0px 0px;
padding: 9px 0px 0px 5px;
text-align:left;
font-family:"Times New Roman", Times, serif;
}
#menubar{
clear:left;
margin-bottom:0px;
width:1000px;
margin-left:auto;
margin-right:auto;
background-color:#FFF;
height:40px;
}
#content{
margin-right:auto;
margin-left:auto;
background-color:#FFF;
width:975px;
height:890px;
padding: 20px 5px 5px 20px;
border:0px solid;
border-color:#4c7094;
color:#333;
}
HTML:
<body>
<center> <img src="images/banner.jpg" width="1000" height="72" /></center>
<div id="menubar">
<div id="phonebar">
<p id="phone">888-325-1924</p>
</div>
<ul id="nav">
<li>HOME</li>
<li>WHAT WE BUY</li>
<li>ABOUT US</li>
<li>LOCATIONS</li>
<li>CONTACT US</li>
</ul>
<div id="asseenbar">
<p id="asseen">As seen on CNN and NBC</p>
</div>
</div>
<div id="content">Welcome to Georgia Buying Group</div>
</body>
I have been fighting with this for hours and being new to CSS I am hoping that someone out there can give me a hand! Any advice is appreciated! Thanks :)
Chris
EDIT:
My doctype is transitional:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
sorry
EDIT -----------
I changed all the units to pixels, but the issue is still being presented. Now it looks fine on safari on my macbook but not on safari on my pc, or in firefox for that matter. it is just expanding so much that it is pushed down one line.
Here is my CSS:
body{
background-color:#4c7094;
background-image: url(images/bg.gif);
background-repeat:repeat-x;
font-size:.9em;
color:#FFF;
margin-top:0px;
font-family: Tahoma, Geneva, sans-serif;
}
#nav {
float:left;
padding: 0px 0px 0px 3px;
margin: 0px 0px 0px 0px;
list-style:none;
border:0px solid #000;
}
#nav li {
float:left;
margin: 3px 3px 0px 0px;
font-family:Tahoma, Geneva, sans-serif;
background-color:#e7ebf0;
border:3px double;
display: inline;
border-color:#99aabb;
}
#nav a {
float:left;
display: block;
color:#1d4c7b;
padding: 5px 15px 5px 15px;
font-size: .8em;
vertical-align:middle;
text-decoration:none;
font-family: Georgia, "Times New Roman", Times, serif;
}
#nav a:hover {
float:left;
display: block;
color:#FFF;
padding: 5px 15px 5px 15px;
font-size: .8em;
background-color:#5b7290;
vertical-align:middle;
text-decoration:none;
font-family: Georgia, "Times New Roman", Times, serif;
}
h2 {
font-size:1.5em;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
display: inline;
font-family:Georgia, "Times New Roman", Times, serif;
}
#phonebar{
padding: 0px 6px 9px 6px;
background-image: url(images/phonebg.gif);
background-repeat: repeat-x;
background-color:#335b83;
color:#FFF;
float:left;
border:0px solid #000;
width:120px;
text-align:center;
}
#asseenbar{
padding: 0px 9px 9px 6px;
margin-right: 0px;
background-image: url(images/phonebg.gif);
background-repeat: repeat-x;
background-color:#335b83;
color:#FFF;
float:right;
display:inline;
border:0px solid #000;
width:326px;
text-align:center;
}
#phone {
font-size:1em;
margin: 0px 0px 0px 0px;
padding: 8px 0px 0px 0px;
font-family:"Times New Roman", Times, serif;
}
#asseen {
font-size:.8em;
margin: 0px 0px 0px 0px;
padding: 9px 0px 0px 5px;
text-align:left;
font-family:"Times New Roman", Times, serif;
}
#menubar{
clear:left;
margin-bottom:0px;
width:1000px;
margin-left:auto;
margin-right:auto;
background-color:#FFF;
height:40px;
}
#content{
margin-right:auto;
margin-left:auto;
background-color:#FFF;
width:975px;
height:890px;
padding: 20px 5px 5px 20px;
border:0px solid;
border-color:#4c7094;
color:#333;
}
It can be found here;
http://www.christopherbier.com/gbg
Any help is appreciated!!!
You seem to have made some adjustments already, based on the state of that site you linked to, but it's still not working properly across different browsers.
I think your best bet is to set that phonebg.gif image as a background on the entire #menubar div, instead of on the left and right parts of it, and then add a white background on the #nav.
That way you won't have to set a width on that right div at all (or at least not a width that needs to be so precise as to make sure the 3 parts exacty match up to the full width).
I haven't got Safari so I cannot test, (although I'm using Chrome), but the problem is probably coming from the
#phonebar {
padding: 0px 6px 9px 6px;
width:15%;
}
#asseenbar{
padding: 0px 9px 9px 6px;
width:19.7em;
}
#nav li {
margin: 3px 3px 0px 0px;
border:3px double;
}
#nav a {
padding: 5px 15px 5px 15px;
}
Try to use consistent units (ie try all pixels, and when you get it right you can mess around with % if you are feeling brave) and make sure that the sum of the widths of your columns - does not exceed the width of the container div #menubar.
In addition you should specify a DOCTYPE or yo uwill get problems between different browsers. If you do not declare a specific docType correctly a visitors browser must "guess" (usually by applying the loosest possible docType or a "quirks" mode docType of its own) resulting in slower rendering.
If you do not specify a DOCTYPE you may have alot of trouble.
Try adding a div around the list.
Related
The text hangs outside of the DIV container. Perhaps I have the wrong elements in my CSS. On my actual website it hangs below but when I check snippet here it doesn't hang. Here is the code.
screenshot of problem
.bodybox {
height:65px;
width:250px;
background-color:#000000;
margin: auto;
-webkit-box-shadow: 0px 8px 15px 0 #000000;
-moz-box-shadow: 0px 8px 15px 0 #000000;
box-shadow: 0px 8px 15px 0 #000000;
border: solid 2px #ffffff;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
position: relative;
left: -350px;
top: 27px;
font-family: 'Jura', serif;
font-size: 45px;
color:#ffffff;
}
<div class="bodybox">
Print
</div>
.bodybox {
height:65px;
width:250px;
background-color:#000000;
margin: auto;
-webkit-box-shadow: 0px 8px 15px 0 #000000;
-moz-box-shadow: 0px 8px 15px 0 #000000;
box-shadow: 0px 8px 15px 0 #000000;
border: solid 2px #ffffff;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
position: relative;
//left: -350px;
font-family: 'Jura', serif;
font-size: 45px;
color:#ffffff;
text-align:center;
cursor:pointer;
display:flex;
}
.bodybox span{
margin : auto;
}
<div class="bodybox">
<span>Print</span>
</div>
Is this the same that you are looking for?
Here is JSFiddle
Hope this helps.
Right now I'm developing a website for an assignment, but whilst the primary (id 'main') div is on top, the div for my header is 72 pixels from the top of the screen. I've checked, and I can't find any padding or margin issues. Below is a copy of both the HTML and CSS I'm using.
I've tried making the top margin -72px, which works, but means that the rest of the divs require the same thing, making it a recurring issue.
Below is a copy of both the HTML and CSS I'm using.
<!DOCTYPE html>
<head>
<title>GC Woodturning</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="main">
<div id="title">
<p id="heading"> GC <br>
Woodturning </p>
</div>
</div>
</body>
</html>
body {
background-image: url('images/wood%20grain.jpg');
margin: 0px;
}
#main {
width: 1024px;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
padding-top: 0px;
}
#title {
width: 1024px;
height: auto;
background-image: url('images/heading.jpg');
margin: 0px auto auto 0px;
padding: 0px;
}
#heading {
font-family: Verdana, Geneva, sans-serif;
font-size: 72px;
padding-left: 100px;
padding-bottom:10px;
font-weight: bold;
color: #FFF;
text-shadow: -1.5px -1.5px 0px #000, 1.5px 1.5px 0px #666, 3px 3px 0px #666;
}
You need to add margin: 0; to your heading. This because the most browsers will automatically add this to a p element:
p {
display: block;
margin-before: 1em;
margin-after: 1em;
margin-start: 0px;
margin-end: 0px;
}
So edit your CSS to:
#heading {
font-family: Verdana, Geneva, sans-serif;
font-size: 72px;
padding-left: 100px;
padding-bottom:10px;
font-weight: bold;
color: #FFF;
text-shadow: -1.5px -1.5px 0px #000, 1.5px 1.5px 0px #666, 3px 3px 0px #666;
margin: 0; /* This is new */
}
Add margin: auto; in you #heading{} id.It should solve your problem.
body {
background-image: url('images/wood%20grain.jpg');
margin: 0px;
}
#main {
width: 1024px;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
padding-top: 0px;
}
#title {
width: 1024px;
height: auto;
background-image: url('images/heading.jpg');
margin: 0px auto auto 0px;
padding: 0px;
}
#heading {
font-family: Verdana, Geneva, sans-serif;
font-size: 72px;
padding-left: 100px;
padding-bottom: 10px;
font-weight: bold;
color: #FFF;
margin: auto;
/* <-- Please Add */
text-shadow: -1.5px -1.5px 0px #000, 1.5px 1.5px 0px #666, 3px 3px 0px #666;
}
<div id="main">
<div id="title">
<p id="heading">GC
<br>Woodturning</p>
</div>
</div>
Please replace your #heading css rule try this
#heading {
font-family: Verdana, Geneva, sans-serif;
font-size: 72px;
margin-top:0;
padding-left: 100px;
padding-bottom:10px;
font-weight: bold;
color: #FFF;
text-shadow: -1.5px -1.5px 0px #000, 1.5px 1.5px 0px #666, 3px 3px 0px #666;
}
Right now I'm developing a website for an assignment, but whilst the primary (id 'main') div is on top, the div for my header is 72 pixels from the top of the screen. I've checked, and I can't find any padding or margin issues. Below is a copy of both the HTML and CSS I'm using.
<!DOCTYPE html>
<head>
<title>GC Woodturning</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="main">
<div id="title">
<p id="heading"> GC <br>
Woodturning </p>
</div>
</div>
</body>
</html>
body {
background-image: url('images/wood%20grain.jpg');
margin: 0px;
}
#main {
width: 1024px;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
padding-top: 0px;
}
#title {
width: 1024px;
height: auto;
background-image: url('images/heading.jpg');
margin: 0px auto auto 0px;
padding: 0px;
}
#heading {
font-family: Verdana, Geneva, sans-serif;
font-size: 72px;
padding-left: 100px;
padding-bottom:10px;
margin-top:0;
font-weight: bold;
color: #FFF;
text-shadow: -1.5px -1.5px 0px #000, 1.5px 1.5px 0px #666, 3px 3px 0px #666;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div id="main">
<div id="title">
<p id="heading"> GC <br>
Woodturning </p>
</div>
</div>
please try this....
more info please click here
#heading {
font-family: Verdana, Geneva, sans-serif;
font-size: 72px;
padding-left: 100px;
padding-bottom: 10px;
font-weight: bold;
color: #FFF;
margin: 0px;
text-shadow: -1.5px -1.5px 0px #000, 1.5px 1.5px 0px #666, 3px 3px 0px #666;
}
This needs to be added to your #Heading CSS
margin: auto;
It should look like this
#heading {
margin: auto;
font-family: Verdana, Geneva, sans-serif;
font-size: 72px;
padding-left: 100px;
padding-bottom:10px;
font-weight: bold;
color: #FFF;
text-shadow: -1.5px -1.5px 0px #000, 1.5px 1.5px 0px #666, 3px 3px 0px #666;
}
JSFiddle
Add margin: auto to your #heading css description
See example: Fiddle here
#heading {
font-family: Verdana, Geneva, sans-serif;
font-size: 72px;
padding-left: 100px;
padding-bottom:10px;
font-weight: bold;
color: #FFF;
margin: auto; /* <-- Added this */
text-shadow: -1.5px -1.5px 0px #000, 1.5px 1.5px 0px #666, 3px 3px 0px #666;
}
This question already has answers here:
How do I vertically align text in a div?
(34 answers)
Closed 8 years ago.
I want to center the text in paragraph elements both vertically and horizontally inside the div elements (red boxes). I'm trying to use vertical-align:middle but it's not working. Any help would be appreciated, Thanks.
http://jsfiddle.net/9NLtB/
.transparent-btn {
font:bold 20px"Arial Black", Gadget, sans-serif;
font-style:normal;
color:#ffd324;
background-color: rgba(255, 0, 0, .90);
border:2px solid #000;
text-shadow:0px -1px 1px #222222;
box-shadow:0px 0px 12px #2e2300;
-moz-box-shadow:0px 0px 12px #2e2300;
-webkit-box-shadow:0px 0px 12px #2e2300;
border-radius:15px 15px 15px 15px;
-moz-border-radius:15px 15px 15px 15px;
-webkit-border-radius:15px 15px 15px 15px;
width:100px;
height:100px;
margin:5px;
display:inline-block;
position:relative;
}
.transparent-btn:active {
cursor:pointer;
position:relative;
top:2px;
}
#wrapper {
text-align:center;
}
p {
display:inline-block;
vertical-align:middle;
}
Add a line-height property to your div, then specify it as normal in your text element.
.transparent-btn {
line-height: 100px;
text-align: center;
}
span {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
And yes, this works with multiple lines of text:
Demo: http://jsfiddle.net/9NLtB/12/
You can use line-height:
p {
display:inline-block;
vertical-align:middle;
line-height: 55px;
}
fiddle
try this code
.transparent-btn {
font:bold 20px"Arial Black", Gadget, sans-serif;
font-style:normal;
color:#ffd324;
background-color: rgba(255, 0, 0, .90);
border:2px solid #000;
text-shadow:0px -1px 1px #222222;
box-shadow:0px 0px 12px #2e2300;
-moz-box-shadow:0px 0px 12px #2e2300;
-webkit-box-shadow:0px 0px 12px #2e2300;
border-radius:15px 15px 15px 15px;
-moz-border-radius:15px 15px 15px 15px;
-webkit-border-radius:15px 15px 15px 15px;
width:100px;
height:100px;
margin:5px;
display:inline-block;
position:relative;
vertical-align:top;
}
p {
display:inline-block;
vertical-align:middle;
line-height: 50px;
}
DEMO
You could do something like this:
jsFiddle example
On .transparent-btn use display:inline-table; and vertical-align:top;. Then set the CSS for p to:
p {
display:table-cell;
vertical-align:middle;
}
Add line-height:100px; I've removed the p tag to understand how it works exactly.
Fiddle: http://jsfiddle.net/9NLtB/8/
Also needed float left to align the divs
display:inline-block;
float:left;
p {
line-height: 100px;
margin: 0;
}
or use this code http://jsfiddle.net/9NLtB/11/
I added span and display:table and display:table-cell
Solved your Problem see link Text-Aligned
This is the most efficient mehtod just added 2 css rules
vertical-align:middle;
line-height:100px;
and removed unnecessary <p> tag
You can align everything horizontally and vertically! just remember add line-height same as height of container and apply vertical align middle(here your container is 100px in height so used 100px line_height simple!
css
.transparent-btn {
font:bold 20px"Arial Black", Gadget, sans-serif;
font-style:normal;
color:#ffd324;
background-color: rgba(255, 0, 0, .90);
border:2px solid #000;
text-shadow:0px -1px 1px #222222;
box-shadow:0px 0px 12px #2e2300;
-moz-box-shadow:0px 0px 12px #2e2300;
-webkit-box-shadow:0px 0px 12px #2e2300;
border-radius:15px 15px 15px 15px;
-moz-border-radius:15px 15px 15px 15px;
-webkit-border-radius:15px 15px 15px 15px;
width:100px;
height:100px;
margin:5px;
display:inline-block;
position:relative;
vertical-align:middle;
line-height:100px;
}
.transparent-btn:active {
cursor:pointer;
position:relative;
top:2px;
}
#wrapper {
text-align:center;
}
html
<div id="wrapper">
<div class="transparent-btn">text</div>
<div class="transparent-btn">text</div>
<div class="transparent-btn">text</div>
<div class="transparent-btn">text</div>
</div>
I'm noticing that in your example the buttons with text are pushed down compared to the empty ones. I am assuming that's not the desired behavior.
You can use display: table; on the #wrapper and display: table-cell; on the .transparent-btn
#wrapper {
display:table;
margin: auto;
border-collapse: separate;
border-spacing: 5px;
}
.transparent-btn {
display: table-cell;
vertical-align: middle;
font:bold 20px"Arial Black", Gadget, sans-serif;
font-style:normal;
color:#ffd324;
background-color: rgba(255, 0, 0, .90);
border:2px solid #000;
text-shadow:0px -1px 1px #222222;
-moz-box-shadow:0px 0px 12px #2e2300;
-webkit-box-shadow:0px 0px 12px #2e2300;
box-shadow:0px 0px 12px #2e2300;
-moz-border-radius:15px 15px 15px 15px;
-webkit-border-radius:15px 15px 15px 15px;
border-radius:15px 15px 15px 15px;
width:100px;
height:100px;
text-align: center;
}
p {
}
Now margin: 5px; now longer works on .transparent-btn once it's set to display: table-cell;. So we use border-collapse: separate; and border-spacing: 5px; instead.
Also your unprefixed border-radius and box-shadow should come after the prefixed versions.
Here's the: JsFiddle
I am rather new and hope this isn't a dumb thing to ask but I am making a layout for chatango and I have edited my CSS etc. but when I put it on chatango the links turn blue instead of what the CSS says I have searched Google but can't seem to find the issue in this:
a {
text-decoration: none;
color:#0eac17;}
a:hover {
text-decoration: none;
color: #7ff900;
background-color:#222222;
text-transform:uppercase;
border-bottom-width:2px;
border-bottom-style:solid;
border-bottom-color:#1faf29;}
a.navigation:link {
color : #b27c98;
letter-spacing: 5px;
display : block;
height:20px;
font-size:14px;
width: 150px;
text-align: center;
background-color: #333333;
font-family: Times new Roman;
padding: 0px 0px 0px 10px;
line-height:20px;
margin: 12px 0px 2px 1px;}
a.nav:visited {
color : #b27c98;
letter-spacing: 5px;
display : block;
height:20px;
font-size:14px;
width: 150px;
text-align: center;
background-color: #333333;
font-family: Times new Roman;
padding: 0px 0px 0px 10px;
line-height:20px;
margin: 12px 0px 2px 1px;}
a.nav:active {
color : #b27c98;
letter-spacing: 5px;
display : block;
height:20px;
font-size:14px;
width: 150px;
text-align: center;
background-color: #333333;
font-family: Times new Roman;
padding: 0px 0px 0px 10px;
line-height:20px;
margin: 12px 0px 2px 1px;}
a.navigation:hover {
color : #7ff900;
background-color: #222222;
width: 150px;
text-transform:uppercase;
border-bottom-width:2px;
border-bottom-style:solid;
border-bottom-color:#1faf29;}
Here is the jsfiddle: http://jsfiddle.net/RgAAX/3/
And here is what chatango turns it into : http://prntscr.com/3ihxgc
This issue seems to be in both ff and chrome and perhaps others as well but I have not tried any others
Edit: The suggested !important; has fixed the link issue thanks alot c:
Use !important after the color declaration...
color:#0eac17!important;
This is a good introduction on the !important declaration...
!important CSS Declarations: How and When to Use Them
If you apply it to a you will also have to apply it to a:hover
I'm starting out in HTML and CSS.
I have a div element on the page, which doesn't fill the whole page.
In it- there's a ul element and some list items in it.
I want to put the list 227px from the top of the div element, but I can't manage to accomplish this- it pushes it more.
Also- between the list items I want a margin of 40 pixels, but it also does more.
What's the problem?
Here's my code:
Html:
<body>
<div class="Hashta">
<div class="Menu">
<ul id="MenuItems">
<li><a href="#" >ONE</a></li>
<li><a href="#" >TWO</a></li>
<li><a href="#" >THREE</a></li>
<li><a href="#" >FOUR</a></li>
</ul>
</div>
</div>
</body>
CSS:
body {
background-color: Gray;
}
.Hashta{
width:874px;
height:650px;
background-color:black;
margin: auto auto 50px auto;
border-radius: 20px;
border: 3px solid darkgray;
moz-box-shadow: 2px 2px 10px black;
webkit-box-shadow: 2px 2px 10px black;
box-shadow: 2px 2px 10px black;
}
.Menu {
margin-top: 227px;
padding-right: 50px;
float:right;
}
#MenuItems {
list-style:none;
}
#MenuItems li {
text-align:center;
position:relative;
padding: 4px 10px 4px 10px;
margin-right:30px;
margin-bottom: 40px;
border:none;
}
#MenuItems li a{
width: 280px;
height: 70px;
background-color: green;
color:White;
font-family:Arial, Helvetica, sans-serif;
font-size:24px;
display:block;
outline:0;
text-decoration:none;
text-shadow: 1px 1px 1px #000;
line-height: 70px;
}
If you want to measure the pixels- you can install this: http://www.mioplanet.com/products/pixelruler/
(click to rotate)
Thanks!
You should start your styling by resetting all elements so that each browser shows them identical.
You can check one of the many CSS reset libraries around there, but for starting something like this would be already good:
* {
margin: 0;
padding: 0;
}
This, appearing for first in your CSS stylesheet, will remove all margins and paddings for each element, so you can add them later only in the elements you want.
Update
If you want to restore some element margins or paddings after that code (for example in body) simply write a new rule after the one before, like
body {
padding:10px; /* Add 10px to body only */
}
The total height of every list item is height + padding + border + margin.
Change the padding of #MenuItems li into:
padding: 0 10px 0 10px;
See http://jsfiddle.net/NGLN/rBjrD/1/
Add margin:0; padding:0 for body
In #MenuItems li replace:
padding: 4px 10px 4px 10px;
with:
margin: 4px 10px 4px 10px;
This will make the distance equal to 40px between buttons.
Try absolute positioning:
.Hashta{
width:874px;
height:650px;
background-color:black;
margin: auto auto 50px auto;
border-radius: 20px;
border: 3px solid darkgray;
moz-box-shadow: 2px 2px 10px black;
webkit-box-shadow: 2px 2px 10px black;
box-shadow: 2px 2px 10px black;
position:relative;
}
.Menu {
position:absolute;
top:227px;
right:0;
padding-right: 50px;
float:right;
}
try this:
<style>
body {
background-color: Gray;
}
.Hashta{
width:874px;
height:650px;
background-color:black;
margin: auto auto 50px auto;
border-radius: 20px;
border: 3px solid darkgray;
moz-box-shadow: 2px 2px 10px black;
webkit-box-shadow: 2px 2px 10px black;
box-shadow: 2px 2px 10px black;
}
.Menu {
margin-top: 227px;
padding-right: 50px;
float:right;
}
#MenuItems {
list-style:none;
}
.secLi{
text-align:center;
position:relative;
padding: 0px 10px 0px 10px;
margin-right:30px;
margin-top: 40px;
border:none;
}
.firstLi{
text-align:center;
position:relative;
padding: 0px 10px 0px 10px;
margin-right:30px;
margin-top: -16px;
border:none;
}
#MenuItems li a{
width: 280px;
height: 70px;
background-color: green;
color:White;
font-family:Arial, Helvetica, sans-serif;
font-size:24px;
display:block;
outline:0;
text-decoration:none;
text-shadow: 1px 1px 1px #000;
line-height: 70px;
}
</style>
<body>
<div class="Hashta">
<div class="Menu">
<ul id="MenuItems">
<li class="firstLi"><a href="#" >ONE</a></li>
<li class="secLi"><a href="#" >TWO</a></li>
<li class="secLi"><a href="#" >THREE</a></li>
<li class="secLi"><a href="#" >FOUR</a></li>
</ul>
</div>
</div>
</body>