-1
Ich versuche, ein Menü zu erstellen, das 3 klickfähige Bereiche hat, die die volle Höhe des nav_top div aufnehmen und so schrumpfen, wenn die Größe des Browsers geändert wird. Jeder LI hat ein Symbol auf der linken Seite und einen anderen farbigen Hintergrund. Das Problem, das ich habe, ist, wenn du etwas reparierst, was etwas anderes vermasselt. Wenn ich schwimmen die li rechts die erste li die 3.
wird Wenn ich versuche, jedekann Nav-Menü nicht richtig verhalten
li a {
height:100%;
width :30%:
background-color: red;
}
nichts
image of what im trying to do zu machen geschieht Es sollte so einfach sein wie machen Sie jedem li 30% Breite und 100% Höhe, indem Sie die Hintergrundfarbe hinzufügen und ein Bild links davon auffüllen. Nachdem die Ul Schwimmer rechts auf einer Breite von 70% der navholder aber nichts funktioniert und sein Ausgang mich verpissen
<!DOCTYPE html>
<style>
/* CSS Document */
html,body{
padding:0px;
margin:0px;
height:100%;
width:100%;
background-color:#f0f0f0;
}
/* MOBILE BROWSER THING*/
.menu{
width:60%;
border: 1px solid blue;
}
a.menu-link {
display:none;
}
/* MOBILE BROWSER THING*/
header{
width:100%;
display:table;
border: 1px solid red;
background-color:#f0f0f0;
}
#logohold{
width:19%;
background-color:#0FF;
height:125px;
float:left;
}
#navhold{
width:79%;
background-color:#3F0;
height:125px;
border: 1px solid purple;
float:right;
}
#nav_top{
border: 1px solid green;
background-color:#f0f0f0;
width:100%;
height:49%;
}
#nav_bot{
border: 1px solid green;
background-color:#f0f0f0;
width:100%;
height:49%;
}
#float_right{
float:right;width:79%;}
#tpmenu{
float:right;
background-color:#F0F;/* visulize nav*/
width:100%;
height:100%;
text-transform: uppercase;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#tpmenu li {margin: 0;
padding: 0;
border: 1px solid blue;/* visulize each li*/
display:inline;/* left to right li*/
}
#tpmenu li a{margin: 0;
padding: 0;
padding-top:20px;
padding-bottom:20px;
text-decoration:none;
text-align: center;
font-size:15px;
height:100%;/* take up the full width of the ul div*/
border: px solid green;/* visulize each li*/
display:inline-block;/* left to right li*/
width:30%;/* each li is 30% width*/
}
#tpmenu li.top_app a {
color:#FFF;
background:url('http://www.cheesetoast.co.uk/cheesepress/wp-content/uploads/2012/08/home.gif') no-repeat no-repeat ;
background-position:center;
background-position:left; background-color:#000000;
}
#tpmenu li.top_quote a {
color:#FFF;
background:url('http://www.cheesetoast.co.uk/cheesepress/wp-content/uploads/2012/08/home.gif') no-repeat no-repeat ;
background-position:center;
background-position:left;
background-color:#F00;
}
#tpmenu li.top_repair a {
color:#000;
background:url('http://www.cheesetoast.co.uk/cheesepress/wp-content/uploads/2012/08/home.gif') no-repeat no-repeat ;
background-position:center;
background-position:left;
background-color:#f0f0f0;
}
*/
/* telephone number */
#top_menu_phone{
float:right;
}
#top_menu_phone a{
}
span.tele{
height:15px;
width:15px;
background:url('http://www.cheesetoast.co.uk/cheesepress/wp-content/uploads /2012/08/home.gif') no-repeat no-repeat ;
background-position:center;
background-position:left;
}
#mobmenu_hidden{
display:none;/* hides the mobile menu button on destop*/
height:100%;
width:15%;
background-color:#0FF;
}
</style>
<header>
<div id="logohold">logo</div><!--logohold-->
<div id="navhold">
<div id="nav_top">
<div id="mobmenu_hidden">hidden menu</div><!--mobmenu_hidden-->
<div id="float_right">
<ul id="tpmenu">
<li class="top_repair"><a href="repair status">repair status</a></li>
<li class="top_app"><a href="set up appointment">set up appointment</a> </li>
<li class="top_quote"><a href="get a quote">get a quote</a></li>
</ul>
</div><!--float_right-->
</div><!--nav_top-->
<div id="nav_bot">nav_bottom
<!--top_menu_phone-->
<div id="top_menu_phone"><a href="tel:16142585555"><span class="tele"> & nbsp; </span> (614)258-5555</a> </div>
<!--top_menu_phone-->
</div><!--nav_bot-->
</div><!--navhold-->
</header><!--header-->
Sie nicht suchen müssen giv margin oder padding zum html nur zum body – DanyCode