Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [XHTML][CSS]Szerokość <li>
Armstrong
post 12.01.2010, 19:50:14
Post #1





Grupa: Zarejestrowani
Postów: 200
Pomógł: 40
Dołączył: 26.08.2009
Skąd: Kobiernice

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

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ść).


Ten post edytował Armstrong 12.01.2010, 19:52:29


--------------------
// NOPE
Go to the top of the page
+Quote Post
krzysztof_kf
post 12.01.2010, 20:13:06
Post #2





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

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

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
Go to the top of the page
+Quote Post
Armstrong
post 12.01.2010, 20:14:16
Post #3





Grupa: Zarejestrowani
Postów: 200
Pomógł: 40
Dołączył: 26.08.2009
Skąd: Kobiernice

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

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 :/

Ten post edytował Armstrong 12.01.2010, 20:15:19


--------------------
// NOPE
Go to the top of the page
+Quote Post
krzysztof_kf
post 12.01.2010, 20:16:03
Post #4





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

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

myślę
Go to the top of the page
+Quote Post
Volume
post 12.01.2010, 20:18:03
Post #5





Grupa: Zarejestrowani
Postów: 283
Pomógł: 11
Dołączył: 11.10.2004
Skąd: 3c

Ostrzeżenie: (10%)
X----

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.

Ten post edytował Volume 13.01.2010, 09:26:44
Go to the top of the page
+Quote Post
Armstrong
post 13.01.2010, 17:11:14
Post #6





Grupa: Zarejestrowani
Postów: 200
Pomógł: 40
Dołączył: 26.08.2009
Skąd: Kobiernice

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

Jak możesz to rzuć przykład, bo nie mogę "rozkminić" albo w ogóle źle robię :/


--------------------
// NOPE
Go to the top of the page
+Quote Post
Volume
post 15.01.2010, 08:44:09
Post #7





Grupa: Zarejestrowani
Postów: 283
Pomógł: 11
Dołączył: 11.10.2004
Skąd: 3c

Ostrzeżenie: (10%)
X----

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...

Ten post edytował Volume 15.01.2010, 08:59:57
Go to the top of the page
+Quote Post
« Następny starszy · Po stronie przeglądarki · 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: 24.04.2024 - 21:39
Powered By IP.Board © 2024  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn