Tomasz Kiełbowski

Tomasz Kiełbowski Dyrektor ds.
Klientów Kluczowych,
Vernity

Temat: Rozmieszczenie div.

Do tej pory moje pliki CSS wyglądały fatalnie. Postanowiłem z tym skończyć raz na zawsze i przestać dostosowywać stronę do tego co potrafię napisać w CSS.
Na początek chciałbym dowiedzieć się jak rozmieścić div'y.

Mam taki przykład:


div#baner
{
background-color: red;
height: 120px;
}

div#menu
{
background-color: blue;
height: 40px;
}

div#lewa
{
background-color: yellow;
width: 49.5%;
height: 400px;
float: left;
}

div#prawa
{
background-color: yellow;
width: 49.5%;
height: 400px;
float: right;
}

div#stopka
{
height:20px;
background-color: green;
}
i php:
echo'<div id="baner">';
echo'BANER';
echo'</div>';

echo'<div id="menu">';
echo'<div id="przycisk">KONTAKT</div>';
echo'<div id="przycisk">OFERTA</div>';
echo'</div>';

echo'<div id="lewa">';
echo'LEWA';
echo'</div>';

echo'<div id="prawa">';
echo'PRAWA';
echo'</div>';

echo'<div id="stopka">';
echo'STOPKA';
echo'</div>';

Niestety stopka nie wyświetla się na dole tylko zaraz pod menu. Mogę oczywiście zastosować margin-top: -xxxx;, ale przyjmuję że nie wiem jaka będzie wysokość div'a "lewa" i "prawa".
Tomasz Kiełbowski

Tomasz Kiełbowski Dyrektor ds.
Klientów Kluczowych,
Vernity

Temat: Rozmieszczenie div.

Już mam.....
w div#stopka dodałem:
clear:both;

działa ;)
Maciej W.

Maciej W. Ruby on what?!

Temat: Rozmieszczenie div.

Oprocz tego ze echujesz zwykly tekst to co ten temat ma wspolnego z PHP? Na innych grupach moglbys dostac odpowiedz szybciej.

konto usunięte

Temat: Rozmieszczenie div.

a może zamiast tak klepać w echo cały kod to jakiś system szablonów? jest tego sporo a pozwala odseparować wiele elementów od siebie - przez co łatwiej później wprowadzać zmiany do wyglądu bez ryzyka "poprawienia" samej aplikacji
Tomasz Kiełbowski

Tomasz Kiełbowski Dyrektor ds.
Klientów Kluczowych,
Vernity

Temat: Rozmieszczenie div.

Maciej W.:
Oprocz tego ze echujesz zwykly tekst to co ten temat ma wspolnego z PHP? Na innych grupach moglbys dostac odpowiedz szybciej.
byłem pewny że pisze w grupie CSS, sorki za śmietnik

konto usunięte

Temat: Rozmieszczenie div.

Tomasz Kiełbowski:
Już mam.....
w div#stopka dodałem:
clear:both;

działa ;)

Na drugi raz zajrzyj tutaj:
http://www.goldenline.pl/forum/css/

Pewnie szybciej dostaniesz odpowiedź.
Tomasz Kiełbowski

Tomasz Kiełbowski Dyrektor ds.
Klientów Kluczowych,
Vernity

Temat: Rozmieszczenie div.

Przemysław R.:
a może zamiast tak klepać w echo cały kod to jakiś system szablonów? jest tego sporo a pozwala odseparować wiele elementów od siebie - przez co łatwiej później wprowadzać zmiany do wyglądu bez ryzyka "poprawienia" samej aplikacji

U mnie jest tak, że do chwili kiedy ktoś mi czegoś nie podpowie, jest to dla mnie tajemnicą. Nie zajmuje się programowaniem zawodowo, mało tego mam na tą zabawę zaledwie kilka godzin tygodniowo.

Dzięki za podpowiedź, poczytam.
Robert P.

Robert P. Senior PHP Developer

Temat: Rozmieszczenie div.

Użycie konstrukcji
div#stopka

itp. jest nieoptymalne. Standard mówi, że element, któremu nadamy id jest unikalny co nam to daje np to, że nie możemy napisać tak:

div#stopka
p#stopka
img#stopka

ponieważ "stopka" jest zawsze 1 więc piszemy tylko

#stopka

co jest szybciej czytane przez przeglądarkę. W google webmasters można znaleźć wiele ciekawych wskazówek dotyczących takich usprawnień.


echo'<div id="przycisk">KONTAKT</div>';
echo'<div id="przycisk">OFERTA</div>';


tutaj jest błąd w standardzie, o którym pisałem wyżej.

Jeżeli mamy więcej elementów, które opisujemy używamy klas czyli zamiast

#przycisk używamy

.przycisk i potem <div class="przycisk"></div>

i potem w css

#menu .przycisk{tutaj styl}


co do samego mieszania php i xhtml to jest bardzo zła praktyka. Profesjonalnie używa się modelu MVC, żeby rodzielić warstwę prezentacji od obliczeń. Na początek polecam SMARTY http://smarty.net

Następna dyskusja:

Brak polskich znaków w DIV




Wyślij zaproszenie do