Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Problem z ustawieniem elementów obok siebie
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
dominikx96
mam problem z ustawieniem elementów.
Otóż na stronie posiadam obrazek + 2 linijki tekstu + blok tekstu z białym tłem.
Wszystko jest na tle, które jest roziągnięte na maxa w szerokości, a ograniczone w wysokości.

Zobrazuje to ten screen:

http://scr.hu/0ec9/i1pn7

Na mojej rozdziałce monitora jest wszystko git, ale na innych (mniejszych już się strona rozsypuje)- elementy schodzą w dół poza niebieskie tło, jedynie babka zostaje.

Kod html i css wygląda tak (kombinowałem różnymi sposobami, w końcu jest coś takiego:

  1. <div id="content4">
  2. <div id="centrowanie">
  3. <div class="girl"></div>
  4. <div id="lewus">
  5. <div class="blok-tekstowy">
  6. <div class="content4-text1">LOREM IPSUM</div>
  7. <div class="content4-text2">LOREM IPSUM</div>
  8. </div>
  9. <div class="content4-background">
  10. <div class="content4-backgroundtext">
  11. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  12. Praesent luctus enim ipsum. Cras vel justo nunc.
  13. Sed sollicitudin nisi sit amet blandit tincidunt.
  14. Cras libero ipsum, sagittis nec hendrerit id, interdum eget erat.
  15. Nunc pharetra accumsan tortor sit amet varius. Quisque quis metus luctus.
  16. <br/><br/>
  17. Vivamus quis lacinia diam. Sed faucibus lorem orci, quis cursus quam ornare id. Suspendisse cursus nisl et dignissim rutrum. Integer in iaculis tellus.
  18. </div>
  19. </div>
  20. </div>
  21. </div>
  22. </div>


i css:

  1. #content4{
  2. margin-top:50px;
  3. width:auto;
  4. height:708px;
  5. background-color:#dbe2f2;
  6. }
  7.  
  8. .girl{
  9. float:left;
  10. width:337px;
  11. height:660px;
  12. background:url(../images/girl.png);
  13. }
  14.  
  15. #lewus{
  16. float:left;
  17. margin-left:50px;
  18. }
  19.  
  20.  
  21. .blok-tekstowy{
  22. margin-top:80px;
  23. margin-left:80px;
  24. }
  25.  
  26. .content4-text1{
  27. font-family: latobold;
  28. font-size: 80px;
  29. color:#3c6199;
  30. }
  31.  
  32. .content4-text2{
  33. font-family: latolight_italic;
  34. font-size: 30px;
  35. color:#3c6199;
  36. }
  37.  
  38. .content4-background{
  39. width: 580px;
  40. height: 330px;
  41. background-color:#FFF;
  42.  
  43. -moz-border-radius:8px; /* FF */
  44. -webkit-border-radius:8px; /* przeglądarki z webkitem (Safari, Chrome itp.) */
  45. -khtml-border-radius:8px; /* przeglądarki typu K-meleon (typowo Linuxowe) */
  46. border-radius:8px; /* pozostałe przeglądarki */
  47. }
  48.  
  49. .content4-backgroundtext{
  50. font-family: latoregular;
  51. font-size: 21px;
  52. color:#3c6199;
  53. text-align:left;
  54. width:500px;
  55. height:80px;
  56. margin-left:50px;
  57. margin-top:50px;
  58. }


Proszę, pomóżcie ! smile.gif
werdan
Te elementy nie mieszcza sie kolo siebie na mniejszych rozdzielczosciach.

div.girl ma 337 px szerokosci
div.lewus ma 626px szerokosc + 50px margin-left.

Sprobuj pousuwac stałe szerokosci w pikselach lub daj w %
dominikx96
Ale jak usuwam wymiary girl (obrazek) to mi on znika sad.gif
werdan
Sprobuj dac obrazek nie jako tło elementu a zwykły <img>. Najlepiej jakbyś dał przykład online, to można sie pobawić i coś poradzić.

Do jakiej minimalnej rozdzielczosci text powinien być koło obrazka?

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.