| Autor | Zpráva | ||
|---|---|---|---|
| revital Profil |
#1 · Zasláno: 5. 8. 2010, 10:32:48 · Upravil/a: revital
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 |
#2 · Zasláno: 5. 8. 2010, 10:41:34
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 |
#3 · Zasláno: 5. 8. 2010, 12:29:54 · Upravil/a: revital
tak že pomůže to když ty obrázky nějak krapet zmenším ?
|
||
| tiso Profil |
#4 · Zasláno: 5. 8. 2010, 12:32:50
revital: pomôže ti keď pochopíš, ako tam tie obrázky máš naukladané.
|
||
| revital Profil |
#5 · Zasláno: 5. 8. 2010, 12:35:17 · Upravil/a: revital
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 |
#6 · Zasláno: 5. 8. 2010, 12:41:41
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 |
#7 · Zasláno: 5. 8. 2010, 12:51:15
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 |
#8 · Zasláno: 5. 8. 2010, 13:14:04
panther: prečo to píšeš mne? Teda prečo vôbec reaguješ?
|
||
| revital Profil |
#9 · Zasláno: 5. 8. 2010, 13:46:53
jak trapné.. peru se s tím pořád.. jako španělská vesnice fakt..
|
||
| revital Profil |
#10 · Zasláno: 5. 8. 2010, 14:22:40
pořád nevím proč ten střed děla to co děla ? Odkaz
|
||
| tiso Profil |
#11 · Zasláno: 5. 8. 2010, 14:26:47
revital: pretože ten stred nemá nastavenú žiadnu farbu, tak je biely.
|
||
| panther Profil |
#12 · Zasláno: 5. 8. 2010, 14:27:14
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 |
#13 · Zasláno: 5. 8. 2010, 14:29:38
OMG, co to je za hnus? Udělej tři zanořené divy a máš to, ne? Vždyť máš pevnou šířku.
|
||
| revital Profil |
#14 · Zasláno: 5. 8. 2010, 14:43:21 · Upravil/a: revital
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 |
#15 · Zasláno: 5. 8. 2010, 14:54:20
Hraní si je jedna věc a dělat věci smysluplně druhá. Co si vybereš je na tobě.
|
||
| revital Profil |
#16 · Zasláno: 5. 8. 2010, 17:07:39
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 |
#17 · Zasláno: 5. 8. 2010, 20:15:26 · Upravil/a: pavuk
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 |
#18 · Zasláno: 5. 8. 2010, 21:40:08
že by tohle bylo špatně ? <div class="main_box">
<div class="topbg"> <div class="bottombg"> prostředek, vrch, pata |
||
| pavuk Profil |
#19 · Zasláno: 6. 8. 2010, 14:51:49 · Upravil/a: pavuk
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 |
#20 · Zasláno: 7. 8. 2010, 16:35:35
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 |
#21 · Zasláno: 8. 8. 2010, 08:29:34
V tom případě bude problém v obrázku, protože výše zmíněněj kód funguje
|
||
|
Časová prodleva: 14 let
|
|||
0