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
pár problémů.Po aplikování jsou obrázky co mají nastavené position: absolute,
překrité samotnou stránkou.Druhý problém je ten, že když nastavím zaoblení
pouze
na jednu stranu borderu, tak se zobrazí jen oblouček a zbytek borderu
zmizí.Nevíte prosím někdo jak tyto problémy vyřešit?Předem děku ji za odpovědi.
Fórum › CSS
Curvy corners
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 */
Ještě ten IE píše chybu na řádku 661 znak 15 v tomto scriptu www.fifland.wz.cz/rounded-corners.inc.js
Stránky zde www.fifland.wz.cz
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žení videa
Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
Uživatelé prohlížející si toto vlákno
Uživatelé on-line: 0 registrovaných, 10 hostů
Podobná vlákna
Curve corners problém v IE — založil Figa
Moderátoři diskuze