| Autor | Zpráva | ||
|---|---|---|---|
| chleeba Profil |
#1 · Zasláno: 14. 1. 2016, 21:32:30
Ahoj,
prosím o radu se zobrazením obsahu na stránce www.odsavani-filtrace.cz. Problém spočívá v tom, že na stránce se špatně zobrazuji centrované <div>: hlavicka, obsah_onas při zmenšení. Centrované <div> mají být roztažené až do konce stránky při zmenšení, jako ve verzi pro PC. PS: Test console Google: iPhone6 a reálně Sony Xperia z3 Velice děkuji za pomoc :) Lukáš |
||
| Sennin Profil |
chleeba:
Nazdar „Problém spočívá v tom, že na stránce se špatně zobrazuji centrované <div>: hlavicka, obsah_onas při zmenšení.“ Pri akom zmenšení? veď tá stránka neni responsívna zmenšujem prehliadač nič, testujem cez responsive-test nič... Veď nikde v css neuvádzate kedy sa má centrovať na stred pri zmenšení ... na klasickom pc je všetko v strede ale toť vše.... upresnite svoj problém lebo ste sa asi zle vyjadrili. Edit: id-čko je unikatny idetifikator teda nemali by ste s ním označovať všetky div-i použite class="" namiesto id="" Edit2: Hlavička dokumentu HTML vyzerá omnoho lepšie takto usporiadanejšie ako je to vaša vec ako si ju zoradíte ale <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <!DOCTYPE HTML><html><head><meta ....
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="robots" content="index, follow">
<meta name="title" content="GreMi KLIMA | Odsávání a filtrace.">
<meta name="description" content="Společnost GreMi KLIMA s.r.o. výrobce filtračních jednotek, lakovacích stěn, optimalizace odsávání a to včetně veškerého příslušenství.">
<meta name="keywords" content="Odsávání pilin, Odsávání prachu, Filtrační jednotky, Lakovací stěny, Ventilátory, Optimalizace odsávání">
<meta name="author" content="Lukáš Chlebik, www.lukaschlebik.wz.cz">
<title>GreMi KLIMA | Odsávání a filtrace</title>
<!-- START CSS & ICON -->
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<link href="style.css" rel="stylesheet" type="text/css">
<!-- START GOOGLE FONTS -->
<link href='http://fonts.googleapis.com/css?family=Alegreya+Sans+SC&subset=latin,latin-ext' rel='stylesheet' type='text/css' />
<!-- START JS -->
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
var seznam_retargeting_id = 31744;
/* ]]> */
</script>
<script type="text/javascript" src="//c.imedia.cz/js/retargeting.js"></script>
</head>Edit3: Chýba Vám tam ukončenie </div>
čiže <!-- START_obsah_onas --> <div id="obsah_onas"> <div id="obsah_onas_center"> <h1>O NÁS</h1> <div id="obsah_onas_center_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> <div id="obsah_onas_center_video"> <div id="obsah_onas_center_video_text">Video - Prezentace GreMi KLIMA s.r.o.</div> <div id="obsah_onas_center_video_video"><iframe width="495" height="250" src="https://www.youtube.com/embed/zexI3E_6I4M" frameborder="0" allowfullscreen></iframe></div> </div> <div id="obsah_onas_center_mezera"></div> <div id="obsah_onas_center_video"> <div id="obsah_onas_center_video_text">Video - Stavba filtrační jednotky GreMi KLIMA s.r.o.</div> <div id="obsah_onas_center_video_video"><iframe width="495" height="250" src="https://www.youtube.com/embed/-K9p27LmJMU" frameborder="0" allowfullscreen></iframe> </div> </div> </div> </div> <!-- KONEC_obsah_onas --> |
||
| chleeba Profil |
Ahoj,
děkuji moc za rychlou odpověď. Ano, stránky nejsou responzivní (jsem začátečník - spíš se učím) ale problém je lépe popsaný na obrázku: 
Děkuji moc za radu. |
||
| Sennin Profil |
#4 · Zasláno: 14. 1. 2016, 22:05:55
Uvádzate tam pevnú šírku 1050px
|
||
| chleeba Profil |
#5 · Zasláno: 14. 1. 2016, 22:11:03
Přidal jsme <div> ale nepomohlo to. A jak počítám divy tak nějak počitám asi spatně vycházelo mi to dobře i před opravou.
|
||
| Sennin Profil |
#6 · Zasláno: 14. 1. 2016, 22:13:09
tým div-om som nechcel pocedať, že kvôli tomu Vám to nefunguje len v zdrojáku to kričal </body>
ako vravím uvádzate pevnú šírku 1050px |
||
| chleeba Profil |
#7 · Zasláno: 14. 1. 2016, 22:14:55
Prosím o ukázku, nevím jak to myslíte. Děkuji
|
||
| Sennin Profil |
#8 · Zasláno: 14. 1. 2016, 22:29:32
daj mi 10 min ok?
|
||
| chleeba Profil |
#9 · Zasláno: 14. 1. 2016, 22:31:22
Děkuji ji mockrát počkám :)
|
||
| Lonanek Profil |
#10 · Zasláno: 14. 1. 2016, 22:38:26
Dovolím si jen upozornit na to, že identifikátor by měl být na stránce použit jen jednou.
Pro stylování bych doporučoval využívat více třídy než identifikátory. |
||
| chleeba Profil |
#11 · Zasláno: 14. 1. 2016, 22:42:17
Děkuji a zkusím předělat na class a id nechám jen důležitým boxům.
|
||
| Sennin Profil |
#12 · Zasláno: 14. 1. 2016, 23:12:03
chleeba:
„Děkuji ji mockrát počkám :)“ Ospravedlnujem sa naskytol sa mi problem s pc preto pisem z tabletu .... Urcite to este dnes poskytnem.... Ak pockate... |
||
| chleeba Profil |
#13 · Zasláno: 14. 1. 2016, 23:19:33
Sennin:
Děkuji a počkám a když ne tak hned ráno kouknu :) |
||
| Sennin Profil |
chleeba:
Sorry, že tak neskoro ale mám toho dosť.... v rýchlosti som to teda nejako dal dokopy ale dobre bude ak sa na ten kód tu niekto z tunajších pozrie nakoľko ja nemám toľko času aby som to vyladil do dokonalosti.... a ak zajtra nikto nič tak sa nato môžeme spoločne pozrieť :) máš to ako tak responsivne atď... ale ako vravím v rýchlosti nakodované :D HTML <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name=viewport content="width=device-width,initial-scale=1">
<title>TEST</title>
<link rel="stylesheet" href="https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="wrap">
<!-- START_hlavicka -->
<div class="hlavicka">
<div class="hlavicka-odkaz">
<a href="#">
<i class="fa fa-map-marker"></i>
Polní 825, 73961 Třinec
</a>
</div>
<div class="hlavicka-odkaz">
<a href="#">
<i class="fa fa-envelope-o"></i>
kraviec@gremiklima.cz
</a>
</div>
<div class="hlavicka-odkaz">
<a href="#">
<i class="fa fa-mobile"></i>
+420 605 475 845
</a>
</div>
</div><!-- KONEC_hlavicka -->
<!-- START_navigace -->
<div class="navigace">
<div class="box-left">
<a href="#" class="logo">
<img src="http://odsavani-filtrace.cz/img/gremi_klima.jpg" title="GreMi KLIMA | Odsávání a filtrace" alt="GreMi KLIMA | Odsávání a filtrace">
</a>
</div>
<div class="box-left">
<a href="#" class="toogle" id="toogle">
<i class="fa fa-bars"></i>
</a>
<ul class="menu" >
<li>
<a href="#">
O Nás
</a>
</li>
<li>
<a href="#">
Produkty
</a>
</li>
<li>
<a href="#">
Reference
</a>
</li>
<li>
<a href="#">
Kontakty
</a>
</li>
</ul>
</div>
</div><!-- KONEC_navigace -->
<div class="tapeta">
<img src="http://odsavani-filtrace.cz/img/tapeta2_1090x600.jpg">
</div>
<div class="linka"></div>
<div class="obsah-reseni">
<h1>POMŮŽEME VÁM S ŘEŠENÍM</h1>
<div class="obsah-reseni-box">
<img src="http://odsavani-filtrace.cz/img/filtracni_jednotka.jpg" title="GreMi KLIMA | Odsávání pilin a prachu" alt="GreMi KLIMA | Odsávání pilin a prachu">
<h2>ODSÁVÁNÍ PILIN A PRACHU</h2>
<span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</span>
</div>
<div class="obsah-reseni-box">
<img src="http://odsavani-filtrace.cz/img/klapky_smarteye.jpg" title="GreMi KLIMA | Odsávání pilin a prachu" alt="GreMi KLIMA | Odsávání pilin a prachu">
<h2>OPTIMALIZACE ODSÁVÁNÍ</h2>
<span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</span>
</div>
<div class="obsah-reseni-box">
<img src="http://odsavani-filtrace.cz/img/lakovaci_stena.jpg" title="GreMi KLIMA | Odsávání pilin a prachu" alt="GreMi KLIMA | Odsávání pilin a prachu">
<h2>ODSÁVÁNÍ PŘI LAKOVÁNÍ</h2>
<span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</span>
</div>
</div>
<div class="obsah-onas">
<h1>O NÁS</h1>
<div class="obsah-onas-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="obsah-onas-video">
<h5>Video - Prezentace GreMi KLIMA s.r.o.</h5>
<iframe width="495" height="250" src="https://www.youtube.com/embed/zexI3E_6I4M" frameborder="0" allowfullscreen></iframe>
</div>
<div class="obsah-onas-video">
<h5>Video - Stavba filtrační jednotky GreMi KLIMA s.r.o.</h5>
<iframe width="495" height="250" src="https://www.youtube.com/embed/-K9p27LmJMU" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</body>
</html>A prikladám aj CSS samozrejme :D /* OPTION */
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
font-size: 100%;
}
html, body {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
height: 100%;
font-size: 13px;
}
body {
line-height: 1.5;
font-size: 16px;
font-weight: normal;
font-style: normal;
font-family: Verdana, sans-serif;
font-variant: normal;
}
h1 {
text-align: center;
margin: 30px 0px 20px 0px;
font-size: 60px;
font-family: 'Alegreya Sans SC',monospace;
font-weight: normal;
font-variant: normal;
font-style: normal;
}
h2 {
text-align: center;
margin: 0;
font-size: 32px;
font-family: 'Alegreya Sans SC',monospace;
font-weight: normal;
font-variant: normal;
font-style: normal;
}
a {
text-decoration: none;
outline: none;
}
.wrap {
width: 100%;
height: 100%;
min-width: 300px;
position: relative;
margin: 0;
padding: 0;
display: block;
}
.hlavicka {
width: 100%;
height: auto;
position: relative;
margin: 0;
padding: 34px 0;
display: inline-block;
background-color: #2c2c2c;
}
.hlavicka-odkaz {
width: 33.33333333%;
height: auto;
position: relative;
margin: 0;
padding: 0;
float: left;
text-align: center;
}
.hlavicka-odkaz > a {
display: block;
font-size: 16px;
color: #ffffff;
text-decoration: none;
}
.hlavicka-odkaz > a > i {
font-size: 34px;
}
.navigace {
width: 100%;
height: auto;
margin: 0;
padding: 0;
display: inline-block;
background-color: #fff;
}
.box-left {
float: left;
width: 50%;
position: relative;
margin: 0;
padding: 0;
}
.box-left > .logo {
display: block;
padding: 0;
text-decoration: none;
text-align: center;
}
.box-left > .logo > img {
width: 385px;
height: 90px;
}
.menu {
width: auto;
margin: 0;
padding: 0;
list-style: none;
}
.menu li {
display: inline-block;
padding: 35px 10px;
}
.menu li a {
font-size: 20px;
color: #2c2c2c;
}
.menu > li > a:hover,
.menu > li > a:focus {
color: #d3d800;
}
.toogle {display: none;}
.tapeta {
width: 100%;
height: 600px;
position: relative;
margin: 0;
padding: 0;
display: block;
clear: both;
text-align: center;
background-color: #2c2c2c;
}
.tapeta > img {
width: 100%;
height: 100%;
}
.linka {
width: 100%;
height: 1px;
position: relative;
margin: 35px 0;
padding: 0;
display: block;
background-color: #e1e1e1;
}
.obsah-reseni {
width: 100%;
height: auto;
position: relative;
margin: 0 0 25px 0;
padding: 0 15px;
display: block;
}
.obsah-reseni-box {
width: 100%;
height: auto;
margin: 0;
padding: 0;
text-align: center;
}
.obsah-reseni h1 {
display: block;
}
.obsah-reseni-box {
width: 25%;
height: auto;
margin: 0 50px;
padding: 0;
float: left;
}
.obsah-reseni-box > img {
width: 310px;
height: 310px;
}
.obsah-reseni-box > h2 {
border-bottom: 3px solid #636363;
padding: 0 0 10px 0;
}
.obsah-reseni-box > span {
display: block;
padding: 10px 0 0 0;
}
.obsah-onas {
width: 100%;
height: auto;
margin: 45px 0;
padding: 15px 30px;
display: inline-block;
clear: both;
background-color: #2c2c2c;
color: #ffffff;
}
.obsah-onas-text {
width: 100%;
text-align: center;
}
.obsah-onas-video {
width: 50%;
float: left;
}
.obsah-onas-video > iframe {
margin: 0;
padding: 0;
}
@media (max-width: 1060px) {
.obsah-onas-video {
width: 100%;
display: block;
margin: 20px 0;
text-align: center;
}
}
@media (max-width: 992px) {
.menu {display: none;}
.toogle {
display: inline-block;
width: 50px;
height: 50px;
line-height: 50px;
position: relative;
margin: 20px 10px 20px 0;
padding: 0;
float: right;
text-align: center;
color: #2c2c2c;
}
.toogle > i {
font-size: 28px;
}
.toogle:hover,
.toogle:focus,
.toogle:active {
color: #c95656;
}
.tapeta {
height: 300px;
}
.obsah-reseni-box {
width: 100%;
height: auto;
margin: 0 auto 15px auto;
padding: 0;
float: none;
text-align: center;
}
.obsah-reseni-box > img {
min-width: 310px;
}
}
@media (max-width: 768px) {
.hlavicka-odkaz {
width: 33.33333333%;
float: left;
margin: 5px 0;
}
.hlavicka-odkaz > a > i {
font-size: 18px;
}
.box-left > .logo > img {
width: 192px;
height: 45px;
}
.toogle {
margin: 0;
}
.toogle > i {
font-size: 20px;
}
}
@media (max-width: 627px) {
.hlavicka-odkaz {
width: 100%;
float: none;
display: block;
clear: left;
margin: 5px 0;
text-align: center;
}
}
@media (max-width: 550px) {
.obsah-onas-video > iframe {
width: 100%;
}
}
@media (max-width: 465px) {
.tapeta {
height: 200px;
}
.obsah-reseni-box > img {
width: auto;
}
} |
||
| chleeba Profil |
#15 · Zasláno: 15. 1. 2016, 09:01:31
Děkuji moc za radu, nepočítal jsem že přepíšeš celé css + html. Chtěl jsme najít chybu ve stávajícím řešení viz.
http://www.odsavani-filtrace.cz/.
Děkuji za přepis chvíli mi bude trvat než se v tvém přepisu zorientuji jak si to myslel, děkuji a prosím je nějaké řešení kromě tvého jak opravit moje řešení? Chápu že tvé řešení bude responzivní zatím se však v prohlížeci zobrazuje kapku zmateně, ale začnu to zkoumat jak to vlastně funguje cos napsal :) Děkuji ještě jednou mockrát. |
||
| Sennin Profil |
chleeba:
Staci si to porovnat ja v css udavam sirku v 100% ale ty aj 100% aj width: 1050px a to je pevna sirka .... Ktora tak povediac pri zmenseni sirky prehliadaca vyteka z nadradeneho 100% rodica... Musel som to cele od zakladov prekopat nakolko to robim vzdy lebo som bol zmeteni zas z tvojho kodu :) Ak niecomu nerozumies kludne napis... Ber to ako hrubu stavbu nemal som cas to doladit.... To by mi trvalo viac :) P.S: este by som ta rad presmeroval na JakPsatWeb kde je vsetko krasne vysvetlene |
||
| chleeba Profil |
Děkuji zkusím najít nejprve chybu u mně v kódu (css udavam sirku v 100% ale ty aj 100% aj width: 1050px a to je pevna sirka .... Ktora tak povediac pri zmenseni sirky prehliadaca vyteka z nadradeneho 100% rodica... ) a pak zkusím se prolouskat tvým kódem a pochopit jak je to s tím responzivním designem :)
|
||
| chleeba Profil |
Ahoj moc v tvém kódu nechápu .wrap
A to jak docílím toho že se mi každý odstavec roztáhne od strany ke straně (hlavicka, navigace, tapeta obsah_reseni ) a na středu bude prostor pro texty 1050px? Ty máš vše na 100% nějak nechápu jak se udělá zarovnání na střed těch 1050px z čeho si to vypočítá. Snad sem to popsal správně.  Našel jsem elegantní řešení problému: Odkaz |
||
|
Časová prodleva: 8 let
|
|||
0