Diskuze: multiple background

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

Don

Člen

Don:12.11.2012 20:12

Ahoj, mám problém s hlavičkou webu. Vkládám 3 obrázky jako header.

<!DOCTYPE html>
<html lang="cs-cz" dir="ltr">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <meta http-equiv="Content-Language" content="cs">
</head>
<body>
           <header></header>
</body>
</html>

header{
   width:1024px;
   height:50px;
   background:url('http://clanshs.wz.cz/left.png') left top no-repeat,
   url('http://clanshs.wz.cz/right.png') right top no-repeat,
   url('http://clanshs.wz.cz/main.png') center top repeat-x;
}

Pokud použiji stejný kód s jinýmy obrázky tak to funguje. Problém je tedy v obrázkách vytvořených v GIMPU.Prostřední část překrývá krajní části. Nevíte proč?

Obrázky z netu

   width:1024px;
   height:50px;
url('http://www.css3.info/wp-content/themes/new_css3/img/left.png') left top no-repeat, url('http://www.css3.info/wp-content/themes/new_css3/img/right.png') right top no-repeat, url('http://www.css3.info/wp-content/themes/new_css3/img/main.png') center top repeat-x

Odpovědět

12.11.2012 20:12

matesax

Tvůrce

matesax:12.11.2012 20:21

Stačí zadat to pevně - a možná spíše v px - chceš-li layout veprostřed, bude to trochu komplikovanější...

Nahoru Odpovědět

12.11.2012 20:21

Don

Člen

Don:12.11.2012 20:26

layout bude uprostřed. Neřeším problém css. Řeším problém obrázků. Proč s jinýmy obrázky to funguje a s mojimi ne?

Nahoru Odpovědět

12.11.2012 20:26

matesax

Tvůrce

matesax:12.11.2012 20:27

Jak jsem napsal - velikost... Proč nepoužíváš relativní URL?

Editováno 12.11.2012 20:29

Nahoru Odpovědět

12.11.2012 20:27

Don

Člen

Don:12.11.2012 20:30

Třeba proto aby jste měli přístup k těm obrázkům co mně nefungují?

Nahoru Odpovědět

12.11.2012 20:30

matesax

Tvůrce

matesax:12.11.2012 20:32

A proč jsou vůbec 3? (Nebude jednoudušší jeden velký - uprostřed průhledný...)

Ty 2 left se neshodují.

Editováno 12.11.2012 20:33

Nahoru Odpovědět

12.11.2012 20:32

Don

Člen

Don:12.11.2012 20:36

Nechápu proč bych měl použít jeden obrázek velký, který by se zbytečně stahoval. Tahle diskuze jde špatným směrem. V čem jsou ty obrázky rozdílné oproti tomu druhému. Je nutno nastavit nějakou masku, ... ?

Nahoru Odpovědět

12.11.2012 20:36

matesax

Tvůrce

matesax:12.11.2012 20:40

Rozdíl je jen v rozměrech - to jsem ti již psal - nic jiného to ovlivnit nemůže. Proto jsem ti psal,, ať to nastavíš pevně - u layoutu veprostřed pomocí % - třeba 40%. Ovšem nechápu, proč je lepší skládat 3 mini obrázky do jednoho většího - ten se nebude stahovat o moc déle, než ty 3...

Editováno 12.11.2012 20:41

Nahoru Odpovědět

12.11.2012 20:40

David Hartinger

Vlastník

David Hartinger:12.11.2012 21:05

Problém je v tom, že pokud mají krajní obrázky třeba kulaté rohy, tak za nimi bude vidět ten prostřední. Musí být neprůhledné. Také záleží na pořadí pozadí, abys měl ten prostřední vzadu.

Nahoru Odpovědět

12.11.2012 21:05

New kid back on the block with a R.I.P

Kit

Tvůrce

Kit:12.11.2012 21:28

Je to trochu kostrbatější, ale funguje mi to:

body {
  margin:0 5px;
  background:
      url('left.png') left top no-repeat,
      url('right.png') right top no-repeat;
}
#text {
  height:50px;
  background: url('main.png') top repeat-x;
}

A v HTML:

<body>
<div id="text">
Text
</div>
</body>

Nahoru Odpovědět

12.11.2012 21:28

Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.

Don

Člen

Don:13.11.2012 16:58

Vyřešeno přidáním bíloho pozadí. Tohle mně nenapadlo. Díky. ++

Nahoru Odpovědět

13.11.2012 16:58

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 11 zpráv z 11.