-1
그래서 이것은 내 인생을 먹고 있습니다. 도와주세요! 센터에 앉아 있거나 상위 div의 960 너비에 나타나는 메뉴를 가져올 수 없습니다. 다음은 HTML과 CSS는센터 네비게이션을 할 수없고 너비가 잘못 표시 될 수 있습니다
</head>
<body>
<div id="container">
<div id="header">
<div id="logo"> <img src="images/logo.png"></div>
<div id="contact"> Tel: 011 234 5678<br>
E-mail: [email protected]</div>
<div id="secure">We accept the following via PayFast<img src="images/secure.png"></div>
<div id="nav">
<ul class="navbars">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Information</a>
<ul>
<li><a href="#">Accreditations</a></li>
<li><a href="#">Electricity Savings</a></li>
<li><a href="#">Colour Temp</a></li>
</ul>
</li>
<li><a href="#">Products</a>
<ul>
<li><a href="#">LED downlights</a></li>
<li><a href="#">LED strip lights</a></li>
<li><a href="#">LED floodlights</a></li>
<li><a href="#">Power Supplies</a></li>
</ul>
</li>
<li><a href="#">Online Shopping</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
<br>
<div id="slider" class="nivoSlider">
<img src="images/slide1.png" alt="" />
<a href="#"><img src="images/slide2.png" alt="" title="#htmlcaption" /></a>
<img src="images/slide3.png" alt="" title="This is an example of a caption" />
<img src="images/slide4.png" alt="" />
<div id="bulbshow"><img src="images/bulbshow.jpg"></div>
<div id="secure2">We accept the following via PayFast<img src="images/secure.png"></div>
<div id="footer">© Copyright 2014. All Rights Reserved, Company CC. Website designed and developed by <a href="http://www.domain.co.za"><img class="gi" src="images/gifavicon.png"></a><br>Reproduction in any form without express permission is prohibited.</div>
</div>
</body>
</html>
html {
background-image: url(../images/tile.jpg);
background-repeat: repeat;
}
a:hover {
text-shadow: 1px 1px 1px #e5e61d;
}
a:active {
background: #27428a;
}
#container {
width:960px;
margin: 0 auto;
}
#header {
display: block;
width:100%;
}
#logo {
display: inline-block;
width:20%;
float: left;
}
#contact {
display: block;
width:80%
float: left;
text-align: right;
padding-bottom: 1%;
}
#secure {
display: inline-block;
width: 80%;
float: left;
text-align: right;
padding-bottom: 2%;
}
#nav {
display: inline-block;
width: 940px;
line-height: 100%;
text-align: center;
font-size: large;
margin-left: 0 ; /* Ensures there is no space between sides of the screen and the menu */
margin-right:0;
z-index: 99; /* Makes sure that your menu remains on top of other page elements */
position: relative;
}
ul.navbars {
width:960px;
}
.navbars {
height: 30px;
width:960px;
float: left;
margin: 0px;
border-right: 0px solid #54879d;
}
.navbars li {
height: auto;
width: 160px; /* Each menu item is 150px wide */
float: left; /* This lines up the menu items horizontally */
text-align: center; /* All text is placed in the center of the box */
list-style: none; /* Removes the default styling (bullets) for the list */
font: normal 15px "Trebuchet MS", Helvetica, sans-serif, "Lucida Sans Unicode";
background: -webkit-linear-gradient(#0063d3, #27428a); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#0063d3, #27428a); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#0063d3, #27428a); /* For Firefox 3.6 to 15 */
background: linear-gradient(#0063d3, #27428a); /* Standard syntax */
}
.navbars a {
padding: 18px 0; /* Adds a padding on the top and bottom so the text appears centered vertically */
border-left: 1px solid #54879d; /* Creates a border in a slightly lighter shade of blue than the background. Combined with the right border, this creates a nice effect. */
border-right: 1px solid #1f5065; /* Creates a border in a slightly darker shade of blue than the background. Combined with the left border, this creates a nice effect. */
text-decoration: none; /* Removes the default hyperlink styling. */
color: white; /* Text color is white */
display: block;
}
.navbars li:hover, a:hover {background:#8080B5;
}
.navbars li ul {
display: none; /* Hides the drop-down menu */
height: auto;
margin: 0; /* Aligns drop-down box underneath the menu item */
padding: 0; /* Aligns drop-down box underneath the menu item */
}
.navbars li:hover ul {
display: block; /* Displays the drop-down box when the menu item is hovered over */
}
.navbars li ul li {background-color: #54879d;}
.navbars li ul li a {
border-left: 1px solid #1f5065;
border-right: 1px solid #1f5065;
border-top: 1px solid #74a3b7;
border-bottom: 1px solid #1f5065;
}
.navbars li ul li a:hover {background-color: #00006B;}
#bulbshow {
}
#secure2 {
text-align: right;
}
#footer {
text-align: center;
color: #fff;
background: -webkit-linear-gradient(#0063d3, #27428a); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#0063d3, #27428a); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#0063d3, #27428a); /* For Firefox 3.6 to 15 */
background: linear-gradient(#0063d3, #27428a); /* Standard syntax */
font-size: small;
font-family: "Trebuchet MS", Helvetica, sans-serif, "Lucida Sans Unicode";
height: 100%;
}
.gi {
width:2em;
}
이것은 단지 HTML로 도움이되지 않습니다. 또한 [jsfiddle] (http://jsfiddle.net/)도 도움이 될 것입니다! – Johannes
제발 용서해주세요,이 모든 것을 아주 신 ... 여기는 바이올린이 있습니까? http : //jsfiddle.net/46M3x/ – Sash
[div에 div를 가로로 배치하는 방법?] (http : /stackoverflow.com/questions/114543/how-to-horizontally-center-a-div-in-a-div) – apaul