Versiune printabilă
Acum meniul cu cele 5 subcategorii este afisat in partea dreapta a siteului,iar in View Source apare la sfarsit
Am nevoie sa il afisez in partea stanga,iar in View Source sa apara tot la sfarsit.
Cum s-ar putea face asta ?Am inteles ca din CSS e posibil,dar cu ce comenzi/functii ?
position:relative sau absolute ... floats ... depinde :)
ok, voi cerceta aici. mersi :)
Pai faci in felul urmator.. iti faci niste containere care sa aiba proprietatea float: left; sau float: right; si in ele pui continutul a ceea ce vrei tu sa poti muta usor in stanga sau in dreapta!
Dupa ultimul tag de inchidere a div-ului care are float: right; fa o clasa in CSS .clear{ clear: both; } si baga divu asta: <div class="clear"></div> dupa ultimul float right!
Asta o faci pentru ca sa-i spui browserului ca acolo s-au terminat ultimele elemente care floteaza si ca site-ul isi continua existenta!
Daca sunt confuz... you know what to do :)
Uite un exemplu de baza.
CSS-ul ar fi cam asa:
Html-ul cam asa:Cod:body {
text-align: center;
}
#page {
width: 770px;
margin: 0 auto;
text-align: left;
background: #666;
}
#header, #footer {
background: #aaa;
padding: 15px;
clear: both;
}
#mid {
width: 770px;
background: #666;
overflow: hidden;
}
#sidebar {
width: 250px; /*250+10+10=270*/
padding: 10px;
background: #eee;
float: right;
}
#content {
width: 480px; /*480+10+10=500*/
padding: 10px;
background: #ccc;
float: right;
}
Dupa cum vezi in html, "sidebar" apare dupa "content" in cod, iar in pagina va fi afisat primul. Toata treaba asta e data de float: right; pe ambele elemente (vezi css). Daca te joci cu floaturile, si pui float: left; la ambele, o sa vezi ca isi schimba ordinea la afisareCod:<div id="page">
<div id="header">header</div>
<div id="mid">
<div id="content">
<h1>Lorem ipsum</h1>
<p>What is Lorem Ipsum?Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<p>What is Lorem Ipsum?Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
<div id="sidebar">
<ul>
<li>Element menu</li>
<li>Element menu</li>
<li>Element menu</li>
<li>Element menu</li>
<li>Element menu</li>
</ul>
</div>
</div>
<div id="footer">footer</div>
</div>
Vezi attach pt exemplul concret (redenumeste fisierul in floats.html)
Daca ai intrebari, shoot!
Succes!
mura-n gura , ce sa mai zic ..
mersi gabi.jguma
Sa cresti mare :P
In the real world, probabil mai ai nevoie de tweakuri ici colo (depinde de situatie, backgrounduri imagine, alte floaturi...etc...) ca sa mearga perfect, dar ca principiu, poti pleca de la asta.
Bafta!
care stiti pe cineva care sa ma ajute si pe mine ca m-am apucat de html si css, daca este cineva din buc sau online prin desktop remote..imi ziceti cat ma costa sedinta si metoda de plata.Va multumesc