Witam,
Mam taki problem. Robię stronę i chcę ją mieć w witrynie google site i chcę dodać niestandardowe menu. Moje pytanie jest następujące. Mam taki kod:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#menu {
float: left;
width: 100%;
background-color: transparent;
overflow: hidden;
position: relative;
text-align: center;
margin-bottom: 15px;
}
#menu ul {
clear: left;
float: left;
list-style: none;
margin: 0;
padding: 0;
position: relative;
left: 50%;
text-align: center;
}
#menu ul li {
float: left;
list-style: none;
position: relative;
right: 50%;
margin: 0px 25px;
padding: 5px 10px;
border:1px solid black;
}
#menu ul li a {
background-color: transparent;
color: #999999!important;
font-family: 'Droid Sans',sans-serif!important;
font-size: 16px!important;
text-decoration: none;
}
#menu ul li a:hover {
color: #444444!important;
text-decoration: underline;
background-color: transparent;
}
#logo{
text-align: left;
margin: 15px 30px;
margin-top: 0;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a target="_self" href="#">zakładka 1 szersza</a></li>
<li><a target="_self" href="#">zakładka 2 wezsza</a></li>
<li><a target="_self" href="#">zakładka 3</a></li>
<li><a target="_self" href="#">zakładka 4 szeroka</a></li>
<li><a target="_self" href="#">zakładka 5 mała</a></li>
<li><a target="_self" href="#">zakładka 6</a></li>
<li><a target="_self" href="#">zakładka 7</a></li>
<li><a target="_self" href="#">zakładka 8 szeroka</a></li>
<li><a target="_self" href="#">zakładka 9</a></li>
<li><a target="_self" href="#">zakładka 10</a></li>
</ul>
</div>
</body>
</html>
I co powinienem zrobić by elementy były wyśrodkowane lub zawijały sie na dół gdy sie nie mieszcza i tez sie wysrodkowuja. Na tą chwilę one dziwnie sie zachowują. Przechodzą na dół ale dziwnie się wyrównują.