21. září bude sraz! Od 18.00 v restauraci Tradice v Praze u Anděla
Autor Zpráva
brazilec
Profil *
Dobrý den,

prosím Vás o radu. Mám úvodní stránku webu kde jsou 2 divy. Ale bohužel pouze v rozlišení 1024x768 jsou v pozici kde mají být jinak při jiných rozlišení se samovolně pohybují nahoru a dolu.

jak mám zamezit tomuto problému aby tedy v různých rozlišení byly DIVY na jednom místě stále.

děkuji

html code:

<link rel="stylesheet" href="css/styles.css">
  <link href=“http://www.domena.cz/favicon.ico“ rel=“shortcut icon“ type=“image/x-icon“ />
   <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
   <script src="script.js"></script>
<title>XXX</title>
<a href='http://www.domena.cz/leto/' target="_blank"><div class="leto"></div></a><a href='http://www.domena.cz/zima/' target="_blank"><div class="zima"></div></a><div class="popis">Klikněte na roční období a zobrazte si verzi o kterou máte zájem.</div>
<body>
</body>
</html>


CSS:

body {
    
    font-family:  Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    width: auto;
    height:auto;
    background:url(../images/rozcestnik.jpg)  center fixed no-repeat;
    
    
    

}
.leto {    
    width:240px;
    height: 65px;
    margin-left:495px;
    margin-top:413px;
    

}
.zima {    
    width:240px;
    height: 65px;
    margin-left:535px;
   margin-top:63px;
   


}
.popis {    
font-size:14px;
color: #000;
background-color:#fff;
text-align:center;
border-radius: 8px;
width:600px;
margin-left:330px;

margin-top:160px;
opacity: 0.9; filter: alpha(opacity=50);
Joker
Profil
brazilec:
Ten prvek je umístěný na nějaký počet pixelů. Takže při nějaké velikosti okna bude třeba v půlce obrazovky a při jiné úplně mimo obrazovku.
To je vlastnost udávání rozměrů v pixelech.

V rozlišení 1024x768 bude bod umístěný 1000px od pravého kraje na levém okraji, zatímco ve full HD (1920x1080) bude zhruba uprostřed. Pochopitelně není možné mít prvky od sebe umístěné zároveň stejný počet pixelů a na různých rozlišeních o relativně stejnou část obrazovky, protože ta část obrazovky má prostě na různých rozlišeních různou velikost v pixelech.
brazilec
Profil *
Joker:
Děkuji. Tedy jak bych to mohl opravit alespoň z části?
Joker
Profil
To záleží na tom, čeho přesně se má dosáhnout.
brazilec
Profil *
Joker:
Potrebuji dosahnout toho , ze v tomto konkretnim pripade 1 DIV slouzi jako odkaz pri sipku na rozcestniku a 2. DIV pod DIVEM 1 slouzi jako odkaz pro sipku druhou na rozcestniku. Jsou pod sebou. Vlastne problem je v tom ze pri rozliseni full HD dojde k odskoceni DIVU smerem dolu a tedy nekopiruji obrazek a odkaz je odskocen o nekolik px pod obrazkem a tedy postrada smysl.

napada Vas neco prosim?
Tomáš123
Profil
brazilec:
jinak při jiných rozlišení se samovolně pohybují nahoru a dolu
Skúšal si poziciovanie?
brazilec
Profil *
Tomáš123:
pozicovanie moc nezabralo bohuzel. napr. pri rozliseni 1280x800px jsou DIVY odskoceny.

diky za dalsi rady.
Trejpa
Profil
brazilec:
Záleží na konkrétním obrázku, ten jsi sem nedal.

Nicméně je jasné, že když obrázek umístíš na střed a odkazy umisťuješ zleva, tak se při různých šířkách budou vzájemně posouvat. Je třeba sjednotit, odkud budou se bude pozice odvozovat. Předpokládám, že to chceš od středu:

ukázka, kód

Veškerý obsah stránky patří do elementu BODY. Zadávat velikost písma v pixelech není nejlepší nápad. Není třeba dávat do odkazu bloky, když i odkaz může být blokem. Pro ty, kdo nevidí obrázek na pozadí (nevidomí, vyhledávače), je vhodné vyplnit i prázdný odkaz (a text třeba dodatečně skrýt), aby bylo jasné, kam odkazuje. Dle konkrétního případu bych dal do odkazu výřez obrázku z pozadí jako <img> a vyplnil mu vlastnost ALT.
brazilec
Profil *
Trejpa:
A muzu tedy poslat konkretni vec nekam na email? nechci totiz zde jen zverejnovat nazev zarizeni, pro ktere je to urceno. dekuji
Trejpa
Profil
brazilec:
Můj e-mail si dohledáš. Pak sem dám řešení bez prozrazení obsahu.
Trejpa
Profil
brazilec:
Řešení máš na e-mailu. Zde anonymizovaná verze: ukázka, kód.

Bylo třeba obrázek pozadí obalit blokem, ke kterému se budou vztahovat souřadnice (marginu nebo pozicování). Použil jsem pozicování. Teprve celý blok je možné vystředit ve vodorovném směru. Aby se mohl obrázek jakoby zasouvat do stran v případě úzkého okna, použil jsem bloky dva vnořené - jeden pro obrázek a druhý pro rozměry. Ve svislém směru jsem si pomohl vlastností media queries, po překročení nějaké z hranic výšky se přidá zhruba polovina toho přebytku jako horní margin obalujícímu bloku.

Jako odkazy a nadpis jsem použil obrázky získané výsekem z původního pozadí. S vyplněnou vlastností ALT zajistí bezproblémové přečtení stránky všem, včetně návštěvníků bez stylů nebo obrázků.
brazilec
Profil *
Trejpa:
Děkuji moc. To je přesně ono co jsme potřeboval. Klobouk dolů. Nastuduji si abych příště neotravoval :-) Ještě jednou děkuji.

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:

0