Probem z menu w html i css ! - Wersja do druku
+- 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: Probem z menu w html i css ! (/thread-probem-z-menu-w-html-i-css)
|
RE: Probem z menu w html i css ! - Kartofelek - 29-02-2012
Ogólnie to rzecz biorąc wszyscy jesteście w błędzie.
1) kubax - w html nie ma czegoś takiego jak ul1 itp. W xml już tak
2) Moody - na klasach. Robisz klasę menu i nadpisujesz potem jej wybrane cechy. Osobiście bardzo lubię w ogóle stosować klasy nawet dla pojedynczych wystąpień. Czemu? Bo takie wysapienie może się powielić to raz. Dwa - kod css jest czytelniejszy. A co z ID? Stosuję je dla elementów wykorzystywanych w JS. Dzięki temu patrząc na html od razu wiem co jest dla skryptów.
3) Pedro - Istnieje na tym świecie taki twór. Dokładnie 7 postów w górę
RE: Probem z menu w html i css ! - kubax7 - 29-02-2012
(29-02-2012, 04:33)Kartofelek napisał(a): Ogólnie to rzecz biorąc wszyscy jesteście w błędzie.
1) kubax - w html nie ma czegoś takiego jak ul1 itp. W xml już tak
2) Moody - na klasach. Robisz klasę menu i nadpisujesz potem jej wybrane cechy. Osobiście bardzo lubię w ogóle stosować klasy nawet dla pojedynczych wystąpień. Czemu? Bo takie wysapienie może się powielić to raz. Dwa - kod css jest czytelniejszy. A co z ID? Stosuję je dla elementów wykorzystywanych w JS. Dzięki temu patrząc na html od razu wiem co jest dla skryptów.
3) Pedro - Istnieje na tym świecie taki twór. Dokładnie 7 postów w górę 
Ogólnie dzięki za pomoc Twoje podsumowanie wyjaśnia wszystko
RE: Probem z menu w html i css ! - Moody - 29-02-2012
(29-02-2012, 04:33)Kartofelek napisał(a): 2) Moody - na klasach. Robisz klasę menu i nadpisujesz potem jej wybrane cechy. Osobiście bardzo lubię w ogóle stosować klasy nawet dla pojedynczych wystąpień. Czemu? Bo takie wysapienie może się powielić to raz. Dwa - kod css jest czytelniejszy. A co z ID? Stosuję je dla elementów wykorzystywanych w JS. Dzięki temu patrząc na html od razu wiem co jest dla skryptów. Rozumiem. Ale to znaczy, że jestem w błędzie? Czy założenie identyfikatorów i klas nie jest właśnie takie? Identyfikator - rzecz, która się nie powtarza. Klasy - rzeczy powtarzające się.
Co rozumiesz po przez pojęcie nadpisania?
RE: Probem z menu w html i css ! - Kartofelek - 29-02-2012
I tak i nie. Tak bo właśnie tak działają ID - są unikalne. A przynajmniej powinny być bo często na tym forum widać kody gdzie jest po kilka takich samych ID.
Ja natomiast używam samych klas Profity już opisywałem. Po pierwsze czytelniejszy kod - o tym za chwilę. Po drugie wiem co jest dla JS. Po trzecie łatwo mogę sobie dziedziczyć (np .menu.dolne) Oczywiście ten trzeci punkt spokojnie mogę osiągnąć i z ID.
Ps. ID są szybsze od klas. W realnym życiu raczej nie zauważysz różnicy. Chyba że robisz jakąś skomplikowaną grę. Ale wtedy już raczej nie pytał byś się o takie rzeczy 
http://stackoverflow.com/questions/1230636/css-optimization-element-id-vs-class
http://www.thebrightlines.com/2010/07/28/css-performance-who-cares/
Teraz o czytelności:
Niestety ja używam zapisu, który przez bardzo dużo osób jest znienawidzony - jedno-linijkowców. Nie piszę css w pionie a poziomie. Czemu tak? Przyzwyczajenie, a przede wszystkim większa kontrola nad css. Tak już mam 
Próbowałem już pisać w wielu linijkach ale po kilku stylowanych podstronach nie ogarniałem co jest gdzie.
Tak więc mam np:
Kod: .content {}
.content .header {}
.paging {}
.paging li {}
.footer {}
.footer .header {}
.footer ul {}
.footer ul li {}
.footer small {}
Zamiast:
Kod: #content {}
#content .header {}
.paging {}
.paging li {}
#footer {}
#footer .header {}
#footer ul {}
#footer ul li {}
#footer small {}
W pionowym zapisie nie chce mi się tego kopiować - zresztą było by zbyt długo 
Spójrz na 2 powyższe kody. Niby pierdółka prawda? Ale przy naprawdę wielolinijkowych CSS taka pierdółka sprawia, że CSS jest o wiele czytelniejszy. PS. Jednolinijkowce nie sprawdzają się przy CSS3 - szczególnie przy gradientach. No i w porównaniach plików jest problem.
Tutaj masz przykład takiego zapisu:
http://doman.art.pl/themes/style.css
RE: Probem z menu w html i css ! - kubax7 - 29-02-2012
Panowie niestety znowu muszę się zapytać was fachowców o radę, problem bardzo prosty, ale nie mogę sobie z nim poradzić A mianowicie mam problem z tym, że nadałem najechanym linkom w divie #menu1 padding-left i padding-right 3px i teraz wszystko rozchodzi mi sie na boki, że tak powiem w sensie pozostałe linki w menu przesuwają mi się o te 6 px Nie wiem jak sobie z tym poradzić ?? Może pomoże to, że nadam im odpowiednią szerokość i dlugość ?? Dodaje kody
Kod: <?xml version="1.0" encoding="iso-8859-2"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="Content-type" content="application/xhtml+xml; charset=iso-8859-2" />
<meta name="Description" content=" [wstaw tu opis strony] " />
<meta name="Keywords" content=" Lech Poznań " />
<meta name="Author" content=" Jakub Nawrocki " />
<meta name="Generator" content="kED" />
<title>Lech Poznań </title>
<link rel="stylesheet" href=" style.css" type="text/css" />
</head>
<body>
<div id="strona">
<div id="menu">
<ul>
<li><a href="http://forum.pclab.pl/topic/770595-Upgrade-starego-grata-za-max-1000zł">STRONA GŁÓWNA</a></li>
<li><a href="#">DOWNLOAD</a></li>
<li><a href="#">KONTAKT</a></li>
<li><a href="#">FORUM</a></li>
</ul>
</div>
<div id="menu1">
<ul>
<li><a href="#">STRONA GŁÓWNA</a></li>
<li><a href="#">MENU1</a></li>
<li><a href="#">MENU2</a></li>
<li><a href="#">MENU3</a></li>
<li><a href="#">MENU4</a></li>
<li><a href="#">MENU5</a></li>
</ul>
</div>
<div id="top"><a name="odsylacz"></a></div>
<div id="prawa"><p>Tekst</P></div>
<div id="stopka"><a href="file://localhost/C:/Users/Jakub/Desktop/Szkoła/www/index.html#odsylacz">odsylacz</a></div>
<div id="end"><p style="color:red">sŁONY <a href="http://www.interia.pl">Intera</a></p></div>
<div id="obrazek"><img src="k.png" width="550" height="50"></div>
</div>
</body>
</html>
I CSS
Kod: body{background-image: url("bg-page.jpg") ;
background-size: 100%;
background-attachment: scroll;
background-repeat:repeat-y;
}
*{
margin: 0 auto;
padding: 0;
}
#strona{
margin-top:10px;
margin-bottom:10px;
width:800px;
height:1000px;
background-color:black;
border:solid 1px white;
}
#menu{
margin-top:250px;
margin-left:140px;
padding-top:1px;
padding-left:2px;
width:520px;
height:29px;
background:#E5E4E2;}
#menu ul, #menu li {
display: block;
list-style: none;
margin-right: 3px;
padding: 0;
}
#menu ul {
position: absolute;
}
#menu ul, #menu li {
float: left;
border-width: 0 1px 1px 1px;
border-style: solid;
border-color: transparent #25b #25b #9ce;
}
#menu ul a:link,#menu ul a:visited {
text-decoration: none;
display: block;
width: 125px;
text-align: center;
padding: 5px 0;
font-weight: bold;
font-size: 12px;
color:#E5E4E2;
background-image:url("nie15.gif");
border-top: 2px solid #25b;
}
#menu ul a:hover {
background:#F0F0F0;
}
#menu1{
width:750px;
height:30px;
margin-top:-250px;
padding-left: 50px;
padding-top:5px;
background-image: url("kuk.png");
}
#menu1 ul, #menu1 li {
display: block;
list-style: none;
margin-right: 45px;
padding: 0;
}
#menu ul{
position:absolute;
}
#menu1 ul, #menu1 li {
float: left;
}
#menu1 ul a:link {
text-decoration: none;
display:block;
background-image: none;
font-family:verdana;
font-weight:600;
font-size:13px;
color:#034888;
}
#menu1 ul a:visited{
text-decoration:none;
display:block;
background-image:none;
font-family:verdana;
font-weight:600;
font-size:13px;
color:#034888;
}
#menu1 ul a:hover{
background-color: #034888;
color:white;
padding-left:3px;
padding-right:3px;
}
#top{
margin-top:200px;
margin-left:5px;
position:relative;
float:left;
width:600px;
height:40px;
background-color:white;
border:solid 1px red;}
#prawa{
margin-top:200px;
margin-right:5px;
float:right;
width:50px;
height:50px;
background-color:white;
border: solid 1px red;
}
#stopka{
margin-top:860px;
width:600px;
height:20px;
background-color:blue;
border: solid 1px red;
}
#end{
margin-top:-440px;
margin-left:5px;
width:788px;
height:400px;
background-color:blue;
border: solid 1px white;
}
#obrazek{
position:absolute;
background-color:white;
border:solid 1px red;
margin-top:-450px;
margin-right:5px;
margin-left:100px;
}
RE: Probem z menu w html i css ! - Kartofelek - 01-03-2012
Wpierw stylujesz tak:
Kod: #menu ul a:link,#menu ul a:visited {
...
padding: 5px 0;
}
a potem dajesz jednak po 3px z każdej strony. Nie dziw się że ci się rozjeżdża.
Daj początkowym (w powyższym) padding:5px 3px i odpowiednio zmień szerokość na 125-6 = 119px
RE: Probem z menu w html i css ! - kubax7 - 01-03-2012
(01-03-2012, 00:29)Kartofelek napisał(a): Wpierw stylujesz tak:
Kod: #menu ul a:link,#menu ul a:visited {
...
padding: 5px 0;
}
a potem dajesz jednak po 3px z każdej strony. Nie dziw się że ci się rozjeżdża.
Daj początkowym (w powyższym) padding:5px 3px i odpowiednio zmień szerokość na 125-6 = 119px 
Ale mi chodzi o div #menu1 a nie #menu
RE: Probem z menu w html i css ! - Kartofelek - 01-03-2012
masz
Kod: #menu1 ul, #menu1 li {
padding: 0;
}
Potem masz:
Kod: #menu1 ul a:hover{
....
padding-left:3px;
padding-right:3px;
}
Z mojej strony to tyle w temacie. Nie lubię pomagać tym co czekają na gotowe zamiast włożyć w rozwiązanie problemu choć trochę swojej pracy.
RE: Probem z menu w html i css ! - kubax7 - 01-03-2012
(01-03-2012, 04:19)Kartofelek napisał(a): masz
Kod: #menu1 ul, #menu1 li {
padding: 0;
}
Potem masz:
Kod: #menu1 ul a:hover{
....
padding-left:3px;
padding-right:3px;
}
Z mojej strony to tyle w temacie. Nie lubię pomagać tym co czekają na gotowe zamiast włożyć w rozwiązanie problemu choć trochę swojej pracy.
Doszedłem do rozwiązania już sam więc spoko
|