Responsive design, tabulky, odkaz a...

LukineskoNR

Čo by ste odporučili ak chcem aby vždy bol odkaz na strede lebo keď zmenšujem stránku z prava tak sa neposuva spolu s obsahom.

Kód: Vybrať všetko

http://codepen.io/anon/pen/MKZNwV

test · Príspevok od používateľa **test** » 12 feb 2016, 1:34

Neviem co myslis, ale predpokladam, ze tlacitko Tell me more. Tu CSS zmen na percenta a daj to ako absolute, teda
position: absolute;
left: 50%;

to ale bude začínať v strede. Nebude v strede stred toho textu, takže opticky nebude v strede ale posunuté doprava
radšej takto:

Kód: Vybrať všetko

.tell-me-more {
  text-decoration: none;
  color: #fff;
  background: #ED2B62;
  padding: 15px;
  border-radius: 10px;
  display: block;
  margin: 20px auto 30px auto;
  width: 120px;
  text-align: center;
}

LukineskoNR

ďakujem ale keď posuvam tak drží sa to na strede ale potom zrazu sa posuva len odkaz a obsah už stojí a odkaz už je mimo čím to je ?

*****HERO*****

no vysvetlenie je jednoduche. kontajner tych troch stlpciv ma pevnu sirku 1002px, vid

Kód: Vybrať všetko

.main {
  width: 1002px;
  margin: 0 auto;
  margin-top: 50px;
}

a ked zmensis okno na menej ako tych 1002px (+-marginy), tak kontajner so stlpcami uz bude pretekat von z okna, ale tlacitko to ma uplne na salame - to ma proste pokyn sa roztiahnut na 100% aktualnej sirky okna a drzat v strede. nie je nijak naviazane na ten kontajner.

najjednoduchsi fix (ak ti nejde o strukturu html kodu) by bolo to tlacitko hodit na koniec toho kontajnera, ale este predtym kontajner vycistit, kedze stlpce plavaju do lava

Kód: Vybrať všetko

<div class="main group">
  <article class="part-1">
    <img src="http://i64.tinypic.com/2wri5p0.png" alt="" />
    <h1 class="article-heading">Okay so what is this?</h1>
    <p class="article-text">Cake danish icing bonbon cake sweet tiramisu carrot cake. Oat cake dragée toffee chocolate pudding cake lollipop. Jelly beans brownie marshmallow sweet apple pie fruitcake. Croissant dragée ice cream brownie.</p>
  </article>
  <article class="part-2">
    <img src="http://i64.tinypic.com/2wri5p0.png" alt="" />
    <h1 class="article-heading">Okay so what is this?</h1>
    <p class="article-text">Cake danish icing bonbon cake sweet tiramisu carrot cake. Oat cake dragée toffee chocolate pudding cake lollipop. Jelly beans brownie marshmallow sweet apple pie fruitcake. Croissant dragée ice cream brownie.</p>
  </article>
  <article class="part-3">
    <img src="http://i64.tinypic.com/2wri5p0.png" alt="" />
    <h1 class="article-heading">Okay so what is this?</h1>
    <p class="article-text">Cake danish icing bonbon cake sweet tiramisu carrot cake. Oat cake dragée toffee chocolate pudding cake lollipop. Jelly beans brownie marshmallow sweet apple pie fruitcake. Croissant dragée ice cream brownie.</p>
  </article>
<div style="clear:both;"></div>
<a href="#" class="tell-me-more">Tell me more</a>
</div>

LukineskoNR

Prečo nemám pod predposledným riadkom dole border ?

Kód: Vybrať všetko

http://codepen.io/LukineskoNR/pen/YwgMmX?editors=1100

aacid

lebo toto:

Kód: Vybrať všetko

tr:last-child td{
  border:none;
}

LukineskoNR

aacid napísal:lebo toto:
Kód: Vybrať všetko
tr:last-child td{
  border:none;
}

čiže to sa aplikuje na posledne tr v tbody a taktiez posledne tr v tfoot že ?

*****HERO*****

ano, a taktiez aj v thead

LukineskoNR

tam je th nie td cize to neplati pren

*****HERO*****

to nie je ziadne pravidlo, kludne mozem mat aj thead > tr > td

Michaelo

Kludne mozes mat nieco ako

thead > tr > th > table a v nej 10 riadkov s bunkami.

Co si myslis, ktore bunky by boli zvyraznene? Dam ti tip: vsetky.

Ps.: Nesting tabuliek by som moc nepouzival, ale niekedy je to fakt jedina najmenej narocna volba a druha je pouzit divy ktore budu fakovat strukturu tabulky, co je tiez blbost.

LukineskoNR

Ale ved mam zadane ze tr:last-child td{} čiže to znamená že všetky td ktoré su v poslednom potomkovy tr a v thead je tr a vnom th a nie td cize pren to neplati ved v tabulke je aj boarding pre thead

sharky-no

hej zle ta pochopil hero.. sak vidis ze ti to ten border tam necha .. cize nie, ten selector tr:last-child td{} ti neovplyvni tr th..

*****HERO*****

hej ja som to myslel vo vseobecnosti, nie na jeho konkretny pripad.

LukineskoNR

Zdravím ľudia robil som stránku podľa predlohy chcem sa opýtať pár vecí.
1.Všimol som si že pri zmenšovaní stránky sa mi obrázok odďaluje od textu ako nevadí lebo medzera je veľká až keď sa to moc zmenší ale odporučili by ste niečo aké hodnoty zadávať alebo čo robiť.
2.Všimol som si na stránke ikonky pre Facebook len neviem zistiť zdroj kde nájdem ikonky také že keď aj na ne dám cursor sa zmenia na inú farbu.
3.Je niečo čo by ste ešte robili inak ?
Učím sa zatiaľ len HTML a CSS čiže tie efekty som nerobil ani že sa nav vysúva.

Predloha

Kód: Vybrať všetko

http://www.housekitchen.fr/

Moja práca

Kód: Vybrať všetko

http://codepen.io/LukineskoNR/pen/VeNxaE

*****HERO*****

1. element <div class="cover"> ma pevnu vysku 470px. pozadie sa zmensuje s tym ako zmensujes okno, aby si zachovalo svoj pomer, no elementu stale ostava vyska 470px a preto sa od pozadia ten text vzdaluje.
2. napriklad najdes ich na http://www.housekitchen.fr/
3. neviem co je tvoj ciel, ale ak to chces spravit co najlepsie podla tej predlohy, tak to mas este co robit

LukineskoNR

*****HERO***** napísal:1. element <div class="cover"> ma pevnu vysku 470px. pozadie sa zmensuje s tym ako zmensujes okno, aby si zachovalo svoj pomer, no elementu stale ostava vyska 470px a preto sa od pozadia ten text vzdaluje.
2. napriklad najdes ich na http://www.housekitchen.fr/
3. neviem co je tvoj ciel, ale ak to chces spravit co najlepsie podla tej predlohy, tak to mas este co robit

Dakujem a ako by si riesil ten obrazok ako ked ked budem zmensovat stranku aby napriklad sa prisposobil stranke a ked uz sa zmensi menej ho odsekne. Viem mam ale najskor chcem poriadne css a html. A ako myslel som nejake rady co by som nemal robit alebo co by som mal

Slayter

Pekna kradez originalneho napadu

LukineskoNR

Prečo krádež ? Nevytvarám stránku ako verejnú len sa učím krádež by to bola keby som vytvoril oficialne takú stránku dla na server a tak

Responsive design, tabulky, odkaz a...

Responsive design, tabulky, odkaz a...

Re: Odkaz a

Re: Odkaz a

Re: Odkaz a

Re: Odkaz a

Tabuľky

Re: Tabuľky

Re: Tabuľky

Re: Tabuľky

Re: Tabuľky

Re: Tabuľky

Re: Tabuľky

Re: Tabuľky

Re: Tabuľky

Re: Tabuľky

Stránka podľa predlohy

Re: Stránka podľa predlohy

Re: Stránka podľa predlohy

Re: Stránka podľa predlohy

Re: Stránka podľa predlohy