Autor Zpráva
revital
Profil
Zdravím,

Zkoušel jsem si nakódovat - složit rozřezané obrázky v photoshopu tak, aby vznikl určitý blok - rámeček. Ale je tady menší problém a to v tom, že blok není blok, ale spiší nějaký kousanec. Zde Vám vložím kód, který mě nepřiadá nijak chybný, ale výsledek v odkazu je hrozivý. Prosil bych o komentář, kde jsem udělal chybu prosím.

Díky předem..

css

.main_box {
	width: 750px;
	background: url(main_left.png) 0 0 repeat-y;
}

.main_box .to { 
	background: url(main_right.png) top right repeat-y;
}

.main_box .to1 {
	background: url(main_topcenter.png) 0 0 repeat-x;
}

.main_box .to2 {
	background: url(main_topleft.png) 0 0 no-repeat;
}

.main_box .to3 {
	background: url(main_topright.png) right top no-repeat;
}

.main_box .to4 {
	background: url(main_bottomcenter.png) left bottom repeat-x;
}

.main_box .to5 {
	background: url(main_bottomleft.png) left bottom no-repeat;
}

.main_box .to6 {
	background: url(main_bottomright.png) right bottom no-repeat;
	padding: 5px 25px 15px 20px;
}


html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 

"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<title>Rámeček s kulatými rohy - blok</title>
<link rel="stylesheet" href="style.css" type="text/css" media="all" />
</head>
<body>
<div class="main_box">
 <div class="to">
  <div class="to1">
   <div class="to2">
    <div class="to3">
     <div class="to4">
      <div class="to5">
       <div class="to6">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc sem orci, lacinia 

et, euismod vestibulum, tempor nec, metus. Proin bibendum elit egestas augue. Sed 

porttitor est sit amet eros. In vehicula tincidunt lorem. In vulputate. Quisque 

laoreet volutpat dui. Aenean quis magna. Donec sapien. Donec vitae odio. Fusce 

gravida, sapien vel tempus malesuada, wisi arcu vulputate ipsum, et sodales massa 

urna sit amet nulla.

Curabitur nec dui id diam volutpat interdum. Morbi nibh justo, tristique ut, pretium 

eu, congue sit amet, arcu. Vivamus hendrerit metus id elit. Vivamus tristique, lacus 

nec lacinia viverra, eros mauris mollis purus, quis condimentum mi mauris sed 

lectus. Sed ultricies. Sed a urna. Curabitur at ante. Proin varius dignissim 

purus.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc sem orci, lacinia 

et, euismod vestibulum, tempor nec, metus. Proin bibendum elit egestas augue. Sed 

porttitor est sit amet eros. In vehicula tincidunt lorem. In vulputate. Quisque 

laoreet volutpat dui. Aenean quis magna. Donec sapien. Donec vitae odio. Fusce 

gravida, sapien vel tempus malesuada, wisi arcu vulputate ipsum, et sodales massa 

urna sit amet nulla.

Curabitur nec dui id diam volutpat interdum. Morbi nibh justo, tristique ut, pretium 

eu, congue sit amet, arcu. Vivamus hendrerit metus id elit. Vivamus tristique, lacus 

nec lacinia viverra, eros mauris mollis purus, quis condimentum mi mauris sed 

lectus. Sed ultricies. Sed a urna. Curabitur at ante. Proin varius dignissim 

purus.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc sem orci, lacinia 

et, euismod vestibulum, tempor nec, metus. Proin bibendum elit egestas augue. Sed 

porttitor est sit amet eros. In vehicula tincidunt lorem. In vulputate. Quisque 

laoreet volutpat dui. Aenean quis magna. Donec sapien. Donec vitae odio. Fusce 

gravida, sapien vel tempus malesuada, wisi arcu vulputate ipsum, et sodales massa 

urna sit amet nulla.

Curabitur nec dui id diam volutpat interdum. Morbi nibh justo, tristique ut, pretium 

eu, congue sit amet, arcu. Vivamus hendrerit metus id elit. Vivamus tristique, lacus 

nec lacinia viverra, eros mauris mollis purus, quis condimentum mi mauris sed 

lectus. Sed ultricies. Sed a urna. Curabitur at ante. Proin varius dignissim 

purus.</p>
         </div>
        </div>
       </div>
      </div>
     </div>
    </div>
   </div>
  </div>
 </body>
</html>


odkaz příklad zde
tiso
Profil
Tie obrázky sa ti navzájom prekrývajú, máš ich zbytočne veľké. Načo má napríklad obrázok main_topcenter.png rozmery 18x290px?
revital
Profil
tak že pomůže to když ty obrázky nějak krapet zmenším ?
tiso
Profil
revital: pomôže ti keď pochopíš, ako tam tie obrázky máš naukladané.
revital
Profil
jeden myslel, ale nevěděl jsem, že velikost ovlivní tady tohle, když ty obrázky dám do stejné velikosti, problém by moh býtl vyřešen.. dík za radu
tiso
Profil
revital: nie som si istý, či chápeš, čo som mal na mysli. Okrem toho sa na takéto veci používajú oveľa jednoduchšie HTML konštrukcie, otázne je či naozaj potrebuješ box ľubovolnej šírky a dĺžky.
panther
Profil
tiso:
otázne je či naozaj potrebuješ box ľubovolnej šírky a dĺžky.
délky pravděpodobně ano, je v něm textový obsah. I tak se dají obrázky redukovat, nekoukal jsem, proč je jich tam tolik (jak vypadají).
tiso
Profil
panther: prečo to píšeš mne? Teda prečo vôbec reaguješ?
revital
Profil
jak trapné.. peru se s tím pořád.. jako španělská vesnice fakt..
revital
Profil
pořád nevím proč ten střed děla to co děla ? Odkaz
tiso
Profil
revital: pretože ten stred nemá nastavenú žiadnu farbu, tak je biely.
panther
Profil
revital:
pořád nevím proč ten střed děla to co děla ? Odkaz
možná proto, že tam chybí barva na pozadí.

Když jsme u toho, udělej to třemi obrázky - horní rohy, dolní rohy, opakující se střed.
habendorf
Profil
OMG, co to je za hnus? Udělej tři zanořené divy a máš to, ne? Vždyť máš pevnou šířku.
revital
Profil
tak pardón..dělám to poprvé a chtěl jsem to zkusit, často to na webech vídávám, že si kódeři takhle pohrajou s layoutem..
habendorf
Profil
Hraní si je jedna věc a dělat věci smysluplně druhá. Co si vybereš je na tobě.
revital
Profil
ještě jedna rada prosím. zkusil jsem tedy blok se 3 obrázky.. výsledek je viditelně lepší než s těma, co před tím, ale nechápu proč se mi stále ten střed tak špatně opakuje ? zde
pavuk
Profil
Otázka je co myslíš tím „špatně opakuje“.
Já tipuju že je to tím, že "prostředek" deklaruješ v <divu> nadřazeným "vršku" a "spodku"
revital
Profil
že by tohle bylo špatně ? <div class="main_box">
<div class="topbg">
<div class="bottombg">

prostředek, vrch, pata
pavuk
Profil
revital:
Porovnej svůj kód s tímhle a najdi rozdíly, to ti vysvětlí kde byla chyba.
<html>
<head>

<title>Rámeček s kulatými rohy - box</title>
<style type="text/css">
.box    {
        width: 632px;
        height: 48px;
        background: white url("main_topbg.png") top center no-repeat;
	margin: 0 auto;
	padding-top: 35px
        }
.boxin1 {
        width: 632px ;
        background:#fff url("main_centerbg.gif") left top repeat-y;
        }
.boxin2 {
        height: 48px;
        background:#fff url("main_bottombg.png") bottom center no-repeat
        }
p      {
        margin: 11px 0 0 10px;
	font-family: Arial,Helvetica,sans-serif;
	font-size: 13px;	
	color: black;
	padding: 4px 10px 6px 10px;
        }
</style>
</head>
<body>

  <div class="box">
          
          <div class="boxin1"> 
              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc sem orci, lacinia et, euismod vestibulum, tempor nec, metus.</p>
              <p>Proin bibendum elit egestas augue. Sed porttitor est sit amet eros. In vehicula tincidunt lorem. In vulputate. </p>
          </div>
          
          <div class="boxin2">
          </div>
  </div>
  
</body>
</html>
revital
Profil
ano něco jiného na tom kódu je, ale když zkopíruji tenle kód a vyzkouším ho zda je to v pořádku, střed ( main center ) stejně pořád nejde..to je k nevíře ! je to určitě jednoduchá záležitost, ale mě prostě pořád dokonale nejde.. :(
pavuk
Profil
V tom případě bude problém v obrázku, protože výše zmíněněj kód funguje

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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