Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]CSS pozycja listy
Forum PHP.pl > Forum > Przedszkole
gregorali
5.07.2011, 13:58:41
Witam serdecznie
Tak jak w temacie od kilku dni nie mogę zrozumieć dlaczego lista jest po prawej stronie strony a próbowałem już chyba wszystkiego np. clar: both padding margin position relativ itp
Zapewne dotyczy to dziedziczenia ale nie potrafię tego rozwiązać

[HTML] pobierz, plaintext 
  1. </head>
  2. <body>
  3.  
  4. <div id="menu">
  5. <ul>
  6. <li><a href="kontakt.html" title="kontakt">KONTAKT</a></li>
  7. <li><a href="galeria.html" title="galeria">GALERIA</a></li>
  8. <li>TU JESTEŚ<a class="aktywny" href="oferta.html" title="oferta">OFERTA</a></li>
  9. <li><a href="index.html" title="Casa Verde">HOME</a></li>
  10. </ul>
  11. </div>
  12.  
  13. <div id="logo">
  14. <a href="http://www.casaverde.com.pl" title="nowoczesne ogrodzenia, architektura krajobrazu">
  15. <img src="logo1.png" alt="luksusowe ogrodzenia, design ogrodzeń" title="design nowoczesnych ogrodzeń" />
  16. </a>
  17. </div><!-- end logo -->
  18.  
  19. <h1>Naprawdę inne ogrodzenia</h1>
  20.  
  21. <div id="trzy">
  22. <ul>
  23. <li>Trzy ważne przymiotniki: <strong>nowoczesne, ekskluzywne, niepowtarzalne</strong>,</li>
  24. <li>Wyjątkowe ogrodzenia,ograniczone wyłącznie wyobraźnią i możliwościami ludzkiej percepcji.</li>
  25. <li>Piękne, artystyczne aranżacje, harmonijnie skomponowane zarówno z bryłą budynku, jak i z jego otoczeniem.</li>
  26. <li>Nowoczesny design.</li>
  27. <li>Unikalna technologia wywołująca zmiany barwy ogrodzenia pod wpływem warunków pogodowych.</li>
  28. </ul>
  29. </div>
[HTML] pobierz, plaintext


CSS
[HTML] pobierz, plaintext 
  1.  
  2. body {
  3. background-color : #000000; 
  4. padding: 0;
  5. 	margin: 0;
  6. 	color: #7A7A7A;
  7. 	font-size : 90%; 
  8. 	font-style : normal; 
  9. 	font-family : Georgia, Times New Roman, Serif;
  10.  
  11. }
  12.  
  13.  
  14.  
  15. #menu {
  16. margin-right: 15px;
  17. }
  18. ul, ul li {
  19.                   display: block;
  20. 	list-style: none;
  21. 	margin: 0;
  22. 	padding-left: 10px;
  23. 	}
  24.  
  25. ul li {
  26. 	float: right;
  27. 	}
  28.  
  29.  
  30. ul a:link   {
  31.                   color:#1BDDDD;
  32.                  	text-decoration: none;
  33.                   display: block;
  34. 	width: 80px;
  35. 	text-align: center;
  36. 	background-color: #3B3737;
  37. 	color: #F4F4F4;
  38. 	border: 2px outset #484848;
  39. 	padding: 5px;
  40. }
  41.  
  42. ul a:visited { color: #808080;
  43.                       text-decoration: none;
  44.                   display: block;
  45.  
  46. }
  47.  
  48.  
  49.  
  50. ul a:hover {
  51. 	border-style: inset;
  52. 	padding: 7px 3px 3px 7px;
  53. }
  54.  
  55. #menu li .aktywny {
  56.     color: #FFFAFA;
  57.  
  58. 		}
  59.  
  60.  
  61. #logo {
  62. 	clear:both;
  63. 	margin-top: 1px;
  64. 		margin-left: 20px;
  65.  
  66. 		}
  67.  
  68.  
  69. h1  {
  70.    clear: both;
  71.    margin-top: 10px;
  72.    padding:left	 
  73.   }
  74.  
  75. #trzy  { co tu wpisać
  76.  
  77.  
  78. }	
  79.  
[HTML] pobierz, plaintext
Daiquiri
5.07.2011, 14:17:04
Usunąć float: right; ?
gregorali
5.07.2011, 14:31:40
Niestety nie działa.
Daiquiri
5.07.2011, 14:36:08
Pousuwaj wszystkie zbędne margin-right itd. Opcjonalnie dodaj float: left; zamiast float: right;

Tak patrze i float: left; w #menu załatwi sprawę.
gregorali
5.07.2011, 14:57:25
float:left przesuwa całe menu na lewą stronę a tego nie chcę a poza ty nie zmienia pozycji listy nadal jest po prawej stronie.
Jak wspomniałem wcześniej męczę się z tym już trochę i próbowałem i próbowałem i próbowałem. Nawet position absolute nie działa mogę obniżyć listę ale nie mogę zmusić jej do trzymania się prawej strony
Budowaną stronę sprawdzam na Firefox IE Chrome z użyciem Wampserver oraz bez.
Do kodowania notatnik i kED.
boro11
5.07.2011, 15:07:37
Jeśli nie po prawej i lewej to gdzie ma być?
gregorali
5.07.2011, 15:33:24
Przepraszam myślałem, że się dobrze wyraziłem a jednak nie.
Ja pytam o listę div id=trzy a nie o menu zaznaczyłem to w ccs #trzy { co tu wpisać questionmark.gif?
Poprawię się i będę się wyrażał jaśniej.
Daiquiri
5.07.2011, 19:06:32
Albo ja czegoś nie rozumiem, albo Ty nie zerknąłeś w kurs. Float: left; dla #trzy.
gregorali
6.07.2011, 08:42:50
Dziękuję za starania niestety żadna z podpowiedzi nie działa.
Wyznaję zasadę "jeśli nie wiesz co robić, rób co możesz a do problemu wrócisz później" zamieniłem <li> na <p>
i oczywiście działa.
Daiquiri napisałem, że staram się rozwiązać ten problem już od kliku dni co wydaje mi się oczywistym, że kursy czytałem i próbowałem clear, float itp. Obecnie to problem akademicki, bo jak wspomniałem zastąpiłem <li> na <p> ale nadal chciałbym się dowiedzieć dlaczego tak się dzieje?
Może błąd leży w kodowaniu (UTF8) lub iso-8859-2 choć próbowałem obu.
Jeszcze raz dzięki
Pozdrawiam
Daiquiri
6.07.2011, 10:18:14
Widzisz, moim zdaniem jest to problem zbyt dużej ilości atrybutów. Poprawiałeś coś, nie wyszło i zostało. Nie ma tam tego dużo - możesz to spokojnie przepisać od nowa. Zauważ, że dla wszystkich list masz ustawienie float: right (ul li { float: right; }). Jeżeli je usuniesz i dodasz #trzy do stylu listy, która ma być w lewo: <ul id="trzy">, a w CSS ustawisz #trzy ul li { float: left; } będzie do lewej. Jeżeli inna lista ma być do prawej, wykonujesz tę samą czynność: nadajesz jej np. jakiś ID i ostylowujesz (ocztwiście float ma mieć right). Ty, nadałeś styl do prawej dla wszystkich list - stąd Twoje problemy smile.gif.
gregorali
6.07.2011, 12:12:42
Nie rozumiem jak mogę usunąć float:right z menu próbowałem ustawić go w różnych miejscach ale wtedy menu się rozsypuje.
Pytanie czy mógłbyś podpowiedzieć gdzie zatem wstawić float:right
Dopisanie w kodzie <ul id="trzy"> a w css #trzy ul li { float: left; } POMOGŁO co_jest.gif czyżby zmian nazwy tak wpłynęła na sposób działania.
Natomiast przestawiło mi się logo i margin-top nie pomógł zadziałał za to padding-top Dlaczego co_jest.gif przecież to div z innym id.
Dziwne naprawdę bardzo dziwne. To musi mieć coś wspólnego z dziedziczeniem ale dla czego nie działa clear?
Niemniej jednak dzięki za zaangażowanie.
Daiquiri
6.07.2011, 12:30:20
Ustawiłeś sobie w swoim CSS coś takiego jak: ul li { float: right; } - czyli wyrównanie do prawej dla każdego elementu li każdej listy. Rozumiesz smile.gif? Ustawiłeś to jakby z góry. Każda następna lista, będzie miała właśnie takie wyrównanie. To, co ja Ci proponuję to nadawanie pojedynczego ostylowania dla każdej listy z osobna (z racji tego, iż każda ma wyglądać inaczej). Jeżeli nadasz liście ID lub class (sam zdecyduj co dla Ciebie lepsze) - wtedy możesz swobodnie kombinować z jej wyglądem, bez obaw że pozostałe listy też zareagują na zmiany. I tak, dla przykładu:
[HTML] pobierz, plaintext 
  1. <ul id="lista1">
  2. <li>Pozycja</li>
  3. <li>Inna pozycja</li>
  4. </ul>
  5.  
  6. <ul id="lista2">
  7. <li>Pozycja</li>
  8. <li>Inna pozycja</li>
  9. </ul>
[HTML] pobierz, plaintext
A w CSS:
[CSS] pobierz, plaintext 
  1. #lista1 ul li {
  2.     color: #ffffff;
  3. }
  4.  
  5. #lista2 ul li {
  6.     color: #000000;
  7. }
[CSS] pobierz, plaintext
Dzięki temu, każda z list może zostać ostylowana w dowolny sposób smile.gif.
gregorali
6.07.2011, 19:07:53
Dzięki wielkie
Forum jest po to aby zrozumieć i tak się stało. Jeśli nadam atrybut jakiemuś selektorowi np <ul li> to ten atrybut dziedziczą wszystkie "dzieci" i nie ważne w jakim div-ie się znajdują. Do tej pory myślałem, że to div odpowiada za pozycję.
Pozycjonowanie to najtrudniejsza rzecz jaką do tej pory napotkałem w procesie budowy strony.
Jeszcze raz dzięki, bo jestem po tych postach mądrzejszy.
Daiquiri
6.07.2011, 19:30:44
Nic nie stoi na przeszkodzie, żeby DIV również odpowiadał za położenie. Wystarczy usunąć atrybuty odpowiadające za ułożenie elementu listy i nadać je DIVom. Twój problem koncentrował się wokół tego, że atrybuty (w tym i ten nieszczęsny float) nadawałeś do ul li, czyli każdej listy smile.gif. Innymi słowy "wymuszałeś" takie położenie na każdej liście.
gregorali
6.07.2011, 20:02:04
Tak ale w moim przypadku /menu w poziomie po prawej stronie/ nadanie #menu float:right powoduje ustawienie się tegoż menu po prawej stronie w pionie. Jak wspomniałem wcześniej twoje odpowiedzi pomogły mi zrozumieć lub zacząć rozumieć dziedziczenie ale przede mną jeszcze długa droga. Przecież jestem w "przedszkolu" rolleyes.gif

Nie chciałbym nadwyrężać twojej uprzejmości ale spójrz na jeszcze jedną sprawę również dotyczy pozycjonowania, porównaj kody /ten z pierwszego postu oraz obecny/ i zwróć uwagę na # logo padding-top 40 px w tym przypadku margin- top obniżał pozycję logo i menu ale przecież padding to margines wewnętrzny?
Powiedz czy dobrze się domyślam atrybut width:80px w ul a:link sprawia że div menu zajmuje 80px i ustawia się po prawej stronie zostawiając miejsce po lewej a div logo pomimo tego, że w html stoi niżej zajmuje /wolne/ miejsce w górnym lewym rogu czyli oba zaczynają się na tej samej wysokości?
Ps. Muszę pomyśleć jak zrobić aby div-y /podczas pracy-nauki/ wyświetlały się jako prostokąty.

[HTML] pobierz, plaintext 
  1. #logo {
  2. 	padding-top: 40px;
  3. 		margin-left: 20px;
  4.  
  5. 		}
  6.  
  7.  
[HTML] pobierz, plaintext
Daiquiri
7.07.2011, 08:17:42
Poczytaj trochę o modelu pudełkowym np. tutaj, to powinno Ci trochę rozjaśnić różnice w odstępach smile.gif.

Jeżeli Twój DIV nie ma ustawionej szerokości na sztywno (i np. parametru overflow: hidden), to będzie się rozciągał do zawartości. W tym przypadku, faktycznie, mniejsze elementy w środku większego DIVa, wyrównane do jednej ze stron, będą miały trochę miejsca po tej drugiej stronie. Przy pozycjonowaniu elementów oraz ustawianiu ich rozmiarów, zwróć uwagę na to, czy jest to element liniowy czy blokowy.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.