Divy vedle sebe bez float – CSS – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu

Divy vedle sebe bez float – CSS – Fórum – Programujte.comDivy vedle sebe bez float – CSS – Fórum – Programujte.com

 

zajca0
Duch
11. 6. 2007   #1
-
0
-

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
-
0
-

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: ...–
zajca0
Duch
13. 6. 2007   #3
-
0
-

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
-
0
-

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: ...–
zajca0
Duch
17. 6. 2007   #5
-
0
-

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
-
0
-

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
-
0
-

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: ...–
zajca0
Duch
18. 6. 2007   #8
-
0
-

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
-
0
-

# 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: ...–
zajca0
Duch
23. 6. 2007   #10
-
0
-

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
-
0
-

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
-
0
-

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: ...–
zajca0
Duch
24. 6. 2007   #13
-
0
-

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
-
0
-

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
-
0
-

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: ...–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 1 host

Podobná vlákna

Tři divy vedle sebe — založil Chiquita_CZ

Fotky vedle sebe — založil Onsi

[CSS] 4x Div vedle sebe — založil Martin M.

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032024 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý