+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: Początkujący webmaster (https://www.webmastertalk.pl/forum-poczatkujacy-webmaster)
+--- Wątek: Menu pionowe i poziome równocześnie (/thread-menu-pionowe-i-poziome-rownocze%C5%9Bnie)
Menu pionowe i poziome równocześnie - faust - 22-01-2010
Witam, mam zrobione pionowe menu, które dobrze działa, jednak gdy chce dołożyć menu poziome w miejscu gdzie jest treść strony, menu pionowe przestaje działać. W ogóle nie działa ani poziome ani pionowe, poniżej przedstawiam kod strony xhtml i css
Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>Untitled Document</title>
<link href="style.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="top">
<div id="NAGLOWEK"> <img alt="logo" src="logo3.gif"/>
<h1>Laguna<br /> włoska pizza zawsze na czas</h1>
</div>
<div id="MENU">
<ul>
<li><a href="index.html">O nas</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="galeria.html">Galeria</a></li>
<li><a href="promocje.html">Promocje</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
<h4>Adres</h4>
</div>
<div id="TRESC">
<object type="application/x-shockwave-flash"
data="flash.swf"
style="width: 802px; height: 357px;">
<param name="movie"
value="flash.swf" />
<param name="quality"
value="best" />
<p>Brak zainstalowanego plugina</p>
</object>
<ul id="MENU2">
<li><a href="menu.html">Menu</a></li>
<li><a href="kontakt.html">Lokalizacja</a></li>
<li><a href="promocje.html">Promocje</a></li>
</ul>
<h3>Pizzeria Laguna to nowa pizzeria.<br />
<br />Obecnie polecamy 40 rodzjaów oryginalnej włoskiej pizzy, sałatki, makarony oraz napoje.<br/>
<br />Nasz lokal otwarty jest 7 dni w tygodniu od 11:00 do 22:00.<br />
<br />Dowozimy do Ciebie gorącą pizze zawsze na czas.</h3>
</div>
<div id="STOPKA">
<p>© 2010 - created by Faust <a href="http://www.google.pl"> Projetkowanie stron www</a></p>
</div>
</div>
</body>
</html>
kod css
body {
text-align:center;
margin:0 auto;
position:relative;
}
html, body {
background:#8B0000;
color: #000;
margin: 0;
padding: 0;
}
#top {
width: 984px;
margin-left:auto;
margin-right:auto;
text-align:left;
}
#NAGLOWEK {width:auto; height:120px; background:url(header.gif); border:solid 8px #FFFFFF;
}
#NAGLOWEK img {float:left; border-right:solid 8px #FFFFFF;
}
#MENU {
width: 158px;
height:600px;
float: left;
overflow: hidden;
background:url(zolty.gif);
border-left:solid 8px #FFFFFF;
border-right:solid 8px #FFFFFF;
}
#TRESC {
width:802px;
height:600px;
float: left;
overflow: hidden;
background-color:#FFFFFF;
overflow:auto;
border-right:solid 8px #FFFFFF;
}
#STOPKA {
clear: both;
width:auto;
height:60px;
background:url(header.gif);
border:solid 8px #FFFFFF;
}
ul, ul li {
display: block;
list-style: none;
margin: 0;
padding: 0;
}
ul li {
width: 187px;
border-width:2px;
border-style: solid;
border-color:#FFFF00;
}
ul a:link, ul a:visited {
display: block;
width: 187px;
text-decoration: none;
padding: 5px 10px;
font-weight: bold;
background:url("tlo.gif") repeat-x top;
color:#FFFFFF;
border-left: 1px solid #797;
}
ul a:hover {
background-color: #797;
background-image:url("tlo2.gif");
color: #eff;
}
h1, h2, h3, h4, h5, h6 {
font-family:Arial, Helvetica, sans-serif
}
h1,h2 {
text-align:center;
}
h3 {font-size:1em; line-height:1.5em;
}
h4 {
font-size:1em; line-height:1.8em;
margin-top:.2em;
margin-left:.5em;
}
#TRESC img {float:left; margin-right:15px;}
p {font-family:Arial, Helvetica, sans-serif; font-size:1em; text-align:center;
}
a {
text-decoration:none;
color:#000000;
}
table.basic_lines {
width:785px;
border-top:3px solid #069;
float:left;
text-align:left;
border-collapse:collapse;
border-top:3px solid #069;
}
table.basic_lines caption {
margin-bottom:6px;
}
table basic_lines td, table.basic_lines th {
padding:5px 3px;
}
table.basic_lines th {
border-bottom:2px solid #069;
}
table.basic_lines td {
border-bottom:1px solid #069;
}
table.basic_lines td {
background-color:#FFFFCC;
}
table.basic_lines th {
background-color:#CCFFCC;
}
table.basic_lines th[scope="col"] {
background-color:#99CCCC;
}
table.basic_lines td, table.basic_lines th {padding:3px;
border-bottom:1px solid #069;
}
ul, ul li#MENU2 {
display: block;
list-style: none;
margin: 0;
padding: 0;
}
ul li#MENU2 {
float: left;
}
ul a:link, ul a:visited#MENU2 {
text-decoration: none;
display: block;
width: 80px;
text-align: center;
background-color: #ccc;
color: #000;
border: 2px outset #ccc;
padding: 5px;
}
ul a:hover#MENU2 {
border-style: inset;
padding: 7px 3px 3px 7px;
}RE: Menu pionowe i poziome równocześnie - dziamber - 22-01-2010
Ciekawy zapis:
Kod:
ul, ul li { ... }