Lekerekített doboz CSS-ben

2010-04-23

A lekerekített dobozok létrehozása egyszerű feladat lenne, ha a border-radius property működne minden böngésző alatt. Több megoldás létezik, van aki nem foglalkozik azzal, hogy máshogy néz ki az oldal különböző platformokon, van aki egyszerűen betesz egyetlen hátteret a dobozoknak és van aki egyáltalán nem használ lekerekítéseket 🙂

Az első megoldás nyilván nem a legjobb, főleg, ha megrendelésre dolgozik az ember, a második megoldás csak addig működik, amíg a dobozok tartalma nem lóg túl a háttérkép méretén, a harmadik megoldás minden szempontból tökéletes lenne, de eléggé beszűkítené a dizájnerek lehetőségeit 🙂

Videó

Videó

8 hozzászólás

  1. 2012. augusztus 15. szerda - 20:31

    Szia én úgy oldottam meg hogy a tábla tetején a “box top” részre került a tábla címe.. de nálam nagyobb a tábla szóval jól nézz ki meg minden .. nah de az a gond hogy a box top képéről kicsit kilóg az írás és lejeb szeretném húzni 2pxelt …hogy pont a kép közepén legyen a szöveg ..előre is köszi

    • 2012. augusztus 16. csütörtök - 00:53

      Oké megcsináltam csak így helyes? Mert nekem ezzel működik. A kép 907px széles.

      div.box_top{
      	background-image: url('box_top.jpg');
      	width: 887px;
      	height: 27px;
      	padding: 13px 0px 0px 20px;
      	font-weight: bold;
      }
      
  2. 2012. június 8. péntek - 12:16

    Heló Cyrex. Szeretnék segítséget kérni tőled abban hogy ezeket a dobozokat hogyan tudom egymás mellé tenni, mindhármat?
    Addig jutottam el hogy a bal oldali és a tartalom egymás mellett van float:left-el, és van közöttük eltartás is. A jobb oldalit sehogy sem tudom a tartalmi rész mellé tenni, mert vagy a tartalmi rész alá teszi, vagy pedig az oldal aljára a jobb oldalon, ha float:right-ot írok rá. Tudnál segíteni ebben hogy oldajam meg?

    Leírás a bal oldalon + 1db kép

    az oldal tartalmi része

    Leírás jobb oldalon

    • 2012. június 8. péntek - 12:22

      és van egy div-em (“boxes”) amiben benne van mindegyik doboz, a “baloldal”, “tartalom”, és a “jobb oldal”
      class-ba vannak nálam is
      ( bocs hogy így írtam le, de az oldalad nem enged kódokat leírni 🙂 )

    • 2012. június 8. péntek - 12:28

      Ha alá töri, akkor nincs elég helye, hogy kiférjen. Növelni kell a boxes DIV méretét.

    • 2012. június 8. péntek - 12:40

      aham. Kössz szépen most jó lett 🙂

  3. 2011. január 1. szombat - 15:46

    Egy jó tipp ne használjatok Internet Explorert!;) 😀

    • 2011. december 8. csütörtök - 20:16

      Like 😀 Azt hogy tudnám megcsinálni hogy középre igazítsa?

Hozzászólás

Keresés a blogon
Kategóriák
Legújabb hozzászólások
  • A villanyszerelés örömei panelben

    Gratulálok! Szép leírás! Azt szeretném kérdezni, hogy nálam 3×32 amper lessz, bővítés után. Laikusként kérdem, így három Fi-relé kell? És mekkorát, é...

  • A villanyszerelés örömei panelben

    @Utolsó hozzászóló: Szia, olyan nincs, hogy 3 fázis érkezik be 3 külön vezetéken. Vagy 1 fázis 1, vagy 3 fázis 3 vezetéken. (+ a nulla) Ha az óráná...

  • A Pico CMS

    pico-release-v2.1.0, nincs benne content-samle, a content üres, nincs benne php nincs sub mappa és fájl sem, mégis ott van a subindex a menunuben...

  • CSS transition

    Köszönöm a válaszod! Igen ezzel már, próbálkoztam, de amint sikrül térben elhelyezni a megfelelő helyre a köröket, megszűnik működni rajtuk az effek...

  • CSS transition

    z-index-et állíts be a menüre, és arra is ami most fölé kerül. Értelemszerűen a menün legyen a magasabb érték....

  • CSS transition

    Kedves Tamás! Remélem még aktív a blog és tudsz nekem segíteni. Nagyon tetszett a videód, ki is próbáltam. A videód alapján beépitettem ezeket az ...

  • A villanyszerelés örömei panelben

    Egy fázis jön be három vezetéken keresztül. Az óránál egy darab megszakító van csak. Ezért kérdeztem, hogy milyen fi relét javasoltok?...

  • A villanyszerelés örömei panelben

    Ez nem igaz, mert az óránál ott a 3 biztosító darabja 20 A...

  • A shape-outside CSS property

    Olyasmit találtam hogy a szöveg részt 2 részre osztjuk bal és jobb......

  • Responsive menü

    Itt a működő kód, innen másold ki: https://cyrex.hu/uploads/2014/08/responsive-menu/...

  • Responsive menü

    Szia. A kódok alapján, meg persze a videót végignézve megcsináltam a menüt. Sajnos nem úgy működik, ahogy kellene. A menü3 almenüi nem gördülnek le, ...

  • A shape-outside CSS property

    Szerintem azt sehogy....