Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [HTML][CSS]css wyśrodkowanie img, kolejny banał
emia
post 13.06.2008, 09:25:53
Post #1





Grupa: Zarejestrowani
Postów: 6
Pomógł: 0
Dołączył: 6.06.2008

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

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
Go to the top of the page
+Quote Post
JoShiMa
post 13.06.2008, 10:45:54
Post #2





Grupa: Zarejestrowani
Postów: 1 374
Pomógł: 149
Dołączył: 1.03.2006

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

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.


--------------------
Zajrzyj, poczytaj, naucz się
Go to the top of the page
+Quote Post
--emia--
post 13.06.2008, 10:59:23
Post #3





Goście
no cóż, to jedyna tabela na tej stronie-na nagłówek,reszta jest w divach blinksmiley.gif
Go to the top of the page
+Quote Post
JoShiMa
post 13.06.2008, 11:03:03
Post #4





Grupa: Zarejestrowani
Postów: 1 374
Pomógł: 149
Dołączył: 1.03.2006

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

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.


--------------------
Zajrzyj, poczytaj, naucz się
Go to the top of the page
+Quote Post
Pilsener
post 13.06.2008, 13:22:54
Post #5





Grupa: Zarejestrowani
Postów: 1 590
Pomógł: 185
Dołączył: 19.04.2006
Skąd: Gdańsk

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

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
Go to the top of the page
+Quote Post
emia
post 16.06.2008, 07:32:04
Post #6





Grupa: Zarejestrowani
Postów: 6
Pomógł: 0
Dołączył: 6.06.2008

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

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
Go to the top of the page
+Quote Post
Shili
post 16.06.2008, 09:40:10
Post #7





Grupa: Zarejestrowani
Postów: 1 085
Pomógł: 231
Dołączył: 12.05.2008

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

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.
Go to the top of the page
+Quote Post
--emia--
post 16.06.2008, 10:16:09
Post #8





Goście
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
Go to the top of the page
+Quote Post
ciepolml
post 16.06.2008, 11:08:17
Post #9





Grupa: Zarejestrowani
Postów: 18
Pomógł: 2
Dołączył: 12.04.2008
Skąd: Poznań

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

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.

Ten post edytował ciepolml 16.06.2008, 11:09:44


--------------------
--- www.NeatGroup.pl ---
Go to the top of the page
+Quote Post
marck
post 16.06.2008, 22:08:18
Post #10





Grupa: Zarejestrowani
Postów: 48
Pomógł: 1
Dołączył: 27.05.2008

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

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.
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: 27.06.2025 - 15:08
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn