04-12-2009, 22:40
(Ten post był ostatnio modyfikowany: 04-12-2009, 22:48 przez Labsta.com.)
Ja bym to zrobił tak:
CSS
Pisane z ręki i pewnie wymaga jakiegoś tam dopracowania.
display: block; powoduje, że element z liniowego staje się prostokątem. Natomiast #megasrodek img {} odnosi się do obrazków w #megasrodek, czyli dobrze kumasz
. Raczej nie ryzykowałbym nadawania wszystkim img, bo nie ma sensu. Przetestuj sobie używanie resetu, bo to serio ułatwia życie.
Inna moja uwaga: nie mieszaj elementów wyglądu i treści. Wygląd czyli te zaokrąglone tło dawaj do CSS, obrazek z tymi kolesiami do HTML, w końcu po to rozdzielamy CSS i HTML na osobne pliki, żeby rozdzielać te dwie warstwy.
Kod:
<div class="kontener">
<div class="ktop"></div>
<img src="data/zdjecie_glowne.jpg" alt="foto" />
<div class="kbottom"></div>
</div>
CSS
Kod:
.kontener { background: (kolor zielony) }
.kontener img {padding: 0px; margin 0px auto; display: block; }
.ktop { background: url(data/mega_pasek_gora.jpg) no-repeat; width:836px; height: 6px; }
.kbottom { background: url(data/mega_pasek_dol.jpg) no-repeat; width:836px; height: 6px; }
Pisane z ręki i pewnie wymaga jakiegoś tam dopracowania.
display: block; powoduje, że element z liniowego staje się prostokątem. Natomiast #megasrodek img {} odnosi się do obrazków w #megasrodek, czyli dobrze kumasz

Inna moja uwaga: nie mieszaj elementów wyglądu i treści. Wygląd czyli te zaokrąglone tło dawaj do CSS, obrazek z tymi kolesiami do HTML, w końcu po to rozdzielamy CSS i HTML na osobne pliki, żeby rozdzielać te dwie warstwy.