Responzívna stránka - úvodn – CSS – Fórum – Programujte.com

Čaute, som potreboval by som poradiť, chcem spravit úvodnú stránku, kde menu bude v hlavičke zarovnané na stred, v strede bude nejaká slideshow, a potom pätička, kde bude niečo ako (created by....), na začiatok sa chcem spýtať, či je to správne napísané vôbec v HTMLku učíme sa to prvý semester, čiže som v tom trošku stratený..

Štruktúra vyzerá nejako takto

<div id="header">

<ul>

<li><a rel="nofollow" href="#">Home</a></li>

<li><a rel="nofollow" href="#">About me</a></li>

<li><a rel="nofollow" href="#">Contact</a></li> <li>

<a rel="nofollow" href="#">Login</a></li> <li>

<a rel="nofollow" href="#">Registration</a></li> </ul> </div>

<div id="slide-show">

</div>

<div id="footer">

</div>

Bude lepšie ak sa toto všetko ešte obalí do jedného divu (container), alebo to môže byť takto?

A ďalší problém je ten, že skúšal som robit v hlavičke to menu, ale nemôžem dať tie veci čo majú byt v navigácií do stredu neviem, kde je problém, dá mi to do stredu, ale drží sa to pri vrchu, kód v css vyzerá nejako takto:

* { margin: 0; }

#header { width: 100%; height: 60px; background-color: #333; border-radius: 5px; }

ul { width: 100%; height: 60px; list-style: none; text-align: center; }

li { display: inline-block; }

li a { text-decoration: none; color: white; text-align: center; }

A nakoniec sa chcem spýtať ako by sa dala spraviť tá pätička responzívne pretože skúšal som to s position relative, ale moc to nefungovalo.

Robíme s týmito vecami prvý semester čiže budem velmi vdačný za každú radu.

Ďakujem pekne!

1) Ano. Ale lepsi je mit stranku obalenou a nastavenou sirku, ramecek a pod. Nemuzes tam pak udelat tohle:
http://localhost/…tranky/test/
a pridal bych tam toto

li:after { content: " | "; color:#888;}
li:last-child:after { content: ""; }

2) A / IMG, css vertical-align

3) Ty tu pises o respozivite ale nevis, co to slovo znamena. Tve vety pak nedavaji smysl. Responzivita je stav. Nelze posoudit, zda je tva paticka responzivni nebo ne, pokud si ten web neprohlizis. Podminky prohlizeni jsi nezadal. Mezi podminkami muze, ale nemusi, byt napriklad rozmer displeje mobil vs pc. Nemas tam definovane css, ktere by neco s rozmery resilo. Nemas tam zadne css. Na tvou otazku, zda je responzivni nelze odpovedet.

Ps. Zaklady html / css se uci 1h. Nechapu, co resite cely semestr :) Pokud je to specialne na web, tak je to I tak latka na par hodin. Ostatni bohuzel treba ziskat praxi.

Brali sme to jedno cviko, ale máme spravit prácu s určitými podmienkami a snažil som sa spravit úvodnú stránku, kde v hlavičke bude nejaké menu a v strede slideshow a na konci pätička a v nej iba nejaký text a CSS som poslal iba tej hlavičky a CSS na pätičku mám toto:

html { position: relative; min-height: 100%; }

body { margin-bottom: 60px; }

.footer { position: absolute;

 bottom: 0;

width: 100%; 

height: 60px;

line-height: 60px;

background-color: #333;

text-align: center;

border-radius: 5px;

color: grey; } 

a podmienky sú , aby sa to správne zobrazovalo na všetkých zariadeniach, ako vravím som začiatočník, skúšam si a snažím sa to spravit sám, ale neviem si dar rady napr. ako si mám vypočítat, že hlavička bude mat tolko a stred tolko a patička tolko, aby to sedelo ako som písal vyššie chcem mat header - v nom menu a na strede nejakú slideshow a pod nou patičku aby to pekne sedelo

Připojen obrázek.

takto nejako to mám, ale problém je, že sa mi nezdá, že by to čo je v hlavičke bolo v strede a teraz neviem aké rozmery mám dat mojím obrázkom čo budú v slideshow, aby to tam pekne sadlo medzi hlavičku a patičku

Neva, no. Stale nechapu, co vlastne presne chces. Zkus obrazky, co to dela ted a co by to delat melo. Pripadne k tomu kod, treba I na jsfiddle.

Mozna, to, co hledas je prave obaleni stranky divem. Nastavis mu margin 0 auto + width.
<div>
<header>...</header>
<footer>...</footer>
</div>

Pokud bys to chtel resit, jak to mas na obrazku, 2 prouzky pres celou sirku stranky, tak bych tam pridal do kazde casti stejny 'container' (0 auto + width) a vnejsi casti nastavil ty prouzky. Tak, jak jsi to psal na zacatku. Slo by to resit I tim prvnim, ale musel bys pouzit obrazek na pozadi a to by vyzadovalo definovat presne vysku header a footer. Ale s obrazkem by slo zase carovat jako base64, nejaky ornament, spesl prechod, spesl okraje a tak.
<header><div>...</div></header>
<footer><div>...</div></footer>

#7 peter
díky moc trošku mi to je jasnejšie no chcem to, aby header a footer boli rovnakého rozmeru s tým, že v headery bude menu nejaké a footer len čisto nejaký popis no a medzi headerom a footerom chcem aby sa obrázky premietali resp. to miesto čo je medzi nimi neviem ako nastavit aby to sedelo a bolo presne medzi headerom a footerom a zároven, aby sa to dokázalo prispôsobiť , aby to bolo responzívne.

#7 peter
viem, že sem takéto veci nepatria, ale som tu nový a neviem či sa tu dá písat správa, ale nejaký email alebo čosi na teba prosím ta? ja nechcem, aby si mi čosi vypracoval alebo tak.. ja len fakt poradit chcem nič viac..:) 

Uz jsem to psal, posli obrazek, jak to mas a obrazek, jak by to melo byt spravne. Pripadne vyuzij uloziste a tester kodu jsfiddle.net, pokud to nejsi schopen dat online jinak.
http://jsfiddle.net/4nge07f6/

Neco takoveho? Jakoze centrovat tu galerii na vysku?
https://www.jakpsatweb.cz/…trovani.html
Tez muzes vyuzit table layout (display:table-row) nebo tabulku

Paticka se da dat dolu i pres position + bottom:0. Podobne hlavicka. Ale pak nejsi schopen sledovat jeji vysku pri zmene sirky obrazovky. Takze, za urcitych okolnosti by doslo k tomu, ze se zalomi pres 2 radky a s tim ostatni css kod nepocita.

Ted mam dojem, ze vsech tech informaci, ze chces neco takoveho… 

[hlavicka]

[        ]
[obr     ]
[        ]

[paticka ]


[hlav
icka]

[obr]

[pati
cka ]

Aby ta galerie byla vzdy uprostred stranky. A aby byla roztazena do max. sirky.

S tim obrazek nema problem. Das mu width:100% a height si prizpusobi sam.
Celemu divu se strankou zas dat height:100%. Stary prohlizec to nezna, ale novy by mel div roztahnout na vysku 100%. Pripadne to same html, body, .mujdiv {margin:0; padding:0; height:100%;}

#10 peter
aha díky už som asi tomu pochopil chcel by som to takto nejako mat s tým, že bez tých medzier(tam kde sú tie čierne "xká"), že tá slideshow bude pekne v strede toho bez medzier :)

Připojen obrázek.

<style>
html, 
body { min-height: 100%; height:100%;}

.page {height:100%; margin-bottom: 60px; max-width: 900px;}

#header { width: 100%; height: 60px; background-color: #333; border-radius: 5px; }

#header ul {  list-style: none; 
margin:0 auto; }

#header li { display: inline-block; margin:0; padding:0;}

#header li a { text-decoration: none; color: white; text-align: center; }

#header li:after { content: " | "; color:#888;}
#header li:last-child:after { content: ""; }

#content { height:100%; width:100%; position:relative;}

#content #slide-show {height:30px; width:100%;  border:2px solid #f00;
margin: -15px; top:50%; position:relative;}

#footer { position: absolute;

 bottom: 0;

width: 100%; 

height: 60px;

line-height: 60px;

background-color: #333;

text-align: center;

border-radius: 5px;

color: grey; } 
</style>
<div class="page">
<div id="header">

<ul>

<li><a rel="nofollow" href="#">Home</a></li>

<li><a rel="nofollow" href="#">About me</a></li>

<li><a rel="nofollow" href="#">Contact</a></li> <li>

<a rel="nofollow" href="#">Login</a></li> <li>

<a rel="nofollow" href="#">Registration</a></li> </ul> </div>

<div id="content">
<div id="slide-show">

</div>
</div>

<div id="footer">
Štruktúra vyzerá nejako takto
</div>
</div>

http://jsfiddle.net/4nge07f6/1/
Na fiddle to nevypada uplne nej, ale ve skutecnosti by to mohlo fungovat.

Jo, jestli ta mas ty mezery, jak pises, ze krizky nechces, tak to je zpusobeno marginem. Margin ma obvykle default: UL LI P H1-H6 a jine prvky. Pripadne jsi si ho tam zanesl sam nekde do css.
'margin:0 auto' je centrovani na sirku. Na vysku to myslim nefunguje.

#1 Adamx2
nice