Autor Zpráva
Niky
Profil *
Ahoj, mám problém s obtékáním.
Mám vedle seba dva divy, nalevo mám menu levypanel, napravo obsah hlavnipanel. Šířky mají takové, aby se vešly do divu obsah. Jenže, problém je v tom, že každý prohlížeč to interpretuje jinak.
Opera - zobrazuje mi to správně
FireFox - hlavnipanel je zobrazen pod levypanel
IE 7 - to samé, co FF

Zde je ukázka kódu:

<style type="text/css">

body {
margin:0px; padding:0px;
text-align:center;
background-color: #E0B679;
background-image: pokus.html/obrazky('obrazky/pergamen.jpg'); position: top left; repeat: repeat;
font-family: Times New Roman;
font-style: normal;
font-size: 14pt;
font-weight: medium;
overflow-y: auto; overflow: -moz-scrollbars-vertical;
scrollbar-base-color: #E0B679;
}
a:link {color: #051280;}
a:visited {color: #051280;}
a:active {color: #FFFFFF;}
a:hover {color: #FFFFFF; text-decoration: blink;}

#obsah {
width: 960px;
margin:1px auto; padding: 5px;
border: 6px double black;
text-align:left;
background-image: pokus.html/obrazky('obrazky/pergamen.jpg'); position: top left; repeat: repeat;
}

#hlavicka {
margin: 0px; padding: 0px;
border: 1px solid green;
width: 950px;
height: 316px;
}

#levypanel {
float: left;
width: 200px;
margin:0;
border: 1px solid white;
padding:0;
}

#levypanel-obsah {
margin:0;
padding: 5px;
font-family: Monotype Corsiva, Times New Roman;
font-style: italic;
font-size: 14pt;
font-weight: bold;
}

#hlavnipanel {
margin:0;
border: 1px solid red;
padding:0;
width: 750px;
height: 100%;
}

#hlavnipanel-obsah {
margin:0;
padding: 0px 5px 0px 5px;
}


#paticka {
padding: 2px;
border-top: 1px solid black;
background: transparent;
}

hr.cleaner {
clear:both;
display: none
}
</style>

</head>

/pozn. ukázku bohužel nemám/
SwimX
Profil
jj, zlatá opera:)
levemu dej float:left;
pravemu: float: right;

myslím že mi to běhalo;)
Niky
Profil *
to jsem zkusila, ale nepomohlo to. FF a iE to nechápou:-( zkoušela jsem u levysoupec napsat i display: inline; či display: block; a ani to nepomohlo. Nejsou ještě nějaké jiné triky? Mně už fantazie dochází.
Niky
Profil *
vlastně... Opera i Firefox už to zobrazují správně, ale IE 7 ne. Ten hlavnipanel se jen poposunul směrem doprava, ale pořád je pod tím levypanelem. Takže ještě něco by to chtělo.

Zkoušela jsem to dolatit taky pomocí pozicování, ale nenašla jsem kompromis pro všechny tři prohlížeče. Zkusím si ještě přečíst kapitolu o pozicování a pak uvidím (a doufám, že to, co vidět chci:-)
panther
Profil
Niky
pozicovat určitě ne..

nechce se mi studovat výše zmíněný kód, ale pokud mají ty dva panely dohromady šířku 100% (=šířku obalového divu) a zároveň oba float: left;, mělo by to fungovat bez problémů..

jestli ne, asi budu nucen podívat se na výše uvedený tvůj kód.. Proto také doufám, že to tak bude.. :-)
Niky
Profil *
Panthere, budeš nucen k tomu, k čemu já se nutím už tolik času. Když dám float" left k obojímu, iE to pochotí tak, že ta paticka obtéká zprava ten hlavni panel.
Nic se tím neřeší.

Pozicování je vážně passé, už jsem to vyzkoušela.

Ještě bych mohla udělat tu věc, že bych udělala jen jeden div, který by obsahoval tabulku. V levéˇbuňce tybulky by byl ten levý sloupec a v prqavé buňce by byl ten hlavnipanel. Jenže sranda pak ještě je, že zatím nevím definitivní výšku menu a vpravo mám iframe, který se zvětšude do výšky podle toho, kolik je v něm řádků.

A hlavně, tabulkový layouty se dnes asi už moc nepoužívají... Uměla bych ho udělat, ale radšji bych se bez toho obešla...
panther
Profil
Niky
není tu html kód..

pokud má obojí float: left;, musíš pod to dá ještě cleaner
Niky
Profil *
Furt s tím mám nějaké problémy... Zkrátka, nemůžu najít kompromis.
Docela by mně zajímalo, jak to mají vyřešené tvůrci šablon.

Já snad nakonec budu nucená udělat tu věc, že ty va divy levypanel a hlavnipanel sloučím v jeden a nalevo budu mít to menu v rabulce a napravo budu mít ten iframe... Nebo i tady by nastal problém?
panther
Profil
Niky
tak sem dej celý kód, včetně HTML.. nebo co lépe, nahraj celou stránku na http://www.webzdarma.cz/. Věř, že to je to nejlepší, co pro svůj problém můžeš zatím udělat ;)
Niky
Profil *
Zde je tedy ten kód (část 1.)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Bohemia Do-khyi</title>
<script>
function vypocet (elem) {
elem.style.height = elem.contentWindow.document.body.scrollHeight;
elem.style.width = elem.contentWindow.document.body.scrollWidth;
}
</script>
<style type="text/css">

a.ostatni:link {color: #051280; padding-left: 0px; display: inline; width: 0px; height: 0px;}
a.ostatni:visited {color: #051280; padding-left: 0px; display: inline; width: 0px; height: 0px;}
a.ostatni:active {color: #FFFFFF; padding-left: 0px; display: inline; width: 0px; height: 0px;}
a.ostatni:hover {color: #FFFFFF; padding-left: 0px; display: inline; width: 0px; height: 0px;}

a.odrazka:link,a:visited
{
color: #051280;
text-decoration: none;
display: inline;
width: 0px;
height: 0px;
fotn-weight: bold;

padding-left: 20px;
}

a.odrazka:hover
{
color: #FFFFFF;
text-decoration: none;
display: inline;
width: 20px;
height: 16px;
background: url('obrazky/pac2.png') no-repeat;
padding-left: 20px;
font-weight: bold;
}

body {
margin:0px; padding:0px;
text-align:center;
background-color: #E0B679;
background-image: pokus.html/obrazky('obrazky/pergamen.jpg'); position: top left; repeat: repeat;
font-family: Times New Roman;
font-style: normal;
font-size: 14pt;
font-weight: medium;
overflow-y: auto; overflow: -moz-scrollbars-vertical;
scrollbar-base-color: #E0B679;
}

#obsah {
width: 960px;
margin:1px auto; padding: 5px;
border: 6px double black;
text-align:left;
background-image: pokus.html/obrazky('obrazky/pergamen.jpg'); position: top left; repeat: repeat;
}

#hlavicka {
margin: 0px; padding: 0px;
border: 1px solid green;
width: 950px;
height: 316px;
}

#levypanel {
float: left;
width: 200px;
margin:0;
border: 1px solid white;
padding:0;
}

#levypanel-obsah {
margin:0;
padding: 5px;
font-family: Monotype Corsiva, Times New Roman;
font-style: italic;
font-size: 14pt;
font-weight: bold;
}

#hlavnipanel {
margin:0;
border: 1px solid red;
padding:0;
width: 750px;
height: auto;
}

#hlavnipanel-obsah {
margin:0;
padding: 0px 5px 0px 5px;
}

#paticka {
padding: 2px;
border-top: 1px solid black;
background: transparent;
}

hr.cleaner {
clear:both;
display: none
}
</style>

</head>
Niky
Profil *
(část 2.)

<body bgcolor="#E0B679" background="obrazky/pergamen.jpg" color="black">
<p style="font-family: Monotype Corsiva, Times New Roman; font-style: italic; font-size: 14pt">tibetská doga - do-khyi - tibetan mastiff -

tibetská doga - do-khyi - tibetan mastiff - tibetská doga - do-khyi - tibetan mastiff - tibetská doga</p>
<div id="obsah">
<div id="hlavicka">
<img src="" width="950" height="200" border="1" align="center">

<table border="1" bordercolor="orange" width="950" height="116" cellspacing="0" cellpadding="0">
<tr width="950" height="26" align="center" valign="center">
<td colspan="2">
<marquee width="80%" behavior="alternate">Vítejte na stránkách zabývajících se tibetskou dogou!!!</marquee>
</td>
</tr>
<tr width="950" height="40" valign="center">
<td width="830" height="40" align="left">
zde bude datum a cas
</td>
<td width="150" height="40" align="right">
<a class="ostatni" href="" target=""><img src="obrazky/flagCZ.gif" width="38" height="27" border="0" alt="ČESKY"></a>&nbsp;
<a class="ostatni" href="" target=""><img src="obrazky/flagGB.gif" width="38" height="27" border="0" alt="ENGLISH"></a>&nbsp;
<a class="ostatni" href="" target=""><img src="obrazky/flagDE.gif" width="38" height="27" border="0" alt="DEUTSCH"></a>&nbsp;
</td>
</tr>
<tr width="950" height="50">
<td colspan="2">
<img src="obrazky/oddelovac.png" width="950" height="50">
</td>
</tr>
</table>
</div>

<hr class="cleaner" />

<div id="levypanel">
<div id="levypanel-obsah">
<font size="+2" style="padding-left: 20px;">MENU:</font><br>
<a class="odrazka" href="uvod.html" target="iframe">Úvod</a><br>
<a class="odrazka" href="tibetskadoga.html" target="iframe">Tibetská&nbsp;doga</a><br>
<a class="odrazka" href="standard.html" target="iframe">Standard&nbsp;TD</a><br>
<a class="odrazka" href="nasipsi.html" target="iframe">Naši&nbsp;psi</a><br>
<a class="odrazka" href="vystavy.html" target="iframe">Výstavy</a><br>
<a class="odrazka" href="fotogalerie.html" target="iframe">fotogalerie</a><br>
<a class="odrazka" href="novinky.html" target="iframe">Novinky</a><br>
<a class="odrazka" href="clanky.html" target="iframe">Články</a><br>
<a class="odrazka" href="kontakt.html" target="iframe">Kontakt</a><br>
<a class="odrazka" href="odkazy.html" target="iframe">Odkazy</a><br>
<br>
<a class="odrazka" href="" target="_blank">Návštěvní&nbsp;kniha<img src="obrazky/book.gif" width="140" height="80" border="0"

alt="NÁVŠTĚVNÍ KNIHA"></a>

<br>

<b>Poslední fotografie:</b><br>foto<br>
<p align="left" style="font-size: 12pt">Poslední aktualizace:<br>
<script language="javascript">
<!--
datum = new Date (document.lastModified);
mesic = new Array ('ledna', 'února', 'března', 'dubna', 'května', 'června', 'července', 'srpna', 'září', 'října', 'listopadu', 'prosince');
document.write (datum.getDate() + '. ' + mesic[datum.getMonth()] + ' ' + datum.getFullYear());
//-->
</script>


</div>
</div>

<div id="hlavnipanel">
<div id="hlavnipanel-obsah">
<iframe onload="vypocet(this);" allowTransparency="true" src="uvod.html" name="iframe" width="740" height="550" frameborder="0"

scrolling="no" ></iframe>
</div>
</div>

<hr class="cleaner" />

<div id="paticka">
Zde se nachází patička...
</div>

</div>
<p style="font-family: Monotype Corsiva, Times New Roman; font-style: italic; font-size:14pt">tibetská doga - do-khyi - tibetan mastiff -

tibetská doga - do-khyi - tibetan mastiff - tibetská doga - do-khyi - tibetan mastiff - tibetská doga</p>
</body>
</html>
Niky
Profil *
Tak už jsme to vyřešila. Zabila jsem obě mouchy jednou ranou, příčinou problému bylo právě to float.

Poradili jste mi správně, že musím mít u obou panelů napsáno float: left a otom ten hr cleaner pod tím. jenže já neměla ty divy dva, ale čtyři - levypanel, levypanel-obsah, hlavnipanel, hlavnipanel-obsah. Takže jsme u všech čtyř napsala float: left a už to mám v ořádku ve všech třech prohlížečů:-)
Musilda
Profil
Má to vypadat takto? http://uloz.to/860288/Screenshot2008-10-19_16-49-59.jpg
Musilda
Profil
Omlouvám se za pozdní odpověď.
Niky
Profil *
Musilda:

Ano, takováhle má být struktura. Ten problém s obtékáním už jsem vyřešila, viz odpověď nad tebou.
Jenom má teď jiný problém. V IE mi ten hlavnipanel s iframem skáče pod menu. Nevím proč. Zkoušela jsem i zmenšit šířku toho divu a iframu, a stejně to skáče pod to. ******* Explorer! V Opeře i ve Firefoxu je to správně.
Nenapadá vás pls. v čem je chyba?
Musilda
Profil
Explorer chápe width jako součet obsahu + padding + border, musíš přemístit padding a border z #levypanel do #levypanel-obsah a to samé udělat u #hlavnipanel. Potom protože máš u #obsah padding: 5px;border: 6px double black; tak se ti ty hodnoty sloučily a jsou uvnitř width, takže šíře obsahu, do kterého pak vkládáš #levypanel a #hlavnipanel je o to menší. Doporučuji http://interval.cz/clanky/implementacni-chyby-v-prohlizecich-chybne-ro zmery-boxu/ a http://www.jakpsatweb.cz/css/css-prohlizece-hacky.html

Tak jsem to upravil pro explorer, ale je to na rychlo, tak snad tam není moc chyb

#levypanel {
float: left;
width: 200px;
height:500px;
margin:0;
padding:0;
}

#levypanel-obsah {
margin:0;
border: 1px solid white;
padding: 5px;
font-family: Monotype Corsiva, Times New Roman;
font-style: italic;
font-size: 14pt;
font-weight: bold;
}

#hlavnipanel {
float:right;
margin:0;
margin-right:-14px;
padding:0;
width: 756px;
height: 498px;
}

#hlavnipanel-obsah {
margin:0;
border: 1px solid red;
height:500px;
padding: 0px 5px 0px 5px;
}
Niky
Profil *
Musilda: Mocky děkuji! Zítra to vyzkouším a uvidím.

Jinak, strány už jsem dala na webzdarma, ale nejsu hotové, zdaleka ne, ale layout je hotový, takže mi můžete stránkyzhodnotit a vytýkat mi blechy, z nichžněkterch si jsme plně vědm,a ae nevím, cos nima. Takže adresa je: www.gym4.euweb.cz
jenom vás prosím, abyste na moje stránky neodkazovali nikoho, protože zdaleka nejsou hotové.
budu ráda, když si je prohlídnete ve více prohlížečích, máte-li víc než jeden. Já je testovala v IE7, FF 3.0.3 a Opreře 9. Najdete-li nějakou chybu v nich, napište mi ls. v jakém prhlížeči se vám ta chyba objevila. MOcky děkuji:-)
Niky
Profil *
jo a fungují jen tyto odkazy: úvod, standard TD, fotogalerie, odkazy a návštěvní knihovna. navlaječky ani neklikejte, neo't přeložené ty stránky opravdu nemám:-D

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