Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]css wyśrodkowanie img
Forum PHP.pl > Forum > Przedszkole
emia
13.06.2008, 09:25:53
pewnie już gdzieś to było, ale przeczytałam wszystkie wyśrodkowania i nie pomogły.

mam stronę w divach,w nagłówku wielki obrazek ,poniżej menu (które już jest ładnie wyśrodkowane)-oba są w tabeli, poniżej są menu tekst i informacje w divowych kolumnach. z wyjątkiem nagłówka wszystko jest wyśrodkowane. próbowałam przez margin: auto, text-align: center, float:left, width: 100%, width: 1000px.... itp. i nic. obrazek nagłówkowy mam wysunięty na prawo w stosunku do reszty strony. zamieszczam poniżej css:

[HTML] pobierz, plaintext 
  1. html, body {
  2.         background-color: #fff;
  3.         color: #000;
  4.         margin-top: 20px;
  5.         padding: 0;
  6.         font-family: "Calibri";
  7.         font-size: small;
  8. }
  9.  
  10. p {
  11.         text-align: justify;
  12.         margin-left: 30px;
  13. }        
  14.  
  15. ul, ul li {
  16.         display: block;
  17.         list-style: none;
  18.         margin: 0;
  19.         padding: 0;
  20. }
  21.  
  22. ul li {
  23.         float: left;
  24. }
  25.  
  26. ul a:link, ul a:visited {
  27.                    font-type: "Neuropol";
  28.                    font-size: medium;
  29.         text-decoration: none;
  30.         display: block;
  31.         text-align: center;
  32.         border: 2px outset #ccc;
  33.         padding: 5px;
  34. }
  35.  
  36. ul a:hover {
  37.         border-style: inset;
  38.         padding: 7px 3px 3px 7px;
  39. }
  40.  
  41. #top {
  42.         width: 780px;
  43.         text-align: center;
  44.         margin: auto;
  45. }
  46.  
  47. #NAGLOWEK {
  48.         background-color: #888;
  49. }
  50.  
  51. #MENU {
  52.         margin-top: 20px;
  53.         width: 125px;
  54.         float: left;
  55.         overflow: hidden;
  56. }
  57.  
  58. #INFORMACJE {
  59.         width: 125px;
  60.         margin-left: 30px;
  61.         margin-top: 50px;
  62.         float: right;
  63.         overflow: hidden;
  64.         text-align: left;
  65. }
  66.  
  67. #TRESC {
  68.         margin-top: 25px;
  69.         width: 500px;
  70.         float: left;
  71.         overflow: hidden;      
  72. }
  73.  
  74. #STOPKA {
  75.     clear: both;
  76.     width: 100%;
  77.     background-color: #888;
  78. }
[HTML] pobierz, plaintext
JoShiMa
13.06.2008, 10:45:54
Cytat(emia @ 13.06.2008, 08:25:53 ) *
mam stronę w divach,w nagłówku wielki obrazek ,poniżej menu (które już jest ładnie wyśrodkowane)-oba są w tabeli

Skoro są w tabeli to jak możesz mówić, że masz stronę w divach? aaevil.gif

A jak się nazywa ta nieszczęsna tabelka w której masz ten brazek? To ona powinna mieć margin: auto.
-emia-
13.06.2008, 10:59:23
no cóż, to jedyna tabela na tej stronie-na nagłówek,reszta jest w divach blinksmiley.gif
JoShiMa
13.06.2008, 11:03:03
Cytat(-emia- @ 13.06.2008, 09:59:23 ) *
no cóż, to jedyna tabela na tej stronie-na nagłówek,reszta jest w divach blinksmiley.gif

To dlaczego nie możesz tego nagłówka zrobić na divach? Div z obrazkiem nagłówka i poziomy ul z pozycjami menu.
Pilsener
13.06.2008, 13:22:54
A gdzie HTML?
Jeśli obrazek jest stałym elementem layoutu to nie daje się go jako <img />, lecz wstawia jako tło elementu. Img jest odpowiedni do wstawiania unikatowych pikczerów do tekstu, a nie budowania czegokolwiek. Każdy img to dodatkowe bajty kodu, rozwalanie strony podczas ładowania tychże imgów, dodatkowe zapytanie http, itp. itd. - mógłbym cały dzień gadać o wadach imgów. Tabelki + imgi należy natychmiast wyrzucić i strukturę strony budować na div'ach, nagłówkach i paragrafach a grafikę dodawać w CSS. Ma to także tą oczywistą zaletę, że łatwo w CSS zmieniać wygląd całego serwisu, niż potem podmieniać/usuwać takie imgi smile.gif
emia
16.06.2008, 07:32:04
no dobra,to jak wstawić tego nagłowkowego imga żeby był tłem a nie imgiem i nie zajmował mi całej strony tylko siedział na jej górze a poniżej menu w poziomie?tabelke już wywaliłam,ale jak zostały same divy to cała strona trochę zmieniła wygląd.(menu z lewej poszło w prawo, menu poziome sie scieśniło,text poszedł w lewo a menu z prawej odsunęło się od textu. blinksmiley.gif
Shili
16.06.2008, 09:40:10
Cytat
rozwalanie strony podczas ładowania tychże imgów

Chyba nie do końca wiesz o czym mówisz winksmiley.jpg Gdy obrazek ma nadane width i height choćby w stylach, to nic nie ma się prawa rozwalić.

@up
Dodaj jeszcze kod html. Będzie prościej.
Prawdopodobnie jednak w stylach w sekcji nagłówka musisz po prostu dodać tło obrazkowe.
-emia-
16.06.2008, 10:16:09
cóż,jest to bardziej niz prawdopodobne wstydnis.gif , jakkolwiek dźwięczna bylabym za pomoc



[HTML] pobierz, plaintext 
  1. <!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-type" content="text/html;charset=ISO-8859-2">
  5. <link href="style.css" rel="Stylesheet" type="text/css"> 
  6. <title>.........</title>
  7. </head>
  8. <body>
  9. <div id="top" align="center">
  10. <div id="NAGŁÓWEK">
  11.  
  12. <ul>
  13. <li><a href="......">STRONA GŁÓWNA</a></li>
  14. <li><a href=".......">OFERTA</a></li>
  15. <li><a href="..........">REALIZACJE</a></li>
  16. <li><a href=".......">FIRMA</a></li>
  17. <li><a href="...........">CERTYFIKATY</a></li>
  18. <li><a href="...........">KONTAKT</a></li>
  19. </ul>
  20.  
  21. </div>
  22.  
  23. <div id="MENU">
  24. <ul>
  25. <li><a href="........">HISTORIA FIRMY</a></li>
  26. <li><a href="......">ZARZĄD</a></li>
  27. </ul>
  28. </div>
  29.  
  30. <div id="TRESC"><p>.............................................</p>
  31. </div>
  32.  
  33. <div id="INFORMACJE">
  34. <ul1>
  35. <li type=circle><b>Centrala</b><br><br>tel.: ........<br>fax: ..............</li><br><br>
  36. <li type=circle><b>E-mail</b><br><br><a href="mailto:................">.......................</a></li>
  37. </ul>
  38. </div>
  39. </div>
  40. </body>
  41. </html>
[HTML] pobierz, plaintext
ciepolml
16.06.2008, 11:08:17
Oj, kod boli ....

Sprobuj cala swoją stronkę zamknąć w div#wrap o parametrach:

div#wrap{
margin: 0 auto;
padding:0; }

<div id="wrap">
.. twoej wszytkei divy ...
</div>

Nie gwarantuje, bo tu by trzeba jeszcze te flow przeanalizować.
Aha, wywal przy div top, to align="center", nie uzywamy takiego czegos, po to masz indentyfikator zeby nadac mu style css.
marck
16.06.2008, 22:08:18
A może tak?
img{position: absolute; top:200px; left:200px; }

Zawsze możesz zastosować pozycjonowanie absolutne. Odległość od top, możesz zamienić na bottom, left na right itp.
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.