Autor Zpráva
uroboros
Profil *
#1 · Zasláno: 18. 2. 2006, 16:28:22
Odpovědět Citovat
Mám problém, v IE jsou stránky napozicovány jak bych chtěl, ale testoval jsem to i v Opeře - verze 9.0 a Mozile verze 1.7.12 a tam je to rozhozený, o různý kousky se divi překrývaj, v Opeře je to asi nejhorší, tam to šoupe i text. Co s tim, aby to fungovala všude? Díky
wimstr
Profil *
#2 · Zasláno: 18. 2. 2006, 16:29:59
Odpovědět Citovat
Chtělo by to zdroják, nebo adresu na stránky, jinak se těžko radí.
bojars
Profil
#3 · Zasláno: 18. 2. 2006, 16:30:37
Odpovědět Citovat
Na všeobecnú otázku všeobecná odpoveď:

http://www.jakpsatweb.cz/css/css-pozicovani.html
uroboros
Profil *
#4 · Zasláno: 18. 2. 2006, 16:41:12
Odpovědět Citovat
Tohle je externí styl - style.css, adresa je http://www.uroboros.xf.cz/index/pozicovani.htm

body {background-color: white}

div { padding: 5px; }

#cely { width: 760px; position: relative; text-align: left; margin: auto }
#obsah { position: absolute; width: 610px; top: 70px; left: 150px; padding: 5px; }
#hlavicka2 { width: 100%; height: 20px;}
#hlavicka { position: absolute; width: 760px; top: 0px; left: 0px; height: 70px; }
#levy { position: absolute; width: 150px; top: 70px; left: 0px; height: 460px; }
#patka { width: 100%; height: 20px;}

#obsah { background-color: gray; color: white; }
#hlavicka2 { background-color: green; color: white; }
#levy { background-color: blue; color: white; padding-left: 6px;}
#hlavicka { background-color: yellow; color: yellow;}
#patka { background-color: red; color: yellow; padding: 0px; }

body, p, li, td, th, a {font-family: "Times New Roman", sans;}
p {text-indent: 16px;color: black; font-size: 15px}
a {text-decoration: none}

a:link {color: blue}
a:visited {color: blue}
a:active {color: blue}
a:hover {color: darkgreen; text-decoration: underline;font-size: 15px}

body, html
{scrollbar-track-color: #e7ffff;
scrollbar-face-color: #ffe7ce;
scrollbar-highlight-color: #e7ffff;
scrollbar-3dlight-color: #999999;
scrollbar-darkshadow-color: #000000;
scrollbar-shadow-color: #bbbbbb;
scrollbar-arrow-color: black; }

h1 {color: red; font-style: italic;text-align: center;font-size: 30px}
h2 {color: green; font-style: italic;text-align: center;font-size: 25px}
h3 {color: blue; font-style: italic;text-align: center;font-size: 20px}
h4 {color: darkred; font-style: italic;text-align: center;font-size: 15px}
uroboros
Profil *
#5 · Zasláno: 18. 2. 2006, 16:42:40
Odpovědět Citovat
Barev si zatím nevšímejte, je to jen spíchlií jak sem co zrovna vymyslel, později to bude složený z obrázků.
wimstr
Profil *
#6 · Zasláno: 18. 2. 2006, 16:52:36
Odpovědět Citovat
Ne všude dodržiješ mezeru za středníkama, máš tam 2x body, to bych dal do jednoho. 


body, p, li, td, th, a {font-family: "Times New Roman", sans;} 

p {text-indent: 16px;color: black; font-size: 15px} 

a {text-decoration: none} 

{scrollbar-track-color: #e7ffff; 

scrollbar-face-color: #ffe7ce; 

scrollbar-highlight-color: #e7ffff; 

scrollbar-3dlight-color: #999999; 

scrollbar-darkshadow-color: #000000; 

scrollbar-shadow-color: #bbbbbb; 

scrollbar-arrow-color: black; }
uroboros
Profil *
#7 · Zasláno: 18. 2. 2006, 17:10:53
Odpovědět Citovat
jo, dobrej nápad, ale to neřeší můj problém s tim, že se ty divi posouvaj.
wimstr
Profil *
#8 · Zasláno: 18. 2. 2006, 17:31:19
Odpovědět Citovat
proč máš hlavičku2 100% a patku100%, k čemu to je dobrý.
uroboros
Profil *
#9 · Zasláno: 18. 2. 2006, 17:57:13
Odpovědět Citovat
hlavička2 a patka jsou vložený v divu obsah- halvička2 nahoře, pod tim je obsah a pod tim je patka, chci tim potom doladit vzhled, až udělam garfiku, ale prostě mi ty divi k sobě nechtě sednout v něčem jinym než v IE. myslim všechny ne tenhle sloupec, co jsem teď popisloval.
wimstr
Profil *
#10 · Zasláno: 18. 2. 2006, 18:19:52
Odpovědět Citovat
v divu #celi máš width před position: relative 
#cely { width: 760px; position: relative; text-align: left; margin: auto }
uroboros
Profil *
#11 · Zasláno: 18. 2. 2006, 18:26:39
Odpovědět Citovat
Dík, další malá chybička, ale to pořád neřeší můj problém....
Tamto s tou hlavičkou2 a patkou ti bude patrné z tohohle:

<body style="text-align: center">
<div id="cely">
<div id="levy"><p>Levý sloupec</p></div>
<div id="obsah">
<div id="hlavicka2"></div>
<p><h1>Nadpis</h1></p>
<p>Text Text Text Text Text Text</p>
<div id="patka">Patka</div>
</div>
<div id="hlavicka">Hlavička</div>
</div>
</body>
wimstr
Profil *
#12 · Zasláno: 18. 2. 2006, 18:37:04
Odpovědět Citovat
všechny padding napiš, jako to máš tady: 
#levy { background-color: blue; color: white; padding-left: 6px;} 


div { padding: 5px; }

tady nastavuješ paddinf 5px pro všechny, a někde to dáváš jinak, to radši nastav u každýho zvlášť.
uroboros
Profil *
#13 · Zasláno: 18. 2. 2006, 18:47:06
Odpovědět Citovat
Tak jsem to udělal, nastalo mírný zlepšení, ale pořád se to mrší, mě už fakt nic nenapadá, čtu to pořád dokola a už z toho začínam magořit...
wimstr
Profil *
#14 · Zasláno: 18. 2. 2006, 18:59:27
Odpovědět Citovat
úplně na začátku máš 
body { background-color: #ffffff }

to dej taky do jednoho.

jinak už taky nevim...dyštak sem napiš ten upravenej kód
uroboros
Profil *
#15 · Zasláno: 18. 2. 2006, 19:31:58
Odpovědět Citovat
myslim si, že to musí bejt takhle, tohle je stylopis:

body {background-color: #000000}
body, p, li, td, th, a {font-family: "Times New Roman", sans;}
p {text-indent: 16px;color: black; font-size: 15px}
a {text-decoration: none}
a:link {color: blue}
a:visited {color: blue}
a:active {color: blue}
a:hover {color: darkgreen; text-decoration: underline;font-size: 15px}
body, html{scrollbar-track-color: #e7ffff;
scrollbar-face-color: #ffe7ce;
scrollbar-highlight-color: #e7ffff;
scrollbar-3dlight-color: #999999;
scrollbar-darkshadow-color: #000000;
scrollbar-shadow-color: #bbbbbb;
scrollbar-arrow-color: black; }

#cely { position: relative; width: 760px; text-align: left; margin: auto }
#obsah { position: absolute; width: 610px; top: 70px; left: 150px; }
#hlavicka2 { width: 100%; height: 20px; }
#hlavicka { position: absolute; width: 760px; top: 0px; left: 0px; height: 70px; }
#levy { position: absolute; width: 150px; top: 70px; left: 0px; height: 460px; }
#patka { width: 100%; height: 20px; }

#obsah { background-color: gray; color: white; padding: 5px; }
#hlavicka2 { background-color: green; color: white; padding: 2px; }
#levy { background-color: blue; color: white; padding: 5px;}
#hlavicka { background-color: yellow; color: yellow; padding-left: 5px; padding-top: 5px; }
#patka { background-color: red; color: yellow; padding: 2px; }

h1 {color: red; font-style: italic;text-align: center;font-size: 30px}
h2 {color: green; font-style: italic;text-align: center;font-size: 25px}
h3 {color: blue; font-style: italic;text-align: center;font-size: 20px}
h4 {color: darkred; font-style: italic;text-align: center;font-size: 15px}


Tohle je stránka:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="shortcut icon" href="favicon.ico">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<meta http-equiv="Content-Language" content="cs">
<link rel="stylesheet" type="text/css" href="style.css">
<title>pozicovani</title>
</head>

<body style="text-align: center">
<div id="cely">
<div id="levy">
<p>Levý sloupec</p>
</div>
<div id="obsah">
<div id="hlavicka2">
</div>
<p><h1>Nadpis</h1>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text&nbsp; </p>
<p>&nbsp; </p>
<p>&nbsp; </p>
<p> Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text&nbsp; </p>
<p>&nbsp; </p>
<p> Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text&nbsp; </p>
<p> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text </p>
<p>&nbsp;Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<div id="patka">Patka</div>
</div>
<div id="hlavicka">Hlavička</div>
</div>
</body>
</html>


Zkus na to kouknout i na tom webu. adresa už sem psal někde dřív, v IE je to fakt v pohodě, ostatní to zmrší
wimstr
Profil *
#16 · Zasláno: 18. 2. 2006, 19:42:39
Odpovědět Citovat
nemáš tam ukončené dva DIVI celý a obsah
uroboros
Profil *
#17 · Zasláno: 18. 2. 2006, 19:47:32
Odpovědět Citovat
Zkus si to přečíst ještě jednou prosimtě, já si mysli, že je mam ukončený všechny.
wimstr
Profil *
#18 · Zasláno: 18. 2. 2006, 19:54:37
Odpovědět Citovat
jj jsem to přehlíd to je někde napsaný vedle a někde pod tim.

To sans jsem nikde nenašel jenom (sans-serif) 
body, p, li, td, th, a {font-family: "Times New Roman", sans;}


barvy změň do např.:(#000000 atd..)

V #hlavicka2 ani u #patka nemáš určenou position. 
#hlavicka2 { width: 100%; height: 20px; }
uroboros
Profil *
#19 · Zasláno: 18. 2. 2006, 20:15:22
Odpovědět Citovat
hlavička a patka jsou vložený do divu obsah, takže se řídí podle toho a mam u nich nastavenou jen potřebnou výšku

sans - je označení pro patkové písm, třeba times new roman a sans-serif je označení pro bezpatkové písmo jak je třeba arial

ty barvy s tim nejspíš nic společnýho mít nebudou, navíc tohle je jen návrh, potom tam budou obrázky

Začínam si myslet, že to ničí tan padding, protože se to šoupe jen o pár px, zkusim ho vypnout a uvidim, ale asi to taky nepomůže.
uroboros
Profil *
#20 · Zasláno: 18. 2. 2006, 20:37:21
Odpovědět Citovat
tak sem dal padding u všeho jednotlivě 0 a už to k sobě sedlo všude, ale vypadá to dost divně, holt to budu muset nějak doladit tou grafikou...
krteczek
Profil
#21 · Zasláno: 19. 2. 2006, 17:52:45
Odpovědět Citovat
proč si přiděláváš práci pozicováním? vždyť se divy (všechny prvky) skládají samy za sebe tak jak je píšeš, stačí dát těm prvkům, u kterých chceš, aby měli pevné rozměry, nastavit jejich pevné rozměry a je to, pokud je několik prvků vedle sebe dej jim rozměr (width) a nastav jim float:left (right), aby to správně fungovalo stačí za poslední floatnuty prvek ve stejne skupině dát prvek, kterému nastavíš clear:both
pokud bude problém s boxmodelem bude stačit u ie použit podtržítkový hack na nastavení rozměru
krteczek
Anonymní
Profil *
#22 · Zasláno: 21. 2. 2006, 11:52:05
Odpovědět Citovat
ja bych se chtel zeptat jak v css nastavim aby vsechny obrazky byly zarovnany na stred
Anonymní
Profil *
#23 · Zasláno: 21. 2. 2006, 11:52:59
Odpovědět Citovat
pomozte nekdo prosímmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
Anonymní
Profil *
#24 · Zasláno: 21. 2. 2006, 13:33:14
Odpovědět Citovat
tak nic no si to najdu sam:-)
Časová prodleva: 18 let
Toto téma je uzamčeno. Odpověď nelze zaslat.

0