+- 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ł: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: Problem menu poziome i pionowe (/thread-problem-menu-poziome-i-pionowe)
Problem menu poziome i pionowe - kubatur0 - 01-04-2010
Kod:
html, body {
background-image: url("../images/ikonka.jpg");
}
.pionowe a:link {
color: white;
text-decoration: none;
}
.pionowe a:visited{
color: black;
}
ul#poziome, ul#poziome li {
display: block;
list-style: none;
margin: 0;
padding: 0;
}
ul#poziome li {
display: inline;
white-space: nowrap;
background-image: url("../images/menu.jpg") no-repeat;
}
ul #poziome a:link, ul #poziom a:visited {
display: block;
text-decoration: none;
font-weight: bold;
background: black;
color: white;
}
ul .pionowe, ul .pionowe li {
display: block;
list-style: none;
margin: 0;
padding: 0;
}
ul .pionowe li {
width: 160px;
padding-left: 19px;
background: url("../images/kamien.jpg") no-repeat left top;
float:left;
}
ul .pionowe a:link, ul .pionowe a:visited {
display: block;
width: 139px;
text-decoration: none;
padding: 5px 10px;
font-weight: bold;
background: black;
color: white;
}
ul .pionowe a:hover{
background-color: black;
color: violet;
}
ul .pionowe li a:hover{
width: 160px;
padding-left: 19px;
background: url("../images/kamien1.jpg") no-repeat right top;
}
.menu{
background-image: ulr("../images/linia.jpg");
color: white;
font-size: 16pt;
font-weight: bold;
text-indent: 20px;
}
.submenu{
color:pink;
margin-left: 60px;
float: left;
}
#top {
width: 880px;
margin-top: 20px;
margin-left: 200px;
}
#NAGLOWEK {
background-color: #888;
background-image: url("../images/banner.jpg");
height: 200px;
}
#MENUGORNE{
height: 20px;
background-color: black;
}
#NAW1{
background-image: url("../images/naw2.jpg");
float: left;
width: 5px;
height: 795px;
}
#MENU {
width: 180px;
float: left;
background-color: black;
height: 700px;
}
#NAW2{
background-image: url("../images/naw2.jpg");
width: 5px;
height: 795px;
float: left;
}
#INFORMACJE {
width: 200px;
float: left;
overflow: hidden;
background-color: black;
height: 700px;
}
#TRESC {
width: 690px;
float: center;
overflow: hidden;
background-color: black;
height: 800px
}
#STOPKA {
clear: both;
background-image: url("../images/stopka.jpg");
width: 880px;
background-color: #888;
height: 100px;
float: left;
}Oto moj plik .css ... mam pewien problem. Na stronie chce umiescic 2 menu (poziome i pionowe). Przez ciagle zabawy na tym pliku zrobil sie tam taki burdel ze nie potrafie tego juz ogarnac... ;( nie moge ustawic obu menu tak zeby byly tak jak sobie to wymyslilem. Na stronie za pomoca Div-ow ustawilem wszystkie czesci strony takie jak naglowek, tresc menu menugornew itp itd. Menu wsadzilem za pomoca <ul><li>. Czy ktos moze mi pomoc, co mam zrobic zeby dzialalo
glowny problem mam z ta gorna czescia .pionowe #poziome zeby dzialalo jak nalezy... Bede wdzieczny za pomoc...
RE: Problem menu poziome i pionowe - KowR - 01-04-2010
Lepiej stosuj tak:
XHTML:
Kod:
<div id="menupoziome">
<ul>
<li><a href="">Pozycja menu poziomego</a></li>
<li><a href="">Pozycja menu poziomego</a></li>
<li><a href="">Pozycja menu poziomego</a></li>
<li><a href="">Pozycja menu poziomego</a></li>
<li><a href="">Pozycja menu poziomego</a></li>
</ul>
</div>
<div id="menupionowe">
<ul>
<li><a href="">Pozycja menu pionowego</a></li>
<li><a href="">Pozycja menu pionowego</a></li>
<li><a href="">Pozycja menu pionowego</a></li>
<li><a href="">Pozycja menu pionowego</a></li>
<li><a href="">Pozycja menu pionowego</a></li>
</ul>
</div>Oraz CSS
Kod:
div#menupoziome {
margin:0px;
padding:0px;
text-align:center;
width:1000px;
float:left;
}
div#menupoziome ul {
text-align:center;
margin:0px;
padding:0px;
display:inline;
width:1000px;
list-style-type:none;
}
div#menupoziome ul li {
text-align:center;
margin:0px;
padding:0px;
display:inline;
list-style-type:none;
}
div#menupoziome ul li a {
text-align:center;
margin:0px;
padding:0px;
display:inline;
color:#000000;
text-decoration:none;
}
div#menupoziome ul li a:hover {
text-align:center;
margin:0px;
padding:0px;
display:inline;
color:#000000;
text-decoration:underline;
}
div#menupionowe {
margin-top:30px;
margin-left:0px;
margin-right:0px;
margin-bottom:0px;
padding:0px;
text-align:center;
width:300px;
float:left;
}
div#menupionowe ul {
text-align:left;
margin:0px;
padding:0px;
display:block;
width:300px;
list-style-type:none;
}
div#menupionowe ul li {
text-align:left;
margin:0px;
padding:0px;
display:block;
width:300px;
list-style-type:circle;
}
div#menupionowe ul li a {
margin:0px;
padding:0px;
color:#000000;
text-decoration:none;
}
div#menupionowe ul li a:hover {
margin:0px;
padding:0px;
color:#000000;
text-decoration:underline;
}Dla ułatwienia stosuj sobie komentarze które będą oddzielać Ci elementy...
Np. nad menu poziomym:
Kod:
/* MENU POZIOME */A nad menu pionowym:
Kod:
/* MENU PIONOWE */I reszta analogicznie.
Pokazałeś kawałek CSS'a, który ma bardzo mało linijek. A co by było gdybyś miał do zakodowania ogromny layout?
Pisane z palca.