Autor | Zpráva | ||
---|---|---|---|
michal454454 Profil |
#1 · Zasláno: 23. 8. 2015, 15:04:28
Dobrý den chtěl bych se zeptat.. mám tady svůj kód na zacatku je div který má být fixovaný a má při rolování jezdit dolů a pod ním chci aby byly rovnou přilepené divy novinky a tabs... zde jsou kódy..
index.php <div id="fixed"> <div id="nadpis"> <div id="nadpis_logo"> <a href="index.html"><img id="dznak" src="dres znak.png" /></a> </div> <div id="nadpis_text"> <a href="index.html"><p id="nadpis_p"><b>WEST SANDWICH ALBION</b> FC</p></a> <a href="index.html"><p id="podnadpis">www.wsalbion.8u.cz</p></a> </div> </div> <div id="menu"> <a href="#">Úvod</a> <a href="#">A-tým</a> <a href="#">Statistiky</a> <a href="#">Zápasy</a> <a href="#">Nábory</a> <a href="#">Kontakt</a> <div id="soc_sit">facebook</div> </div> </div> <div id="novinky"> <?php $novinky = $db->select('clanky','*',['ORDER' => 'datum DESC','LIMIT' => 2]); foreach($novinky as $novinka){ echo '<div class="novinka"><img class="novinka_obr" src='.$novinka["obrazek"].' /><div class="nov_tit_ram"><a class="nov_titulek" href="#">'.$novinka["text"].'</a></div></div>'; } ?> </div> <div id="wrapper"> <div id="tabs"> <ul> <li><a href="#tabs-1" title="">Nadchazejici</a></li> <li><a href="#tabs-2" title="">Odehrany</a></li> </ul> <div id="tabs_container"> <div id="tabs-1"> <img id="zapznak" src="dres znak.png" style="width:20px; height:20px;" /><h2 id="hhh" style="font-size:35px;">WSA : FC Palasio</h2> <br /> <p>25.9.2015</p> <p>Slavia</p> </div> <div id="tabs-2"> Zdar </div> </div><!--End tabs container--> </div><!--End tabs--> </div> style.css *{ padding:0; margin:0; } body{ background:white; height:2000px; } #fixed{ top:0px; position:fixed; width:100%; height:20%; z-index:999; } .nadpisy{ color:#158; margin:10; border-bottom:1px solid rgba(0,0,0,.2); } #nadpis{ background:#158; width:100%; height:94%; margin:0 auto; border-bottom:3px solid #158; } p#nadpis_p{ font-size:23px; color:white; font-family:"DINPro-Regular", Arial; } #nadpis_logo{ float:left; width:15%; margin-left:20px; margin-top:10px; } #nadpis_text{ width:50%; float:left; margin-top:40px; margin-left:5px; } #nadpis_text a{ list-style-type:none; text-decoration:none; } #nadpis_p{ text-align:left; } #dznak{ width:130px; height:150px; float:right; } p#podnadpis{ font-size:15px; color:white; font-family:"DINPro-Regular", Arial; } #novinky{ width:70%; height:15%; float:left; margin-top:17.5%; background:red; } .novinka{ float:left; height:100%; width:50%; box-shadow:2px 0px 10px 0px black; } .novinka_obr{ width:100%; height:100%; } .nov_titulek{ font-size:25; color:white; width:100%; padding:5; } .nov_tit_ram{ height:30%; width:100%; background:#158; box-shadow:2px 0px 10px 0px black; } #menu{ background:rgba(255,255,255,.9); width:100%; height:25%; margin: auto; position: relative; overflow: hidden; border-bottom:1px solid grey; -webkit-box-shadow: 0 8px 6px -6px rgba(0,0,0,.5); -moz-box-shadow: 0 8px 6px -6px rgba(0,0,0,.5); box-shadow: 0 8px 6px -6px rgba(0,0,0,.5); } #menu a { float: left; width: 100px; text-align: center; padding: .5em 0 .7em 0; text-decoration: none; color: #158; z-index: 1; position: relative; font-size:20px; border-right:1px solid grey; } #soc_sit { float: right; width: 100px; text-align: center; padding: .5em 0 .7em 0; text-decoration: none; color: white; z-index: 1; position: relative; font-size:20px; border-right:1px solid grey; background:#158; right:20%; } #menu a:hover { background:#158; color:white; transition:all .4s; } a:active,a:focus { outline: expression(hideFocus='true'); } #wrapper { width: 30%; height:20%; margin-top:225px; float:right; } #tabs,#tabs2,#tabs3,#tabs4,#tabs5 { height:80%; width: 90%; margin: 0 auto; margin-bottom: 40px; color:#158; box-shadow:2px 0px 10px 0px black; text-align:center; border-bottom-left-radius:10px; border-bottom-right-radius:10px; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,f3f3f3+55,ededed+57,ffffff+100 */ background: #ffffff; /* Old browsers */ background: -moz-linear-gradient(-45deg, #ffffff 0%, #f3f3f3 55%, #ededed 57%, #ffffff 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#ffffff), color-stop(55%,#f3f3f3), color-stop(57%,#ededed), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(-45deg, #ffffff 0%,#f3f3f3 55%,#ededed 57%,#ffffff 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(-45deg, #ffffff 0%,#f3f3f3 55%,#ededed 57%,#ffffff 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(-45deg, #ffffff 0%,#f3f3f3 55%,#ededed 57%,#ffffff 100%); /* IE10+ */ background: linear-gradient(135deg, #ffffff 0%,#f3f3f3 55%,#ededed 57%,#ffffff 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } #tabs li,#tabs2 li,#tabs3 li,#tabs4 li,#tabs5 li { float: left; margin-right: 2px; } #tabs li a,#tabs2 li a,#tabs3 li a,#tabs4 li a,#tabs5 li a { display: block; padding: 15px 20px; background: #158; text-decoration: none; color: white; } #tabs li a:hover,#tabs2 li a:hover,#tabs3 li a:hover,#tabs4 li a:hover,#tabs5 li a:hover { background: #158; color:white; } #tabs_container { padding: 40px; overflow: hidden; position:relative; } #tabs_container div { margin-right: 40px; } .transition { -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; transition: all .3s ease-in-out; -webkit-transition-delay: .3s; -moz-transition-delay: .3s; -o-transition-delay: .3s; -ms-transition-delay: .3s; transition-delay: .3s; } .make_transist { -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .hidescale { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -o-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); filter: alpha(opacity=0); opacity: 0; } .showscale { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; -webkit-transition-delay: .3s; -moz-transition-delay: .3s; -o-transition-delay: .3s; -ms-transition-delay: .3s; transition-delay: .3s; } .hideleft { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -o-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; } .showleft { -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -o-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; -webkit-transition-delay: .3s; -moz-transition-delay: .3s; -o-transition-delay: .3s; -ms-transition-delay: .3s; transition-delay: .3s; } .hidescaleup { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; } .showscaleup { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; -webkit-transition-delay: .3s; -moz-transition-delay: .3s; -o-transition-delay: .3s; -ms-transition-delay: .3s; transition-delay: .3s; } .hideflip { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transform: rotatey(-90deg) scale(1.1); -moz-transform: rotatey(-90deg) scale(1.1); -o-transform: rotatey(-90deg) scale(1.1); -ms-transform: rotatey(-90deg) scale(1.1); transform: rotatey(-90deg) scale(1.1); -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; } .showflip { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; -webkit-transition-delay: .3s; -moz-transition-delay: .3s; -o-transition-delay: .3s; -ms-transition-delay: .3s; transition-delay: .3s; -webkit-transform: rotatey(0deg) scale(1); -moz-transform: rotatey(0deg) scale(1); -o-transform: rotatey(0deg) scale(1); -ms-transform: rotatey(0deg) scale(1); transform: rotatey(0deg) scale(1); -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; } .tabulous_active { background: white !important; color: #655c89 !important; } .tabulousclear { display: block; clear: both; } |
||
sitole Profil |
#2 · Zasláno: 23. 8. 2015, 15:11:06
michal454454:
K tomuto se používají živé ukázky. V takovémto zmateném a dlouhém kodu se ti tu nikdo hrabat nebude. :) |
||
michal454454 Profil |
#3 · Zasláno: 23. 8. 2015, 15:52:58
Zivou ukázku mate tady primo odkaz na stranky to bude nejlepší... :)
http://wsalbion.8u.cz/ |
||
Tomáš123 Profil |
#4 · Zasláno: 23. 8. 2015, 19:29:19
michal454454:
„tady primo odkaz na stranky to bude nejlepší...“ Nebude. Keď chceš opravovať chyby, dodaj radšej upraviteľnú ukážku. Zaujímavosťou kódu je, že stačí iba mazať riadky a ono sa to samo nejako vyrieši. Začni tým, že vymažeš všetky definície výšky. Predsa nemôžeš nastaviť relatívne statickému obsahu výšku 20% ( #fixed ). Pokračuj mazaním výšky a horného marginu prvku #nadpis-text . Hlavička sa ti trochu rozpadne, ale všetko vyrieši clear . Tesne pred koniec divu#nadpis pridaj riadok <div style="clear:both"></div> (prípadne mu definuj nejakú triedu a deklaráciu uveď v externom CSS). Keď skončíš, stránka by mala vyzerať nejako takto:
![]() Prípadné manipulovanie s obsahom pod hlavičkou je možné zmenou horného vonkajšieho odsadenia ( marginu ) prvku #novinky (teraz 17.5%) pre hlavný obsah a #wrapper (teraz 225px) pre postranný panel.
|
||
michal454454 Profil |
#5 · Zasláno: 23. 8. 2015, 23:04:22
Kdyz vymažu u divu fixed height tak mi cely ten div zmizi a nema zadnou vysku...
|
||
michal454454 Profil |
#6 · Zasláno: 24. 8. 2015, 17:01:35
Když vymažu tu výšku u toho divu #fixed tak se stane tohle....
http://wsalbion.8u.cz/ |
||
Časová prodleva: 9 let
|
0