Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [html] Problem z przerobieniem na <div>
Forum PHP.pl > Forum > Przedszkole
Sebastian003
Witam !
Przerobiłem taką tabelkę na div
  1. <table align="center" border="0" width="80%">
  2. <tr>
  3. <td>OBRAZEK</td>
  4. <td>TEKST</td>
  5. <td>SZUKAJKA</td>
  6. </tr>

Dałem tak
  1. <div class="logo"></div>
  2. <div class="tekst"></div>
  3. <div class="tekst2"></div>

i css
  1. .logo
  2. {
  3. height:100px;
  4. width:300px;
  5. background:url(http://www.web-pc.pl/nowy/images/top.png);
  6. float: left;
  7. }
  8. .tekst
  9. {
  10. height:100px;
  11. width:300px;
  12. float: left;
  13. }
  14. .tekst2
  15. {
  16. height:100px;
  17. width:300px;
  18. float: left;
  19. }


ale potem jak złożyłem to to się wszytko rozwaliło sad.gif
link http://kameleon.web-pc.pl/regulamin.html
  1. <div class="legacySiteLinkBar"><a class="legacySiteLinkBar a">Info</a></div>
  2. <br>
  3. <div class="logo"></div>
  4. <div class="tekst"></div>
  5. <div class="tekst2"></div>
  6. <br>
  7. <div class="ost2">
  8. <a href="indexs.html">Home</a>
  9. <font color="#CACCBF" size="2">| </font><a href="faq.html">FAQ</a>
  10. <font color="#CACCBF" size="2">| </font><a href="regulamin.html">Regulamin</a>
  11. <font color="#CACCBF" size="2">| </font><a href="regulamin.html" onclick="return clickreturnvalue()" onmouseover="dropdownmenu(this, event, menu1, '133px')" onmouseout="delayhidemenu()">Obrazki</a>
  12. <font color="#CACCBF" size="2">| </font><a href="galerie.html">Galerie użytkowników</a>
  13. <font color="#CACCBF" size="2">| </font><a href="statystyki.html">Statystyki</a>
  14. <font color="#CACCBF" size="2">| </font><a href="reklama.html">Reklama</a>
  15. <font color="#CACCBF" size="2">| </font><a href="kontakt.html">Kontakt</a>
  16. </div>


Proszę o pomoc pozdrawiam !
ayeo
Zrób sobie dodatkowego diva, który będzie pojemnikiem na pozostałe. Te divy co już masz wżuć do środka i każdemu display: block;
Sebastian003
Kurcze zrobiłem coś takiego ale problem nadal jest. Nie wiem czy cię dobrze zrozumiałem i tak zrobiłem ale wydaje mi się ze tak /
nevt
kolego... masz totalny bajzel w kodzie tej strony...

nie masz znacznika <body>, znacznik <html> jest niedomknięty, są inne nie podomykane i/lub skrzyżowane znaczniki...
masz dwa razy sekcję <head> a pomiędzy pełno div'ów...
to, że wogóle cokolwiek się wyświetla, to tylko przypadek...

to tak po 30 sek. oglądania tego kodu...
Sebastian003
Dzięki za krytyke błedy są ponieważ łacze lay kilkoma includowanymi plikami

wiec znacie odp !

Poprawiłem się nie ma błedó zadnych proszę o pomoc
nevt
no - jestem pod wrażeniem smile.gif prawie dobrze, chociaż nadal są nie podomykane znaczniki
pod koniec został nie domknięty <p> , ale to akurat mniej istotne...

więc poprawiamy... po pierwsze zamiast
Kod
background:url(http://www.web-pc.pl/nowy/images/top.png);

powinno być
Kod
background-image: url('http://www.web-pc.pl/nowy/images/top.png');

po drugie znacznik <div class="divt"> nie jest nigdzie domknięty - wywal go... albo domknij... smile.gif
po trzecie do definicji klasy ost2 dodaj:
Kod
.ost2 { clear: both; }

wprowadź te poprawki i zobaczymy co dalej...
Sebastian003
Prawie dobrze tylko jak wyśrodkować te

div

Kod
<div class="logo"></div>
<div class="tekst"></div>
<div class="tekst2"></div>


na środek strony bo

Kod
margin:0px auto;


nie pomaga

nevt
miałem nadzieję, że już sam do tego dojdziesz... przywróć ten znacznik <div class="divt"> ale go DOMKNIJ za tymi floatowanymi elementami... a styl divt popraw na:
Kod
divt
{
  margin: 0px auto;
  width: 730px;
}
Sebastian003
Jeszcze 2 pytanka mam !

Jak zrobić zeby w div ten tekst bleble byl na samym dole diva

Kod
<div class="tekst">bleble</div>


i jak wycentrować tekst w div bo polecenie
Kod
text-align: center;

nie pomaga dotyczy to stopki
revyag
1. Po co Ci przy divach display:block, div z definicji jest elementem blokowym.
2. Stopkę masz niezależną od reszty treści, więc osobno musisz jej nadać szerokości, dopiero później centrować jej zawartości.
3. Co do ustawiania tekstu w divie to poczytaj:
http://perfectionorvanity.com/2006/04/19/w...trowaniu-w-css/
nevt
co do pierwszego (tekst u dołu div o wysokości 100px) - dodaj w stylu tego diva:
padding-top: 85px; (tak 'na oko'...)

co do drugiego (stopka) - masz tam <div id="copyright"> a stylujesz klasę "copyright" - dlatego ci nie działa...
Sebastian003
Co do drugiego miałeś racje zwyczajna pomyłka

a pierwsze to top sie opsunał zmniejszałem na mniejsza wartość nic nie daje

zobacz

http://kameleon.web-pc.pl/regulamin.html



nevt
podstawy sie kłaniają ...
całkowita wysokość / szerokość bloku = height / width + padding + margin + border-width...
czyli jeśli hcesz mieć blok wysoki na 100px z paddingiem 85px to musisz ustawić height:15px
sniezny_wilk
popraw dwa divy na

  1. .center
  2. {
  3. height:36px;
  4. width:483px;
  5. background-image: url('http://www.web-pc.pl/nowy/images/podmenu.png');
  6. float: left;
  7. margin:0px auto;
  8. }
  9. .center2
  10. {
  11. height:36px;
  12. width:240px;
  13. background-image: url('http://www.web-pc.pl/nowy/images/boczne.png');
  14. margin:0px auto 5px 490px;
  15. }


i usuń po:

  1. <div class="center2"></div>


znacznik "<br/>". Już lepiej to wygląda, teraz tylko wycentruj. Pokombinuj sam.
Sebastian003
Nic prawie to nie zmieniło sad.gif
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.