-1
nav_top div'in tam yüksekliğini kaplayan ve tarayıcı yeniden boyutlandırıldığında böyle bir şekilde küçülecek 3 tıklanabilir alana sahip bir menü oluşturmaya çalışıyorum. her bir LI solda bir simge ve farklı bir renk arka planı vardır. Sorun şu ki, bir şeyi tamir ederseniz başka bir şeyleri çözersiniz. Herdoğru şekilde davranmak için nav menü alamıyor
li a {
height:100%;
width :30%:
background-color: red;
}
hiçbir şey Her li% 30 genişliğini yapmak kadar basit olmalıdır
image of what im trying to do olur yapmaya çalışırsanız i li sağ birinci li 3
olur yüzer varsa ve arka plan rengini ekleyerek ve bir görüntüyü soluna doldurarak% 100 yükseklik. navholder% 70 bir genişlikte Ul şamandıra hakkına sahip ama hiçbir şey çalışıyor ve başlangıç Beni sinir etmek için
<!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-->
aradığınızı umut o
olduğunu düşünüyorum giv marjı ya da sadece html için dolgu – DanyCode