CSS pozícia / Javascript reload menu

Programovacie jazyky, rady, poradňa...
Napísať odpoveď
Innocence
VIP
VIP
Používateľov profilový obrázok
Príspevky: 2451
Registrovaný: 05 jan 2008, 10:16
Bydlisko: Bratislava

CSS pozícia / Javascript reload menu

Príspevok od používateľa Innocence »

Zdravím, ospravedlňujem sa za primitívnu otázku, ale učím sa CSS a mám problém: Tieto tri odstavce by som chcel horizontálne zacentrovať, ako na to? Skúšal som všeličo, ale neúspešne. Pozeral som na nete stránky, všade odporúčajú margin left/right:auto; ale neviem to tam zakomponovať. Vďaka za prípadnú pomoc.

Kód: Vybrať všetko

<p align="justify" style="xx">
<span style="yy">
1
  </span>
</p>

<p align="justify" style="xx">
<span style="yy">
2
  </span>
</p>

<p align="justify" style="xx">
  <span style="yy">
3
 </span>
</p>
Hore
BX
Addict
Addict
Používateľov profilový obrázok
Príspevky: 4572
Registrovaný: 10 jan 2008, 15:30

Re: CSS pozícia

Príspevok od používateľa BX »

Áno, margin: 0 auto

Kód: Vybrať všetko

<div style="width: 800px; margin: 0 auto;  text-align: center; border: solid 1px red">

	<p align="justify" style="xx">
	<span style="yy">
	1
	  </span>
	</p>

	<p align="justify" style="xx">
	<span style="yy">
	2
	  </span>
	</p>

	<p align="justify" style="xx">
	  <span style="yy">
	3
	</span>
	</p>
	
</div>
Ak úplne na stred, odstráň tie <p> a nahraď to trebárs ul a li, alebo span divmi
(ten border je tam na ukážku, čo to ten margin: 0 auto urobí)
Hore
*****HERO*****
Guru wannabe
Guru wannabe
Používateľov profilový obrázok
Príspevky: 2446
Registrovaný: 08 máj 2006, 1:34

Re: CSS pozícia

Príspevok od používateľa *****HERO***** »

ak centrujes iba inline elementy, co spany su, tak staci dat tym odstavcom

Kód: Vybrať všetko

text-align:center;
Hore
Innocence
VIP
VIP
Používateľov profilový obrázok
Príspevky: 2451
Registrovaný: 05 jan 2008, 10:16
Bydlisko: Bratislava

Re: CSS pozícia

Príspevok od používateľa Innocence »

Vďaka, ešte mám jednu otázočku, to bude asi trochu zložitejšie. Mám menu, ktoré vyzerá asi takto:

Kód: Vybrať všetko

<div id='cssmenu'>
<ul>
   <li><a href='index.html'><span>ÚVOD</span></a></li>
     <li><a href='about.html'><span>O NÁS</span></a></li>
   <li class='has-sub '><a href='#'><span>PONUKA KRÚŽKOV 2013/14</span></a>
      <ul>
         <li class='has-sub '><a href='#'><span>VÝCHOVNO-VZDELÁVACIE KRÚŽKY</span></a>
            <ul>
               <li><a href='#'><span>...</span></a></li>
               <li><a href='#'><span>...</span></a></li>
            </ul>
         </li>
         
            <li class='has-sub '><a href='#'><span>POHYBOVÉ KRÚŽKY</span></a>
            <ul>
               <li><a href='#'><span>...</span></a></li>
               <li><a href='#'><span>...</span></a></li>
            </ul>
         </li>
         
        
      </ul>
   </li>
   <li><a href='#'><span>SÚŤAŽE</span></a></li>
   <li><a href='#'><span><font color="yellow">LETO 2013</font></span></a></li>
        <li><a href='#'><span>DETSKÝ KLUB SLNIEČKO</span></a></li>
       <li><a href='#'><span>VEREJNÉ OBSTARÁVANIE</span></a></li>
       <li><a href='#'><span>FOTOGALÉRIA</span></a></li>
       <li><a href='#'><span>KONTAKTUJTE NÁS</span></a></li>
</ul>
</div>
Chcem to spraviť tak, že namiesto toho "vysúvacieho menu" to bude nasledovne: Keď kliknem napr. na Ponuka krúžkov, menu sa kompletne zmení, zmiznú všetky položky a objavia sa tam len dve nové (športové, spoločenské) + nejaká ďalšia položka, že návrat do hlavného meno.. Teda kliknem na nejakú položku a to menu sa zmení.. Asi bude najlepšie robiť to cez Javascript, ale s tým nemám vôbec skúsenosti, vedel by mi niekto pomôcť? Teda.. Chcem, aby sa obnovilo len menu, aby nenačítavalo nanovo celú stránku.
Hore
BX
Addict
Addict
Používateľov profilový obrázok
Príspevky: 4572
Registrovaný: 10 jan 2008, 15:30

Re: CSS pozícia / Javascript reload menu

Príspevok od používateľa BX »

Prečo ti nestačí normálna vysúvačka ako každému normálnemu človeku? Zmena celého menu po kliknutí bude podľa mňa vyzerať hrozne a pôsobiť veľmi mätúco.
Hore
S.T.E.A.L.T.H
Light Professional
Light Professional
Používateľov profilový obrázok
Príspevky: 933
Registrovaný: 31 jan 2010, 14:44
Bydlisko: Pegasus Galaxy

Re: CSS pozícia / Javascript reload menu

Príspevok od používateľa S.T.E.A.L.T.H »

skus toto

Kód: Vybrať všetko

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv='content-type' content='charset=utf-8' />
    <title>Interface</title>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    <div id="menu_d">
        <ul id="menu">
        
        </ul>
    </div>
    
<script type="text/javascript">
    $(function(){
        var load_var = base_menu  = '<li><a id="1" class="m_menu" href="#">MENU 1</a></li><li><a id="2" class="m_menu" href="#">MENU 2</a></li>';
        
        $('#menu').html(load_var);
        
        $('html').delegate('.m_menu', 'click', function(){
            var sub_menu_id = parseInt($(this).attr('id')),
                back = '<li><a class="back" href="#"><<back</a></li>';
            
            switch(sub_menu_id) {
                case 1: {
                    load_var = '<li><a href="#">MENU 1.1</a></li><li><a href="#">MENU 1.2</a></li>' + back;
                } break;
                
                case 2: {
                    load_var = '<li><a href="#">MENU 2.1</a></li><li><a href="#">MENU 2.2</a></li>' + back;
                } break;
            }
            $('#menu').html(load_var);
            
            return false;
        });
        
        $('html').delegate('.back', 'click', function(){
            $('#menu').html(base_menu);
            return false;
        });
        
    });
</script>
</body>
</html>
, no tiez nemyslim, ze to je prave dobre riesenie
Hore
Innocence
VIP
VIP
Používateľov profilový obrázok
Príspevky: 2451
Registrovaný: 05 jan 2008, 10:16
Bydlisko: Bratislava

Re: CSS pozícia / Javascript reload menu

Príspevok od používateľa Innocence »

Vďaka, ešte hádam posledná otázka: Prečo mi v Chrome spraví align textu do justify a Mozilla to stále centruje (aby sme sa chápali, príloha XX.jpg)? Kód vyzerá takto:

Kód: Vybrať všetko

<p align="center">


<span align="justify" style="display:inline-block; width: 350px; line-height:1.8; font-family: Arial; padding:15px; border-radius:20px; background-color:white; filter:alpha(opacity=60); opacity:.8;">
  <span style="color:black; filter:alpha(opacity=100); opacity:1;">
  <img src="img/a1.png"/>
TEXT
  
  </span>
</span>

&nbsp;&nbsp;

<span align="justify" style="display:inline-block; width: 750px; line-height:1.8; font-family: Arial; padding:15px; border-radius:20px; background-color:yellow; filter:alpha(opacity=60); opacity:.8;">
  <span style="color:black; filter:alpha(opacity=100); opacity:1;">
    <img src="img/a2.png"/>
    
 TEXT
</span>
</span>
     
</span>
</span>

</p>
Prílohy
XX.jpg
Hore
S.T.E.A.L.T.H
Light Professional
Light Professional
Používateľov profilový obrázok
Príspevky: 933
Registrovaný: 31 jan 2010, 14:44
Bydlisko: Pegasus Galaxy

Re: CSS pozícia / Javascript reload menu

Príspevok od používateľa S.T.E.A.L.T.H »

uprav si to tak, ze do style doplnis text-align:justify; tak ako to vidis nizsie

Kód: Vybrať všetko

<span align="justify" style="display:inline-block; width: 750px; line-height:1.8; font-family: Arial; padding:15px; border-radius:20px; background-color:yellow; filter:alpha(opacity=60); opacity:.8; text-align:justify;">
Hore
Napísať odpoveď

Návrat na "Programovanie"