Autor Zpráva
Tanaris
Profil
Dobrý den.

vytvářím si web a mám problém s neposedným kódem. Potřebuju přidávat a měnit text dle potřeby a vždycky když to zkusím tak se mi roztáhne podbarvený nadpis nad fotogalerií. Netuším kde je chyba.

Tady je html podotýkám, že zatím vychytávám mouchy.

<!doctype html>
<html>
  <head>
    <meta name="description" content="Free template for PSPad" />
    <meta name="keywords" content="html5,template,pspad" />
    <meta name="author" content="Marshall" />
    <meta name="generator" content="PSPad editor, www.pspad.com" />
    <meta charset="windows-1250">
    <link type="text/css" href="../css/lightbox.css" rel="stylesheet">
    <link type="text/css" href="../styles/zakladni_styly_pro_cely_web.css" rel="stylesheet">
    
    <link type="text/css" href="../styles/styly_pro_sluzby.css" rel="stylesheet">
    
    
     <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
    <script type="text/javascript" src="js/lightbox.js"></script>
    
    <title>Průmyslové čištění</title>
    
  </head>
  
  
<body>

  <section id="obal"> <!-- obsahuje červený backround s přechodem (obrázek)-->      
  
  <section id="vnitrni_obal"> <!-- prostor pro text a galerii, bílé pozadí (není o obrázek), obsahuje dvě sekce - informace o službě a fotogaleri --> 
  
  <header> <!-- Obsahuje logo, které slouží jako klikací odkaz na hlavní stránku a obrázek pro demonstarci služby -->
 
  <h1>
   <a href="index.html"><span>Der s.r.o - Stavby, Služby, Servis</span></a>
  </h1>   <!-- Odkaz zpět na hlavní stránku -->
  
  <h2>
   <img src="../pictures/vodo-topo.png" alt="vodo-topo.png, 664kB" title="vodo-topo">
   </h2>     <!-- Header obrázek pro danou službu -->
  
  </header>  
  
  
   
    
  <section id="sekce_informace_o_sluzbe">  <!-- sekce s textem o službě -->
  
  
  <article id="popis_sluzby">  <!-- popis sluzby -->
  
  <h1>
  Vodo-topo-kanalizace       
  </h1>
  
  <p>
    Poskytujeme kompletní služby a servis v o Poskytujeme kompletní služby a servis v oboru VODO-TOPO-KANALIZACE. Nabízíme kompletní dboru VODO-TOPO-KANALIZACE. Nabízíme kompletní dodávky, opravy a servis zařízení jak v domácnostech tak v průmyslových objektech.  Poskytujeme kompletní služby a servis v oboru VODO-TOPO-KANALIZACE. Nabízíme kompletní dodávky, opravy a servis zařízení jak v domácnostech tak v průmyslových obje         
  </p>           
  
  </article>    <!-- konec popis sluzby -->  
  
           
  
  <article id="vycet_sluzeb">  <!-- seznam činností k danné službě -->

  <ul>
  
  <li>Bezplatné zaměření a zpracování cenové kalkulace</li>
  
  <li>Vnitřní a venkovní vodoinstalace a kanalizace</li>
  
  <li>Dodávky komponent, zařizovacích předmětů, technologií</li>
  
  <li>Čištění odpadů</li>
  
  <li>Realizace kotelen, rozvodů vodo-topo-kanalizace</li>
  
  <li>Podlahové vytápění</li>
  
  <li>Tlaková kanalizace</li>         
  
  <li>Přípojky</li>
  
  <li>Výměna stupačkových rozvodů</li>
  
  <li>Opravy, rekonstrukce stávajících rozvodů vodo-topo-kanalizace</li>
  
  <li>Oprava olověných rozvodů</li>
  
  <li>Výměny a montáže vodoměrů</li>
  
  <li>Dodávky a montáže čerpacích technologíí do studní</li>        
      
   
  </ul>      
  
  </article>  <!-- konec vycet sluzeb -->

  
  </section>   <!-- konec informace o sluzbe -->

   
  
 
  
  <section id="fotogalerie_sluzeb">  <!-- sekce pro fotogalerii -->
  
    <aside id="nadpis_galerie">
  
   <h2>
   Ukázky naší práce
  </h2> 
             
  </aside>   
  
  <article id="fotky"> <!-- article pro řazení fotek -->      
  
   <a href="../pictures/fotky vodo-topo/0019.jpg" rel="lightbox[example]"><img src="../pictures/fotky vodo-topo/0019.jpg" alt="0019.jpg.jpg" title="apex"></a>
   
      <a href="../pictures/fotky vodo-topo/0020.jpg" rel="lightbox[example]"><img src="../pictures/fotky vodo-topo/0020.jpg" alt="0020.jpg" title="apex"></a> 
      
      <a href="../pictures/fotky vodo-topo/0021.jpg" rel="lightbox[example]"><img src="../pictures/fotky vodo-topo/0020.jpg" alt="0021.jpg" title="apex"></a> 
      
            <a href="../pictures/fotky vodo-topo/0022.jpg" rel="lightbox[example]"><img src="../pictures/fotky vodo-topo/0022.jpg" alt="0022.jpg" title="apex"></a> 
            
                  <a href="../pictures/fotky vodo-topo/0023.jpg" rel="lightbox[example]"><img src="../pictures/fotky vodo-topo/0023.jpg" alt="0023.jpg" title="apex"></a> 
                  
                        <a href="../pictures/fotky vodo-topo/0024.jpg" rel="lightbox[example]"><img src="../pictures/fotky vodo-topo/0024.jpg" alt="0024.jpg" title="apex"></a>  
                        
                          <a href="../pictures/fotky vodo-topo/0025.jpg" rel="lightbox[example]"><img src="../pictures/fotky vodo-topo/0025.jpg" alt="0025.jpg" title="apex"></a>  
                          
                            <a href="../pictures/fotky vodo-topo/0026.jpg" rel="lightbox[example]"><img src="../pictures/fotky vodo-topo/0026.jpg" alt="0026.jpg" title="apex"></a>  
                            
                              <a href="../pictures/fotky vodo-topo/0027.jpg" rel="lightbox[example]"><img src="../pictures/fotky vodo-topo/0027.jpg" alt="0027.jpg" title="apex"></a>  
                              
                                 <a href="../pictures/fotky vodo-topo/0019.jpg" rel="lightbox[example]"><img src="../pictures/fotky vodo-topo/0019.jpg" alt="0019.jpg.jpg" title="apex"></a>
   
      <a href="../pictures/fotky vodo-topo/0020.jpg" rel="lightbox[example]"><img src="../pictures/fotky vodo-topo/0020.jpg" alt="0020.jpg" title="apex"></a> 
      
      <a href="../pictures/fotky vodo-topo/0021.jpg" rel="lightbox[example]"><img src="../pictures/fotky vodo-topo/0020.jpg" alt="0021.jpg" title="apex"></a> 
      
            <a href="../pictures/fotky vodo-topo/0022.jpg" rel="lightbox[example]"><img src="../pictures/fotky vodo-topo/0022.jpg" alt="0022.jpg" title="apex"></a> 
            
                  <a href="../pictures/fotky vodo-topo/0023.jpg" rel="lightbox[example]"><img src="../pictures/fotky vodo-topo/0023.jpg" alt="0023.jpg" title="apex"></a> 
                  
                        <a href="../pictures/fotky vodo-topo/0024.jpg" rel="lightbox[example]"><img src="../pictures/fotky vodo-topo/0024.jpg" alt="0024.jpg" title="apex"></a>  
                        
                          <a href="../pictures/fotky vodo-topo/0025.jpg" rel="lightbox[example]"><img src="../pictures/fotky vodo-topo/0025.jpg" alt="0025.jpg" title="apex"></a>  
                          
                            <a href="../pictures/fotky vodo-topo/0026.jpg" rel="lightbox[example]"><img src="../pictures/fotky vodo-topo/0026.jpg" alt="0026.jpg" title="apex"></a>  
                            
                              <a href="../pictures/fotky vodo-topo/0027.jpg" rel="lightbox[example]"><img src="../pictures/fotky vodo-topo/0027.jpg" alt="0027.jpg" title="apex"></a>  
  

    

  </article> <!-- konec fotky -->
  
   </section> <!-- konec fotogalerie_sluzeb -->

  
  </section>  <!-- konec vnitřního obalu -->
  
  </section>  <!-- konec obalu -->
  

</body>
</html>

a tady css. problematická je část #nadpis_galerie h2

# {
margin: 0 auto;
padding: 0;

}

body {
font-size: 62.5%; 
line-height: 1.4;
font-family: arial, sans-serif; 
background-color: rgb(192,192,192); 

}

span {
visibility: hidden;

}

#vnitrni_obal {
background-color: rgb(255,255,255);
float: none;
width: 55em;

}       

#obal {
background-image: url(../pictures/backround.png);
float: none;
margin: 0 auto;
width: 55em;
font-size: 1.5em; 
padding-top: 70px;
padding-left: 40px;
padding-right: 40px;
padding-bottom: 20px;

}   

header h1  {
position: relative;
left: 500px;
background-image: url(../pictures/logo.png);
background-repeat: no-repeat;
width: 317px;
height: 77px;


}

header h2  {
position: relative;
top: -160px;  
width: 825px;
height: 425px;

}  

#sekce_informace_o_sluzbe {
float: none;
margin-top: -120px;


}

#popis_sluzby {
float: left;
width: 35%;
background-color: rgb(244,244,244);
margin-top: 30px;
margin-left: 60px; 
margin-right: 60px;
padding: 5px 0px 5px 15px;
text-align: left; 
border-radius: 18px;  
border-top: 1px double rgb(153,0,0);
border-left: 1px double rgb(153,0,0)

}

#vycet_sluzeb ul {  
float: left;
width: 40%;
padding: 15px 15px 15px 25px;



} 

#fotogalerie_sluzeb  {
float: none;

padding-bottom: 5px;


}  


#fotky {
float: none;
top: 270px;
padding-right: 30px;
padding-left: 30px;
overflow: auto;
height: 320px;
background-color: rgb(102,0,0);
margin: 40px 20px 20px 20px;
box-shadow: 5px -3px 0 0 rgba(0,0,0,1);
border-radius:7px 7px 0px 0px;

}   
                      
#nadpis_galerie h2 {
position: relative;
width: 15em;
top: 40px;
left: 480px;
margin-top: 420px;
font-size: 90%;
color: rgb(255,255,255);
background-color: rgb(102,0,0);
padding: 10px 5px 10px 5px;  
text-align: center;
box-shadow: 5px -3px 0 0 rgba(0,0,0,1);
border-radius:7px 7px 0px 0px;

}   

#fotky img {
margin: 0 auto;
padding-left: 20px;
padding-top: 40px; 
width: 150px;
height: 150px;   

}

tady je odkaz na zniceny layout http://img.fileup.cz/?di=1413657891633

a tady když je v pořádku http://img.fileup.cz/?di=813657892852

Kdybyste mi pomohli opravdu by mi to pomohlo.
Str4wberry
Profil
Pošlete živou ukázku a napište v jakých prohlížečích pozorujete problém.
Tanaris
Profil
Web ještě nemám nahozený. Problém je ve všech prohlížečích.
soucekgns
Profil
Tanaris:
tak aspoň zobraz jen tu část kódu, kde je ten problém.. kdo se mám prohrabávat 300 řádky?
Davex
Profil
Tanaris:
V Exploreru není nadpis podbarvený, protože ignoruje neznámé elementy a v ostatních prohlížečích pomůže:
#nadpis_galerie h2 {
  clear: both;
}
Tanaris
Profil
Davex:
V Exploreru není nadpis podbarvený, protože ignoruje neznámé elementy a v ostatních prohlížečích pomůže:
>
>
>
#nadpis_galerie h2 {
clear: both;
}

Díky moc za radu. Pomohlo to. Nechápu, že mě to nenapadlo dřiv.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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