rozdielne zobrazenie layoutu v IE a FF

Maron · Napísal **Maron**: 27.06.2008 14:34

Spravil som prvu web stranku a v IE a vsetko zobrazuje OK.
Ale ked som to spustil v FF tak jednotlive bloky boli rozhadzane.
Ako riesit tento problem? Postaci deklaracia v DOCTYPE alebo treba
rozne CSS pre oba prehliadace? Uz som sa poucil a davam len
position:relative ale aj tak asi okraje objektov prehliadace vykresluju
rozne.

beks · Napísal **beks**: 27.06.2008 15:10

skus tu hodit CSS + HTML kod, alebo odkaz na stranku pozriem nato

Tominator · Napísal **Tominator**: 27.06.2008 15:29

Maron píše:

Spravil som prvu web stranku a v IE a vsetko zobrazuje OK.
Ale ked som to spustil v FF tak jednotlive bloky boli rozhadzane.
Ako riesit tento problem? Postaci deklaracia v DOCTYPE alebo treba
rozne CSS pre oba prehliadace? Uz som sa poucil a davam len
position:relative ale aj tak asi okraje objektov prehliadace vykresluju
rozne.

no záleží na DOCTYPE podľa toho sa dá určiť ako sa ti to bude správať a taktiež position:relative nie je najlepší nápad, ono sa to potom riši buď dvomi CSSkami alebo fintami ...

HAE07 · Napísal **HAE07**: 27.06.2008 15:55

Tominator preco position relative nie je dobry napad?

Maron · Napísal autor témy **Maron**: 29.06.2008 18:21

tu je kod:

Kód:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- ?xml version="1.0" encoding="windows-1250"? --><HTML lang=sk xml:lang="sks" 
xmlns="http://www.w3.org/1999/xhtml">
<HEAD><TITLE>Pokusná - stránka :: Maron ::</TITLE>
<META http-equiv=Content-Language content=cs>
<META http-equiv=Content-Type content="text/html; charset=windows-1250">
<STYLE type=text/css media=all>
</STYLE>

<META content="MSHTML 6.00.2900.2180" name=GENERATOR>
<link rel="stylesheet" type="text/css" href="CSS\index.css">
</HEAD>
<BODY>

<DIV id=obsah>

<DIV id=hlavicka>

<DIV id=hl_nadpis>
<IMG id=kastiel    src="Obrazky/kastiel.jpg"  height=72 width=143 align=left  STYLE=" MARGIN-RIGHT:1px;
                                   MARGIN-TOP:0px;MARGIN-BOTTOM=0px"> 
 <IMG  id="znak" height=67 
                   src="Obrazky/znak_bp.gif" width=53 align=left > <BR>

 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
         Pokus Ondrej Marko - xxxx

</DIV>
</DIV>

<DIV id=lavypanel>
<DIV id=lavypanel-obsah>
<DIV id=menu>
<A class="SelectON "href="HTML/uvod.html" title="Úvodná stránka">Úvodná stránka</A> 
<A class="SelectNO "href="HTML/volba1.html" title="volba1">Volba 01</A> 
<A class="SelectNO "href="HTML/volba2.html">Volba 02</A>
<A class="SelectNO "href="HTML/volba1.html" title="volba1">Volba 03</A> 
<A class="SelectNO "href="HTML/volba1.html" title="volba1">Volba 04</A> 
<A class="SelectNO "href="HTML/volba1.html" title="volba1">Volba 05</A> 
<A class="SelectNO "href="HTML/volba1.html" title="volba1">Volba 06</A> 
<A class="SelectNO "href="HTML/volba1.html" title="volba1">Volba 07</A> 

</DIV>


</DIV>
</DIV>

<DIV id=hlavnypanel>
<DIV id=hlavnypanel-obsah>

<H4><SPAN id=nadpis_center>Srdečne Vás vítame na naších stránkach.</SPAN></H4>
<H3>O nás...</H3>


 <B><FONT COLOR=navy>Ondrej Marko & spol.</FONT></B> (ďalej len &quot;Maron&quot;)
Maecenas molestie justo eu sapien. Donec pede metus, pulvinar ac, nonummy vitae, 
ultricies a, urna. Nunc porta. Vestibulum augue. Aenean mattis sapien non sem. 
Nullam justo est, aliquam in, facilisis eget, mattis id, mi. Mauris ac lorem 
facilisis urna convallis consectetuer. Vivamus id ipsum quis odio aliquet 
adipiscing. Vestibulum mattis est accumsan quam. Suspendisse at ligula sed ante 
faucibus bibendum. Vivamus scelerisque, pede ac mattis sagittis, justo nisl 
feugiat libero, ut adipiscing ligula lorem a tellus. <BR>

<IMG id=budova    src="Obrazky/budova.jpg"  height=277 width=369 align=left  STYLE=" MARGIN-RIGHT:12px;
                                   MARGIN-TOP:12px;MARGIN-BOTTOM=10px"> 

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
Aenean eu augue sit amet velit suscipit vulputate. Ut augue quam, tempus 
tristique, vulputate in, vehicula ac, odio. Quisque vulputate diam a dolor. 
Maecenas molestie justo eu sapien. Donec pede metus, pulvinar ac, nonummy vitae, 
ultricies a, urna. Nunc porta. Vestibulum augue. Aenean mattis sapien non sem. 
Nullam justo est, aliquam in, facilisis eget, mattis id, mi. Mauris ac lorem 
facilisis urna convallis consectetuer. Vivamus id ipsum quis odio aliquet 
adipiscing. Vestibulum mattis est accumsan quam. Suspendisse at ligula sed ante 
faucibus bibendum. Vivamus scelerisque, pede ac mattis sagittis, justo nisl 
feugiat libero, ut adipiscing ligula lorem a tellus. Fusce magna pede, tempor 
nec, placerat vel, interdum et, leo. Integer odio. Sed luctus. Quisque nec 
ligula eu mauris ornare placerat. Mauris mi sem, lacinia vel, vehicula ut, porta 
ac, metus. Proin sollicitudin laoreet augue.</P>
<P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut nec dui. Integer 
tortor wisi, adipiscing id, lacinia in, dapibus ut, leo. Suspendisse rhoncus 
sapien et est aliquam vulputate. Nam non nibh. Praesent posuere tortor at risus. 
Nam facilisis elementum elit. Quisque condimentum congue quam. Fusce fringilla 
malesuada lectus. Nam tristique, mauris eget faucibus ullamcorper, neque tellus 
elementum metus, sit amet iaculis pede leo eget diam. Proin malesuada, magna vel 
vehicula pretium, tortor ipsum ultricies augue, sit amet ultrices wisi ipsum non 
nulla. Fusce blandit, velit et lacinia auctor, purus magna condimentum ligula, a 
facilisis mi mi nec est.</P>
<P>Aenean eu augue sit amet velit suscipit vulputate. Ut augue quam, tempus 
tristique, vulputate in, vehicula ac, odio. Quisque vulputate diam a dolor. 
Maecenas molestie justo eu sapien. Donec pede metus, pulvinar ac, nonummy vitae, 
ultricies a, urna. Nunc porta. Vestibulum augue. Aenean mattis sapien non sem. 
Nullam justo est, aliquam in, facilisis eget, mattis id, mi. Mauris ac lorem 
facilisis urna convallis consectetuer. Vivamus id ipsum quis odio aliquet 
adipiscing. Vestibulum mattis est accumsan quam. Suspendisse at ligula sed ante 
faucibus bibendum. Vivamus scelerisque, pede ac mattis sagittis, justo nisl 
feugiat libero, ut adipiscing ligula lorem a tellus. Fusce magna pede, tempor 
nec, placerat vel, interdum et, leo. Integer odio. Sed luctus. Quisque nec 
ligula eu mauris ornare placerat. Mauris mi sem, lacinia vel, vehicula ut, porta 
ac, metus. Proin sollicitudin laoreet augue.</P>


</DIV>
</DIV>



<DIV id=paticka>Copyrigth &copy 2008 Maron. All rights reserved. </DIV>
</DIV></BODY></HTML>


CSS
BODY {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: #ffffff; 
             PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px;
            TEXT-ALIGN: center}

#hlavicka {WIDTH:100%;HEIGHT:70px; PADDING-RIGHT: 5px;
                      PADDING-LEFT: 0px;
                     BACKGROUND: #99CCFF; PADDING-BOTTOM: 1px; 
                     PADDING-TOP: 1px;
                     BORDER-BOTTOM: navy 2px solid}

#obsah {  MARGIN: 0em auto;  WIDTH: 780px;BORDER-LEFT: navy 1pt solid;BORDER-RIGHT: navy 1pt solid;
                 TEXT-ALIGN: left; BACKGROUND: navy; FONT: normal 11pt Arial Ce, Tahoma}

#lavypanel {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; 
                        PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 140px; 
                        PADDING-TOP: 50px }

#*lavypanel-obsah {PADDING-RIGHT: 0em; PADDING-LEFT: 0em; 
                                    PADDING-BOTTOM: 0.5em; MARGIN: 0px; 
                                    PADDING-TOP: 1em; BACKGROUND: yellow;WIDTH:143;
                                    COLOR: aliceblue; FONT: bold 11pt Arial Ce,Tahoma; }

#hlavnypanel {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; 
                           PADDING-BOTTOM: 0px; MARGIN: 0px 0px 0px 140px;
                           PADDING-TOP: 0px;}

#hlavnypanel-obsah {WIDTH:100%;PADDING-RIGHT: 1em; PADDING-LEFT: 1em;
                                        PADDING-BOTTOM: 0.5em; MARGIN: 0px; 
                                        PADDING-TOP: 0.5em; BACKGROUND: aliceblue; TEXT-ALIGN:left;
                                        LINE-HEIGHT: 200%;FONT: normal 11pt Arial Ce, Tahoma}

#paticka {PADDING-RIGHT: 10px; PADDING-LEFT: 10px; BACKGROUND: #99CCFF; 
                   PADDING-BOTTOM: 10px;BORDER-TOP: navy 2px solid;BORDER-BOTTOM: navy 1px solid ;
                   PADDING-TOP: 10px;
                   TEXT-ALIGN: center;FONT: 9pt Arial Ce,Tahoma}


<!-- IMAGE
#kastiel {position:relative; top:0; left:0}
#znak  {position: relative; top: 3px; left: 70px }
#hl_nadpis  {position: relative;PADDING-LEFT: 0px;WIDTH: 750px;color:navy;
                          top: 0px; left: 0px ; font: bold 20pt Tahoma;HIGHT:60px; PADDING-TOP:0px
                        ;LINE-HEIGHT: 75%;} 
-->

<!-- MENU
#menu  {BACKGROUND: navy; position: relative ; top: 35px; left: 2px }
#menu A {PADDING-RIGHT: 5px; DISPLAY: block; PADDING-LEFT: 10px; 
         PADDING-BOTTOM: 10px; MARGIN: 0em 0px; FONT: bold 14px/1 Arial CE; WIDTH: 140px;
         PADDING-TOP: 7px; TEXT-DECORATION: none; BORDER: 1px aliceblue ridge}
.SelectON { BACKGROUND-COLOR: #99CCFF; COLOR: white}
.SelectNO { BACKGROUND-COLOR: navy; COLOR: white}
#menu A:hover  { BACKGROUND-COLOR: aliceblue; COLOR: navy}
-->

H1 {COLOR:navy}
H2 {COLOR:navy}
H3 {COLOR:navy}
H4 {COLOR:navy}
H5 {COLOR:navy}

kajbo · Napísal **kajbo**: 29.06.2008 18:26

position: absolute nieje podla mna dobry napad. relative ujde

Maron · Napísal autor témy **Maron**: 04.07.2008 7:51

No nejak som si už poradil. Len v css
#menu A {PADDING-RIGHT: 5px; DISPLAY: block; PADDING-EFT:10px; PADDING-BOTTOM: 10px; MARGIN: 0em 0px; FONT: bold 14px/1 Arial CE; WIDTH: 140px;PADDING-TOP: 7px; TEXT-DECORATION: none; BORDER: 1px aliceblue ridge}

block - WIDTH vykresluje inac - v FF to ide az do obsahu v IE len v lavom panele. (aj ked dam WIDTH: 100%)

lio · Napísal **lio**: 04.07.2008 8:14

HAE07 píše:

Tominator preco position relative nie je dobry napad?

Lebo asi nevie, o com hovori.

Inak ani sa necudujem, ze to nejde tak ako ma, pretoze kod je totalne rozbity. Predpokladam, ze toto je vytvor nejakeho WYSIWYG editora. Menu si urob pomocou <ul> a <li>.

Btw: roztahuju ti to paddingy.

Maron · Napísal autor témy **Maron**: 04.07.2008 8:56

Uz to ide (pohral som sa zo sirkami a paddingmi - krok po kroku a kontroloval v IE aj FF).
Robil som to podla nej. vzoru Layaut 2 stlpce fix.
Editor notepad.

Este ak mozte vysvetlite mi ako pouzit rozdielne css pre IE.

Ak dam do HTML tento kod tak pri IE urobi podla styleIE.css ak to bude FF alebo nieco ine tak chcem pouzit trebars style.css - ako to zariadit?
Chyba mi tam nieco ako ELSE.

Preco mam robit menu cez <UL><LI> ked nechcem mat ziadnu
znacku pri odrazke?
VALIDATOR nema proti tomu nic.

don jebot · Napísal **don jebot**: 04.07.2008 11:42

no ostatne prehliadace ti to budu jednoducjo ignorovat ...
a nemusis tam mat ziadnu znacku iba tam das list-style:none a nebudes tam mat nic ..

lio · Napísal **lio**: 04.07.2008 12:32

Maron píše:

Preco mam robit menu cez <UL><LI> ked nechcem mat ziadnu znacku pri odrazke?
VALIDATOR nema proti tomu nic.

K tej znacke len tolko, ze ti staci list-style: none;. Validator proti tomu ani nic mat nemoze, pretoze nie je taky dokonaly, aby zistil, ze menu mas urobene zlym sposobom.

Maron · Napísal autor témy **Maron**: 04.07.2008 13:16

Ale ved je to len skupina odkazov typu:
<a href="odkaz na stranku1.html">stránka1</a>
a tie su hadam standard.
(zatial mi to funguje v IE aj FF)

don jebot · Napísal **don jebot**: 04.07.2008 14:51

jasne ze to tak mozes mat...

p360t · Napísal **p360t**: 04.07.2008 16:09

Sémantika, chlapci, sémantika. Navigácia na stránke, to je nejaký (neusporiadaný) zoznam odkazov. Preto patrí do značky <UL> - Unordered List (neusporiadaný zoznam) a jednotlivé položky do <LI> - List Item (položka zoznamu). Sémantika je to, čo robí z HTML kódera profesionála. Netreba len vedieť nakódovať hocijaký dizajn, treba ho vedieť nakódovať sémanticky. To je jeden z princípov moderného prístupu k tvorbe webu.

Validátor nedokáže skontrolovať sémantickú stránku dokumentu, len syntaktickú. A preto môžeš mať validné stránky a v skutočnosti budú s prepáčením úplne na :shit:

(aj to tu tak často u niektorých expertov vidím).

lio · Napísal **lio**: 04.07.2008 18:57

Presne to je ta vec, o ktorej mu hovorim.

Maron · Napísal autor témy **Maron**: 04.07.2008 19:14

No ucim sa. HTML sa venujem len nejaky ten den.
Ked ste taki experti tak poradte este s inym css pre IE a ostatne prehliadace.

lio · Napísal **lio**: 04.07.2008 19:42

Ine CSS subory nepotrebujes, toto je uplne jednoduchy layout, ktory sa da nakodovat jednoducho pre vsetky prehliadace.

Maron · Napísal autor témy **Maron**: 05.07.2008 18:20

Netvrdim ze to teraz potrebujem ale ucim sa tak som to jednoducho chcel vediet lebo som to nejak nepochopil.
Ešte k menu ked to dam do <UL><LI> aj bez znaciek oreze mi zlava cast menu. Aby som to dostal do laveho panelu musim zadat minusove suradnice
(je to koser z hladiska semantiky?)

Maron · Napísal autor témy **Maron**: 08.07.2008 12:45

lio04 píše:

Ine CSS subory nepotrebujes, toto je uplne jednoduchy layout, ktory sa da nakodovat jednoducho pre vsetky prehliadace.

Jednoduche to az tak nebude lebo zoznam skusam rozne naformatovat
a stale su tam rozdiely v zobrazovani. Zatial rozne chapanie okrajov
a obtekanie objektov je nad moje vedomosti a skusenosti.
Musim si dat pauzu lebo sa s toho zmagorim.

... pauza pomohla, dalo to trochu viac namahy a uz je to skoro identicke (az na niektore detaily-zafarbenie okrajov) dokonca som sa zbavil minusovych pozicii zoznamu s <UL> a <LI>

.

rozdielne zobrazenie layoutu v IE a FF

Podobné témy