Incepator in CSS

Aici postaţi orice este legat de tehnologiile "client side". HTML, HTML5, XHTML, CSS, CSS3, XML, Standarde
Manual JS: http://www.phpromania.net/jsmanual/index.html

Moderatori: eyecon, Moderatori

rociuf
New Member
Mesaje: 3
Membru din: Lun Feb 04, 2013 6:14 pm

Incepator in CSS

Mesajde rociuf » Lun Feb 04, 2013 6:33 pm

Am inceput sa invat singur, din tutoriale - apropo, puteti recomanda ceva cursuri(Bucuresti) la care as putea invata css3 si HTML5?; insa am unele dileme. Stiu anumite lucruri mai avansate insa in mod ironic sunt lucruri simple pe care inca nu le-am descoperit.

In acest moment nu-mi pot da seama cum pot alinia cele doua divuri de mai jos diferit.

Cod: Selectaţi tot

<div class="linia1">1</div>
<div class="linia2">2</div>


De exemplu vreau linia 1 aliniata dreapta iar linia 2 aliniata in stanga cu distanta de la margine de 15px ambele.
Reusesc sa le fac in acest mod, insa nu inteleg principiul iar cand vreau sa construiec ceva intampin probleme pentru ca necunoscand principiul nu-mi dau seama cum este cel mai bine sa le fac.

Le bag pe amandoua intr-un div si le pozitionez cu float?



Mersi



ViezuREX
Senior Member
Mesaje: 502
Membru din: Joi Dec 13, 2012 1:35 pm

Re: Incepator in CSS

Mesajde ViezuREX » Mar Feb 05, 2013 8:27 am

Daca vrei sa fie afisate pe aceeasi linie le bagi pe amandoua intr-un alt div si pe fiecare il aliniezi apoi cu float. Daca le vrei pe linii diferite adaugi la fiecare din clasele lor float-ul necesar.
Este insa foarte important ce ai in clasele linia1 si linia2.

P.S. Daca ceea ce te intereseaza este sa aliniezi continutul div-urilor atunci foloseste text-align.

Avatar utilizator
mandix
Average Member
Mesaje: 142
Membru din: Dum Apr 01, 2012 2:04 am
Localitate: Santana, Arad
Contact:

Re: Incepator in CSS

Mesajde mandix » Mar Feb 05, 2013 2:32 pm

Si ce este cel mai important, unde te asigur ca te lovesti de problema asta, sa pui un div cu

Cod: Selectaţi tot

clear:both;
, altfel le vor incaleca alte div-uri.

Nsilviu
Average Member
Mesaje: 136
Membru din: Dum Dec 21, 2008 10:18 pm
Contact:

Re: Incepator in CSS

Mesajde Nsilviu » Mie Feb 06, 2013 3:29 am

Cod: Selectaţi tot

lina1{
        float: left;
}
ALT + F2
Scrii " Free the fish "
Apesi Enter.
Sistem de operare: Linux

rociuf
New Member
Mesaje: 3
Membru din: Lun Feb 04, 2013 6:14 pm

Re: Incepator in CSS

Mesajde rociuf » Mie Feb 06, 2013 6:53 pm

Pai da, dar cand am asa:

Cod: Selectaţi tot

<header>
     <div class="header">
       <div class="logo"> Logo</div> 
       <div class="menu">
         
         <nav>
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Blabla</a></li>
            <li><a href="#">Firefox</a></li>
          </ul>
           
         </nav>
      </div>
       
       
       
    </div>
   
  </header>



Iar css-ul

Cod: Selectaţi tot

logo{
  float: left;
}

menu{
  float: right;
}

header li {
 
  list-style: none;
  display: inline;
}


Mi-l arata asa -> http://jsbin.com/etorug/2

Avatar utilizator
mandix
Average Member
Mesaje: 142
Membru din: Dum Apr 01, 2012 2:04 am
Localitate: Santana, Arad
Contact:

Re: Incepator in CSS

Mesajde mandix » Mie Feb 06, 2013 7:26 pm

HTML:

Cod: Selectaţi tot

<header>
     <div class="header">
       <div class="logo"> Logo</div>
       <div class="menu">
         
         <div class="clear">

         <nav>
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Blabla</a></li>
            <li><a href="#">Firefox</a></li>
          </ul>
           
         </nav>
      </div>
       
       
       
    </div>
   
  </header>

CSS:

Cod: Selectaţi tot

.logo{                 //cand stylizezi o clasa pune-i numele de clasa cu punct in fata Ex: .numeclasa. Cand ai id : #numeid
  float: left;
}

.menu{
  float: right;
}
.clear {
  clear:both;
}

.header li {
 
  list-style: none;
  display: inline;
}


Invata bazele CSS.

rociuf
New Member
Mesaje: 3
Membru din: Lun Feb 04, 2013 6:14 pm

Re: Incepator in CSS

Mesajde rociuf » Vin Feb 08, 2013 6:36 pm

Am inteles, multumesc.

Mai am niste nelamuriri. Daca vreau sa pozitionez niste elemente la distante diferite dar nu pe acelasi rand le mut cu clasa si cu ajutorul marginii in css sau exista ceva mai dedicat?

Ca exemplu am chenarele negre pe care le am in acest cod. Asta este "procedura"?

Cod: Selectaţi tot

<body>
  <div id="wrapper">
    <header><a href="#" alt="Logo">Logo</a>
      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </header>
   
    <section>Sectiune </section>
    <aside>aside</aside>
    <section><div class="chenare">
      <div class="chenar1">Chenar1</div>
      <div class="chenar2">Chenar2</div>
      <div class="chenar3">Chenar3</div>
      </div>
     
    </section>
    <footer>footer</footer>
  </div>
</body>


CSS

Cod: Selectaţi tot

#wrapper {
  width: 960px;
  margin-right: auto;
  margin-left: auto;
}

header {
  height: 150px;
  padding: 10px;
}

header ul {
  list-style: none;
  float: right;
  color: #777;
  text-decoration: none;
  font-style: arial;
  font-size: 20px;
 
}

header ul li {
  display: inline;
  margin-left: 20px;
   
}

header a {
  float: left;
 
}

section {
  float: left;
  background-color: green;
  width: 650px;
  height: 300px; 
}

aside {
  float: right;
  width: 310px;
  height: 300px;
  background-color: blue;
 

}

footer {
  clear: both;
  margin-top: 20px;
  background-color: orange;
  height: 150px;
 
}

.chenare {
}

.chenar1 {
  width: 60px;
  height: 60px;
  color: #fff;
  background-color: #000;
}

.chenar2 {
  width: 60px;
  height: 60px;
  color: #fff;
  background-color: #000;
  margin-left: 60px;
}

.chenar3 {
  width: 60px;
  height: 60px;
  color: #fff;
  background-color: #000;
  margin-left: 120px;
}


A doua intrebare.
Daca vrei acele chenare negre sa le pun pe acelasi rand cum procedez? Cu ul si li?

A treia intrebare.
De ce mi-a pus chenarele in "section"? In html le-am pus in sectiuni si div-uri diferite fata de prima sectiune, cea verde.

A patra intrebare.
Sus la meniu, am incercat sa pun margin-left "X"px sa pun o distanta de X intre linkuri dar totusi nu mi-a luat "comanda".


Multumesc.
Sa stiti ca nu astept mura-n gura, intre timp eu caut rezolvarile pe google ori alte surse doar ca este mai clar cand iti explica cineva de ce asa si de ce nu asa. Personal descrierile de pe W3school imi par foarte vagi, iar explicate individual functiile si problemele care apar in folosirea acestora nu sunt explicate de foarte multi. Plus ca nu gasesc explicatii pe CSS3 ci amestecate, ceea ce creeaza o confuzie si mai mare pentru cel care vrea sa invete.

Edeleth
New Member
Mesaje: 4
Membru din: Lun Iun 04, 2012 12:28 am
Localitate: Bucuresti
Contact:

Re: Incepator in CSS

Mesajde Edeleth » Dum Feb 10, 2013 6:14 pm

A doua intrebare.
Daca vrei acele chenare negre sa le pun pe acelasi rand cum procedez? Cu ul si li?

R: le pui la toate float:left si vor fi toate aliniate la stanga fara sa se suprapuna.

A patra intrebare.
Sus la meniu, am incercat sa pun margin-left "X"px sa pun o distanta de X intre linkuri dar totusi nu mi-a luat "comanda".

margin-left ii pui pe "a" dupa ce i-ai zis display:block.

Cod: Selectaţi tot

header a {
  float: left;
  display:block;
  margin-left:20px;
}


Eu iti recomand sincer sa nu mai incerci sa inveti html5 si css3. Ia-le pe rand. Invata bazele html4 si css2. Pt ca oricum Internet Explorer nu merge cu html5 si cu css3 iar ca sa faci sa mearga html5 pe internet explorer iti trebuiesc cunostinte solide de javascript. Iar css3-ul nu este recunoscut deloc de internet explorer (si probabil nici versiunile mai vechi de opera si safari). Invata pas cu pas: mai intai html4 si css2, apoi inveti css3, apoi javascript si abia apoi html5.

Bafta.
Freelancer Romania - Creare Site Web - Grafica Site Web - Logo Design --- http://roxana-nastase.ro/


Înapoi la “HTML/JavaScript/CSS”

Cine este conectat

Utilizatori ce ce navighează pe acest forum: Niciun utilizator înregistrat și 54 vizitatori