Roztahovaci layout a kulate rohy

Webdesign, HTML, CSS, Flash, PHP, ASP, .NET, JavaScript. Kritika www stránek na Smetišti.

Moderátor: Moderátoři Živě.cz

Odeslat odpověď

Odeslat příspěvekod ReZetFet 22. 8. 2008 13:18

ahoj,
tkousim roztahovaci layout aby mel kulate rohy

Mam i par neuzpesnych pokusu ..

Kód: Vybrat vše
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-utf-8" />
<style type="text/css" media="screen">
body {background-color:#990033;}
#obal { min-width:500px; max-width:1150px;width:auto;margin:0 auto; background-color:#BFE686}
#vlevo {width:250px;float:left; background-color:#F3C2E6}
#vpravo { float:left; background-color:#DFA062}
#ram{ margin:10px; padding:10px; background-color:#67795B}
#vramu {width:400px;background-color:#ece000;}
div p {margin:0; padding:0; background-color:#AB969A}
.cleaner {clear:both; float:none; visibility:hidden;}
</style>
<title>Kulate rohy - pruzne</title>
</head>
<body>
<div id="obal">
   <div id="celek">
      <div id="vlevo">
      <p>People search for this Lorem ipsum dummy copy text using all kinds of names, such as Lorem ipsum, lorem ipsum dolor sit amet, Lorem, dummy text, loren ipsum (yes, spelled wrong), Lorem ipsum sample textipsum loremlorem ipsum sample, Latin copy text, Lorem ipsum text, Latin dummy text, template text, sample text, dummy copy text, Latin sample text, HTML dummy text, Lorem ipsum dummy text, filler text or copy filling text, and many other names. Regardless of what you wish to call it, this text </p><hr class="cleaner" />
      </div>
      <div id="vpravo">
      <div id="ram">
         <div id="vramu"><p>People search for this Lorem ipsum dummy copy text using all kinds of names, such as Lorem ipsum, lorem ipsum dolor sit amet, Lorem, dummy text, loren ipsum (yes, spelled wrong), Lorem ipsum sample textipsum loremlorem ipsum sample, Latin copy text, Lorem ipsum text, Latin dummy text, template text, sample text, dummy copy text, Latin sample text, HTML dummy text, Lorem ipsum dummy text, filler text or copy filling text, and many other names. Regardless of what you wish to call it, this text </p><hr class="cleaner" />
         </div>
      </div>
      </div>
   </div>
</div>
</body>
</html>

Kód: Vybrat vše
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-utf-8" />
<style type="text/css" media="screen">
body { font-family:Arial, Helvetica, sans-serif;}
p {padding:0 10px; margin:0;}
#obal { min-width:600px;margin:0 auto;}
#vlevo {width:30%; float:left;}
#vpravo {width:69%; float:left;}
#line {display:inline;}
.levy{background-image:url(levy.gif); background-repeat:no-repeat; width:390px; float:left;  left:10px;}
.pravy{background-image:url(pravy.gif); background-repeat:no-repeat; width:10px; float:right; right:10px;}
.stred {float: left; padding-right:10x; width:auto;}
.cleaner {clear:both; float:none; visibility:hidden;}
</style>
<title>zasovaci rohy</title>
</head>
<body>
<div id="obal">
   <div id="celek">
      <div id="vlevo">
         <p>People search for this Lorem ipsum dummy copy text using all kinds of names, such as Lorem ipsum, lorem ipsum dolor sit amet, Lorem, dummy text, loren ipsum (yes, spelled wrong), Lorem ipsum sample textipsum loremlorem ipsum sample, Latin copy text, Lorem ipsum text, Latin dummy text, template text, sample text, dummy copy text, Latin sample text, HTML dummy text, Lorem ipsum dummy text, filler text or copy filling text, and many other names. Regardless of what you wish to call it, this text </p>
         <hr class="cleaner" />
      </div>
      <div id="vpravo">
         <div id="ram">
            <div id="vramu">
               <div class="levy">
                  &nbsp;
               </div>
               <div class="stred">
                  <hr class="cara" />
               </div>
               <div class="pravy">
                  &nbsp;
               </div>
               <hr class="cleaner" />
               <p>People search for this Lorem ipsum dummy copy text using all kinds of names, such as Lorem ipsum, lorem ipsum dolor sit amet, Lorem, dummy text, loren ipsum (yes, spelled wrong), Lorem ipsum sample textipsum loremlorem ipsum sample, Latin copy text, Lorem ipsum text, Latin dummy text, template text, sample text, dummy copy text, Latin sample text, HTML dummy text, Lorem ipsum dummy text, filler text or copy filling text, and many other names. Regardless of what you wish to call it, this text </p>
               <hr class="cleaner" />
            </div>
         </div>
      </div>
   </div>
</div>
</body>
</html>

Kód: Vybrat vše
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-utf-8" />
<style type="text/css" >
#aa{min-width:600px; margin: 0 auto; text-align:center;}
#ss{padding:0 10px; text-align:left;}
#dd{padding:0 10px;}
#ff{padding:0 10px;}
.leftup { background-image:url(levy.gif) left top; background-repeat:no-repeat; width:3em;}
.rightup { background-image:url(pravy.gif) right top; background-repeat:no-repeat; width:3em;}
.leftdown {background-image:url(levy.gif) left bottom; background-repeat:no-repeat; width:3em;}
.odst {background-color:#FFFFCC; border-radius: 5px;}
</style>
<title>flexi</title>
</head>
<body>
<div id="aa">
   <div id="ss">
      <div id="dd">
         <div id="ff"><p class="odst"><span class="leftup">&nbsp;leftup&nbsp;&nbsp;</span><span class="rightup">&nbsp;rightup&nbsp;&nbsp;</span>People search for this Lorem ipsum dummy copy text using all kinds of names, such as Lorem ipsum, lorem ipsum dolor sit amet, Lorem, dummy text, loren ipsum (yes, spelled wrong), Lorem ipsum sample textipsum loremlorem ipsum sample, Latin copy text, Lorem ipsum text, Latin dummy text, template text, sample text, dummy copy text, Latin sample text, HTML dummy text, Lorem ipsum dummy text, filler text or copy filling text, and many other names. Regardless of what you wish to call it, this text </p></div>
      </div><span class="leftudown">&nbsp;leftudown&nbsp;&nbsp;</span>
   </div>
</div>

</body>
</html>


.. ale vschno pohori na firefoxu jindy IE a jindy se proste poustim do slepe ulicky.
ReZetFet
Junior

Odeslat příspěvekod medvidek88 23. 8. 2008 21:21

http://www.cssplay.co.uk/boxes/curves.html
NO IE !!!
medvidek88
Junior
Uživatelský avatar

Odeslat příspěvekod gisat_cz 26. 8. 2008 13:11

V současnosti tedy ve verzi css2 se ke zobrazení kulatých rohů používá zobrazení kulatého rohu jako obrázku v css. Viz příklad:

CSS
Kód: Vybrat vše
#obal-kul-roh
{
position:relative;
width:200px;
height:100%;
margin:10px;
padding:.5em;
font-size:.76em;
color:#000;
background:#e4effa;
border-top:15px solid #a0d9ff;
border-bottom:15px solid #a0d9ff;
border-left:15px solid #a0d9ff;
border-right:15px solid #a0d9ff;
text-align:left;
}

.horlev
{
position:absolute;
top:-15px;
left:-15px;
background:url('kul_roh1.gif') left top no-repeat #fff;
}

.horprav
{
position:absolute;
top:-15px;
right:-15px;
background:url('kul_roh1.gif') right top no-repeat #fff;
}

.dollev
{
position:absolute;
bottom:-15px;
left:-15px;
background:url('kul_roh1.gif') left bottom no-repeat #fff;
}

.dolprav
{
position:absolute;
bottom:-15px;
right:-15px;
background:url('kul_roh1.gif') right bottom no-repeat #fff;
}

.horlev, .horprav, .dollev, .dolprav
{
width:15px;
height:15px;
font-size:0px;
}


XHTML:
Kód: Vybrat vše
<html>
<body>
<div id="obal-kul-roh">
<div class="horlev"></div><div class="horprav"></div><div class="dollev"></div><div class="dolprav"></div>
<p>text text text</p>
</div>
</body>
</html>


Pro verzi CSS3, která zčásti funguje(i když ne všude správně) to je takto:
je zde nový element 'border-radius -
gisat_cz
Junior
Uživatelský avatar

Odeslat příspěvekod mbing 26. 8. 2008 19:26

Seš si jistý, že nejdou kulaté rohy bez obrázků a bez CSS3?
Nemám problémy s alkoholem, mám problémy bez něj.
mbing
VIP uživatel
Uživatelský avatar

Odeslat příspěvekod gisat_cz 27. 8. 2008 00:44



Kulatý rohy jdou vytvořit i dneska, ale jenom pro mozillu. s tím obrázkem je to elegantní řešení, samozřejmě že místo kousků rohů jde vytvořit položka background- image, ale to je asi to samý a načítání obrázku v tomto případě může být delší.

jde to řešit i flashem, ale to jsme jinde, a možná by v tomto případě šlo o vytloukání klinu zbiječkou. :-D ;-) .

Napadá tě nějaké jiné řešení, jak docílit kulatých rohů bez obrázků, a bez použití vlastnosti přístupné jenom pro mozillu? Napiš rád se poučím a přiučím něčemu novýmu.
gisat_cz
Junior
Uživatelský avatar

Odeslat příspěvekod gisat_cz 27. 8. 2008 00:52



koukal jsem na ten příklad, a máš pravdu stačí jenom nastavit margin . Musím přiznat, že je to jednodušší řešení, ale to s obrázkem taky funguje.
gisat_cz
Junior
Uživatelský avatar

Odeslat příspěvekod kohutisko 27. 8. 2008 02:43

ak to "jednoduchsie riesenie" chapem dobre, tak zacne byt sakra zlozite, ked bude chciet niekto vacsi polomer zaoblenia...
kohutisko
Junior
Uživatelský avatar
Odeslat odpověď
Zpět na Tvorba webových stránek a aplikací

Kdo je online

Uživatelé procházející toto fórum: Žádní registrovaní uživatelé a 0 návštevníků

Podmínky pro užívání služby informační společnosti | Informace o zpracování osobních údajů | Cookies
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group