Autor Zpráva
Nicolas
Profil *
Mám problém a prosím o radu. Jedná se mi o div s textem na stránce. Div by měl mít různá pozadí shora zespodu a z obou stran a natahovat se podle obsahu. Napadlo mě řešení pomocí jednoho divu a dalších vlastně 4 vnořených s obrázkem na pozadí (vrch, pravá, levá strana a spodek ). Možná přidat ještě jeden "doprostřed" na text resp. obsah tohoto rámečku. tady:Kámen úrazu je napsáno, že nejde udělat aby sloupce po krajích měly plnou výšku podle výšky textu. Jde to udělat částečně tabulkou, ale napadlo mě jestli už někdo nepřišel na nějaké rozumné řešení přes css. Pokud někdo ví, prosím o kód. Předem díky.
P.S.: vím, že to není zrovna nejčistější a nejlepší řešení, ale jsem svázán designem dodaným od grafika.
panther
Profil
Nicolas:
ale jsem svázán designem dodaným od grafika.
ukaž, co potřebuješ konkrétně udělat, nějaké řešení najdeme.
Trejpa
Profil
Nicolas:
K roztahování do všech stran potřebuješ až devět obrázků, pokud stačí jen výškově, tak stačí tři. I sloupečky tak jde udělat.
Nicolas
Profil *
No takže asi takhle:
css (asi už v něm budou zmatky, protože sem se v tom hrabal pozdě v noci a zkoušel... :-()
body {
    font-family : Verdana, serif;
    color: #b89100;
    background: #ebdeba;
    background-image: url(images/webgl_03.jpg);
    background-repeat: repeat-x;
    background-position: top;
}

a, a:link {
    text-decoration: none;
    color: #be1e2d;
}

a:hover {
    text-decoration: underline;
    color: #ff0055;
}
a:visited {
    text-decoration: none;
    color: #be1e2d;
}
h1 {
    font-size: xx-large;
    color: #9c6b00;
    }
h2 {
    font-size: x-large;
      color: #9c6b00;
    text-align: left;
}
h3 {
    font-size: large;
    color: #9c6b00;
}

#stranka {
    position: absolute;
    left: 50%; 
    width: 1562px; 
    margin-left: -781px;
    height:auto;
}
#hlavicka {
    background: url(images/webgl_02.jpg);
    background-repeat: no-repeat;
    position: absolute; 
    top: -8px;
    height: 272px;
    width: 1390px;
}

#hlavni {
    background-image: url(images/webgl_16.jpg);
    background-repeat: no-repeat;
   position: absolute; 
    top: 285px;
    width: 1390px;
    min-height: 507px;
    height: 100%;
}

#menuleve {
    background: url(images/webgl_05.jpg) no-repeat left;
    position: absolute;
    float: left;
    top: 264px;
    width: 370px;
    height: 21px;    
    }
#menuprave {
    background: url(images/webgl_13.jpg) no-repeat right;
    position: absolute;
    top:264px;
    left: 1015px;
    width: 375px;
    height: 21px;
    }    
#menu1 a {
   background: url(images/webgl_06.jpg) no-repeat left;
    position: absolute;
    top: 264px;
    left: 370px;
    width: 56px;
    height: 21px;
    border: none; 
    z-index: 1;
}
#menu1 a:hover {
   background: url(images/webgl_06a.jpg) no-repeat left;
}
#menu2 a {
   background: url(images/webgl_07.jpg) no-repeat left;
    position: absolute;
    left: 426px;
    top: 264px;
    width: 88px;
    height: 21px;
    border: none; 
    z-index: 1;
}
#menu2 a:hover {
   background: url(images/webgl_07a.jpg) no-repeat left;
}
#menu3 a {
   background: url(images/webgl_08.jpg) no-repeat left;
    position: absolute;
    top: 264px;
    left: 514px;
    width: 102px;
    height: 21px;
    border: none; 
    z-index: 1;
}
#menu3 a:hover {
   background: url(images/webgl_08a.jpg) no-repeat left;
}
#menu4 a {
   background: url(images/webgl_09.jpg) no-repeat left;
    position: absolute;
    left: 616px;
    top: 264px;
    width: 135px;
    height: 21px;
    border: none; 
    z-index: 1;
}
#menu4 a:hover {
   background: url(images/webgl_09a.jpg) no-repeat left;
}
#menu5 a {
   background: url(images/webgl_10.jpg) no-repeat left;
    position: absolute;
    left: 751px;
    top: 264px;
    width: 74px;
    height: 21px;
    border: none; 
    z-index: 1;
}
#menu5 a:hover {
   background: url(images/webgl_10a.jpg) no-repeat left;
}
#menu6 a {
   background: url(images/webgl_11.jpg) no-repeat left;
    position: absolute;
    left: 825px;
    top: 264px;
    width: 104px;
    height: 21px;
    border: none; 
    z-index: 1;
}
#menu6 a:hover {
   background: url(images/webgl_11a.jpg) no-repeat left;
}
#menu7 a {
   background: url(images/webgl_12.jpg) no-repeat left;
    position: absolute;
    left: 929px;
    top: 264px;
    width: 86px;
    height: 21px;
    border: none; 
    z-index: 1;
}
#menu7 a:hover {
   background: url(images/webgl_12a.jpg) no-repeat right;
}


#textobal {
    position: absolute;
    left: 50%; 
    top: 295px;
    margin-left: -296px;
    width: 593px;
    height: 100%;
    z-index: 1;
}

#textvrsek {
    position:absolute;
    background-image:url(images/text_01.png); 
    background-repeat: no-repeat; 
    width:593px; 
    height: 20px;
    left:0px;
    top:0px;
    
} 
#textleva {
    position:absolute;
    background-image:url(images/text_03.png); 
    background-repeat: repeat-y; 
    float:left;
    width:18px; 
    height: 100%;
    left:0px;
    top:20px;
    
}

#text1 {
    color: #b89100;
    background: #f5efdd;
    font-family : Verdana, serif;
    position:absolute;
    left: 23px;
    float: left;
    top: 25px;
    text-align: justify;
    padding: 10px 10px 10px 10px;
    z-index: 20;
    width:505px; 
    height:100%;
    clear: both;
    

}
#textprava {
    position:absolute;
    background-image:url(images/text_05.png) ;
    background-repeat: repeat-y;
    float:right;
    width:60px; 
    height: 100%;
    left: 533px;
    top: 20px;
    
}

#textspodek {
    position:absolute;
    background-image:url(images/text_07.png); 
    background-repeat: no-repeat; 
    bottom: -71px;
    left:0px;
    width:593px; 
    height:51px;
    z-index:1;
    clear:both;
}
Stránka je dočasně na tomto místě.
co potřebuju je aby se mi ten rámeček, přes kterej teď leze ten text, roztahoval podle toho divu text1.
Nicolas
Profil *
No ještě jsem to trochu překopal na tohle ale co stím pozadím? Nepůjde to nějak odmazat?
peta
Profil
Nechapu, nac se ptas. Obrazek je tvuj problem, ne? Potreboval jsi poradit, jak to udelat natahovaci. Ted tedy resis dalsi problem, opravit obrazek, ty rozky, kde se prekryva nekolik obrazku? V Gimpu treba. Je to piplacka asi na 30 min, protoze tam mas ten stin. Navic, natahovat tahle zubatou pravou stranu, no nevim... To ti nebude navazovat. Javascriptem by se to dalo podchytit, ze spodni obrazek vzdy posunes nebo roztahnes, posunX(vyska, rovnice zakriveni pro X).

Posunu
[............] top
[............] middle
[] [.........] bottom roh + botom natahovaci

Roztahnuti
[............] top
[............] middle
[...............] botom s menitelnou width
Nicolas
Profil *
No problém je právě v tom překrývání. Jde o to, že pozadí pod tím rámečkem se mění, proto je v png obrázek se stínem s průhledností. Průšvih je v tom, že řešení aby se roztahovaly boční divy teď funguje ale pozadí je vidět i tam kde bych už potřeboval aby vidět nebylo. Tzn nějaký posun pomocí margin (ten nevykresluje pozadí), ale to pak zase posune ostatní divy... nebo posun pozicí těch horních a spodních divů mimo div s textem, bohužel to opět posová všechno ostatní :-(. Navazování vpravo je problém, vím o tom a pořeším to ještě s grafikem, ale nejdřív musím pořešit to překrytí. Jinak samozřejmě děkuji za rady.

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: