Autor Zpráva
Kew
Profil
Zdravím, mám problém, že se mi nechce opakovat pozadí na stránce (střední část, hlavička a pata se zobrazují normálně). Zobrazí se jen v případě zadání velikosti obalového divu #content, ale já potřebuji, aby se pozadí opakovalo průběžně dle množství textu v divu vnořeném #content_main (vedle je ještě #content_sub, ale ten nikdy delší než main, tady není nutno řešit dualitu). Tento problém je relativně řešitelný nastavením obalového divu dle každé stránky, ale to asi není správné řešení. V androidu to navíc nefunguje při opakování vůbec. Bude to nějaká začátečnická chyba, může někdo poradit?

CSS je:

#wrap {
border:  none;
width: 1170px;
margin: 0 auto;
}

#head {
background: #38180f url(images_sitestyle/head.jpg) no-repeat;
width: 1170px;
height: 600px;
border:  none;
margin: 0 0 0 0;
clear: both;
position:relative;

}

#content{
background-image:url(images_sitestyle/content.jpg);
background-repeat:repeat-y;
width: 1170px;
border:  none;
text-align: left;
}

#content_main{    
width: 600px;
border:  none;
text-align: left;
float: left;
padding: 60px 10px 0px 160px;
}

#content_sub{    
width: 270px;
border:  none;
text-align: left;
float: left;
padding: 60px 40px 0px 10px;
font-size:16px;
font-family:Constantia, 'Lucida Bright', 'DejaVu Serif', Georgia, serif;
}

#foot{
background: #38180f url(images_sitestyle/foot.jpg) no-repeat;
width: 1170px;
height: 301px;
border:  none;
margin: 0 0 0 0;
clear: both;
padding: 120px 0px 0px 0px;
text-align: center;
font-size: 0.9em;
}

#content_foot{    
width: 830px;
min-height: 100px;
border:  none;
position: relative;
right:375px;
float: left;
}
Tomáš123
Profil
Kew:
Prosím o odkaz na živú ukážku.
Kew
Profil
Tomáš123:
Použiji ukázku chyby přímo na webu (zakomponované je PHP a nefungovalo by na živé ukázce)- www.nonsancti.cz/index_chyba.php

Pokud je nastavena minimální velikost, jež je nedostačujicí, stejně nedojde k opakování - www.nonsancti.cz/index_chyba2.php

Cíl je, aby to vypadlo takto www.nonsancti.cz/index.php , ale nemuselo se užít přesně definované velikosti <div id="content" style="min-height:700px;">

general.css

/* kostra stránek */
body {
margin: 0 auto;
padding: 0;
background-color: #38180f;
font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
font-size: 11px;
}



#wrap {
border:  none;
width: 1170px;
margin: 0 auto;

}

#head {
background: #38180f url(images_sitestyle/head.jpg) no-repeat;
width: 1170px;
height: 600px;
border:  none;
margin: 0 0 0 0;
clear: both;
position:relative;

}

#lang {
width: 830px;
height: 340px;
top: 10px;
right: 170px;
text-align:right;
position: absolute;
border: 0;
}

#menu {
width: 830px;
height: 340px;
color: #7a1219;
font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
font-size:18px;
font-weight: 400;
text-align:right;
top: 98px;
right: 170px;
position: absolute;
border: 0;
}
#menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#menu li a {
    color: #7a1219;
    text-decoration: none;
}

#menu li a:hover {
background: url(images_sitestyle/lilie.gif) top left no-repeat;

}

#photo{
background: #38180f  no-repeat;
width: 830px;
height: 340px;
top:250px;
right:170px;
position:absolute;
border:0;
}

#cubic{
width: 830px;
height: 340px;
top:250px;
right:180px;
position:absolute;
border:0;
}

#submenu{
width: 760px;
height: 20px;
top:600px;
right:240px;
text-align:left;
position:absolute;
border:0;
font-family: Baskerville, Palatino, serif; 
font-size:18px; 
color:#7a1219;
text-decoration: none;
}

#submenu a {
font-family: Baskerville, Palatino, serif; 
font-size:18px; 
color:#7a1219;
text-decoration: none;    
}

#submenu a:hover {
font-family: Baskerville, Palatino, serif; 
font-size:18px; 
color:#7a1219;
text-decoration:underline;
}

#fb_youtube{
width: 70px;
height: 45px;
top:600px;
right:170px;
text-align:right;
position:absolute;
border:0;
}


#content{

background-image:url(images_sitestyle/content.jpg);
background-repeat:repeat-y;
width: 1170px;
border:  none;
text-align: left;

}

#content_main{    
width: 600px;
border:  none;
text-align: left;
float: left;
padding: 60px 10px 0px 160px;
}

#content_sub{    
width: 270px;
border:  none;
text-align: left;
float: left;
padding: 60px 40px 0px 10px;
font-size:16px;
font-family:Constantia, 'Lucida Bright', 'DejaVu Serif', Georgia, serif;
}


#foot{
background: #38180f url(images_sitestyle/foot.jpg) no-repeat;
width: 1170px;
height: 301px;
border:  none;
margin: 0 0 0 0;
clear: both;
padding: 120px 0px 0px 0px;
text-align: center;
font-size: 0.9em;
}

#content_foot{    
width: 830px;
min-height: 100px;
border:  none;
position: relative;
right:375px;
float: left;
}

#odkazy{
width: 276px;
height: 100px;
border:0;
text-align:left;
float:left;
position: absolute;
left:580px;
}

#podpora{
width: 277px;
height: 100px;
border:0;
text-align:center;
float:left;
position: absolute;
left:830px;
}

#spoluprace{
width: 276px;
height: 100px;
border:0;
text-align:right;
float: left;
position: absolute;
left:1065px;

}

#copyright{
width: 830px;
height: 20px;
border:0;
text-align:center;
float:right;
position: absolute;
left:550px;
top:100px;
}

h1{
color:#7a1219;
}

h2{
color:#7a1219;
}

h3{
color:#7a1219;
}

strong{
color:#7a1219;
}

a{
color:#7a1219;
text-decoration: none;
}

a:hover{
color:#7a1219;
text-decoration:underline;
}

Problém bude někde v přenášení vlastností div, neboť pokud přibívá textu v divu content, tak se opakuje, ale pokud v vnořeném divu, tak nikoliv.
Trejpa
Profil
Kew:
Neukončené plavání. Plovoucí bloky jsou vyjmuty z toku textu, bez ukončeného plavání se na jejich rozměry nebere ohled a obalující blok se podle nich neroztahuje - přetečou ho. Tvůj blok #content nemá (neplovoucí) obsah > nemá tedy ani žádnou výšku > v nulové výšce nevidíš pozadí.

Do bloku #content za elementy #content_main a #content_sub přidej ještě jeden element ukončující plavání, tedy s CSS vlastností clear: left;. Nebo bloku #content přidej vlastnost overflow: auto;. Díky ukončenému plavání se blok #content na výšku přizpůsobí i plovoucímu obsahu.

Clear - Jak funguje „float“ a „clear“
Kew
Profil
Trejpa:
Děkuji mnohokrát, pán bůh 10 ti to oplať na mnoho úspěšných kódech bez jedinného bugu.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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