Divy vedle sebe bez float

Dobrý den,
mám problémek potřeboval bych naskládat několik divů vedle sebe,ale nemůžu použít float: left protože mě nevím proč obsah vleze až do divu pod ním.
odkaz:http://punk.hostuju.cz/index.php?page=diskografie

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

  <meta content="text/html; charset=ISO-8859-1"

 http-equiv="content-type">

  <title></title>

  <style>

#menuINT

{

background: rgb(255,180,37);

width:115px;

border:1px solid #1646a8;

margin-right:1px;

}

#menuINT a

{

display: block;

width:115px;

padding-top:90px;

padding-bottom:5px;

text-decoration:none;

text-align:center;

color:rbg (0,0,0);

font: bold 76% "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;

}

  </style>

</head>

<body>

<div id="menuINT"><a

 title="Die For The Government - 1996" href="#">Die

For The Government - 1996 </a></div>

<div id="menuINT"><a

 title="Their system doesn't work for you - 1998" href="#">Their

system doesn't work for you - 1998 </a></div>

<div id="menuINT"><a

 title="North America Sucks!!! (split with D.B.S.) - 1998"

 href="#">North America Sucks!!! (split with D.B.S.) - 1998</a></div>

<div id="menuINT"><a title="A New Kind Of Army - 1999"

 href="#">A New Kind Of Army - 1999</a></div>

<div id="menuINT"><a title="Underground Network - 2001"

 href="#">Underground Network - 2001</a></div>

<br>

<div id="menuINT"><a

 title="Boucing Souls together with Anti-Flag" href="#">Boucing

Souls together with Anti-Flag</a></div>

<div id="menuINT"><a title="Mobilize - 2002"

 href="#">Mobilize - 2002</a></div>

<div id="menuINT"><a title="The Terror State - 2003"

 href="#">The Terror State - 2003 </a></div>

<div id="menuINT"><a title="For Blood And Empire - 2006"

 href="#">For Blood And Empire - 2006 </a></div>

<br>

</body>

</html>

//ještě jsem neměl čas se s tím moc hrát možná by nebylo od věci spíš upravit layout. nevím třeba něco nastavit display:block nebo tak.

Nahlásit jako SPAM

IP: ...–

Petr Fojtík0

Věrný člen

13. 6. 2007 #2

Layout je OK.
Jestli jsem to správně pochopil, tak chceš těch 9 bloků (které's dal do výpisu) umístit jako left/float coby obsah ve stránce hostuju.cz...diskografie
asi nějak tak:
1B 2B 3B 4B 5B
6B 7B 8B 9B
Jde to snadno,pokud bloky mají stejnou velikost a následuje za nimi čistič.
Tady je hotová stránka (akorát jsem z ní vypustil nepodstatné věci), plně funkční v IE7 a FF:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">

<head><title>punk,SKA,HC made by zajca - Diskografie</title>

<!-- base href="http://punk.hostuju.cz/" -->

<meta name="Generator" content="CMS Made Simple - Copyright (C) 2004-6 Ted Kulp. All rights reserved.">

<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">



<link rel="stylesheet" type="text/css" media="screen" 



href="http://punk.hostuju.cz/stylesheet.php?templateid=20&mediatype=screen" />

<link rel="stylesheet" type="text/css" href="http://punk.hostuju.cz/modules/Album/css/stylesheet.css" />



<base href="http://punk.hostuju.cz/">  <!-- ....to aby se nemusely stahovat obrázky -->



       <!-- STYLY (ze souboru stylesheet.css) JSOU ZDE OPRAVENÉ A VYLEPŠENÉ -->

<style>

/*------------------ menu interni BEGIN: -----------------------------*/

/*            class="menuINT" ~název třídy (místo id="menuINT") */

/*

Pokud budeme řadit plaváčky vedle sebe a budou stejně vysoké a stejně široké,

a přesáhnou-li dostupnou šířku pak automaticky vznikne víceřádková pravidelná tabulka

*/

.menuINT {

float:  left;

width:  115px;

height: 150px;

border: 1px solid #1646a8;

margin-right:  1px;

margin-bottom: 1px;

background: rgb(255,180,37);

}

.menuINT a {

height: 150px;

display: block;

position: relative;

text-align: center;

text-decoration: none;

color: rbg (0,0,0);

font: bold 76% "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;

}

.menuINT a span {

width: 100%;

position: absolute;

bottom: 0px;

left: 0px;

cursor:pointer;

}

/*----------------- menu interni END: ----------------------------------*/

.clearb { clear:both }

hr.accessibility { display:none }

</style>



</head><body>

    <div id="okno">

      <div id="obsah">

        <div id="obsah-hlavicka">

        </div>

        <div id="obsah-obsah">

          <span class="map">Mapa: 

          <a linkindex="4" href="http://punk.hostuju.cz/index.php?page=anti-flag">Anti-Flag</a>

          » <span class="lastitem">Diskografie</span></span>

          <br><br>

          <div class="h3">

             <div class="h3line"> </div>

             <span class="h3text s1"> Diskografie </span>

             <span class="h3text s0"> Diskografie </span>

          </div>



<div class="menuINT"><a href="#" title="Die For The Government - 1996">

  <span>Die For The Government - 1996</span></a></div>



<div class="menuINT"><a href="#" title="Their system doesn't work for you - 1998">

  <span>Their system doesn't work for you - 1998 </span></a></div>



<div class="menuINT"><a href="#" title="North America Sucks!!! (split with D.B.S.) - 1998">

  <span>North America Sucks!!! (split with D.B.S.) - 1998</span></a></div>



<div class="menuINT"><a href="#" title="A New Kind Of Army - 1999">

  <span>A New Kind Of Army - 1999 </span></a></div>



<div class="menuINT"><a href="#" title="Underground Network - 2001">

  <span>Underground Network - 2001 </span></a></div>



<div class="menuINT"><a href="#" title="Boucing Souls together with Anti-Flag">

  <span>Boucing Souls together with Anti-Flag </span></a></div>



<div class="menuINT"><a href="#" title="Mobilize - 2002">

  <span>Mobilize - 2002</span></a></div>



<div class="menuINT"><a href="#" title="The Terror State - 2003">

  <span>The Terror State - 2003 </span></a></div>



<div class="menuINT"><a href="#" title="For Blood And Empire - 2006">

  <span>For Blood And Empire - 2006 </span></a></div>



<div class="clearb"><hr /></div>



        </div>



        <div id="obsah-Paticka">

<p><span class="c">@ Copyright zajca <br>

Motorem webu je systém 

 <a linkindex="5" href="http://www.cmsmadesimple.org/">CMS Made Simple</a> 

ve verzi 1.0.6</span></p>

        </div>

      </div>



      <div id="menu">

         <div id="menu-vrch"></div>

         <div id="menu-obsah">

      <!-- Start Navigation -->

      <div id="sidebar">

         <div id="menuwrapper">



<ul id="primary-nav">

  <script type="text/javascript">

   for(i=1;i<17;i++)

   document.write('<li><a href="http://punk.hostuju.cz/index.php?page=home">',i,'.odkaz</a></li>')

  </script>

</ul>



<div class="clearb"></div>

         </div>

        <hr class="accessibility">

        </div>

      <!-- End Navigation -->

        </div>



        <div id="menu-spodek">

<div id="search">

<form id="m3moduleform_1" name="m3moduleform_1" method="get" action="index.php">

<div class="hidden"><input name="mact" value="Search,m3,dosearch,0" type="hidden">

                            <input name="m3returnid" value="71" type="hidden"></div>

<input name="m3searchinput" id="m3searchinput" value="Vlož text!!!" size="20" maxlength="50" 

   onfocus="if(this.value==this.defaultValue) this.value='';" 

   onblur="if(this.value=='') this.value=this.defaultValue;" type="text">

<br>

<input name="submit" value="Vyhledat!!" type="submit">

</form>

</div>

        </div>

      </div>

    </div>

</body></html>

Tak si ji zobraz a dej vědět - a taky jestli nehodláš dávat do těch bloků např.obrázky...

Nahlásit jako SPAM

IP: ...–

zajca 0

Duch

13. 6. 2007 #3

tak sem upravil funguje skvěle ,vložil jsem i obrázky sice ne přes CSS ale klasicky IMG
tisíceré díky

//testoval jsem v opreře FF a Epiphany

Nahlásit jako SPAM

IP: ...–

Petr Fojtík0

Věrný člen

16. 6. 2007 #4

Zrovna jsem zabrousil na PUNKy a všiml jsem si.
Napadlo mě několik drobností k docílení final.vzhledu, tak jsem to zkusil (a zjistil,že s Firebugem to je paráda a skoro zábava).
Pokud si už to mezitím nedal dokupy, můžeš použít tohle:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">

<head><title>punk,SKA,HC made by zajca - Diskografie</title>

<!-- base href="http://punk.hostuju.cz/" -->

<meta name="Generator" content="CMS Made Simple - Copyright (C) 2004-6 Ted Kulp. All rights reserved.">

<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">

<link rel="stylesheet" type="text/css" media="screen" 

href="http://punk.hostuju.cz/stylesheet.php?templateid=20&mediatype=screen" />

<link rel="stylesheet" type="text/css" href="http://punk.hostuju.cz/modules/Album/css/stylesheet.css" />

<base href="http://punk.hostuju.cz/">  <!-- ....to aby se nemusely stahovat obrázky -->

<style>

/* ------------------------------------------- Menu interni ---------- */

/* ODKAZ: FORMÁT & VARIANTY pro ideální vzhled                         */

/* -------------------------------------------                         */

/* [1] <a class="menuINT lt"><img /><span>řádek            </span></a> */

/* [2] <a class="menuINT"   ><img /><span>řádek,řádek      </span></a> */

/* [3] <a class="menuINT gt"><img /><span>řádek,řádek,řádek</span></a> */

/*

Vyber (dvoj)třídu odkazu podle toho kolikatiřádková je popiska pod obrázkem.

Nejčastější je dvouřádková - u té stačí zadat:  class="menuINT"

*/

a.menuINT {

float:  left;

display: block;

position: relative;

width:  124px;

height: 175px;

border: 1px solid #1646a8;

margin: 3px 2px 4px 5px;

text-align: center;

text-decoration: none;

font: bold 76% "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;

line-height: 1.2;

color:      rbg (0,0,0);

background: rgb(255,180,37);

}

a.menuINT span {

width: 99%;

display: block;

position: absolute;

bottom: 8px;

left: 0px;

cursor: pointer;

}

a.lt span {

bottom: 14px;

}

a.gt span {

bottom:  2px;

}

a.menuINT img {

border: 1px solid #1646a8;

display: block;

margin: 5px auto;

}

hr { display: block; visibility: hidden }

/*---------------------------------------------------------------------------------------*/



</style>

</head>

<body>

    <div id="okno">

      <div id="obsah">

        <div id="obsah-hlavicka">

        </div>

        <div id="obsah-obsah">

          <span class="map">Mapa: 

          <a linkindex="4" href="http://punk.hostuju.cz/index.php?page=anti-flag">Anti-Flag</a>

          » <span class="lastitem">Diskografie</span></span>

          <br><br>

          <div class="h3">

             <div class="h3line"> </div>

             <span class="h3text s1"> Diskografie </span>

             <span class="h3text s0"> Diskografie </span>

          </div>



<a class="menuINT" title="Die For The Government - 1996" href="http://punk.hostuju.cz/index.php?page=67">

 <img width="109" height="111" alt="" src="http://punk.hostuju.cz/uploads/images/die_for_goverment.jpg" />

  <span>Die For The Government - 1996</span></a>

<a class="menuINT" title="Their system doesn't work for you - 1998" href="http://punk.hostuju.cz/index.php?page=68">

 <img width="111" height="113" alt="" src="http://punk.hostuju.cz/uploads/images/their_system.jpg" />

  <span>Their system doesn't work for you - 1998 </span></a>

<a class="menuINT gt" title="North America Sucks!!! (split with D.B.S.) - 1998" href="http://punk.hostuju.cz/index.php?page=69">

 <img width="111" height="113" src="http://punk.hostuju.cz/uploads/images/north_sucks.jpg" alt="" />

  <span>North America Sucks!!! (split with D.B.S.) - 1998</span></a>

<a class="menuINT" title="A New Kind Of Army - 1999" href="http://punk.hostuju.cz/index.php?page=70">

 <img width="111" height="113" alt="" src="http://punk.hostuju.cz/uploads/images/a_new_kind.jpg" />

  <span>A New Kind Of Army - 1999 </span></a>

<a class="menuINT" title="Underground Network - 2001" href="http://punk.hostuju.cz/index.php?page=72">

 <img width="111" height="113" src="http://punk.hostuju.cz/uploads/images/underground_network.jpg" alt="" />

  <span>Underground Network - 2001 </span></a>

<a class="menuINT gt" title="Boucing Souls together with Anti-Flag" href="http://punk.hostuju.cz/index.php?page=73"> 

 <img width="111" height="113" alt="" src="http://punk.hostuju.cz/uploads/images/BS_split.jpg" />

  <span>Boucing Souls together with Anti-Flag </span></a>

<a class="menuINT lt" title="Mobilize - 2002" href="http://punk.hostuju.cz/index.php?page=74">

 <img width="111" height="113" alt="" src="http://punk.hostuju.cz/uploads/images/Mobilize.jpg" />

  <span>Mobilize - 2002</span></a>

<a class="menuINT" title="The Terror State - 2003" href="http://punk.hostuju.cz/index.php?page=75">

 <img width="111" height="111" src="http://punk.hostuju.cz/uploads/images/terror_state.jpg" alt="" />

  <span>The Terror State - 2003 </span></a>

<a class="menuINT" title="For Blood And Empire - 2006" href="http://punk.hostuju.cz/index.php?page=76">

 <img width="111" height="111" alt="" src="http://punk.hostuju.cz/uploads/images/For_Blood_And_Empire.jpg" />

  <span>For Blood And Empire - 2006 </span></a>



<div class="clearb"><hr /></div>

        </div>

        <div id="obsah-Paticka">

<p><span class="c">@ Copyright zajca <br>

Motorem webu je systém 

 <a linkindex="5" href="http://www.cmsmadesimple.org/">CMS Made Simple</a> 

ve verzi 1.0.6</span></p>

        </div>

      </div>

    </div>

</body></html>

[podtrzene]2výhrady:[/podtrzene]
-odladěno pouze v IE7 a FF2
-pokud nemá zlobit funkce prohlížeče ZMĚNIT VELIKOST PÍSMA (text na kartě přeteče do obrázku),
pak je třeba jako jednotky rozměrů použít em
zdravím Petr

Nahlásit jako SPAM

IP: ...–

zajca 0

Duch

17. 6. 2007 #5

tak sem to upravil,předělal sem velikosti textu do em,ale nějak sa ně hádá Opera první řádek toho textu odsazuje do prava a nevím proč. přitom tam nikde není odsazení z leva nebo tak něco. a žádný jiný prohlížeč nic takového nedělá.

test:FF2.0.0.4, konqueror3.5.6, Opera 9.21, GNOME Web Browser 2.18.1

Nahlásit jako SPAM

IP: ...–

Petr Fojtík0

Věrný člen

18. 6. 2007 #6

No,stejně jsem si devítku Opery chtěl nainstalovat, tak si opráším vzpomínky na sedmičku a zjistím co je nového - vím že má kromě WEB developeru spoustu dalších nástroje na testing+design ( ovšem Firebug je bez konkurence !!!). Snad na to přijdu, ale chvíli to potrvá.

Nahlásit jako SPAM

IP: ...–

Petr Fojtík0

Věrný člen

18. 6. 2007 #7

Už vím, co se podělalo. Ty popisy pod obrázky nejsou vycentrované, ale vypadají jako klasické odstavce s hodně odsazeným prvním řádkem.
Ve stylech máš odstavce definované jako:
p { font-weight: bold; font-size: 0.9em; margin-top: 0px; margin-bottom: 2px; text-indent: 10%; }
Bohužel vlastnosti písma jsou dědičné a ty jsi uzavřel kartinki do <p> tagu, takže změní odsazení i velikost písma v popisech.
(Všimni si, že se to děje i u IE a FF, akorát - nevím proč - to odsazení i zmenšení písma není tak drastické,
ale poznáš to na první pohled: 2.popis se NEVEŠEL na 2 řádky => horní řádek navíc dělá "hrb")

VYZKOUŠENÍ:
1. Pokud si spustíš (lokálně = např. C:/disko.html) ten soubor z předvčerejška v Opeře, tak by měl být OK (nemám tam <P>čko )
2a. Nebo dej (na web) na konec stylů:
p{ text-indent: 0; font-size: 100% }
2b. nebo tohle:
a.menuINT span{ text-indent: 0; font-size: 12.2px } [ Stránka(písmo) : 16px; <span> : 76% ~ 12.1666px ]

TRVALÉ (NEZÁVADNÉ) ŘEŠENÍ:
dej pryč ty tagy <P> (nebo je nahraď DIVy ...když už musíš)

Nahlásit jako SPAM

IP: ...–

zajca 0

Duch

18. 6. 2007 #8

tagů <p> se snažím zbavit problém je,že CMS:MS používá WYSIWYG editor a ten mě tam pořád rve ten debilní tag,ale já to nějak pořeším až sa vrátím z výletu a pátek.

Nahlásit jako SPAM

IP: ...–

Petr Fojtík0

Věrný člen

21. 6. 2007 #9

# Rozchodil jsem menu v IE6.
[drobné úpravy stylů; HTML zůstává beze změn - až na vložení javascriptu]
[ten může být v podstatě kdekoli na stránce - spustí se až po úplném načtení stránky]

# Kód opět samostatně(doma) spustitelná stránka; jinak všechny změny oproti stávající verzi jsou tučně.
/*======== Takto vyznačena místa,která můžeš nastavit podle svého ======*/

# Lepší by bylo JS dát do samostat.souboru (půjde to vůbec?)
a do stránky umístit jen odkaz <script src="kvuliIE6.js" type="text/javascript"></script>
/ vlastně tolik bytů nespolyká (!může růst!) - ale při opakovaném surfování....prodleva=nulová /

# K proklestění propletence css menu jsem se už (ještě)nedostal, třebas budou další N+1.úpravy
/ !designu! - co se týká funkčnosti (v běžných browserech) doufám že jsem nic neopomněl /
Doufám že ti v tom horku nechyběl >pitný< režim čau petr

<?xml version="1.0" encoding="utf-8" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs"><head><title>punk,SKA,HC made by zajca - Diskografie</title>

<!-- base href="http://punk.hostuju.cz/" -->

<meta name="Generator" content="CMS Made Simple - Copyright (C) 2004-6 Ted Kulp. All rights reserved.">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<link rel="stylesheet" type="text/css" media="screen" href="http://punk.hostuju.cz/stylesheet.php?templateid=20&mediatype=screen" />

<link rel="stylesheet" type="text/css" href="http://punk.hostuju.cz/modules/Album/css/stylesheet.css" />

<style>

/* ------------------------------------------- Menu interni ---------- */

/* [1] <a class="menuINT lt"><img /><span>řádek            </span></a> */

/* [2] <a class="menuINT"   ><img /><span>řádek,řádek      </span></a> */

/* [3] <a class="menuINT gt"><img /><span>řádek,řádek,řádek</span></a> */



a.menuINT:hover { text-decoration: none }  /*=========================== kvuli podtrhavani odkazu v IE6 */



a.menuINT span { /*=================================================== Jen pokud použiješ <p> */

text-indent: 0;

font-size: 12.2px;

padding:0; margin:0;

}

/*----------------- menu interni END: ----------------------------------*/



/* PRVKY-MENU */

dfn {

display:none;}



#menuwrapper {

   width: 100%;

   font-weight: bold;

  margin: 1em 0 1em 0;

}



#primary-nav, #primary-nav ul {

   list-style: none;

   margin: 0px;

   padding: 0px;

   width: 100%;

   margin-left: -1px;

}

#primary-nav ul {

   position: absolute;

   top: 0;

   left: 100%;

   display: none;

}

#primary-nav li {

   margin-bottom: -0px; /*======== puvodní -1px blbne ve FF (nejspodnější odkaz hrubší podtržení) */

   position: relative;

}

/* Styling the basic apperance of the menu elements */

#primary-nav a {

   border: 0px ;

   display: block;

   margin: 0px;

   padding: 4px 2px;

   color: rgb(255,180,37);

   text-decoration: none;

   background: transparent;

  /* height: 0.8em;  ============================== (nastavuje se v javascriptu!) seřídit - pro IE6   */

   min-height: 1em; /* Fixes IE7 bug*/ /* =================================== seřídit - pro ostatní  */

}

#primary-nav li, #primary-nav li.menuparent {

   background-color: rgb(255,255,255);

   color: rgb(0,0,0);

   /* height: 0.8em;  ============================== (nastavuje se v javascriptu!) seřídit - pro IE6 */

   min-height: 1em; /* Fixes IE7 bug*/ /* =================================== seřídit - pro ostatní  */

}

/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */

#primary-nav li.menuactive {

    border-left: 0.5em solid rgb(0,0,0);

}

#primary-nav li.menuactive a { color: rgb(0,0,0) }



/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */

#primary-nav li.menuparent,

#primary-nav li.menuparent:hover,

#primary-nav li.menuparent.hvr,

#primary-nav li.menuparenth {

   color: rgb(0,0,0);

}

/* Styling the apperance of menu items on hover */

#primary-nav li:hover,

#primary-nav li.hvr {

   background-color: rgb(255,255,255);

   color: rgb(0,0,0);

   border-left: 0.5em solid rgb(255,180,37);

   border-bottom: 0.12em solid rgb(255,180,37);

}

#primary-nav li.hvr {margin-top: -2px}    /* ========================== seřídit - pro IE6 */



/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */

#primary-nav ul,

#primary-nav li:hover ul,

#primary-nav li:hover ul ul,

#primary-nav li.hvr ul,

#primary-nav li.hvr ul ul { display: none }



#primary-nav li:hover ul,

#primary-nav ul li:hover ul,

#primary-nav ul ul li:hover ul,

#primary-nav li.hvr ul,

#primary-nav ul li.hvr ul,

#primary-nav ul ul li.hvr ul { display: block }



hr.accessibility { display:none }

/* KONEC PRVKY-MENU */

</style>

</head>

<body>

<!-- ZACATEK - FREEHOSTING REKLAMA LISTA --><!-- KONEC - FREEHOSTING REKLAMA LISTA -->

<script language="JavaScript">

JenIE6 = /MSIE (5|6)/.test(navigator.userAgent);    /* TRUE ~ IE5 or IE6  */

if(JenIE6)window.onload=function(){ findLI(document.getElementById("primary-nav")) };  /* =spustit jen v IE6 */



function findLI(n){

for(var m=n.firstChild;m!=null;m=m.nextSibling)

if (m.nodeType==1){

 if (m.nodeName=="LI") {

   if (JenIE6) m.style.height="0.8em";  /* ============================================ seřídit - pro IE6 */

   if (JenIE6) m.style.marginTop="-0.15em";  /*  ====================================== seřídit - pro IE6 */

   m.onmouseover=function(){this.className+=" hvr"};

   m.onmouseout=function(){this.className=this.className.replace(" hvr", "")}

   }

 findLI(m) }}

</script>

    <div id="okno">

      <div id="obsah">

        <div id="obsah-hlavicka">

        </div>

        <div id="obsah-obsah">

          <span class="map">Mapa: <a set="yes" linkindex="4" href="http://punk.hostuju.cz/index.php?page=anti-flag">Anti-Flag</a>

           » <span class="lastitem">Diskografie</span></span>

          <br><br>

          <div class="h3">

            <div class="h3line">  

            </div>

            <span class="h3text s1"> Diskografie             </span>

            <span class="h3text s0"> Diskografie

            </span>

          </div>

<p>

          <a class="menuINT" title="Die For The Government - 1996" href="http://punk.hostuju.cz/index.php?page=67">

		   <img width="109" height="111" alt="" src="http://punk.hostuju.cz/uploads/images/die_for_goverment.jpg" />

		    <span>Die For The Government - 1996</span></a>

		  <a class="menuINT" title="Their system doesn't work for you - 1998" href="http://punk.hostuju.cz/index.php?page=68">

		   <img width="111" height="113" alt="" src="http://punk.hostuju.cz/uploads/images/their_system.jpg" />

		    <span>Their system doesn't work for you - 1998 </span></a>

		  <a class="menuINT gt" title="North America Sucks!!! (split with D.B.S.) - 1998" href="http://punk.hostuju.cz/index.php?page=69">

		   <img width="111" height="113" src="http://punk.hostuju.cz/uploads/images/north_sucks.jpg" alt="" />

		    <span>North America Sucks!!! (split with D.B.S.) - 1998</span></a>

		  <a class="menuINT" title="A New Kind Of Army - 1999" href="http://punk.hostuju.cz/index.php?page=70">

		   <img width="111" height="113" alt="" src="http://punk.hostuju.cz/uploads/images/a_new_kind.jpg" />

		    <span>A New Kind Of Army - 1999 </span></a>

		  <a class="menuINT" title="Underground Network - 2001" href="http://punk.hostuju.cz/index.php?page=72">

		   <img width="111" height="113" src="http://punk.hostuju.cz/uploads/images/underground_network.jpg" alt="" />

		    <span>Underground Network - 2001 </span></a>

		  <a class="menuINT gt" title="Boucing Souls together with Anti-Flag" href="http://punk.hostuju.cz/index.php?page=73">

		   <img width="111" height="113" alt="" src="http://punk.hostuju.cz/uploads/images/BS_split.jpg" />

		    <span>Boucing Souls together with Anti-Flag </span></a>

		  <a class="menuINT lt" title="Mobilize - 2002" href="http://punk.hostuju.cz/index.php?page=74">

		   <img width="111" height="113" alt="" src="http://punk.hostuju.cz/uploads/images/Mobilize.jpg" />

		    <span>Mobilize - 2002</span></a>

		  <a class="menuINT" title="The Terror State - 2003" href="http://punk.hostuju.cz/index.php?page=75">

		   <img width="111" height="111" src="http://punk.hostuju.cz/uploads/images/terror_state.jpg" alt="" />

		    <span>The Terror State - 2003 </span></a>

		  <a class="menuINT" title="For Blood And Empire - 2006" href="http://punk.hostuju.cz/index.php?page=76">

		   <img width="111" height="111" alt="" src="http://punk.hostuju.cz/uploads/images/For_Blood_And_Empire.jpg" />

		    <span>For Blood And Empire - 2006 </span></a>

     <div class="clearb"><hr></div>

</p>

        </div>

<div id="obsah-Paticka">

<p><span class="c">© Copyright zajca <br>

Motorem webu je systém <a linkindex="14" href="http://www.cmsmadesimple.org/">CMS Made Simple</a> ve verzi 1.0.6</span></p>

        </div>

      </div>

      <div id="menu">

        <div id="menu-vrch">

        </div>

        <div id="menu-obsah">

      <!-- Start Navigation -->

      <div id="sidebar">

<div id="menuwrapper">

<ul id="primary-nav">

<li>

 <a set="yes" linkindex="15" href="http://punk.hostuju.cz/index.php?page=home" accesskey="1" title="Home Page, shortcut key=1"><dfn>1: </dfn>Novinky</a>

</li>

<li class="menuactive menuparent">

 <a linkindex="16" class="menuactive menuparent" href="http://punk.hostuju.cz/index.php?page=anti-flag"><dfn>2: </dfn>Anti-Flag</a>

	<ul><li class="menuactive menuparent">

	 <a linkindex="17" class="menuactive menuparent" href="http://punk.hostuju.cz/index.php?page=diskografie"><dfn>2.1: </dfn>Diskografie</a>

	</li></ul>

</li>

<li class="menuparent">

 <a linkindex="18" class="menuparent" href="http://punk.hostuju.cz/index.php?page=catch-22"><dfn>3: </dfn>Catch 22</a>

	<ul><li class="menuparent">

	 <a linkindex="19" class="menuparent" href="http://punk.hostuju.cz/index.php?page=Diskografie-Catch-22" title="Diskografie"><dfn>3.1: </dfn>Diskografie</a>

	</li></ul>

</li>

<li>

 <a linkindex="20" href="http://punk.hostuju.cz/index.php?page=f-p-g"><dfn>4: </dfn>F.P.G.</a>

</li>

<li class="menuparent">

 <a linkindex="21" class="menuparent" href="http://punk.hostuju.cz/index.php?page=horkyze-slize"><dfn>5: </dfn>Horkýže Slíže</a>

	<ul><li class="menuparent">

	 <a linkindex="22" class="menuparent" href="http://punk.hostuju.cz/index.php?page=Diskografie-Horkyze-Slize" title="Diskografie Horkýže Slíže"><dfn>5.1: </dfn>Diskografie</a>

	</li></ul>

</li>

<li>

 <a linkindex="23" href="http://punk.hostuju.cz/index.php?page=ine-kafe"><dfn>6: </dfn>Iné Kafe</a>

</li>

<li>

 <a linkindex="24" href="http://punk.hostuju.cz/index.php?page=mxpx"><dfn>7: </dfn>MxPx</a>

</li>

<li>

 <a linkindex="25" href="http://punk.hostuju.cz/index.php?page=misfits"><dfn>8: </dfn>Misfits</a>

</li>

<li>

 <a linkindex="26" href="http://punk.hostuju.cz/index.php?page=nofx"><dfn>9: </dfn>NOFX</a>

</li>

<li>

 <a linkindex="27" href="http://punk.hostuju.cz/index.php?page=pennywise"><dfn>10: </dfn>Pennywise</a>

</li>

<li>

 <a linkindex="28" href="http://punk.hostuju.cz/index.php?page=rancid"><dfn>11: </dfn>RANCID</a>

</li>

<li>

 <a linkindex="29" href="http://punk.hostuju.cz/index.php?page=slobodna-europa"><dfn>12: </dfn>Slobodná Európa</a>

</li>

<li>

 <a linkindex="30" href="http://punk.hostuju.cz/index.php?page=zona-a"><dfn>13: </dfn>Zóna A</a>

</li>

<li>

 <a linkindex="31" href="http://punk.hostuju.cz/index.php?page=zvlastny-skola"><dfn>14: </dfn>Zvlášťňý Škola</a>

</li>

<li>

 <a linkindex="32" href="http://punk.hostuju.cz/index.php?page=kniha-navstev"><dfn>15: </dfn>Kniha Návštěv</a>

</li>

<li class="menuparent">

 <a linkindex="33" class="menuparent" href="http://punk.hostuju.cz/index.php?page=fotoalba"><dfn>16: </dfn>Fotoalba</a>

	<ul><li class="menuparent">

	 <a  class="menuparent" linkindex="34" href="http://punk.hostuju.cz/index.php?page=slobodka-uh"><dfn>16.1: </dfn>Slobodná Európa Uherské Hradiště</a>

	</li></ul>

</li>

</ul>

<div class="clearb"></div>

</div>

      <hr class="accessibility">

      </div>

      <!-- End Navigation -->

        </div>

        <div id="menu-spodek">

		<div id="search">

		<form id="m3moduleform_1" name="m3moduleform_1" method="get" action="index.php">

		<div class="hidden"><input name="mact" value="Search,m3,dosearch,0" type="hidden">

                            <input name="m3returnid" value="71" type="hidden"></div>

		<input name="m3searchinput" id="m3searchinput" value="Vlož text!!!" size="20" maxlength="50"

		   onfocus="if(this.value==this.defaultValue) this.value='';"

		   onblur="if(this.value=='') this.value=this.defaultValue;" type="text">

		<br>

		<input name="submit" value="Vyhledat!!" type="submit">

		</form>

		</div>

		        </div>

		      </div>

		    </div>

</body>

</html>

Nahlásit jako SPAM

IP: ...–

zajca 0

Duch

23. 6. 2007 #10

tak sem opravil ale ten javascript vyvolává nějakou chybu



string(156) "Smarty error: [in template:20 line 21]: syntax error: unrecognized tag: findLI(document.getElementById("primary-nav")) (Smarty_Compiler.class.php, line 439)" string(111) "Smarty error: [in template:20 line 21]: syntax error: unrecognized tag '' (Smarty_Compiler.class.php, line 583)" string(344) "Smarty error: [in template:20 line 23]: syntax error: unrecognized tag: for(var m=n.firstChild;m!=null;m=m.nextSibling) if (m.nodeType==1){ if (m.nodeName=="LI") { if (JenIE6) m.style.height="0.8em"; if (JenIE6) m.style.marginTop="-0.15em"; m.onmouseover=function(){this.className+=" hvr" (Smarty_Compiler.class.php, line 439)" string(111) "Smarty error: [in template:20 line 23]: syntax error: unrecognized tag '' (Smarty_Compiler.class.php, line 583)" string(159) "Smarty error: [in template:20 line 29]: syntax error: unrecognized tag: this.className=this.className.replace(" hvr", "") (Smarty_Compiler.class.php, line 439)" string(111) "Smarty error: [in template:20 line 29]: syntax error: unrecognized tag '' (Smarty_Compiler.class.php, line 583)"

já javascriptu moc nechápu tek nevím

Nahlásit jako SPAM

IP: ...–

Petr Fojtík0

Věrný člen

23. 6. 2007 #11

Seděl jsem nad nad tím dva dny a mám ještě první funkční, ale asi o 25 řádků(skriptu) delší verzi, velice neohrabanou a
navíc v IE6 s odlišným vzhledem (s. zobrazuje puntíkovou odrážku místo obdélníčku) ....dodatečně se tomu musím smát,
ale několikrát mi do smíchu vůbec nebylo, stránka se (např.kvůli jedné chybějící "}" v JS /nebo CSS/) zbláznila a já chybu hledal jinde.
Ono to zkrátka chvíli trvá než se člověk zorientuje v neznámých vodách, takže teď už vím že:
1.Bez JavaScriptu se rozbalovací seznamové víceúrovňové menu v IE6 nedá zobrazit -> důvod:
- v CSS je nutná podpora LI:hover (a IE6 umí hover jen u odkazů: A:hover)
[zkusil jsem sice LI nahradit převlečeným A{display:list-item} za položku seznamu (to šlape i v IE6),ale do <A> vložený <UL> se (mi) nerozbaloval]
- JS umí reagovat na myš nad prvkem <LI> a přiřadit/odebrat mu třídu .hvr (funguje jako náhrada :hover)
A musí se doplnit do CSS stylů,kde se LI:hover vyskytuje - původní styly nepřepisovat (ponechat pro normální prohlížeče)
2.Pokud menu v IE6 vykazuje BUGy (nebo odlišný vzhled díky odlišnému box-modelu), tak se JS může pokusit doplněním nebo přepsáním určitých
vlastností o nápravu ( něco by šlo taky i podm.komentářem<!--[if IEšest]> )
4.Idealní je mít menu bez bugů...pak se naskýtá velmi jednoduché řešení (netřeba se trápit s úpravami stylů; to udělá při načtení stránky skript):
-použít (pro IE) <style>body{behavior: url(csshover.htc) }</style>
(soubor .htc se skriptem a jeho použití viz.http://www.xs4all.nl/~peterned/csshover.html)
9.Je vhodné myslet i na ty, kdo mají vypnutý JS (...ale to bych teď neřešil)

Tohle je vše podstatné v kostce - se všemi důsledky.
Ale pokud nechceš, tak se tím vůbec nemusíš trápit, protože:
- ten skript je fungující (vždy si to ověřím tak že s fóra zkopčím text do html souboru a spustím)
- vůbec tam nedávej nějaké <!--[if IEšest]> (....protože totéž dělá JS než začne)

Kde je chyba? Bohužel neznám CMS a nevyznám se ani v PHP - v tom ti neporadím.
Ale: z toho chybového hlášení a z výpisu source stránky:

 <!-- KONEC - FREEHOSTING REKLAMA LISTA -->

  <script language="JavaScript">

JenIE6 = /MSIE (5|6)/.test(navigator.userAgent);

if(JenIE6)window.onload=function(); 



function findLI(n);

   m.onmouseout=function()   }

 findLI(m) }}

</script>

    <div id="okno">

kde:
-chybí všechny "{" znaky
-navíc to co je za { zavorkou pokládá za jmeno TAGu např. {findLI pokládá za <findLI
je jasné ,že kód je v pořádku jen do první { závorky:
Zkus:
1. ho vložit do HTML komentáře - (tohle je bez /*komentářů*/ a bez nadbytečných mezer)(a funguje):

<script language="JavaScript">

<!--

JenIE6=/MSIE (5|6)/.test(navigator.userAgent);   

if(JenIE6)window.onload=function(){findLI(document.getElementById("primary-nav"))};

function findLI(n){for(var m=n.firstChild;m!=null;m=m.nextSibling)

if (m.nodeType==1){if (m.nodeName=="LI"){if(JenIE6) m.style.height="0.8em";

if (JenIE6) m.style.marginTop="-0.15em";

m.onmouseover=function(){this.className+=" hvr"};

m.onmouseout=function(){this.className=this.className.replace(" hvr","")}}findLI(m)}}

-->

</script>

2. Někde máš chybu v css protože menu ve Firefoxu nefunguje; doufám že to nemá vliv na JS - používají stejné symboly /* */ { }
(tomuhle sám nevěřím,blbost)
....uvidíme

Nahlásit jako SPAM

IP: ...–

Petr Fojtík0

Věrný člen

23. 6. 2007 #12

Omlouvám se ti za ty CSS styly, ve kterých je chyba, ale moje!!!
(než jsem ti to odeslal, tak jsem je trochu "česal" a jak jsem dělal z :hover .hvr, tak jsem ve 4 případech na tu dvojtečku zapomněl).
Opravil jsem to přímo v příspěvku (z 21.6.), zkrátka všude patří .hvr
FF a spol jsou nazpět.
Tož sa nehnevaj

Nahlásit jako SPAM

IP: ...–

zajca 0

Duch

24. 6. 2007 #13

ne v pohodě nezlobím sa bez tebe bych sa tak daleko asi nedostal.
Díky moc

btw:neznám teď tu funkčnost v IE6,ale ve FF je to OK a Opeře a Konqueroru taky.

Nahlásit jako SPAM

IP: ...–

Petr Fojtík0

Věrný člen

25. 6. 2007 #14

Korektury pro IE6 zhruba kompletní:
(1) Text s javaskriptem se musí vložit mezi special.tagy ,které přinutí šablonovací systém ignorovat {} v JS:

{literal}

<script language="JavaScript">

JenIE6=/MSIE (5|6)/.test(navigator.userAgent);

if("JenIE6")window.onload=function(){findLI(document.getElementById("primary-nav"))};

function findLI(n){for(var m=n.firstChild;m!=null;m=m.nextSibling)

if (m.nodeType==1){if (m.nodeName=="LI"){if(JenIE6) m.style.height="0.8em";

if (JenIE6) m.style.marginTop="-0.15em";

m.onmouseover=function(){this.className+=" hvr"};

m.onmouseout=function(){this.className=this.className.replace(" hvr","")}}findLI(m)}}

</script>

{/literal}

ZDROJe:
http://diskuse.jakpsatweb.cz/index.php?action=vthread&forum=9&topic=52951
http://wiki.cmsmadesimple.org/index.php/FAQ/Javascript_and_Smarty
A pro případ že bys chtěl (celkem logicky-ale zrazuji tě) navíc použít <!--[if IE]> nebo <!--[if IE6]>,
tak viz http://forum.cmsmadesimple.org/index.php/topic,12026.0.html(zároveň tam píše, že úspěšně používá
samostatný soubor s JS, který má uploadnutý někde ve složce uploads ....takže to jde a osobně fandím tomuhle
způsobu)
(2) Hlavička (tedy pokud ji nechceš předělávat na jiný vzhled) po této úpravě vypadá stejně ve všech prohlížečích

  <div id="obsah">

        <div id="obsah-hlavicka">

        </div>

        <div id="obsah-obsah" >

          <span class="map">Mapa: <a set="yes" linkindex="4" href="http://punk.hostuju.cz/index.php?page=anti-flag">Anti-Flag</a>

           » <span class="lastitem">Diskografie</span></span>

          <br><br>

        <div style="width:100%">

          <div class="h3">

            <div class="h3line">

            </div>

            <span class="h3text s1"> Diskografie             </span>

            <span class="h3text s0"> Diskografie

            </span>

          </div>

        </div>

Kdyby to nešlo (?šablona?) tak mám ještě způsob bez úprav HTML (pouze změny stylů). petr

Nahlásit jako SPAM

IP: ...–

Petr Fojtík0

Věrný člen

6. 7. 2007 #15

Náhodou jsem si otevřel PUNKy a ejhle: JScript jede => v IE6 je nadpis i menu v pořádku, ale v ostatnich prohlížečích NESMÍ být aktivní ....a on je.
Byl jsem zvědav kde je "pejsek" tentokrát (původně byl ten samý skript v HEAD a v FF,IE7,Opeře se choval slušně =nespouštěl se)
a mám to (opět je zakopaný v mém textu, tak sorry...) :
Odstraň uvozovky z testovacího výrazu - já jsem je tam dal v době když jsem zjišťoval co by "napáchal" JS kdyby se spustil nejen v IE6.
[Řetězec coby testovaná podmínka <=> test je VŽDY úspěšný]
Správně:
if(JenIE6)window.onload=function(){.......
----------------------------------------------------
Můžu se zeptat - běžíš na Linuxu ??? ( pak vlastně asi není způsob jak odlaďovat stránky na IE6/7. Nebo jo? ) petr

Nahlásit jako SPAM

IP: ...–

← Zpět na seznam vláken ← Zpět do Fóra