Autor Zpráva
vodys
Profil *
Dobrý den, mám banální dotaz, nad kterým si lámu hlavu již hodinu, jelikož v css nejsem odborníkem.
Na stránku mám vložený obrázek do pravého dolního rohu, text je vprostřed stránky, ale na menších monitorech jsem zjistil, že velikost obrázku sice není únosná, ale přeci překrývá text.
Potřebuji, aby byl obrázek pod textem a nemohu tomu přijít na kloub. Přikládám css.
Děkuji za jakékoliv rady.

<style type="text/css">

body{     
    margin:0px;
    background-color:#000;
}
img {
    display:block;
}
.header {
    height:200px;
    background:#8bbddd;
    margin:0px auto;

}
.nadpis {
    padding-top:75px;
    padding-left:400px;
    width:400px;    
    color: #333333;
    font-family: Century Gothic, sans-serif;
    font-size:45px;
    margin:0px;
    text-transform: uppercase;

}
.motto {
    font-size:19px;
    width:400px;
    color: #333333;
    font-family: Gill Sans / Gill Sans MT, sans-serif;
    padding-left:420px;
}
.content {
    background:#ffe17f;
    height:1200px;
    margin:1px auto;
}
.text {
    position: absolute;
    clear: both;
    padding-top:30px;
    padding-left:400px;
    width:800px;
    font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
}

.text h1 {
    font-size:24px;
    font:bold;
    padding-left:55px;
    font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
}

/*
.button-ano {
}

.button-ne {
}
*/

.obrazek {
    display:block;
    background: url(obrazek.jpg);
    background-repeat: no-repeat;
    bottom: 1px;
    right: 1px;
    position: fixed;
    z-index: 100;
    width:696px;
    height:600px;
}
</style>
Stalker
Profil
[#1] vodys
Nemáš odkaz na živou ukázku? Těžko říct takhle z hlavy
nemeja
Profil
Aby se obrázek posouval do pozadí, používá se záporný z-index ve třídě .obrazek
vodys
Profil *
Stalker:
http://r.dirtyanal.eu/chytraprace/index2.htm

nemeja:
z-index jsem zkoušel.. beze změny
nemeja
Profil
body { /* zrušeno pozadí alias border */
    margin: 0;
}
img {
    display: block;
}
.header {
    background: none repeat scroll 0 0 #8BBDDD;
    border-bottom: 2px solid black;
    height: 200px;
    margin: 0 auto;
    position: relative;
    z-index: 2; /* posunutí o vrstvu výš */
}
.nadpis {
    color: #333333;
    font-family: Century Gothic,sans-serif;
    font-size: 45px;
    margin: 0;
    padding-left: 400px;
    padding-top: 75px;
    text-transform: uppercase;
    width: 400px;
}
.motto {
    color: #333333;
    font-size: 19px;
    padding-left: 420px;
    width: 400px;
}
.content {
    background: none repeat scroll 0 0 #FFE17F;
    height: 1200px;
    margin: 1px auto;
    z-index: 2;
}
.text {
    clear: both;
    font-family: Candara,Calibri,Segoe,"Segoe UI",Optima,Arial,sans-serif;
    padding-left: 400px;
    padding-top: 30px;
    position: absolute;
    width: 800px;
}
.text h1 {
    font-family: Candara,Calibri,Segoe,"Segoe UI",Optima,Arial,sans-serif;
    font-size: 24px;
    padding-left: 55px;
}
.obrazek {
    background: url("obrazek.jpg") no-repeat scroll 0 0 transparent;
    bottom: 1px;
    display: block;
    height: 600px;
    position: fixed;
    right: 1px;
    width: 696px;
    z-index: 1;
}
takhle mi to funguje. S obrázek jsem nic nedělal. Stačilo dát header nad obrázek, musel jsem zrušit pozadí body, protože to dělalo ohraničení pouze pod částí headeru - border se na to hodí lépe.
vodys
Profil *
nemeja:
V tom případě dělám fakt něco špatně, dal jsem si tvoje css ke mně, ale přesto při zmenšení okna obrázek překrývá text ..
Přikládám celý kód.

<!DOCTYPE HTML><meta charset=windows-1250>
<title>Chytrá práce</title>
<head>
<style type="text/css">
body { /* zrušeno pozadí alias border */
    margin: 0;
}
img {
    display: block;
}
.header {
    background: none repeat scroll 0 0 #8BBDDD;
    border-bottom: 1px solid black;
    height: 200px;
    margin: 0 auto;
    position: relative;
    z-index: 2; /* posunutí o vrstvu výš */
}
.nadpis {
    color: #333333;
    font-family: Century Gothic,sans-serif;
    font-size: 45px;
    margin: 0;
    padding-left: 400px;
    padding-top: 75px;
    text-transform: uppercase;
    width: 400px;
}
.motto {
    color: #333333;
    font-size: 19px;
    padding-left: 420px;
    width: 400px;
}
.content {
    background: none repeat scroll 0 0 #FFE17F;
    height: 1200px;
    margin: 1px auto;
    z-index: 2;
}
.text {
    clear: both;
    font-family: Candara,Calibri,Segoe,"Segoe UI",Optima,Arial,sans-serif;
    padding-left: 400px;
    padding-top: 30px;
    position: absolute;
    width: 800px;
}
.text h1 {
    font-family: Candara,Calibri,Segoe,"Segoe UI",Optima,Arial,sans-serif;
    font-size: 24px;
    padding-left: 55px;
}
.obrazek {
    background: url("obrazek.jpg") no-repeat scroll 0 0 transparent;
    bottom: 1px;
    display: block;
    height: 600px;
    position: fixed;
    right: 1px;
    width: 696px;
    z-index: 1;
}
</style>
</head>
<body>

<div class="header">

<div class="nadpis">CHYTRÁ PRÁCE</div>
<div class="motto">---------- JE ČAS NA ZMĚNU ----------</div>
</div>

<div class="content">
<div class="text">
Máte toho dost?
<br /><br />
Už nechcete dále snášet rozmary Vašeho šéfa?
<br /><br />
Už Vás nebaví vydělávat jen na ty druhé?
<br /><br />
Chcete mít už i konečně čas i na sebe a své blízké?
<br /><br />
Už se nechcete nechat dále ponižovat vším tím sledováním a zneužíváním<br /> moderních technologií vůči Vám?
<br /><br />
Nebo studujete a chcete mít i peníze navíc?
<br /><br />
Máte pocit, že za svou práci dostáváte málo zaplaceno?
<br /><br />
Ve svém zaměstnání už nevidíte žádnou budoucnost?
<br /><br />
              <h1>Máme pro Vás řešení!</h1>
<ul>
<li>Konec controllingu v autě, mobilním telefonu či tabletu.</li>
<li>Už žádné nekonečné dny v práci, která Vás nenaplňuje a nebaví.</li>
<li>Rozhodněte Vy, s kým, kde a na čem budete spolupracovat.</li>
<li>Rozhodněte, zda chcete přivýdělek či hlavní práci.</li>
<li>Využijte Vaše schopnosti a zkušenosti ve svůj prospěch.</li>
<li>Výše Vašeho výdělku může být neomezená.</li>
<li>Vše je pouze na Vás.</li>
</ul>
<br />
Chcete s tím něco dělat??
<!--
<div class="button-ano"></div>
<div class="button-ne"></div>
-->
<div class="obrazek"></div>
</div></div>

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: