| Autor | Zpráva | ||
|---|---|---|---|
| robbie Profil * |
#1 · Zasláno: 4. 10. 2015, 16:00:43
Ahoj,
mám takový problém a nevím, kde jsem udelal chybu, ale absolutně mi web stránka nereaguje, když ji zmenším pod 640px. Obdelniky s obsahem by se mely skladat pod sebe, ale zustavají porade vedle sebe. Chtel bych , aby se pri zmenseni velikosti okna prohlizece, skladaly pod sebe. Obdelniky maji ID #div1 #div2 A druhý problém, chtel bych po kliknutí na miniaturu obrázku / ukázky prací v levo dole, aby se zvetsenina obrázku objevila vzdy uprosted leveho obdelniku s obsahem, a to pri jakekoli velikosti okna prohlizece, coz se mi uz vubec nedari a nevím z jakeho duvodu. Pomuze nekdo? ID obrazku je #big .Dekuji http:// hodinovy-manzel-znojmo.8u.cz kod: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Opravy - .... a okolí - David S...</title>
<style type="text/css">
<!--
body{
background-image: url(img/House2.jpg);
background-repeat: no-repeat;
background-size: cover;}
#wrapper{
margin: 50px auto;
padding:5px;
width:1000px;
height:auto;
}
#div1{
background-color:#dcdcdc;
margin: 20px auto ;
padding: 0px 10px 0px 10px;
width:480px;
height:auto;
float:left;
}
#div2{
width:450px;
height:440px;
margin:20px 10px;
padding: 0px 10px 0px 10px;
background-color:green;
font-family: "Times New Roman", Times, serif;
font-size:14px;
float:left;
color:#f0f8ff;
padding:10px 10px 25px 10px;
}
.ukazka{ text-decoration:none;
}
#div2 a{color:white
}
hr{
color:#eff7ff ;
padding-left:auto;
padding-right:auto;
}
#big {
position:absolute;
left:400px;
top:200px;
}
------------------------------------------------------------------------------
//Responsive css
@media screen and (max-width:990px){
#wrapper{
width:auto;
}
#div1{width:50%;
height:auto;
margin:10px 50px;
margin-left:150px;
}
#div2{width:50%;
margin:10px 50px;
margin-left:150px;
}
.iframe{ width:440px;}
}
#big {
position: absolute;
left:280px;
top:50px;
}
}
--------------------------------------------------------
@media screen and (max-width:640px){
body{margin:0px;
paddding:0px;
}
#wrapper{
width:50%;
margin:0px;
padding:0px;
}
#div1{width:100%;
margin:10px 0px;
padding:5px;
height:auto;
}
#div2{width:100%;
margin:0px;
padding:5px;
height:auto;
}
.iframe{ width:330px;}
}
#big {
position: absolute;
left: 95px;
top: 400px;
}
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="div1">
<H2><strong>Opravy - Znojmo a okolí <img src="img/tools.png" width="40" height="40" alt="tools"/></strong></H2>
<hr>
<p><strong>Činnost</strong><br/>
-drobné opravy <br/>
-výroba a montáž nábytku <br/>
-lehké zednické práce <br/>
-stěhování <br/>
-instalace obrazů,polic, garnyží, světel</br>
-lehké obkladačské práce </br>
-kácení stromů, křovin a údržba trávníků </br>
-drobné instalaterské práce </br>
-drobné elektrikářské práce </br>
</p>
</br>
<p>
<strong class="ukazka">Ukázka zakázek </strong><br/>
<hr>
<img id="big" onclick="this.style.display='none'">
<img src="img/stul.jpg" onclick="var b = document.getElementById('big'); b.src='img/stul_big.jpg'; b.style.display = 'block'">
<img src="img/kuchyn.jpg" onclick="var b = document.getElementById('big'); b.src='img/kuchyn_big.jpg'; b.style.display = 'block'">
<img src="img/dlazba.jpg" onclick="var b = document.getElementById('big'); b.src='img/dlazba_big.jpg'; b.style.display = 'block'">
<img src="img/skrin.jpg" onclick="var b = document.getElementById('big'); b.src='img/skrin_big.jpg'; b.style.display = 'block'">
</p>
</div>
<div id="div2">
<iframe class="iframe"src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2001.830442980944!2d16.024986699999925!3d48.783248904267495!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x476d56f9dbc3b4f1%3A0x80104b035c8e4bea!2zxaBhdG92IDMyMCwgNjcxIDIyIMWgYXRvdg!5e1!3m2!1scs!2scz!4v1432465532523" width="425" height="350" frameborder="0" style="border:0"></iframe><br/></br>
<img src="img/pen.png" width="20" height="20" alt="kontakt"/><strong>Kontakt:</strong> David .... <br/>
<img src="img/phone.png" width="20" height="20" alt="telefon"/><strong>Mob:</strong><strong> +420 ... ... 196</strong> <br/>
<img src="img/mail.png" width="20" height="20" alt="email"/><strong>E-mail:</strong> ....david@seznam.cz <br/>
<img src="img/fb.png" width="20" height="20" alt="facebook"/><strong>Facebook:</strong>
<a href="https://www.facebook.com/david.suler.7?fref=ts">www.facebook.com/david.s...</a> <br/>
</div>
</div>
</body>
</html> |
||
| Taps Profil |
#2 · Zasláno: 4. 10. 2015, 16:45:22
robbie:
místo width, používej max-width - ukázka viz Opravy - .... a okolí - David S... Pro zobrazení obrázky bych doporučil použivat nějaký lightbox, který má podporu responzivity...např. fancybox |
||
| robbie Profil * |
#3 · Zasláno: 5. 10. 2015, 20:03:17
Taps:
Takže takto jak je to napsáno, se nedá nastavit jednotné umístění-jedna poloha zvětšeného obrázku ukázky zakázek pro ruzné velikosti okna prohlížeče? Pokud zvetším miniaturu obrazku/ukázky zakázekí , objeví se obrázek jinde maximalizovaném okně prohlížeče a uplně na jiném místě, když mám okno prohlížeče zmenšené např na šířku 640px. Cim to je? Dekuji moc |
||
| Tomáš123 Profil |
robbie:
#divu1 nastav position: relative a obrázok sa ani nepohne. Relatívna i absolútna pozícia totiž určujú počiatok súradnicového systému. V predvolenom stave túto zodpovednosť preberá prvok <body>. Ten ale mení svoje rozmery v závislosti na rozmeroch okna a teda v tvojom prípade pre túto úlohu nie je vhodný. Viac si prečítaj na jakpsatweb.cz.
|
||
| robbie Profil * |
#5 · Zasláno: 6. 10. 2015, 12:21:52
Tomáš123:
Diky moc Tome, si me zachranil, vyzkousel sem ledasco, ale nic nefungovalo a na tohle sem uplně zapoměl. |
||
|
Časová prodleva: 10 let
|
|||
0