| Autor | Zpráva | ||
|---|---|---|---|
| vodys Profil * |
#1 · Zasláno: 11. 8. 2013, 00:08:22
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 |
|||
| nemeja Profil |
Aby se obrázek posouval do pozadí, používá se záporný z-index ve třídě
.obrazek
|
||
| vodys Profil * |
#4 · Zasláno: 11. 8. 2013, 00:43:44
|
||
| 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;
} |
||
| vodys Profil * |
#6 · Zasláno: 11. 8. 2013, 10:35:43
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> |
||
|
Časová prodleva: 11 let
|
|||
0