ugrás a tartalomhoz

HTML & CSS grafikus terv

zoliky · 2008. Szep. 28. (V), 00.45
Van egy grafikus terv, itt lathato: KLIK IDE
A weblap hossza 780px de van 3 kep amely kinyulik belole (az also reszen lathato).

Azokat a reszeket amelyek kinyulnak az oldalbol rakjam kulon div-ekbe ? milyen otletet adtok ?
Itt sajnos a z-index nem tud segiteni, mert a kepek egyben vannak.

En eddig ilyen csontvazat hasznaltam:

<div id="wrap">
  <div id="header">
  header
  </div>
 
  <div id="content">
  content
  </div>
 
  <div id="footer">
  footer
  </div>
</div>


Csak otletekre van szuksegem!
‹ imageOver Hány pixel a font size=1? ›
 ■
1

A konténer szélessége

vbence · 2008. Szep. 28. (V), 08.25
A konténer szélessége = a legszélesebb elem. Egyik lehetőség, hogy megnöveled az egész oldalt, és a háttéeréphez hozzáadsz egy kicsit a barna részből (így már nem lógnának ki "kilógó" képek).

Csinálhatsz egy foot-wrapot is, ami szélesebb a többinél (szintén középre marginolva):

<div id="wrap">
  <div id="header">
  header
  </div>
 
  <div id="content">
  content
  </div>
</div>
 
<div id="foot-wrap">
  <div id="footer">
  footer
  </div>
</div>
Viszont a 760 (vagy 80) pixelen, ha túllépsz, akkor 800x600-as felbontásnál már scrollbarok jelennek meg, amik levonnak az oldal élvezeti értékéből. Szerintem a legszélesebb elem (a külső árnyékkal) se legyen több 760px-nél, ha 800-asokra is számítasz.
2

Koszonom, a foot-wrap

zoliky · 2008. Szep. 28. (V), 11.28
Koszonom, a foot-wrap modszert alkalmaztam. Az egyetlen problema az, hogy ezt is be kell szurni:
p {
  margin: 0px;
}
Maskep nem ragad ossze a ket resz, a wrap es a foot-wrap. Egy kis hezag marad koztuk, mert a wrap-ban levo tartalom kinyomja. Az ismert CSS problema :) H1, P elemeknek le kell nulazni a margint.

Csak azon gondolkodtam mi tortenik ha nem P lesz a vegen, mert a tartalom dinamikus, drupal irja ki.
4

anti-margin

vbence · 2008. Okt. 1. (Sze), 10.56
Float-nál szokás használni a következőt (annak elérésére, hogy a konténer benőjje a float-os elemeket):
<div class="end-container"></div>
.end-container {
    display: block;
    float: none;
    clear: both;
}
Ha egy ilyet beszúrsz a tartalom után (tehát a template-be a tartalom </div>-je elé), akkor a margin-ok belül maradnak.
3

A masik problema az, hogy

zoliky · 2008. Szep. 28. (V), 12.25
A masik problema az, hogy ezek a rohadt kepek valtoznak :) legyartok minden oldalnak egy csikot amelyben benne van a 3 kep es egy PHP IF/ELSE-vel berakom oket az oldalba.
5

Változó képek

vbence · 2008. Okt. 1. (Sze), 11.07
A változó képek kezelhetőek a remek képméretező cuccomal:
Kép méretezés, lekerekítés, miniatűr (thumbnail) készítés
(A WL mióta nem linkeli a copypaste-elt URL-eket?)

Ehhez tudni kell, hogy melyik kép melyik pozícióban lesz (bal, közép, jobb), elkészíted a PNG-ben az "over" réteget, ami rákerül a kész képre, és előállt a verziód (lekerekítve, háttérrel, árnyékkal, kifehérített kerettel). Persze méegyszer mondom: 3 különböző over képet kell gyártanod előtte a három alsó változatnak.