Forum PHP.pl > [html] Problem z przerobieniem na <div>

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [html] Problem z przerobieniem na <div>

Sebastian003

28.12.2007, 11:27:06

Witam !
Przerobiłem taką tabelkę na div

[HTML] pobierz, plaintext 
<table align="center" border="0" width="80%">
    <tr>
        <td>OBRAZEK</td>
        <td>TEKST</td>
        <td>SZUKAJKA</td>
    </tr>
</table>
[HTML] pobierz, plaintext

Dałem tak

[HTML] pobierz, plaintext 
<div class="logo"></div>
<div class="tekst"></div>
<div class="tekst2"></div>
[HTML] pobierz, plaintext

i css

[HTML] pobierz, plaintext 
.logo
{
height:100px;
width:300px;
background:url(http://www.web-pc.pl/nowy/images/top.png);
float: left;
}
.tekst
{
height:100px;
width:300px;
float: left;
}
.tekst2
{
height:100px;
width:300px;
float: left;
}
[HTML] pobierz, plaintext

ale potem jak złożyłem to to się wszytko rozwaliło

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

[HTML] pobierz, plaintext 
<div class="legacySiteLinkBar"><a class="legacySiteLinkBar a">Info</a></div>
<br>
<div class="logo"></div>
<div class="tekst"></div>
<div class="tekst2"></div>
<br>
<div class="ost2">
<a href="indexs.html">Home</a>
<font color="#CACCBF" size="2">| </font><a href="faq.html">FAQ</a>
<font color="#CACCBF" size="2">| </font><a href="regulamin.html">Regulamin</a>
<font color="#CACCBF" size="2">| </font><a href="regulamin.html" onclick="return clickreturnvalue()" onmouseover="dropdownmenu(this, event, menu1, '133px')" onmouseout="delayhidemenu()">Obrazki</a>
<font color="#CACCBF" size="2">| </font><a href="galerie.html">Galerie użytkowników</a>
<font color="#CACCBF" size="2">| </font><a href="statystyki.html">Statystyki</a>
<font color="#CACCBF" size="2">| </font><a href="reklama.html">Reklama</a>
<font color="#CACCBF" size="2">| </font><a href="kontakt.html">Kontakt</a>
</div>
[HTML] pobierz, plaintext

Proszę o pomoc pozdrawiam !

ayeo

28.12.2007, 11:32:41

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

28.12.2007, 11:40:28

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

28.12.2007, 12:04:52

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

28.12.2007, 12:16:42

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

28.12.2007, 12:41:02

no - jestem pod wrażeniem

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

po trzecie do definicji klasy ost2 dodaj:

Kod

.ost2 { clear: both; }

wprowadź te poprawki i zobaczymy co dalej...

Sebastian003

28.12.2007, 13:09:09

Prawie dobrze tylko jak wyśrodkować te

div

Kod

na środek strony bo

Kod

margin:0px auto;

nie pomaga

nevt

28.12.2007, 13:15:24

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

28.12.2007, 13:39:46

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

28.12.2007, 13:55:37

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

28.12.2007, 13:59:24

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

28.12.2007, 14:20:54

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

28.12.2007, 15:16:59

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

28.12.2007, 17:50:57

popraw dwa divy na

[HTML] pobierz, plaintext 
.center
{
    height:36px;
    width:483px;
    background-image: url('http://www.web-pc.pl/nowy/images/podmenu.png');
    float: left;
    margin:0px auto;
}
.center2
{
    height:36px;
    width:240px;
    background-image: url('http://www.web-pc.pl/nowy/images/boczne.png');
    margin:0px auto 5px 490px;
}
[HTML] pobierz, plaintext

i usuń po:

[HTML] pobierz, plaintext 
<div class="center2"></div>
[HTML] pobierz, plaintext

znacznik "<br/>". Już lepiej to wygląda, teraz tylko wycentruj. Pokombinuj sam.

Sebastian003

28.12.2007, 19:03:11

Nic prawie to nie zmieniło

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.