| 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 |
#2 · Zasláno: 14. 10. 2015, 19:52:55
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 |
#4 · Zasláno: 15. 10. 2015, 00:28:25
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 |
#5 · Zasláno: 16. 10. 2015, 19:03:59
Trejpa:
Děkuji mnohokrát, pán bůh 10 ti to oplať na mnoho úspěšných kódech bez jedinného bugu. |
||
|
Časová prodleva: 9 let
|
|||
0