21. září bude sraz! Od 18.00 v restauraci Tradice v Praze u Anděla
Autor Zpráva
carlj
Profil *
Zdravím,
řeším trochu zapeklitý problém na svém webu. Rád bych udělal design, který by měl mít prvky jako hlavičku nebo patičku přes celou šířku a následně se vždy do určité šířky přizpůsobit. Od určité šířky (cca 1020px) by se už design nepřizpůsoboval.

Rozdělaný web můžete vidět zde: http://avk-stavebniny.cz/index.html

Jak toho docílím?


Pro jistotu přikládám i návrh https://dl.dropboxusercontent.com/u/59439644/navrh-avk.jpg

Předem děkuji všem, kteří mi s touto nesnadností pomohou a ukážou cestu. :-)
Taurus
Profil
Hledáš responzivní design.
Chamurappi
Profil
Reaguji na Taura:
Mně podle popisu připadá, že hledá spíš max-width.
Ale nevím, na uvedené adresy jsem nekoukal, nedal klikatelný odkaz.
Taurus
Profil
Pravda, pardon.

OT: vidím, že nejsem sám, kdo neklikatelný odkaz nepovažuje za odkaz.
carlj
Profil *
Oprava, spletl jsem si citaci s odkazem
Zdravím,
řeším trochu zapeklitý problém na svém webu. Rád bych udělal design, který by měl mít prvky jako hlavičku nebo patičku přes celou šířku a následně se vždy do určité šířky přizpůsobit. Od určité šířky (cca 1020px) by se už design nepřizpůsoboval.


Rozdělaný web můžete vidět zde: http://avk-stavebniny.cz/index.html


Jak toho docílím?



Pro jistotu přikládám i návrh https://dl.dropboxusercontent.com/u/59439644/navrh-avk.jpg


Předem děkuji všem, kteří mi s touto nesnadností pomohou a ukážou cestu. :-)


+ příklad, jak by se to mělo chovat - postupně zmenšujete prohlížeč a šířka webu se přizpůsobuje. To řazení prvků a la responsibilní design zatím není prioritou (pokud na to existuje nějaký jednoduchý návod, uvítám ho, jinak ne)

Díky


+ příklad, jak by se to mělo chovat - www.topsleva.cz/ - postupně zmenšujete prohlížeč a šířka webu se přizpůsobuje. To řazení prvků a la responsibilní design zatím není prioritou (pokud na to existuje nějaký jednoduchý návod, uvítám ho, jinak ne)

Díky
Tomáš123
Profil
carlj:
Rád bych udělal design, který by měl mít prvky jako hlavičku nebo patičku přes celou šířku a následně se vždy do určité šířky přizpůsobit
Postačí nastaviť prvkom ako hlavička alebo pätička min-width: 1020px; (ak som teda pochopil správne, že po dosiahnutí šírky 1020px sa už web nemá zúžiť, v opačnom prípade viď [#3] Chamurappi).
Krakatoa
Profil
carlj:
A není náhodou nejjednodušším řešením šířky webu: [#3] Chamurappi (max-width) a řazení prvků: [#6] Tomáš123 (min-width)?
Tomáš123
Profil
Krakatoa:
šířky webu: (max-width) a řazení prvků: (min-width)
Nerozumiem, čo si tým chcel povedať... Skôr je najjednoduchším riešením šírky webu width: _%, min-width a max-width a radenie prvkov preberá responzívny dizajn resp. float, position.
Marschmallow
Profil
carlj:
Je to jednoduché. Stačí použít CSS vlastnost max-width. Živá ukázka.
Krakatoa
Profil
Tomáš123:
To první: [#9] Marschmallow a to druhé si myslím, že se ptal na to odskakování prvku na další řádek při nějaké šířce prvku a to řeší to min-width (podle mě dát na řádek prvky umí a na to se tedy neptal).
Tomáš123
Profil
carlj:
Tvoj problém spočíva v tom, že nastavením šírky obalovému prvku div#all obmedzuješ rozťahovanie troch požadovaných prvkov vo vnútri. Je teda potrebné, zmeniť štruktúru. Navrhujem niečo ako:
<body>
  <logo>
  <vycentrovany-obsah>
  <trikroky>
  <vycentrovany-obsah>
  <paticka>
</body>

CSS:
#logo, #trikroky, #paticka {  /* Lepšie bude používať triedy*/
  min-width: 1020px;
}
vycentrovany-obsah { /*Potrebné priradiť triedu*/
  width: 1020px;
}

Doslova "hraním sa" so šírkami je možné vytvoriť aj elastický dizajn. Problémovou časťou je hlavne prvok #trikroky, lebo nie je deliteľný. Odporúčam nakódovať v HTML&CSS alebo použiť ozajstný responzívny dizajn (t.j. media queries) a striedať obrázky na pozadí (veľmi nepraktické).

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0