Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [XHTML][CSS]Szerokość <li>
Forum PHP.pl > Forum > Po stronie przeglądarki
Armstrong
12.01.2010, 19:50:14
Witam, jako, że pierwszy raz spotykam tak trudny (ale pewnie banalny) problem z CSS i <li> postanowiłem na tym forum poprosić o radę. Przejdę do konkretów posiadam taki kod :

[HTML] pobierz, plaintext 
  1. <div style="overflow:auto;" id="container">
  2. <div id="dane">
  3. <ul>
  4. <li>Nick:</li>
  5.  
  6. <li style="font-weight: bold;">Armstrong</li>
  7. <img src="images/avatary/a741cdf4d61e1083064d813a5a1ec8aa.jpg" title="Armstrong" align="right" />
  8. <br />
  9. <br />
  10. <li>Grupa:</li>
  11. <li style="font-weight: bold;">Administratorzy</li>
  12. </ul>
  13. <br /><br />
  14. <ul>
  15. <li>asd</li>
  16. <li style="font-weight: bold;">asdsdadas</li>
  17. </ul>
  18.  
  19. </div>
  20.  
  21. </div>
[HTML] pobierz, plaintext

CSS:
[HTML] pobierz, plaintext 
  1. #dane{
  2.     height: 300px;
  3.     margin: 0px auto;
  4.     margin-top: 20px;
  5.     width: 300px;
  6.     border-style: solid;
  7.     border-width: 2px;
  8.     border-color: #CCCCCC;
  9.     color: #E27324;
  10. }
  11.  
  12. #dane ul li {
  13.     padding: 5px;
  14.     float:left;
  15.     border-style: solid;
  16.     border-width: 2px;
  17.     border-color: #C5C5C5;
  18.     list-style: none;
  19. }
  20. #dane ul{
  21.  
  22.     padding: 0px !important;
  23.     margin: 0px !important;
  24.  
  25. }
  26. #dane img{
  27.      border-style: solid;
  28.      border-width: 2px;
  29.      border-color: #C5C5C5;
  30. }
[HTML] pobierz, plaintext


który ukazuje moim oczą taki wynik:



Natomiast chcę osiągnąć takie coś, a mianowicie aby Armstrong, Administrator, asdsdadas konkretniej <li> w których się te teksty znajdują rozciągały się do całej wolnej przestrzeni.
Dokładnie tak:



Np: width: 100px; itd nie wchodzą w grę (obrazki mają różną szerokość).
krzysztof_kf
12.01.2010, 20:13:06
polecił bym zrobić to i owo głównie zdjęcie w tabeli czyli robisz cały spis po lewej stronie a tabele robisz po prawej stronie

musisz dać jakiś styl dla zdjęcia bo inaczej myślę będzie ci się rozciągać po całości zdjęcia
Armstrong
12.01.2010, 20:14:16
Tabelki nie mają racji bytu u mnie. Zerwałem z nimi. Szukam rozwiązania godnego dzisiejszych czasów, przeglądarek, a tabelki raczej nimi nie są.

I właśnie tak jest tylko nie wiem jak to zatrzymać przed obrazkiem :/
krzysztof_kf
12.01.2010, 20:16:03
myślę
Volume
12.01.2010, 20:18:03
Na tych blokach tego za bardzo nie osiagniesz (przynajmniej tak zeby Ci to dzialalo na roznych przegladarkach), najwyzej w tabeli, ale dane tabelaryczne to tez nie do konca sa.

Tak czy inaczej spewnoscia taki zapis:
[HTML] pobierz, plaintext 
  1. <li>Grupa:</li>
  2. <li style="font-weight: bold;">Administratorzy</li>
[HTML] pobierz, plaintext

jest bez sensu semantycznie.
Jeśli już to:
[HTML] pobierz, plaintext 
  1. <li><span>Grupa: </span><strong>Administratorzy</strong></li>
[HTML] pobierz, plaintext

i opisz span i strong w css.

Ja bym tego nie robil samym cssem lecz pomogl sobie podkladem (background) z obrazkow - wtedy taki efekt jak narysowales dosc prosto osiagnac. Tworzysz tlo z borderem ktory powielasz po osi x a border dla y dla oddzielenia span od strong - czy jak tam to otagujesz- mozesz juz w css. Do border po y prawy stosujesz pozycjonowanie w background. Jak sobie nie poradzisz to daj znac, jutro postaram sie pokazac.
Armstrong
13.01.2010, 17:11:14
Jak możesz to rzuć przykład, bo nie mogę "rozkminić" albo w ogóle źle robię :/
Volume
15.01.2010, 08:44:09
W sumie to mozna sprobowac zrobic bez obrazków, moja propozycja:
[HTML] pobierz, plaintext 
  1. * {
  2. 	padding: 0;
  3. 	margin: 0;
  4. 	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  5. 	border: 0;
  6. }
  7. body {
  8. 	text-align: center;
  9. }
  10. div#all {
  11. 	width: 800px;
  12. 	background: red;
  13. 	border: 2px solid black;
  14. 	margin: 20px auto;
  15. 	text-align: left;
  16. }
  17. ul#data li {
  18. 	border-bottom: 2px solid black;
  19. 	list-style-type: none;
  20. 	padding: 4px 0;
  21. }
  22. ul#data li span {
  23. 	border-right: 2px solid black;
  24. 	padding: 6px;
  25. }
  26. ul#data li strong {
  27. 	padding: 6px;
  28. } 
  29. img#data_image {
  30. 	border: 2px solid black;
  31. 	float: right;
  32. 	margin: -2px -2px 0 0; /* dla IE: -2px -5px 0 0  */
  33. }
  34. p#footer {
  35. 	clear: both;
  36. 	padding: 6px;
  37. }
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
  1. <body>
  2. <div id="all">
  3. <img id="data_image" src="http://antyweb.pl/wp-content/uploads/2008/11/opera-logo001.jpeg" />
  4. <ul id="data">
  5. <li><span>Nick: </span> <strong>Amstrong</strong></li>
  6. <li><span>Grupa: </span> <strong>Administratorzy</strong></li>
  7. <li><span>Cos innego: </span> <strong>ppp</strong></li>
  8. </ul>
  9. <p id="footer">footer ?</p>
  10. </div>
  11. </body>
[HTML] pobierz, plaintext

Z tym ze dla obrazka w IE widnieje maly margines ok 2px po prawej stronie - zaznaczylem to w komentarzu w css wiec mozesz zrobic instrukcje warunkowe dla IE i dla restzy przegladarek, lub obrazek pozycjonowac wzgledem #data:
[HTML] pobierz, plaintext 
  1. #data { position: relative }
  2. img#data_image { position: absolute; top: -2px; right: -2px; /* -2px - bo border ustawiony u mnie jest dla #all na 2px */ } 
[HTML] pobierz, plaintext
Ale tu bedziesz musial miec wiecej tresci lub dac duzy padding-bottom lub margin-bottom dla <ul>

Natomiast jezli chcialbys koniecznie to zrobic tak jak masz na przykladzie - czyli zebys mial domyslnie rozszerzane to mozna to zrobic z pomoca php, np. napisac skrypt co bedzie pobierac szerokosc zdjecia w zaleznosci od szerokosci div'a glownego ktory zakladamy, ze mialby 100% (u mnie 800px=100%). I majac juz szerokosc zdjecia trzeba napisac funkcje 100% diva gl w px - szerokosci zdjecia i przypisywac dla <ul> wynik... Ale to tak na upartego... Ja bym kombinowal cos tak jak ja podalem powyzej...
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.