CSS leírások, alapoktól indulva - Kérdések

[Action]

Bármi kérdésed van a témával kapcsolatban, vagy hibát észleltél akkor itt közöld.

[XeRoX]

hali, nagyon szép leírás, én sokat tanultam belőle, de a kérdésem a következő;
lesz még css-ről tutorial?

[Action]

Lesz lesz, lehet holnap délelőtt folytatom is, csak az elmúlt hetekben elég sok dolgom volt.
Mindenképp folytatni fogom.

[XeRoX]

az szuper! köszi

[NevemSenki]

http://translate.googleusercontent.com/translate_c?hl=hu&sl=en&u=&prev=/search%3Fq%3D%26hl%3Dhu%26client%3Dfirefox-a%26hs%3Dmmi%26rls%3Dorg.mozilla:hu:official%26prmd%3Divns&rurl=translate.google.hu&twu=1&usg=ALkJrhjYipXeDJG5W5Td5jyfVxLGez_nKw

Üdv.: Senki

[NevemSenki]

Előre is bocsánatot kérek, egy elég hülyeség ötlött meg a fejemben munka után, sikerült is megvalósítanom, de szerintem ennek van egyszerűbb módja is.

html + css menu az alap

Láthatunk menüket ugye amik bal oldalon találhatóak és az almenük jobbra jönnek elő. Link

Hülyeségből elkezdtem átalakítani. Konkrétan az ötlet az volt hogy letükrözöm. ( Jobb oldalon helyezkedik el a menü, és az almenük bal oldalra nyílnak ki belőle. )

Sikerült is, a kérés az lenne hogy van egyszerűbb módszer?
( Azért kérdezem mert 1 HTML oldalon lenne egymással szemben a két menü, külön tartalommal, és egy css fájlt szeretnék amiben az összes style benne van, ide zsúfolnám be ezt is. )

Mindenhol megtalálható alapértelmezett menü:

Css:

Kód Kijelölés Kibont

#menu {
width: 90px;
background: #eee;
}

#menu ul {
list-style: none;
margin: 0;
padding: 0;
}

#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}

#menu h2 {
color: #fff;
background: #000;
text-transform: uppercase;
}

#menu a {
color: #000;
background: #efefef;
text-decoration: none;
}

#menu a:hover {
color: #a00;
background: #fff;
}

#menu li {
position: relative;
}

#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
width: 100%;
}

div#menu ul ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

Html:

Kód Kijelölés Kibont

<div id="menu">
<ul>
  <li><h2>Haliho</h2>
    <ul>
      <li><a href="#" title="1">1</a>
        <ul>
          <li><a href="#" title="2">2</a></li>
          <li><a href="#" title="3">3</a></li>
          <li><a href="#" title="4">4</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

<ul>
  <li><h2>csa</h2>
    <ul>
      <li><a href="#" title="5">5</a></li>
      <li><a href="#" title="6">6</a>
        <ul>
          <li><a href="#" title="7">7</a>
            <ul>
              <li><a href="#" title="8">8</a></li>
              <li><a href="#" title="8">8</a></li>
              <li><a href="#" title="8">8</a></li>
              <li><a href="#" title="8">8</a></li>
              <li><a href="#" title="8">8</a></li>
              <li><a href="#" title="8">8</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

<ul>
  <li><h2>waaaaaa</h2>
    <ul>
      <li><a href="#" title="9">9</a></li>
      <li><a href="#">9</a>
        <ul>
          <li><a href="#" title="9">9</a>
            <ul>
              <li><a href="#" title="9">9</a></li>
              <li><a href="#" title="9">9</a></li>
              <li><a href="#" title="9">9</a></li>
              <li><a href="#" title="9">9</a></li>
              <li><a href="#" title="9">9</a></li>
              <li><a href="#" title="9">9</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
</div>


Az általam alakítottban 2 változás történt a Css-ben:

Kód Kijelölés Kibont

#menu1 ul {
position: relative;
right: -180px;
list-style: none;
margin: 0;
padding: 0;
}

és kapott egy új dolgot:

Kód Kijelölés Kibont

#menu1 ul li {
position: relative;
right: 180px;
}

A div-ek miatt változott a név " menu1 "-re!

HTML-ben pedig a div id " menu1 " lett.



Üdv.: Senki