Responzívna stránka - úvodn – CSS – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama

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

 
Hledat
Moderní platforma pro vytvoření vašeho nového webu – Wix.com.
Nyní už můžete mít web zdarma.
Vybavení pro Laser Game
Spuštěn Filmový magazín
Laser Game Brno
Laser Game Ostrava

Adamx20
Duch
11. 11. 2018   #1
-
0
-

Č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!

Nahlásit jako SPAM
IP: 178.41.13.–
peter
~ Anonymní uživatel
3485 příspěvků
12. 11. 2018   #2
-
+1
-
Zajímavé

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.

Nahlásit jako SPAM
IP: 2001:718:2601:258:4dbc:3838:5a25:f2e0...–
peter
~ Anonymní uživatel
3485 příspěvků
12. 11. 2018   #3
-
0
-

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.

Nahlásit jako SPAM
IP: 2001:718:2601:258:4dbc:3838:5a25:f2e0...–
Adamx20
Duch
13. 11. 2018   #4
-
0
-

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

Nahlásit jako SPAM
IP: 158.193.102.–
Adamx20
Duch
13. 11. 2018   #5
-
0
-
Nahlásit jako SPAM
IP: 158.193.102.–
Adamx20
Duch
13. 11. 2018   #6
-
0
-

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

Nahlásit jako SPAM
IP: 158.193.102.–
peter
~ Anonymní uživatel
3485 příspěvků
13. 11. 2018   #7
-
+1
-
Zajímavé

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>

Nahlásit jako SPAM
IP: 193.84.207.–
Adamx20
Duch
13. 11. 2018   #8
-
0
-

#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.

Nahlásit jako SPAM
IP: 158.193.102.–
Adamx20
Duch
13. 11. 2018   #9
-
0
-

#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..:) 

Nahlásit jako SPAM
IP: 158.193.102.–
peter
~ Anonymní uživatel
3485 příspěvků
14. 11. 2018   #10
-
+1
-
Zajímavé

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%;}

Nahlásit jako SPAM
IP: 2001:718:2601:258:4dbc:3838:5a25:f2e0...–
Adamx20
Duch
14. 11. 2018   #11
-
0
-

#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.

Nahlásit jako SPAM
IP: 158.193.102.–
peter
~ Anonymní uživatel
3485 příspěvků
14. 11. 2018   #12
-
0
-

   

<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.

Nahlásit jako SPAM
IP: 2001:718:2601:258:4dbc:3838:5a25:f2e0...–
peter
~ Anonymní uživatel
3485 příspěvků
14. 11. 2018   #13
-
0
-

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.

Nahlásit jako SPAM
IP: 2001:718:2601:258:4dbc:3838:5a25:f2e0...–
3. 12. 2018   #14
-
0
-

#1 Adamx2
nice

Nahlásit jako SPAM
IP: 212.103.48.–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 5 hostů

Podobná vlákna

Stránka v SK — založil zelenac1

Nová stránka — založil Jan Malý

Hacknutá stránka — založil schokodidek

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032019 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý