Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS]CSS pozycja listy, nie pomaga clear
gregorali
post 5.07.2011, 13:58:41
Post #1





Grupa: Zarejestrowani
Postów: 10
Pomógł: 0
Dołączył: 30.06.2011

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
Daiquiri
post 5.07.2011, 14:17:04
Post #2





Grupa: Administratorzy
Postów: 1 552
Pomógł: 211
Dołączył: 7.07.2009
Skąd: NJ
Usunąć float: right; ?
Go to the top of the page
+Quote Post
gregorali
post 5.07.2011, 14:31:40
Post #3





Grupa: Zarejestrowani
Postów: 10
Pomógł: 0
Dołączył: 30.06.2011

Ostrzeżenie: (0%)
-----

Niestety nie działa.
Go to the top of the page
+Quote Post
Daiquiri
post 5.07.2011, 14:36:08
Post #4





Grupa: Administratorzy
Postów: 1 552
Pomógł: 211
Dołączył: 7.07.2009
Skąd: NJ
Pousuwaj wszystkie zbędne margin-right itd. Opcjonalnie dodaj float: left; zamiast float: right;

Tak patrze i float: left; w #menu załatwi sprawę.
Powód edycji: [Daiquiri]:
Go to the top of the page
+Quote Post
gregorali
post 5.07.2011, 14:57:25
Post #5





Grupa: Zarejestrowani
Postów: 10
Pomógł: 0
Dołączył: 30.06.2011

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
boro11
post 5.07.2011, 15:07:37
Post #6





Grupa: Zarejestrowani
Postów: 283
Pomógł: 11
Dołączył: 9.07.2010
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

Jeśli nie po prawej i lewej to gdzie ma być?

Ten post edytował boro11 5.07.2011, 15:09:01
Go to the top of the page
+Quote Post
gregorali
post 5.07.2011, 15:33:24
Post #7





Grupa: Zarejestrowani
Postów: 10
Pomógł: 0
Dołączył: 30.06.2011

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
Daiquiri
post 5.07.2011, 19:06:32
Post #8





Grupa: Administratorzy
Postów: 1 552
Pomógł: 211
Dołączył: 7.07.2009
Skąd: NJ
Albo ja czegoś nie rozumiem, albo Ty nie zerknąłeś w kurs. Float: left; dla #trzy.
Go to the top of the page
+Quote Post
gregorali
post 6.07.2011, 08:42:50
Post #9





Grupa: Zarejestrowani
Postów: 10
Pomógł: 0
Dołączył: 30.06.2011

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
Daiquiri
post 6.07.2011, 10:18:14
Post #10





Grupa: Administratorzy
Postów: 1 552
Pomógł: 211
Dołączył: 7.07.2009
Skąd: NJ
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.
Go to the top of the page
+Quote Post
gregorali
post 6.07.2011, 12:12:42
Post #11





Grupa: Zarejestrowani
Postów: 10
Pomógł: 0
Dołączył: 30.06.2011

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
Daiquiri
post 6.07.2011, 12:30:20
Post #12





Grupa: Administratorzy
Postów: 1 552
Pomógł: 211
Dołączył: 7.07.2009
Skąd: NJ
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.
Go to the top of the page
+Quote Post
gregorali
post 6.07.2011, 19:07:53
Post #13





Grupa: Zarejestrowani
Postów: 10
Pomógł: 0
Dołączył: 30.06.2011

Ostrzeżenie: (0%)
-----

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.

Ten post edytował gregorali 6.07.2011, 19:09:11
Go to the top of the page
+Quote Post
Daiquiri
post 6.07.2011, 19:30:44
Post #14





Grupa: Administratorzy
Postów: 1 552
Pomógł: 211
Dołączył: 7.07.2009
Skąd: NJ
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.
Go to the top of the page
+Quote Post
gregorali
post 6.07.2011, 20:02:04
Post #15





Grupa: Zarejestrowani
Postów: 10
Pomógł: 0
Dołączył: 30.06.2011

Ostrzeżenie: (0%)
-----

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


Ten post edytował gregorali 6.07.2011, 20:03:10
Go to the top of the page
+Quote Post
Daiquiri
post 7.07.2011, 08:17:42
Post #16





Grupa: Administratorzy
Postów: 1 552
Pomógł: 211
Dołączył: 7.07.2009
Skąd: NJ
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.
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 18.07.2025 - 04:04
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn