| Autor | Zpráva | ||
|---|---|---|---|
| responsive Profil * |
#1 · Zasláno: 27. 3. 2016, 17:29:27
Příjemný večer,
chtěl bych poprosit někoho kdo tomu rozumí o něco lépe než já, jestli by mi dokázal vysvětlit jak funguje responzivní web, případně mě odkázal na dobrý článek. Četl jsem jich fakt hodně a druhý týden se snažím. Jak jsem si tak hrál, tak se mi třeba podařilo, že mi načetl pouze jednu možnost z podmínek, žádná a snad všechny možnosti jak to neudělat :D Moje skripty byly funkční pouze v případě, že jsem nastavoval podmínku pro pouze jeden prvek. Existuje něco co bych měl vědět něco jako množství prvků, které můžou být maximálně ovlivňovány? Nebo počet prvků v podmínce? Nebo způsob jak mají být podmínky řazeny za sebou? Jsem fakt docela zoufalý, věřím, že to bude jen hloupost... Děkuji za pomoc |
||
| Bubák Profil |
#2 · Zasláno: 27. 3. 2016, 18:01:12
Koukni na Responsivní design webu
Pokud neodhalíš příčinu problému, tak dej odkaz na živou ukázku. Pokud zatím nemáš vlastní web, vytvoř ukázku třebas na Živá ukázka |
||
| responsive Profil * |
Moje první úvaha byla sestavit jedny styly pro mobil a jiné pro PC. Takže jsem vytvořil 2 samostatně fungující varianty, ale pohromadě neběží. Šel jsem proto dál a vybíral z nich zvlášť prvky. Přiložený skript už nefunguje, ale před přidáním stylů pro logo a loga mi menu fungovalo a měnilo se podle zmenšování okna.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
</head>
<body>
<style>
//_____________menu nad 1000
@media only screen and (max-width: 1000px)
{
.menu
{
position:absolute;
top:30%;
width:100%;
background-color:LavenderBlush;
}
.menu ul
{
position:relative;
left:20%;
list-style:none;
font-size:25px;
}
.menu li
{
width: 60%;
margin-top:3px;
margin-bottom:3px;
color:chocolate;
background-color:LavenderBlush;
}
.menu li a
{
text-decoration:none;
color:chocolate;
text-align:center;
}
.menu li a:active
{
color:brown;
}
}
//___________menu pod 1000
@media only screen and (min-width: 1000px)
{
.menu
{
width: 70%;
position:absolute;
top:35%;
left:30%;
}
.menu ul{margin: 0px; padding: 0px;}
.menu li {float:left;list-style-type:none;}
.menu li a { display:block; font-family: Segoe UI; height:35px; width:173px; line-height: 35px; text-align:center; text-decoration: none; color: SaddleBrown; background: white; transition: color .4s, box-shadow .4s; box-shadow:inset 0px 0 0 0 chocolate;}
.menu li a:hover {box-shadow: inset 0 -5px 0 0 SaddleBrown; color: #660000; background: LavenderBlush;}
.menu li ul {display: none;}
.menu li:hover ul { display:block; position:absolute;}
.menu li:hover ul li { display:block; float: none; height:35px; width: 173px; border-top: 1px solid black;}
.menu li:hover ul li a {background: white; color: black; }
.menu li:hover ul li a:hover {background: LavenderBlush; color: #660000;}
}
//________logo pod 1000
@media only screen and (max-width: 1000px)
{
.logo
{
position:absolute;
top:0%;
left:0%;
width: 100%;
height: 20%;
}
}
//___________________logo nad 1000px
@media only screen and (min-width: 1000px)
{
.logo
{
position:absolute;
top:0%;
left:0%;
width: 67%;
height: 40%;
margin-left: auto;
margin-right: auto;
margin-top:0px;
}
}
</style>
<!--logo-->
<a href="index.html"><img src="files/logo.jpg" class="logo"></a>
<!--menu-->
<div id="menu" class="menu">
<ul>
<li><a>Schody</a>
<ul>
<li><a href="schodyprime.html">Přímé</a></li>
<li><a href="schodylomene.html">Lomené</a></li>
<li><a href="namiru.html">Na míru</a></li>
</ul>
</li>
<li><a href="">Venkovní nábytek</a>
<ul>
<li><a href="stoly.html">Venkovní stolky</a></li>
<li><a href="lavice.html">Venkovní lavice</a></li>
</ul>
</li>
<li><a href="postele.html">Postele</a></li>
<li><a href="zakazka.html">Výroba na zakázku</a>
<li><a href="kontakt.html">Kontakt a objednávka</a>
</ul>
</div>
</body>
</html>Hmm tak už mi to došlo... Omlouvám se, že jsem rušil... v css nenfunguje tahle poznámka // Děkuji |
||
| Tomáš123 Profil |
#4 · Zasláno: 27. 3. 2016, 20:14:25
responsive:
Niečo podobné sa tu riešilo nedávno. Treba myslieť na to, že CSS uznáva iba jediný typ komentárov: /* komentár */.
Nevhodne tiež postupuješ pri obaľovaní všetkých štýlov do nejakej, šírkou zobrazovacej plochy podmienenej, deklarácie. Prehliadače bez podpory media queries potom zobrazia web úplne bez CSS. Podobný účinok má načítavanie externých štýlopisov s hodnotou atribútu media obsahujúcou nejakú nepoznanú vlastnosť:
<link rel="stylesheet" media="screen and (max-width: 400px)" href="style.css"> Osvedčeným postupom je umiestniť responzívne deklarácie na koniec* CSS súboru (respektíve do neskôr načítavaného súboru v hlavičke HTML dokumentu): div { /* Pre všetky prehliadače */
width: 100px;
height: 100px;
background: red;
}
@media screen and (max-width: 1000px) {
div {
background: blue;
}
}* Na koniec súboru preto, lebo neskôr uvedená deklarácia má väčšiu prioritu: Kaskádování » Pozdější vyhrává. Nasledujúcim ťa nechcem popliesť. Nie je to podstatné pre schopnosť vytvoriť responzívny web. Podľa rýchleho prieskumu, ktorý som teraz spravil (iba v IE) mi vychádza, že samotná @media deklarácia obaľujúca pravidlá neprekáža. Problém sa vynorí až pri použití vlastností min-* alebo max-*. Je to pravda?
div { /* Pre všetky prehliadače */
width: 100px;
height: 100px;
background: red;
}
@media screen { /* Pre všetky prehliadače */
div {
background: blue;
}
}
/* Vďaka priorite neskôr uvedeného zápisu bude div modrý */ |
||
| Bubák Profil |
#5 · Zasláno: 27. 3. 2016, 22:26:12
//_____________menu nad 1000 není korektní zápis CSS komentáře
/*_____________menu nad 1000*/ takto má vypadat zápis CSS komentáře
/* _____________menu nad 1000 */ pro přehlednost se přidává mezera
|
||
|
Časová prodleva: 8 let
|
|||
0