ugrás a tartalomhoz

kupaliskonz.sk: IE-ben szétcsúszik minden.... miért?

netman · 2006. Júl. 12. (Sze), 18.35
üdv.

Belefáradtam már a sok kínlódásba, inkább szakikhoz fordulok... Rátok gondolok, kedves weblabor.hu olvasók :)

A problémám a következő:
Az aktuális projektomon (http://www.kupaliskonz.sk/demo/page.php?lang=sk&site=bp&page=info) dolgozgatok, firefox-szal szépen is megy minden... a blokkok gyönyörűen a helyükön vannak, pontosan ott, ahova terveztem öket... viszont az a fránya rohadt IE összecsúnyít mindent...

miért?? ha tudja valaki a megoldást - mert nekem foggggggalmam sincs - akkor legyen olyan kedves és írja meg nekem...

előre is köszöni a segítséget egy IE gyülölő designer
Matkovský Péter // netman.sk
‹ Js onChange event probléma js kicsi képet nagyít ha fölé viszem az egeret... ›
 ■
1

Javítás

pint3r · 2006. Júl. 12. (Sze), 19.53
A bal oldali box-ok (IE szemszögéből is) helyes CSS-e, ez csak az első box, a többit ez alapján már gondolom meg tudod csinálni:

div#box-bp .content ul{
  margin: 0;
  padding: 0;
  list-style: none;
}

div#box-bp .content ul li{
  padding: 5px 0 5px 0;
  padding-left: 1em;
  font-family: "Trebuchet MS", trebuchet, tahoma, arial, helvetica, sans-serif;
  font-size: 13px;
  font-weight: bold;
}
Érdekes margókat adtál meg (margin: 0 15px 0 -24px;), már kínodban nem tudtál mit csinálni mi? :)

A jobb oldali tartalom lecsúszása pedig az IE és Firefox közti margókezelés eltérésében keresendő. Csökkentsd valamelyik div szélességét, vagy próbáld megoldani padding-gal margin helyett.

Ha a #left és #right-nál kikommenteled a margin-t, akkor már nem tolja le.

div#left{
  float: left;
  width: 224px;
  owerflow: hidden;
/*   margin: 10px 0 0 13px; */
  text-align: left;
}

div#right{
  float: right;
  width: 490px;
  owerflow: hidden;
/*   margin: 0 14px 0 0; */
}
Pontos értéket csak azért nem tudok írni mert Firefox-szal az oldalt lementve nekem nem szedett le hozzá mindent, vagyis a háttereket a felső logón kívül, így nem tudok mihez viszonyítani.

Amúgy tetszik az oldal, jól néz ki!
5

...

netman · 2006. Júl. 13. (Cs), 16.22
Üdv.

köszi a hozzászólást...

Hát igen, így szép is LENNE minden, csakhogy a oldal egyik ill. másik szélétöl IEben ezek után is beljebb van a box, és nemtom miért...
Egy táblázatot használok csupán az oldalon, aminek a cellspacing-ja és cellpadding-ja is 0, söt a css-ben is a margin és padding 0 értékkel rendelkezik, úgyhogy ez nem lehet a hibás (bár, IEnél sosem lehet tudni :) )

A margókkal kapcsolatban pedig eltaláltad az okát a hogy miert van negativ margo (idézlek: "már kínodban nem tudtál mit csinálni mi?") :)

UI: örülök, hogy tetszik az oldal... majd egy hónap múlva csekkeld le újra a url-t (kupaliskonz.sk), akkor még jobb lesz :) (remélem addigra már kész lesz a magyar változata is)
6

Ha átküldöd

pint3r · 2006. Júl. 13. (Cs), 19.21
Ha átküldöd az egyik aloldalt hozzá a képekkel meg a css-el akkor szívesen ránézek, ahogy időm engedi, viszont az oldalt simán lementve nekem nem szedett le hozzá minden képet, egyesével meg leszedni nincs időm, így nem láttam pontosan hova kell igazítani.

Szóval ha gondolod e-mail címem adataimnál megtalálod, aztán ha elküldöd beírom ide meg persze e-mailben is elküldöm ha jutottam vele valamire.
7

Elég rendesen bele kellett nyúlni

pint3r · 2006. Júl. 13. (Cs), 23.43
Elég rendesen bele kellett nyúlni!
A leges legelső, hogy Strict doctype-ra cseréltem a Transitional-t.
Ez már sokat segített néhány dolgon.
A második, hogy a táblázatot kipucoltam teljesen és helyett két konténer div-et tettem. Ahol kellett ez miatt módosítottam a html-t és a css-t is.

Az li-ket padding-left: 2.5em; -el húztam be és a list-style-nál az inside-ot kiszedtem.

Az átíráshoz egy fájlba a main.css-be tettem a bp.css tartalmát is. Ami megjegyzem nagyon sok felesleges definíciót tartalmaz. Mivel a box-ok kinézetüket tekintve többi paraméterükben megegyeznek ezért én csinálnék egy minta dobozt amiből a többit csak az eltérésekkel csinálnám meg. Nálad mindegyik box-hoz minden külön meg van adva, így minden box-nál külön kell mindent módosítani.

Na a lényeg a küldött csomagból a két módosított fájl:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
  <meta name="description" content="Bytový podnik Nové Zámky">
  <meta name="content-language" content="slovak, hungarian, german">
  <meta name="keywords" content="bytový podnik nové zámky štrand termálne kúpalisko dom kultúry relax komplex športová hala zimný štadión futbalový štadión klub dôchodcov kgj úvz">
  <meta name="author" content="P. Matkovský, www.netman.sk">
  <link rel="Shortcut Icon" href="favicon.ico" type="image/x-icon">
  <link rel="Stylesheet" href="css/main.css" type="text/css" media="screen">
<!--   <link rel="Stylesheet" href="css/bp.css" type="text/css" media="screen"> -->
  <title>Bytový podnik Nové Zámky</title>

  <!-- MM JS -->
  <script type="text/javascript">
  function MM_preloadImages() { //v3.0
    var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
      var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
      if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
  }
  </script>
</head>
<body onLoad="MM_preloadImages('images/bp/netmanlogo-on.gif', 'images/sk-on.gif', 'images/hu-on.gif', 'images/de-on.gif')">

<div class="wrapper">
  <div class="logo"></div>

  <!-- Bal rész -->
  <div class="cw">
  <div class="left">
    <div id="box-bp">
      <h4 class="headline"><span style="background: url(images/box-bp-headline_sk.gif);">&nbsp;</span>Bytový podnik</h4>
      <div class="content">
        <ul>
          <li><a href="page.php?lang=sk&amp;site=bp&amp;page=info">O firme</a></li>
          <li><a href="page.php?lang=sk&amp;site=bp&amp;page=kontakty">Kontakty</a></li>
        </ul>
      </div>
    </div>

    <div id="box-strand">
      <h4 class="headline"><span style="background: url(images/box-strand-headline_sk.gif);">&nbsp;</span>Štrand</h4>
      <div class="content">
        <ul>
          <li><a href="page.php?lang=sk&amp;site=strand&amp;page=info">Info</a></li>
          <li><a href="page.php?lang=sk&amp;site=strand&amp;page=fotogal">Fotogaléria</a></li>
          <li><a href="page.php?lang=sk&amp;site=strand&amp;page=kontakty">Kontakty</a></li>
          <li><a href="page.php?lang=sk&amp;site=strand&amp;page=cenniky">Cenníky</a></li>
          <li><a href="page.php?lang=sk&amp;site=strand&amp;page=priestory">Voľné priestory<br>na prenájom</a></li>
        </ul>
      </div>
    </div>

    <div id="box-relax">
      <h4 class="headline"><span style="background: url(images/box-relax-headline_sk.gif);">&nbsp;</span>Relax komplex</h4>
      <div class="content">
        <ul>
          <li><a href="page.php?lang=sk&amp;site=relax&amp;page=info">Info</a></li>
          <li><a href="page.php?lang=sk&amp;site=relax&amp;page=fotogal">Fotogaléria</a></li>
          <li><a href="page.php?lang=sk&amp;site=relax&amp;page=kontakty">Kontakty</a></li>
          <li><a href="page.php?lang=sk&amp;site=relax&amp;page=cenniky">Cenníky</a></li>
        </ul>
      </div>
    </div>

    <div id="box-ostatne">
      <h4 class="headline"><span style="background: url(images/box-ostatne-headline_sk.gif);">&nbsp;</span>Ostatné zariadenia</h4>
      <div class="content">
        <ul>
          <li><a href="page.php?lang=sk&amp;site=ostatne&amp;page=dkakd">Dom kultúry<br>a klub dôchodcov</a></li>
          <li><a href="page.php?lang=sk&amp;site=ostatne&amp;page=zimnystadion">Zimný štadión</a></li>
          <li><a href="page.php?lang=sk&amp;site=ostatne&amp;page=milenium">Športová hala<br>Milénium</a></li>
          <li><a href="page.php?lang=sk&amp;site=ostatne&amp;page=kgj">KGJ</a></li>
          <li><a href="page.php?lang=sk&amp;site=ostatne&amp;page=uvz">ÚVZ</a></li>
        </ul>
      </div>
    </div>

    <div id="box-langsel">
      <ul>
        <li><a href="page.php?lang=sk&amp;site=bp&amp;page=info"><img src="images/sk-off.gif" onMouseOver="this.src='images/sk-on.gif';" onMouseOut="this.src='images/sk-off.gif';" alt="" title="slovensky" border=0></a></li>
        <li><a href="page.php?lang=hu&amp;site=bp&amp;page=info"><img src="images/hu-off.gif" onMouseOver="this.src='images/hu-on.gif';" onMouseOut="this.src='images/hu-off.gif';" alt="" title="magyar" border=0></a></li>
        <li><a href="page.php?lang=de&amp;site=bp&amp;page=info"><img src="images/de-off.gif" onMouseOver="this.src='images/de-on.gif';" onMouseOut="this.src='images/de-off.gif';" alt="" title="deutsch" border=0></a></li>
      </ul>
    </div>
  </div>

  <!-- Jobb oldal (tartalom) -->
  <div class="right">
    <div class="title"><img src="images/bp/title_sk.gif" style='border: 0px; position: relative; left: 31px;' alt="" /><h1 class="hidden">Bytový podnik</h1></div>
    <div class="content">
      <h2>O firme</h2>
      <p>Lorem ipsum dolor sit amet consectetuer Integer ridiculus et quis rhoncus. Sed a Phasellus nunc lorem magna rutrum pellentesque ut mauris quis. Porta non id ac Duis velit condimentum tincidunt pellentesque tellus tempor. Quis Vivamus metus sapien tellus Morbi elit vel augue urna quis. Justo egestas pretium Aenean ac et leo.</p>
      <p>Et non nisl id malesuada nibh Nullam pretium nec accumsan pharetra. Penatibus Sed urna vel nibh Vestibulum pellentesque orci interdum venenatis montes. Cursus id sollicitudin Integer leo Vivamus laoreet amet sem volutpat tempus. Semper aliquam Sed interdum mauris vitae eget Vestibulum Vestibulum nisl nec. Nam Nullam vel consectetuer in tortor neque.</p>
      <p>link :: <a href="http://www.netman.sk/" target="_blank">www.netman.sk</a> :: link</p>
      <p>Orci interdum ut Nam Nulla eu congue Praesent non quam tellus. Curabitur Quisque non leo et tempus nec pellentesque id sed eros. Penatibus eros lacinia velit euismod at lorem quis Suspendisse Vestibulum ac. Leo eu velit lacus ligula ac at sagittis sed tincidunt sed. Curabitur malesuada dui Curabitur platea interdum amet sit ac ante orci. Condimentum id tempor convallis. Ut semper ut molestie pretium lacinia nulla porttitor nec lacinia parturient. Eu leo adipiscing et Nullam eros tellus neque Duis Quisque sollicitudin. A enim habitant convallis orci at Curabitur laoreet lacus felis Phasellus. Ut facilisis volutpat velit nunc quis semper Mauris magna congue et. Nibh faucibus pede tortor convallis Nam malesuada Curabitur nulla amet Vivamus. Felis Phasellus urna quis In mauris venenatis tortor Integer egestas mattis. </p>
      <p>Lorem ipsum dolor sit amet consectetuer Integer ridiculus et quis rhoncus. Sed a Phasellus nunc lorem magna rutrum pellentesque ut mauris quis. Porta non id ac Duis velit condimentum tincidunt pellentesque tellus tempor. Quis Vivamus metus sapien tellus Morbi elit vel augue urna quis. Justo egestas pretium Aenean ac et leo.</p>
      <p>Et non nisl id malesuada nibh Nullam pretium nec accumsan pharetra. Penatibus Sed urna vel nibh Vestibulum pellentesque orci interdum venenatis montes. Cursus id sollicitudin Integer leo Vivamus laoreet amet sem volutpat tempus. Semper aliquam Sed interdum mauris vitae eget Vestibulum Vestibulum nisl nec. Nam Nullam vel consectetuer in tortor neque. Orci interdum ut Nam Nulla eu congue Praesent non quam tellus. Curabitur Quisque non leo et tempus nec pellentesque id sed eros. Penatibus eros lacinia velit euismod at lorem quis Suspendisse Vestibulum ac. Leo eu velit lacus ligula ac at sagittis sed tincidunt sed. Curabitur malesuada dui Curabitur platea interdum amet sit ac ante orci. Condimentum id tempor convallis.</p>
      <p>Ut semper ut molestie pretium lacinia nulla porttitor nec lacinia parturient. Eu leo adipiscing et Nullam eros tellus neque Duis Quisque sollicitudin. A enim habitant convallis orci at Curabitur laoreet lacus felis Phasellus. Ut facilisis volutpat velit nunc quis semper Mauris magna congue et. Nibh faucibus pede tortor convallis Nam malesuada Curabitur nulla amet Vivamus. Felis Phasellus urna quis In mauris venenatis tortor Integer egestas mattis. </p>
    </div>
  </div>
  </div>

  <!-- Lábléc -->
  <div class="foot_design"><div><div style='float: left;'>Copyright &copy; 2006-2006 Bytový podnik Nové Zámky</div><div style='float: right;'>design: <a href="http://www.netman.sk" target="_blank"><img src="images/bp/netmanlogo-off.gif" onMouseOver="this.src='images/bp/netmanlogo-on.gif';" onMouseOut="this.src='images/bp/netmanlogo-off.gif';" alt="" title="netman.sk" border=0></a></div><div class="hidden">netman.sk</div></div></div>
</div>
</body>
</html>
Ill. a css fájl:

body {
  margin: 0 0 25px 0;
  background-position: center center;
  background-repeat: repeat;
  background-image: url(../images/bp/bg.gif);
}

div.wrapper {
  width: 750px;
  margin-left: auto;
  margin-right: auto;
}

div.wrapper div.logo {
  background: url(../images/_temp/header1.jpg) no-repeat;
  width: 750px;
  height: 251px;
}


.hidden {
  display: none;
}

div.wrapper div.cw {
  width: 728px;
  background: url(../images/bp/contentbg.gif) repeat-y;
  margin-left: auto;
  margin-right: auto;
  overflow: auto;
}

div.wrapper div.cw div.left {
  float: left;
  width: 224px;
  owerflow: hidden;
/*   margin: 10px 0 0 13px; */
  text-align: left;
}

div.wrapper div.cw div.right {
  float: left;
  width: 460px;
  owerflow: hidden;
  margin-left: 10px;
}

div.wrapper div.cw div.right div.title {
  width: auto;
  float: right;
}

div.wrapper div.cw div.right div.content {
  text-align: left;
  owerflow: hidden;
  padding: 20px 20px 0 15px;
}

div.wrapper div.cw div.right div.content {
  font-family: "Trebuchet MS", trebuchet, tahoma, arial, helvetica, sans-serif;
  font-size: 11px;
  color: #666;
  line-height: 155%;
}

div.wrapper div.cw div.content h2 {
  font-family: georgia, times new roman, serif;
  font-weight: normal;
  font-size: 23px;
  margin-bottom: 25px;
}

div.wrapper div.cw div.content p {
  text-indent: 15px;
}

div.wrapper div.cw div.content a:link,
div.wrapper div.cw div.content a:visited,
div.wrapper div.cw div.content a:active,

div.wrapper div.cw div.content a:hover {
  text-decoration: none;
  font-weight: bold;
}


div.wrapper div.foot_design {
  color: #9f8245;
  margin-left: auto;
  margin-right: auto;
  text-align: right;
  width: 728px;
  height: 84px;
  background-image: url(../images/bp/footer.gif);
  font-family: "Trebuchet MS", trebuchet, tahoma, arial, helvetica, sans-serif;
  font-size: 11px;
}

div.wrapper div.foot_design div {
  width: auto;
  position: relative;
  top: 20px;
  margin-right: 1em;
  margin-left: 1em;
}

div.wrapper div.cw div.foot_design img { vertical-align: text-bottom; }

/* box-bp */

div.wrapper div.cw div.left div#box-bp{
  width: 167px;
  margin: 0 auto 30px auto;
}

div.wrapper div.cw div.left div#box-bp .content {
  background: url(../images/box-bp-bg.gif) no-repeat bottom;
  padding: 5px 0 5px 0;
}

div.wrapper div.cw div.left div#box-bp h4{
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 39px;
}

div.wrapper div.cw div.left div#box-bp h4 span{
  position: absolute;
  width: 167px;
  height: 39px;
}

div.wrapper div.cw div.left div#box-bp .content ul{
  margin: 0;
  padding-left: 2.5em;
  list-style: none;
}

div.wrapper div.cw div.left div#box-bp .content ul li{
  padding: 5px 0 5px 0;
  margin: 0 5px 0 -34px;
  /*background: url(../images/box-bp-bigy.gif) no-repeat left;*/
  font-family: "Trebuchet MS", trebuchet, tahoma, arial, helvetica, sans-serif;
  font-size: 13px;
  font-weight: bold;
}

div.wrapper div.cw div.left div#box-bp .content ul li a:link,
div.wrapper div.cw div.left div#box-bp .content ul li a:visited,
div.wrapper div.cw div.left div#box-bp .content ul li a:active {
  display: block;
  padding-left: 15px;
  color: #c46f00;
  text-decoration: none;
}

div.wrapper div.cw div.left div#box-bp .content ul li a:hover {
  display: block;
  padding-left: 15px;
  color: #ffab3e;
  text-decoration: none;
}


/* box-strand */

div.wrapper div.cw div.left div#box-strand{
  width: 187px;
  margin: 0 auto 30px auto;
}

div.wrapper div.cw div.left div#box-strand .content{
  background: url(../images/box-strand-bg.gif) no-repeat bottom;
  padding: 5px 0 5px 0;
}

div.wrapper div.cw div.left div#box-strand h4{
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 49px;
}

div.wrapper div.cw div.left div#box-strand h4 span{
  position: absolute;
  width: 187px;
  height: 49px;
}

div.wrapper div.cw div.left div#box-strand .content ul{
  margin: 0;
  padding-left: 2.5em;
  list-style: none;
}

div.wrapper div.cw div.left div#box-strand .content ul li{
  padding: 5px 0 5px 0;
  margin: 0 15px 0 -24px;
  font-family: "Trebuchet MS", trebuchet, tahoma, arial, helvetica, sans-serif;
  font-size: 13px;
  font-weight: bold;
}

div.wrapper div.cw div.left div#box-strand .content ul li a:link,
div.wrapper div.cw div.left div#box-strand .content ul li a:visited,
div.wrapper div.cw div.left div#box-strand .content ul li a:active{
  display: block;
  padding-left: 15px;
  color: #00b0db;
  text-decoration: none;
}

div.wrapper div.cw div.left div#box-strand .content ul li a:hover{
  display: block;
  padding-left: 15px;
  color: #0081a0;
  text-decoration: none;
}


/* box-relax */

div.wrapper div.cw div.left div#box-relax{
  width: 174px;
  margin: 0 auto 30px auto;
}

div.wrapper div.cw div.left div#box-relax .content{
  background: url(../images/box-relax-bg.gif) no-repeat bottom;
  padding: 5px 0 6px 0;
}

div.wrapper div.cw div.left div#box-relax h4{
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 49px;
}

div.wrapper div.cw div.left div#box-relax h4 span{
  position: absolute;
  width: 174px;
  height: 49px;
}

div.wrapper div.cw div.left div#box-relax .content ul{
  margin: 0;
  padding-left: 2.5em;
  list-style: none;
}

div.wrapper div.cw div.left div#box-relax .content ul li{
  padding: 5px 0 6px 0;
  margin: 0 8px 0 -31px;
  font-family: "Trebuchet MS", trebuchet, tahoma, arial, helvetica, sans-serif;
  font-size: 13px;
  font-weight: bold;
}

div.wrapper div.cw div.left div#box-relax .content ul li a:link,
div.wrapper div.cw div.left div#box-relax .content ul li a:visited,
div.wrapper div.cw div.left div#box-relax .content ul li a:active{
  display: block;
  padding-left: 15px;
  color: #0b5390;
  text-decoration: none;
}

div.wrapper div.cw div.left div#box-relax .content ul li a:hover{
  display: block;
  padding-left: 15px;
  color: #fff;
  text-decoration: none;
}


/* box-ostatne */

div.wrapper div.cw div.left div#box-ostatne{
  width: 181px;
  margin: 0 auto 30px auto;
}

div.wrapper div.cw div.left div#box-ostatne .content{
  background: url(../images/box-ostatne-bg.gif) no-repeat bottom;
  padding: 5px 0 6px 0;
}

div.wrapper div.cw div.left div#box-ostatne h4{
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 47px;
}

div.wrapper div.cw div.left div#box-ostatne h4 span{
  position: absolute;
  width: 181px;
  height: 47px;
}

div.wrapper div.cw div.left div#box-ostatne .content ul{
  margin: 0;
  padding-left: 2.5em;
  list-style: none;
}

div.wrapper div.cw div.left div#box-ostatne .content ul li{
  padding: 5px 0 6px 0;
  margin: 0 11px 0 -26px;
  font-family: "Trebuchet MS", trebuchet, tahoma, arial, helvetica, sans-serif;
  font-size: 13px;
  font-weight: bold;
}

div.wrapper div.cw div.left div#box-ostatne .content ul li a:link,
div.wrapper div.cw div.left div#box-ostatne .content ul li a:visited,
div.wrapper div.cw div.left div#box-ostatne .content ul li a:active{
  display: block;
  padding-left: 15px;
  color: #0c820c;
  text-decoration: none;
}

div.wrapper div.cw div.left div#box-ostatne .content ul li a:hover{
  display: block;
  padding-left: 15px;
  color: #00d900;
  text-decoration: none;
}


/* language select box */

div.wrapper div.cw div.left div#box-langsel{
  margin: 0 auto 30px auto;
  text-align: center;
}

div.wrapper div.cw div.left div#box-langsel ul{
  padding: 0;
  list-style: none none outside;
}

div.wrapper div.cw div.left div#box-langsel ul li{
  display: inline;
  margin: 0 5px 0 5px;
}

div.content h2{
  color: #f29f00;
}

div.content a:link,
div.content a:visited,
div.content a:active{
  color: #ffa800;
}

div.content a:hover{
  color: #c67e00;
}
Ez így nálam most IE és Firefox alatt is tökéletes, ugyanaz mindkettő alatt, sőt Opera 9 és Konqueror alatt is. ;)
Azért a CSS-en lehetne optimalizálni rendesen!

Ui.: egy picit rendbeszedtem a kódot ha nem gond. :) Én egyszerű szövegszerkesztőt használok Linux alatt (KWrite) és azzal átláthatatlan volt sok helyen.
8

THX

netman · 2006. Júl. 14. (P), 16.57
üdv.

Nagyon szépen köszi a módosításokat. Az igazsághoz hozzátartozik, hogy ez lenne az első munkám (a saját honlapomot leszámítva), amiben az oldal formázásához CSS van használva... úgyhogy asszem ebből nyilvánvaló is, mennyire mozgok otthonosan a tableless design területén :) sajnos még nem nagyon... most ezen a területen képzem magam...

Mivel a box-ok kinézetüket tekintve többi paraméterükben megegyeznek ezért én csinálnék egy minta dobozt amiből a többit csak az eltérésekkel csinálnám meg. Nálad mindegyik box-hoz minden külön meg van adva, így minden box-nál külön kell mindent módosítani.


ezt úgy értsem, hogy Te valahogy így csinálnád:




div.wrapper div.cw div.left div#box-bp,
div.wrapper div.cw div.left div#box-strand,
div.wrapper div.cw div.left div#box-relax,
div.wrapper div.cw div.left div#box-ostatne{
  margin: 0 auto 30px auto;
}

div.wrapper div.cw div.left div#box-strand .content ,
div.wrapper div.cw div.left div#box-relax .content ,
div.wrapper div.cw div.left div#box-ostatne .content ,
div.wrapper div.cw div.left div#box-bp .content {
  padding: 5px 0 5px 0;
}

/* stb.. stb.. */
Megadnád azokat az értékeket, amik egyeznek mindenhol, aztán utánna egyenként minden boxra azokat az ertekeket, amik nem...
így gondolod?

kössz a segítséget mégegyszer...

a javított demó már fenn van a www.kupaliskonz.sk/demo címen...
9

Igen, valahogy így

pint3r · 2006. Júl. 14. (P), 18.42
Megadnád azokat az értékeket, amik egyeznek mindenhol, aztán utánna egyenként minden boxra azokat az ertekeket, amik nem...
így gondolod?

Nm. ;)
Igen, valahogy így.
10

optim

netman · 2006. Júl. 14. (P), 19.32
üdv.

asszem készen vagyok a CSS optimalizálással (legjobb tudomásom szerint jártam el)...

a main.css 6 kilo helyett 4,4 kilobájtos lett, a bp.css (ami a szineket meg a hattereket tartalmazza) 516 bájt helyett 423 bájt (ami nem sok, de több mint a semmi)

az URL-ek:

www.kupaliskonz.sk/demo/css/main.css
www.kupaliskonz.sk/demo/css/_main_optim_elott.css

www.kupaliskonz.sk/demo/css/bp.css
www.kupaliskonz.sk/demo/css/_bp_optim_elott.css
11

Alakul :)

pint3r · 2006. Júl. 14. (P), 21.34
Alakul! Jó kis oldal lesz. ;)
12

rövid URL

netman · 2006. Júl. 15. (Szo), 14.16
üdv.

a kupaliskonz.sk/demo oldalon már rövid, keresőrobot- és felhasználóbarát URL-ek vannak.


---
netman.sk
2

:P IE

toxin · 2006. Júl. 12. (Sze), 20.35
skacok, ide én is becsatlakozom, a mai épitsünk css menüt félórás szeánsza 5órásra nyúlt IE miatt. Szóval aki megutdja, igazából végülis most megy szóval csak aki nagyon-nagyon ügyes és ráér, hogy miért kellett bele ez a két sor, azt virtuálisan megtapsolom

* html body #menuLeft li{    
        margin-bottom: -1px;
    }
   
ill.
 
* html body #menuLeft li.folder:hover{
  margin-bottom:  -4px;
}


http://ideafontana.com/idea/

azt a leborult irgumburgumát :D

azvolt a gond hogy a IE alatt htc-vel van megoldva az li:hover, de ez nemtudom számít-e, szóval IE alatt a referenciákra egerezve az egész alatta lévő cirkusz 1px-el lejebb csúszott (menüben) , megoldás lásd fent nade miért ???

ui: nem prod. szerver, nincs is még kész stb.
3

Felesleges div-ek

Jano · 2006. Júl. 12. (Sze), 21.54
Miért van szükség 2 DIV-et is a LI és az A elem közé ékelni? A hátteret pl adhatnád egyből az LI elemnek!
4

őőő izé

toxin · 2006. Júl. 12. (Sze), 22.38
lusta voltam javítani php-alatt, a menügenerátor class-ban ezt a részt, láttam én is [blush] :)

tudniillik az egész menüzőt újraírtam már, ezmég egy régebbi lap + kód , csak újruhába bújtatva
13

...

netman · 2006. Júl. 15. (Szo), 15.37
ez a fórum lassan már tekinthető a félkész oldal blogjának.. :)


---
netman.sk
14

re

toxin · 2006. Júl. 15. (Szo), 15.51
már majdnem olyan a kódja mint az enyém :P :) hajrá
16

:)

netman · 2006. Júl. 15. (Szo), 18.57
már majdnem... ;-)
15

dtd

netman · 2006. Júl. 15. (Szo), 18.56
üdv.

na gyerekek! íme egy fejtörő:

az miért van hogy az index.php-ben a nyelvválasztó flash és a gombok középen jelennek meg, ha a DTD így néz ki:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
viszont az oldal tetején jelennek meg, ha így:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
hmm?



---
netman.sk
17

quirk vs standard

toxin · 2006. Júl. 15. (Szo), 19.05
nézd meg a ref-ben a két sort

http://gutfeldt.ch/matthias/articles/doctypeswitch/table.html

és alul a link a cikkhez
21

thx

netman · 2006. Júl. 15. (Szo), 19.15
köszi a linkeket, de még mindig nem világos, mi az a quirk mode...
24

amin nem világos

toxin · 2006. Júl. 15. (Szo), 19.36
arra ott a wikipedia

http://en.wikipedia.org/wiki/Quirks_mode ;)
25

aha...

netman · 2006. Júl. 15. (Szo), 19.47
aha.. értem. mostmár világos hogy mi a különbség..

a Firefox-os "Page info" cucc azt írja a quirks-re, hogy "mint régebbi böngészővel" :)

szóval, most hogy így felfogtam a dolgokat, azt kéne már csak kideríteni, mivel lehet az oldal közepére varázsolni azt az istenverte táblázatot... már próbaltam boxxal is, de nem ment azzal se.... :(

help mí plíz! :)



---
netman.sk
26

megoldva

netman · 2006. Júl. 15. (Szo), 20.38
problémám megoldva... nem szaraxom tovább a DTD-kkel, egyszerüen adok neki egy ilyet:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
ezzel műxik...

az meg hogy ez nem standard megoldás mostantól kezdve nem érdekel...



---
netman.sk
18

standard vs. quirk

attlad · 2006. Júl. 15. (Szo), 19.06
A második standard módot jelent:
http://gutfeldt.ch/matthias/articles/doctypeswitch/table.html

http://weblabor.hu/levlistak/wl-flamelista/2006/05/007874
19

re

toxin · 2006. Júl. 15. (Szo), 19.08
lassú :D
20

Ja

attlad · 2006. Júl. 15. (Szo), 19.11
De csak mert kapcsolodó levlista posztot is kikerestem :-)
22

ok :)

toxin · 2006. Júl. 15. (Szo), 19.16
akkor még egy link tőlem is :)

http://www.alistapart.com/articles/doctype/

ha jól látom ez nem szerepel a fenti link alatt a ref anyagoknál
23

köszi, de...

netman · 2006. Júl. 15. (Szo), 19.29
köszi a linkrengeteget, de még mindig nem tudom, miért nem képes ez a táblázat az oldal közepén maradni:
<table width="100%" cellspacing=0 cellpadding=0 border=1 style="height: 100%;">
   <tr>
       <td valign="middle" align="center" style="height: 100%;">

	<table width=524 cellspacing=0 cellpadding=0 border=1 style="height: 355px;">
	   <tr>
		<td colspan=5>
	                <object type="application/x-shockwave-flash" data="images/index-1.swf" width=524 height=243>
	                 <param name="movie" value="images/index-1.swf">
	                 <param name="menu" value="false">
	                 <img src="images/index-1.gif" width=524 height=243 alt="">
	                </object>
		</td>
	   </tr>
	   <tr>
		<td rowspan=2><img src="images/index-2.gif" width=163 height=112 alt=""></td>
		<td><a href="sk/bp/info" onMouseOut="fadeit('sk','0')" onMouseOver="fadeit('sk','1')"><img src="images/index-sk-off.gif" width=130 height=40 border=0 name="sk" alt="" title="slovensky"></a></td>
		<td><a href="hu/bp/info" onClick="window.alert('hamarosan'); return false;" onMouseOut="fadeit('hu','2')" onMouseOver="fadeit('hu','3')"><img src="images/index-hu-off.gif" width=108 height=40 border=0 name="hu" alt="" title="magyar"></a></td>
		<td><a href="de/bp/info" onClick="window.alert('eiligst'); return false;" onMouseOut="fadeit('de','4')" onMouseOver="fadeit('de','5')"><img src="images/index-de-off.gif" width=107 height=40 border=0 name="de" alt="" title="deutsch"></a></td>
		<td rowspan=2 width=16 height=112>&nbsp;</td>
	   </tr>
	   <tr>
		<td colspan=3 width=345 height=72>&nbsp;</td>
	   </tr>
	</table>

       </td>
   </tr>
</table>
---
netman.sk
27

Div?

pint3r · 2006. Júl. 16. (V), 09.31
Miért erőlteted ezt a táblázatos megoldást?
Csináld meg div-vel, aztán margin-left: auto; margin-right: auto;

Egyébként táblázatnál: valign="middle" align="center" helyett ha már van style akkor szerintem célszerűbb lenne ott megadni: vertical-align: middle; text-align: center;
28

div-ek

netman · 2006. Júl. 16. (V), 12.30
megpróbáltam div-ekkel, de azokkal még annál a DTD-nél se ment (függőlegesen) középre, ahol táblázatokkal igen...

de asszem teszek még egy próbát...

majd a fejleményeket megírom ide :)


---
netman.sk
29

div vs. table

netman · 2006. Júl. 16. (V), 13.53
üdv.

na, megcsináltam ismét div-ekkel a középreigazítást... egy gond van vele, egy nagyon nagy gond: csak a tűzróka tudja tökéletesen mutatni. Operában szétesik, IE-ben pedig nem csupán szétesik, de nem is igazítódik vertikálisan középre...

mind1, akit érdekel a 2 megoldás, annak itt a két cucc:

table-vel: kupaliskonz.sk/demo
div-ekkel: kupaliskonz.sk/demo/_div_index.php



---
netman.sk
30

készen van, juhúúúúú ;)

netman · 2006. Szep. 15. (P), 17.36
na gyerekek, kész az oldal..

egyelőre még csak a szlovák verzió elérhető, de már élesben megy a cucc.

www.kupaliskonz.sk

vagy:
www.relaxnz.sk, www.bpnz.sk
31

Jó lett

pint3r · 2006. Szep. 17. (V), 21.25
Nekem tetszik, jó lett.
A Fotógaléria szlovákul is Fotógaléria? :)
32

német verzió

netman · 2007. Május. 7. (H), 23.09
hehe :) elindult a német verzió is... de a magyar változatot még mindig nem küldik :S