Curve corners problém v IE – JavaScript, AJAX, jQuery – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu

Curve corners problém v IE – JavaScript, AJAX, jQuery – Fórum – Programujte.comCurve corners problém v IE – JavaScript, AJAX, jQuery – Fórum – Programujte.com

 

Figa0
Super člen
2. 12. 2007   #1
-
0
-

Ahoj, snažím se aplikovat zaoblené rohy pomocí této metody
http://www.curvycorners.net/usage.php Bohužel hned ze začátku jsem narazil na
problém.Problém je ten, že když nastavím zaoblení pouze
na jednu stranu borderu, tak se zobrazí jen oblouček a zbytek borderu
zmizí.To se děje v Opeře, FF i IE.Další problém je ten že mi to nefunguje v IE zaobloné rohy se neobjeví a zmizí border.
IE vypíše chybu na řádku 661 znak 15 v tomto scriptu www.fifland.wz.cz/rounded-corners.inc.js

index



<?xml version="1.0" encoding="ISO-8859-2" ?>

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

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

<script type="text/javascript" src="rounded-corners.inc.js"></script>
<link rel="stylesheet" type="text/css" href="css.css" media="screen" />

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-2" />
<meta name="generator" content="PSPad" />

<script type="text/JavaScript">

window.onload = function()
{
settings = {
tl: { radius: 10 },
tr: { radius: 10 },
bl: { radius: 10 },
br: { radius: 10 },
antiAlias: true,
autoPad: false
}

var divObj = document.getElementById("all");

var cornersObj = new curvyCorners(settings, divObj);
cornersObj.applyCornersToAll();
}

</script>

<title>OSDOS.net</title>

</head>
<body>
<img id="c" src="c.jpg" alt="C:">
<img id="disketa" src="disketa.jpg" alt="OSDOS">
<img id="pc" src="pc.jpg" alt="IBM PC">
<div id="all">
<div id="hlavni">



<div id="hlavicka">
<img src="hlavicka.jpg" alt="Home"/>
</div>

<div id="obsah">
<div id="menu2">
<div id="inmenu">
<div id="ininmenu">
</div>
<img src="dir.jpg" alt="UP-DIR"/>
</div>
</div>
<!--<div id="menu">
<br>
<ul>
<li><a href="recenze.html">Recenze</a></li>
<li><a href="howtodos.html">Jak na DOS</a></li>
<li><a href="download.html">Download</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
<li><a href="forum.html">Forum</a></li>
<li><a href="odkazy.html">Odkazy</a></li>
</ul>
</div>-->



<div id="content">
<!--<div id="nadpis">Novinky</div>
<div id="novinky">
<div id="ndatum">
25.11.2007
</div>
<div id="ntext">
Spuštěn nový design, napište nám jak se vám líbí!!!
</div>
<div id="nautor">
Figa
</div>
<hr>
</div>

<div id="novinky">
<div id="ndatum">
1.1.2001
</div>
<div id="ntext">
Nechci zakládat nové téma a proto se zeptám zde.Můžu použít jasan hasan<br>
z tohoto tutorialu http://www.grafika.cz/art/vektory/p-dysk.html uz tam bude<br>
svůj web?Snažil jsem se kontaktovat autora, ale neodpovídá.Co meles?
</div>
<div id="nautor">
Dagon
</div>
<hr>
</div> -->
</div>
</div>

<div id="paticka">

<ul>
<li>Copyright © 2007 |</li>
<li>CSS lay-out by <a href="mailto:www.f@seznam.cz">Figa</a></li>
</ul>

</div>

</div>
</div>
</html>


CSS


/* resety */
* {
border: 0;
margin: 0;
padding: 0;
text-indent: 0;
}

h1, h2, h3 {
margin: 0;
padding: 0;
}

a img { border: 0; }

ul, ol { list-style: none; }

table, td, th { border: 0; font-size: 1em; font-weight: normal; }
/* end resety */


/* lay-out */
body {
background: white;
font: normal normal 0.7em tahoma, arial, verdana, sans-serif, helvetica;
letter-spacing: .1em;
line-height: 1.7;
margin: 0;
padding: 0;
text-align: center; /* vycentrovani hlavniho divu pro IE */
}

#all {
background: white;
border: 2px solid black;
height: auto;
margin: 50px auto 0 auto;
padding-bottom: 6px;
padding-top: 6px; /* odsazeni divu #hlavni zvrchu a zespodu - potřeba definovat prave zde */
text-align: left;
width: 700px;
}

#hlavni {
border: 1px solid black;
margin: 0 6px 0 6px;
width: auto;
height: auto;
_height: 680px;
}

#disketa {
position: absolute;
left: 115px;
top: 70px;
_left: 115px;
_top: 65px;
}

#hlavicka {
width: auto;
height: 140px;
background: white;
}

#obsah {
width: auto;
min-height: 490px;
margin: 5px 15px 0 0px;
padding-bottom: 5px;
}

#menu {
float: left;
width: 140px;
height: auto;
_height: 490px;
min-height: 490px;
margin-bottom: 5px; /* odsazeni od paticky pro IE */
font-size: 1.4em;
}

#c {
position: absolute;
left: 200px;
top: 282px;
}

#menu2 {
float: left;
width: 135px;
height: 300px;
border-top: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
padding-top: 6px;
padding-bottom: 6px;
margin-top: 30px;
}

#inmenu {
float: left;
width: 128px;
height: 298px;
border-top: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
}

#ininmenu {
float: left;
width: 128px;
height: 278px;
border-bottom: 1px solid black;
}

#content {
}

#nadpis {
font-weight: bold;
font-size: 20px;
font-style: italic;
}

#novinky {
width: 500px;
height: auto;
float: right;
margin-top: 10px;
}

#ndatum {
font-size: 11px;
height: 25px;
width: 100px;
margin-top: 5px;
margin-right: 10px;
float: right;
}

#ntext {
font-size: 12px;
margin-left: 15px;
clear: right;
}

#nautor {
width: 100px;
height: 20px;
float: right;
font-size: 12px;
}

#pc {
position: absolute;
left: 700px;
top: 700px;
}

#paticka {
clear: both;
width: auto;
height: auto;
padding: 3px 0 3px 0;
border-top: 1px solid black;
text-align: center;
}
/* end lay-out */


/* menu a paticka */
#menu ul { margin-right: 25px; } /* neprimo urci sirku seznamu */

#menu ul li { display: inline; } /* osetreni IE */

#menu ul li a {
display: block;
color: black;
width: 105px;
padding: 2px 0 2px 5px;
border-bottom: 1px solid black;
}

#menu ul li a:hover { color: white; }

#paticka ul li {
display: inline; /* radkovy seznam */
font-size: 0.9em;
}

/* end menu a paticka*/



/* nadpisy */

/* end nadpisy */



/* styl textu a odkazu */
a {
text-decoration: none;
padding: 1px;
color: black;
}

a:hover {
background: black;
color: white;
}

p {
text-align: justify;
padding: 0.5em 0 0.5em 0;
text-indent: 1em;
}

hr {
height: 1px;
color: black;
background-color: black;
border: 0px solid black;
clear: both;
margin-top: 10px;
}
/* end styl textu a odkazu */


Script v příloze.
Stránky zde www.fifland.wz.cz
Předem děkuji za odpovědi.

Nahlásit jako SPAM
IP: 87.249.133.–
Petroff0
Věrný člen
2. 12. 2007   #2
-
0
-

Tu chybu ve skriptu způsobuje tento řádek:

 pixel.style.backgroundColor = colour;
Když jsem tam dal "natvrdo" místo colour nějakou barvu, např. černou [ pixel.style.backgroundColor = "#000000"; ] bylo vše OK bez chyby.
Takže pátrej po barvě která není ve správném formátu (ve stylech v HTML .....doufej že ve skriptu není chyba)
Autopad: false znamená že NECHCEŠ mít vyplněné okraje !? Promiň = blbost.

Ale myslím že jsem na to přišel. Zkus (pro inspiraci) nastavit prvku div id=all background:black
Zjistíš, že skript vlastně funguje tak, že odstraní barvu background VNĚ křivky. Podle toho uprav HTML a styly.

Nahlásit jako SPAM
IP: 89.102.211.–
Figa0
Super člen
2. 12. 2007   #3
-
0
-

Děkuju, když tam napíšu přímo barvu tak se to jakoby posune doleva a okraje nechci mít vyplněné, protože chci zaoblit border. Takže to znamená, že musím mít nastavenou barvu u toho divu?Jaktože je colour a ne color?

Nahlásit jako SPAM
IP: 87.249.133.–
Petroff0
Věrný člen
2. 12. 2007   #4
-
0
-

Colour je jméno proměnné v Javascriptu, normálně používej background-color.
Ale jestli chceš aby to fungovalo i v IE a přitom používáš jen jednu barvu, tak ji tam natvrdo (do xxxx.js souboru) umísti (jak jsem psal předtím) a budeš mít klid. Za cenu, že script už jinou barvu nebude umět - což by ti nemuselo vadit. Anebo hledat dál kde se stala chyba.

Nahlásit jako SPAM
IP: 89.102.211.–
Petroff0
Věrný člen
2. 12. 2007   #5
-
0
-

Co je tedy na tomto v nepořádku ?? (screenshot)

Nahlásit jako SPAM
IP: 89.102.211.–
Figa0
Super člen
2. 12. 2007   #6
-
0
-

V IE se to špatně zobrazuje.V Opeře a FF je to v pořádku.Ach jo to je složitý asi budu muset použít něco jinýho.Nechtělo se mi dělat obrázky, ale asi budu muset.U6 se 14dní hrabu v zakulacených rozích a nic.Ale moc ti děkuji za pomoc.Kdyby tě něco napadlo, tak napiš nebo kohokoliv.

Nahlásit jako SPAM
IP: 87.249.133.–
Petroff0
Věrný člen
2. 12. 2007   #7
-
0
-

A co máš proti obrázkům (dokonce ani dělat je nemusíš - pokud ti ty co vyrábí JS vyhovují tak je jen vyextrahuješ a vyčistíš) ?
Protože s čistě css řešením nebývají žádné problémy podobné tomuhle. A navíc je stránka s rohy přístupnější i těm co nemají JS.

Nahlásit jako SPAM
IP: 89.102.211.–
Figa0
Super člen
2. 12. 2007   #8
-
0
-

Myslíš tím, že udělám screensave v Opeře a pak to vyříznu a použiju?To není špatnej nápad.Ty rohy dělám kvůli tomu, že délám stránku o DOSu a chci se tak nějak sržet stylu DOSu což nevypadá nějak lákávě a ty kulatý rohy to krásně zvýrazmili.

Nahlásit jako SPAM
IP: 87.249.133.–
Petroff0
Věrný člen
3. 12. 2007   #9
-
0
-

VYŘEŠENO

IE v tom scriptu neumí převádět barvy zadané názvem na tvar #RGB (vyrobí "#undefinedundefinedundefined")
Opera také dělá chyby (na rozdíl od IE se script nezastaví,ale rámeček i oblouky vyjdou jako tenké čáry)

 #all {

background-color: #FFFFFF; /* bílá možno i #FFF */
border: 2px solid #000000; /* černá možno i #000 */
.....
}

Nahlásit jako SPAM
IP: 89.102.211.–
Figa0
Super člen
3. 12. 2007   #10
-
0
-

Super mockrát ti děkuji.No ale, teď mám v ty zaoblené rohy černě vybarvený.Jak docílím toho aby se barva výplně řídila barvou backgroundu?

Nahlásit jako SPAM
IP: 87.249.133.–
Petroff0
Věrný člen
4. 12. 2007   #11
-
0
-

Posílám ti layout,ve kterém jsem nastavil odlišnýma barvama všechny vybarvované části (platí: vynecháš-li definici background-color , pak plocha bude mít barvu nejbližšího předka, který má background nastavený)

Máš ale jiný problém. Domnívám se , že javascript umí pracovat pouze ve standardním režimu
- a tobě (díky řádku <?xml version="1.0" encoding="ISO-8859-2" ?> běží IE6 v kompatibilním.
Já osobně bych řádek vypustil a rezignoval na IE5.5 a starší - ošetřil bych to tak, že u těchto vykopávek bude stránka bez kulatých rohů, stejně jako u těch s vypnutým JS.
(jiná možnost: opět se rozloučit s CurvedCorners.js :=(

V ukázce (opět screenshot) máš ty barvy podle těchto stylů a zároveň vzhled v IE6 v obou režimech

/* lay-out */

body {
background: silver; /* stříbrné okolí */
font: normal normal 0.7em tahoma, arial, verdana, sans-serif, helvetica;
letter-spacing: .1em;
line-height: 1.7;
margin: 0;
padding: 0;
text-align: center; /* vycentrovani hlavniho divu pro IE */
}
#all {
/* růžové pozadí A SOUČASNĚ vyplněný padding u rámečku (padding má vždy barvu backgroundu!!!) */
/* nastavíš-li bckgr-clr prvkům uvnitř, bude tato deklarace ovlivňovat JEN barvu výplní u rámečku */
background-color: #ffaa88;
border: 2px solid #0000ff; /* modrý zakulacený rám */

height: auto;
margin: 50px auto 0 auto;
padding-bottom: 6px;
padding-top: 6px;
text-align: left;
width: 700px;
}
#hlavni {
background-color: #ffffaa; /* žluté pozadí */
border: 1px solid black; /* černý tenký rámeček */

margin: 0 6px 0 6px;
width: auto;
height: auto;
_height: 680px;
}
#hlavicka {
width: auto;
height: 140px;
background: white; /* bílé pozadí */
}

Nahlásit jako SPAM
IP: 89.102.211.–
Petroff0
Věrný člen
4. 12. 2007   #12
-
0
-

Až teď jsem "objevil" homepage [ http://www.curvycorners.net/ ].
Je tam i diskusní fórum kde se řeší nejrůznější problémy i bugy, najdeš i ten náš s názvy barev v IE: http://www.curvycorners.net/forum/viewtopic.php?f=4&t=404 http://www.curvycorners.net/forum/viewtopic.php?f=4&t=404
Mnoho nejasností je zažehnáno.
Skutečně to jde jen ve standardním režimu.
Dále padding:6px v DIVu id=all nemá žádný vliv na velikost mezery mezi kulatým rámečkem a vnitřním (hranatým).
Ale s nastaveným autoPad: true lze nejen přesně nastavovat velikost, ale i barvu (pouze!!!) výplně.
Je paráda, že lze kulatit jen určené rohy, a že lze jedním vrzem (=JS voláním) zaoblit celou sestavu DIVů na stránce. A nejen DIVů - pěkné jsou obrázky (ikdyž je to velice výpočetně náročný proces - zátěž CPU).
Až budu mít čas tak to prostuduju


Nutné úpravy>>>Zkusil jsem zobrazit http://www.fifland.wz.cz/ a potom zužovat/rozšiřovat okno (jde o obrázky - disketa, HD a comp) Kdybys s tím měl potíže, pošlu ti řešení ( ale určitě na to přijdeš....) .

Nahlásit jako SPAM
IP: 89.102.211.–
Figa0
Super člen
4. 12. 2007   #13
-
0
-

Už vážně nevím jak bych ti poděkoval.Zasloužíš si metál.Teď už zkusím hledat sám.O tom foru jsem věděl, ale nestihl jsem to přelouskat.Další problém je ten že když chci zakulatit jen na určité straně, tak se to pak nesprávně zobrazí, border úplně chybí a zaoblení je posunuté.Jak nastavit tu šířku mezi zaobléným a nezaobleným divem?O tom problému s těma obrázkamma vím, ale přes ty curve corners jsem se k tomu nedostal, teď jsem chvilku hledal a nemůžu najít alternativu k position: absolute.Hmm no na to snad přijdu, ale JS pro mě pořád zůstává španělská vesnice a proto ještě jedna otázečka, jak teď nastavit jiné zakulacení třídě #menu2, než třídě #all? Ještě jednou a znovu ti děkuji.

Nahlásit jako SPAM
IP: 87.249.133.–
Petroff0
Věrný člen
4. 12. 2007   #14
-
0
-

Zkusím se spolehnout na ten návod, v nejhorším (jak doporučují) si prohlédnout komentáře v JS. Uvidíme.

Jinak position:absolute je vhodný způsob (pokud se poloha počítá odshora a zleva tak na 100%)
Prostě zkus všechny 3 img dát dovnitř <div id=all> a nastavit tomuto bloku position:relative. A pak přepočítat hodnoty top a left u každého obrázku.
Jestli bude <div id=all> natahovací na výšku (podle množství obsahu) tak pro obrazek PC se bude muset použít bottom místo top.
------------------------------------------------------------------------------------------
Pro každý odlišný stupeň zakřivení rohů se musí procedura opakovat (divy se stejným zakřivením můžeš vložit do 1 procedury jako seznam: new curvyCorners(settings, divObj1,divObj2,....); )

Zkus tohle:

window.onload = function()

{
settings = {
tl: { radius: 10 },
tr: { radius: 10 },
bl: { radius: 10 },
br: { radius: 10 },
antiAlias: true,
autoPad: false
}
var divObj = document.getElementById("all");
var cornersObj = new curvyCorners(settings, divObj);
cornersObj.applyCornersToAll();

settings = {
tl: false , /* vynechat levy horni */
tr: { radius: 6 },
bl: false , /* vynechat levy dolni */
br: { radius: 6 },
antiAlias: true,
autoPad: false
}
var divObj = document.getElementById("menu2");
var cornersObj = new curvyCorners(settings, divObj);
cornersObj.applyCornersToAll();
}

Nahlásit jako SPAM
IP: 89.102.211.–
Figa0
Super člen
4. 12. 2007   #15
-
0
-

Konečně se to blíží ke konci.To různé nastavení pro třídy funguje bezvadně.V IE zatím taky žádný problém.Dokonce to fubguje i v Opeře mini.Zatím teda zůstává problém s nastavením, té šířky, ale to se už snad nebude takový problém.S tím position relative mi to teda zatím moc nefunguje, ale to je detail.Děkuju ti mnohokrát.

Nahlásit jako SPAM
IP: 87.249.133.–
Petroff0
Věrný člen
4. 12. 2007   #16
-
0
-

Sorry, psal jsem to z hlavy, takže jsem se ukecl (mám to na disku fungující, akorát místo obrázků mám zástupné symboly, ty hodnoty asi budou nepřesné):

#hlavni {

position:relative;
. . . .
}
#disketa {
position: absolute;
z-index:11; /* pro jistotu */
left: -50px;
top: -20px;
}
#c {
position: absolute;
z-index:11;
left: 0px;
top: 170px;
}
#pc {
position: absolute;
z-index:11;
left: 560px;
top: 670px; /* anebo místo top dej bottom: 0px */
}

Nahlásit jako SPAM
IP: 89.102.211.–
Figa0
Super člen
4. 12. 2007   #17
-
0
-

Díky, ale nějak jsem nepochopil, k čemu to je.Stejně když dám v opeře + -, tak ty obrázky zůstanou na absolutní pozici a ne s tou stránkou.

Nahlásit jako SPAM
IP: 87.249.133.–
Petroff0
Věrný člen
5. 12. 2007   #18
-
0
-

Zase jsem něco vynechal => ty obrázky se musí vložit do toho divu s relative (včera jsem to celé popsal, akorát jsem si spletl div#hlavní s divem#all)
TOTO JE HTML KE STYLŮM Z MINULÉHO PŘÍSPĚVKU:

<div id="all">

<div id="hlavni">
<img id="c" src="c.jpg" alt="C:">
<img id="disketa" src="disketa.jpg" alt="OSDOS">
<img id="pc" src="pc.jpg" alt="IBM PC">


<div id="hlavicka">
<img src="hlavicka.jpg" alt="Home"/>
</div>

<div id="obsah">
<div id="menu2">
<div id="inmenu">
<div id="ininmenu"></div>
<img src="dir.jpg" alt="UP-DIR"/>
</div>
</div>
. . . .

Psal jsi něco o šířce - to jako chceš nastavit šířku mezery mezi kulatým rámečkem a vnitřním hranatým rámečkem ?
----------------------------------------------------------------------------------------------
Tipnu si že asi nepoužíváš Firefox. Ale pokud si ho nainstaluješ a potom přidáš add-on Firebug (taková nástrojová lišta), získáš skvělý vývojový a ladící prostředek. Má spoustu možností, ale nejužitečnější (pro práci se styly) je možnost přidávat/ubírat/měnit hodnoty vlastností "za běhu".
Třebas přesné umístění obrázku "#disketa" - klikneš na číslo vedle top:-20px a pak jen mačkáš šipky => číslo se mění a obrázek posouvá nahoru/dolu až ho máš ve správné výšce. Zopakuješ to s left a je hotovo. Za pár vteřin. I názvy css vlastností nebo nečíselné hodnoty se dají šipkama "vylistovat" ze seznamu.
SUMA SUMARUM: tak dobrý nástroj u ostatních prohlížečů neznám - pořídil jsem si zpočátku FF jen kvůli němu, ušetřil mi hodiny psaní a zkoušení, velmi rychle jsem pochopil co který styl provádí, poznával nové css vlastnosti a hlavně je zábava s ním pracovat.
Jeho autor má na webu (jako video) skvělou prezentačku=návod k používání (bohužel mluví anglicky, takže je to použitelné až po základním seznámení). Kdybys měl zájem, tak ti pošlu (vlastní) český návod.

Nahlásit jako SPAM
IP: 89.102.211.–
Petroff0
Věrný člen
5. 12. 2007   #19
-
0
-

Je dobré vědět co se stane, když nenastavíš všechny 4 bordery shodně - například když jeden vynecháš, což je totéž jako bys nastavil border: Xpx none #XXXXXX (nezáleží na šířce a barvě).
Neboli podle kterých borderů se nastavují kulaté (a bohužel i hranaté) rohy.
Zkus tenhle testík:

#menu2 {

float: left;
width: 135px;
height: 300px;
border-top: 2px solid #ff0000;
border-bottom: 1px solid #ffff00;
border-right: 3px solid #00ff00;
border-left: 5px double #0000ff;
margin-top: 30px;
}

Vyplývá z toho že když vynecháš svislý border mezi 2 hranatými rohy, výsledek není pěkný.
Kdežto chybějící vodorovný border mezi 2 hranatými rohy vypadá v CurvedCorners správně = stejně jako v normálním divu (prostě chybí 1 strana obdélníku)

Nahlásit jako SPAM
IP: 89.102.211.–
Figa0
Super člen
5. 12. 2007   #20
-
0
-

Díky už to position: relative jede jak má.Bezva.Ten nástroj do FF je opravdu skvělý.Tipnul jsi správně používám Operu a u ní zůstanu, ale na vývoj stránek budu používat FF, protože většinu věcí zobrazuje jako Opera, takže pak akorát optimalizace pro IE.Teď, když koukneš na tu stránku, tak sem zakulatil #menu2 a jelikož je nastveno, u levého horního a dolního rohu false tak se tam utvořil hranatý roh a moc dobře to nevypadá.Snad to spravý obrázek.

Nahlásit jako SPAM
IP: 87.249.133.–
Petroff0
Věrný člen
7. 12. 2007   #21
-
0
-

Jak nastavit velikost výplní - symetricky (ale snadno lze mít i nestejně veliké jednotlivé výplně)
Zachová to velikosti i s vypnutým javascriptem
Nepoužívat autoPad: true (zjistil jsem že se to hodí jen pro jednoduché případy)

je třeba vložit do html 1pomocný DIV

#all {

background-color: #ffff00; /* BARVA PADDINGU u rámečku - jen pro demonstraci */
border: 2px solid #000000; /* černý tlustý rámeček */
margin: 50px auto 0 auto;
text-align: left;
width: 700px;
padding: 8px 0px; /* O zobrazení se stará: TATO ČÁST A */
}
#mezi {
padding: 0px 8px; /* 1.(nejmenší) */ /* A TATO ČÁST */
padding: 1px 9px; /* 2. větší... */
padding: 2px 10px; /* 3. větší... */
padding: 3px 11px; /* 4. větší... */
padding:10px 18px; /* obrovský */
}
#hlavni {
position:relative;
background-color: #ffffaa; /* žluté pozadí */
border: 1px solid black; /* černý tenký rámeček */
}

<div id="all">
<div id="mezi">
<div id="hlavni">

Nahlásit jako SPAM
IP: 89.102.211.–
Petroff0
Věrný člen
7. 12. 2007   #22
-
0
-

Vyzkoušel jsem jeden ze způsobů,kterak odstranit ty škaredé rozpojené rohy u MENU2.
1DIV přibyl , jeden ubyl (stav 1:1 o poločase)
Pro perfektní vzhled bez JS by bylo nutné vložit mezi #menu2 a #inmenu blok #m2_mezi s paddingama nebo na něco přijít...

Ukázka => zjednodušená stránka: http://exstream.atlasweb.cz/Curved/orezani.html

   settings = {

tl: { radius: 10 },
tr: { radius: 10 },
bl: { radius: 10 },
br: { radius: 10 },
antiAlias: true,
autoPad: false
}
var divObj = document.getElementById("menu2");
var cornersObj = new curvyCorners(settings, divObj);
cornersObj.applyCornersToAll();
--------------------------------------------------------------------------------------------------
#obal_menu2 {
position:relative; /* pouze quli IE, zato velmi důležité (zkus odstranit :=) */
float: left;
width: 132px; /* = W(menu2)- W(CurvedPADDING) = 138+2+2 - 10 */
height: 320px;
overflow: hidden; /* ořízne menu2 */
margin-top: 30px;
/* background: #ffaaaa; /* růžové pozadí - PRO KONTROLU */
}
#menu2 {
width: 138px;
height: 300px;
border: 2px solid #000000;
margin-left: -10px; /* skryje levý CurvedPADDING */
margin-top: 10px; /* a udělá místo pro horní CurvedPADDING */
padding: 2px 0px;
}
#inmenu {
border: 1px solid black;
padding: 2px 1px 2px 8px; /* nastaveno pomocí Firebugu */
width: 120px; /* nastaveno pomocí Firebugu */
height: 293px; /* nastaveno pomocí Firebugu */
text-align: center; /* zkouška obsahu */
}
#inmenu img {
position:absolute;
z-index:9999; /* jinak by CurPADDING uřízl obrázek */
top: 288px; /* nastaveno pomocí Firebugu */
left: 30px; /* nastaveno pomocí Firebugu */
display:block;
}
#ininmenu {} /* není třeba !!! */
--------------------------------------------------------------------------------------------------
<body>
<div id="all">
<div id="mezi">
<div id="hlavni">

<div id="obal_menu2">
<div id="menu2">
<div id="inmenu">

<img src="dir.jpg" alt="UP-DIR"/>
</div>
</div>
</div>

</div>
</div>
</div>
</body>

Nahlásit jako SPAM
IP: 89.102.211.–
Figa0
Super člen
7. 12. 2007   #23
-
0
-

U ž nevím jak ti mám poděkovat, ale bohužel(nejspíš chyba na mé straně) mi za boha nefunguje to nastavení šířky výplně.To #menu2 jsem zatím nezkoušel.Mockrát děkuji.

Nahlásit jako SPAM
IP: 87.249.133.–
Petroff0
Věrný člen
7. 12. 2007   #24
-
0
-

!!! Vůbec se ti nespustí curvedxxxxx.js script - chybička v-názvu . . .nebo v_názvu !!!
A už to funí
Hlavně nespěchat. Některé chyby se projeví až někdy později, takže se hromadí. Ale až to spustí, tak to stojí za to.
Zatím neškodí:
HTML >>> na konci je o 1 </div> více a o 1 </body> méně
CSS >>> #all nemá mít position:relative Respektive asi tam nevadí - ale také tam není nutný.
(nedávat nic bezdůvodně, později na to člověk zapomene a ono se to může zapojit do problémů)

Nahlásit jako SPAM
IP: 89.102.211.–
Figa0
Super člen
7. 12. 2007   #25
-
0
-

Spustí se mi, ale boční výplň se roztáhne a ze střední se spodní a vrchní se nic neděje.Dík s tím body a div děkuju.

Nahlásit jako SPAM
IP: 87.249.133.–
Petroff0
Věrný člen
7. 12. 2007   #26
-
0
-

Já jsem změnil ten název skriptu a všechny paddingy jsou stejně široké, aspoň ve FF.

Nemáš náhodou nějaký margin navíc - margin: 0 6px 0 6px; tam nemá být

A z-index v position:relative nefunguje (aspoň si to myslím...)

!!!!!!! Tak jo - dělá to ten margin => vodorovné a svislé okraje pak nejsou stejné, musí pryč !!!!!!!

Nahlásit jako SPAM
IP: 89.102.211.–
Figa0
Super člen
7. 12. 2007   #27
-
0
-

Bezva už to fachá.Bez tebe bych snad na to nepřišel.V životě by mě nenapadlo, že za to může margin.Myslím, že by už z toho šel docela dobře udělat CZ návod.Je to strašný, ale mám další problém, když nepoužiju border, ale border-top, border-bottom atd. Tak to nefunguje.Je to u třídy #datum.

Nahlásit jako SPAM
IP: 87.249.133.–
Figa0
Super člen
8. 12. 2007   #28
-
0
-

Zjistil jsem, že na použití curved corners jsou potřeba 3 bordery.#autor jsem vyřešil tak, že jsem border-right smazal a border-bottom nastavil #ffffff a vypadá to dobře.Není to teda moc elegantní, ale funguje:problém, ale bude, až budu chttí použít třeba obrázek na pozadí.No a u #datum to, ale nefunguje nevím proč.

Nahlásit jako SPAM
IP: 87.249.133.–
Petroff0
Věrný člen
8. 12. 2007   #29
-
0
-

Ahoj
Divím se, ale ten z-index funguje i v position:relative (asi skleróza...)
Pošlu ti k čemu jsem dospěl (použil jsem tvou verzi jako výchozí), zde je link:http://exstream.atlasweb.cz/Curved/index_sobota.html

Jinak: Mám problémy s IE6, tak se je dnes pokusím odchytit.

Mrkl jsem na fifland:
- v IE6 jsou novinky bez vnitřního spodního borderu. Totéž u datumu i u menu2
- H/V rámečky nejsou stejně široké.
- patička ještě není správně.
- chtělo by to (dřív či později) zjistit, jak to vypadá ve všech browserech s vypnutým JS (hlavně zda to není rozhozené)

Nahlásit jako SPAM
IP: 89.102.211.–
Petroff0
Věrný člen
8. 12. 2007   #30
-
0
-

Opera FF IE6/7 už zobrazují stejně => pak pošlu

Hlavně sem rád že jsem vykoumal jak to ponastavovat, aby byl okraj na všech stranách stejný nejen s JS ale i bez něj.
Například novinky:

#novinky {

width: 460px;
height: 107px;
float: right;
padding: 8px;
border: 2px solid #000000;
margin-top: 51px;
margin-right: 21px;
}

#novinky2 {
margin-top:0px;
height: 105px;
border: 1px solid #000000;
}

Nahlásit jako SPAM
IP: 89.102.211.–
Figa0
Super člen
8. 12. 2007   #31
-
0
-

Už se nějak ztrácím.Strašně moc změn a ztrácím se v kodu.Pošli mi pls ten mi pls css.css a index.html jak už máš #menu2
správně zobrazené.Tobě se povedlo odstranit všechny problémy s IE???

Nahlásit jako SPAM
IP: 87.249.133.–
Petroff0
Věrný člen
8. 12. 2007   #32
-
0
-

Dneska končím a dám si na čas pauzu - v podstatě je všechno fungující (líp to nepujde).
Výjimkou jsou ty minibloky pro DATUM a AUTORa => buguje to při vypnutém JS a taky v IE6 - možná by to chtělo pořešit nějak jinak. Prohlídni si ScreenShoty: http://exstream.atlasweb.cz/Curved/ss3x.jpg

Tady je ta poslední verze na webu http://exstream.atlasweb.cz/Curved/index_sobota.html a totéž najdeš v ZIPce.
Je to dělané v qaltu (neučesané + zbytečnosti co přijdou smazat ...příště)

Nahlásit jako SPAM
IP: 89.102.211.–
Petroff0
Věrný člen
9. 12. 2007   #33
-
0
-
Nahlásit jako SPAM
IP: 89.102.211.–
Figa0
Super člen
9. 12. 2007   #34
-
0
-

Ještě jednou děkuji za pomoc.Bez tebe bych to nikdy nevzládnul.Bohužel teď ti to nemůžu říct, protože doma na desktopu mám IE6 a IE7 mám na NB a k tomu se dostanu až zítra odpoledne, takže pak řeknu.Proto prosím ostatní uživatele aby se kdyžtak mrkli.

Nahlásit jako SPAM
IP: 87.249.133.–
Petroff0
Věrný člen
10. 12. 2007   #35
-
0
-

Postup vykreslení stránky (+ problémy, které přináší):
1. Celá stránka se všemi HTML prvky se vykreslí (výsledkem je "hranatá" podoba totožná s verzí s vypnutým JS)
2a. Javascript přetváří bloky,kterým zakulatí BORDER - přitom dochází i ke změnám vnitřních i vnějších rozměrů těchto bloků, porovnej si vedle sebe kulatou a hranatou verzi a přeměř šuplerou.
[Teď jsem objevil, že při použití autoPad:false & vložený DIV#mezi se rozměry nezmění - rozhodně by stálo za to zkusit tuto kombinaci aplikovat na strategicky umístěné boxy]
2b. Pořadí ve kterém to JS provádí je určené pořadím použití identifikátorů/tříd bloků ve funkci onload.
DŮSLEDEK:
Pokud se zkulatí nějaký blok dříve než bloky v něm umístěné, dochází k chybám layoutu (těžko předvídatelným/opravitelným).
Např. v IE6 u patičky (pokud je okno nižší než stránka - vyhodí patu vně DIV#all).
NÁPRAVA:
Změnou pořadí ve funkci onload, např. hlavní blok #all dát až jako poslední .... atp.


Nahlásit jako SPAM
IP: 89.102.211.–
Petroff0
Věrný člen
10. 12. 2007   #36
-
0
-
Nahlásit jako SPAM
IP: 89.102.211.–
Figa0
Super člen
10. 12. 2007   #37
-
0
-

Děkuju, to overflow mám nastavit pro oba divy #novinky2?Zkusil bych to, ale bohužel už zase nemám IE7.Jen taková technická, kolik % lidí má vypnutej JS?MYslím, že v dnešní době je to tak procento, ale jelikož požadavek byl, že to má jít dobře zobrazit na mobilních zařízení, ¨tak tam JS není že?Tak jsem myslel, že by se pomocí PHP scriptu zjistilo přes co uživatel přistupuje a podle toho se načetla stránka.

Nahlásit jako SPAM
IP: 87.249.133.–
Petroff0
Věrný člen
10. 12. 2007   #38
-
0
-

To zhroucení způsobovat div "autor2" pokud neměl tzv.Layout což je specielní režim vykreslování prvku.
Stačí když budeš vědět že Layout prvek obdrží při floatu, positionu:absolute, nastavení width/height na hodnotu jinou než auto a nastavení overflow na hodnotu jinou než visible. Já jsem použil overflow:hidden. (později si s tím ještě užiješ, protože se tomu asi nevyhneš -neb IE je tak sestrojen)

Trochu jsem okomentoval zdroják+css ( chápu, že klíčové je vědět co změnit můžu (podle svého) a co musí zůstat netknuté )
Máš to v RARce
Zkusil jsem druhý způsob kulatých DIVů - tentokrát ne pomocí id, ale class. To znamená, že můžeš mít libovolné množství prvků <div class=novinky><div class=novinky2> obsah </div></div> - jsou to vlastně nové stavební jednotky. S vypnutým JS jsou to DIVy s dvojitým borderem. To samé platí i pro datumovku a podpis => taky class.
Taky jsem zkusil obrázky na pozadí - neměly by dělat potíže.

JS by měl poskytnout něco navíc => při vypnutí JS by měly zůstat nedotčené základní funkce a design třebas ochuzený, ale ne nevzhledný.
Ten tvůj nápad mít 2verze stránky se komplikuje tím, že server neví zda user má JS ON/OFF.
Napadlo mě krkolomné řešení:
Pošleme mu nonJS verzi a do ní dáme JS skriptík, který načte druhou verzi - plně vybavenou JS (a nebo neudělá nic: userovi s vypJS zůstane ta první nonJS verze.
PHP tady nepomůže. (ale může se uplatnit při sestavení obou verzí).

Nahlásit jako SPAM
IP: 89.102.211.–
Figa0
Super člen
15. 12. 2007   #39
-
0
-

TAk teĎ už je to zatím dokonalé, díky.Akorát k čemu je .clr ?Ještě jednou mockrát dík.

Nahlásit jako SPAM
IP: 87.249.133.–
Petroff0
Věrný člen
15. 12. 2007   #40
-
0
-

....máš tam levý a pravý sloupec, původně byly float left/right. Prvek .clr je tzv. čistič,zabrání, oby obsah delšího sloupce nevtekl pod druhý, případně obtékal text patičky. Možná, že v současné podobě není třeba, ale pokud ho dáš pryč a někdy se to zvrtne ve spodní části, tak to může být tím že tam měl zůstat. (navíc IE6 má i teď jako plovoucí nastavený PRAVÝ sloupec...takže pozor)

Nahlásit jako SPAM
IP: 89.102.211.–
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

Curvy corners — založil Figa

Problém — založil Já

Problem s &lt; a &gt; — založil 7raul

Problém s if else — založil Mortimer

Problém — založil Trumpetka

 

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