Autor Zpráva
michal454454
Profil
#1 · Zasláno: 23. 8. 2015, 15:04:28
Odpovědět Citovat
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
Odpovědět Citovat
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
Odpovědět Citovat
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
Odpovědět Citovat
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
Odpovědět Citovat
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
Odpovědět Citovat
Když vymažu tu výšku u toho divu #fixed tak se stane tohle....

http://wsalbion.8u.cz/
Časová prodleva: 9 let

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0