cum sa centrez div-urile

#1
chaosed

Posted 02 April 2014 - 15:50

New Member

Grup: Members
Posts: 12
Înscris: 08.03.2014

am in main

<body>
<div id="container">
<img src="resources/logo.png">
<align=center>
<div class="home" > <a href="#"></a> </div>
<div class="servicii" > <a href="#"></a> </div>
<div class="parteneri" > <a href="#"></a> </div>
<div class="flux" > <a href="#"></a> </div>
<div class="contact" > <a href="#"></a> </div>
</align>
</div>
</body>

un div are latimea de 150 px, si toate impreuna au 750 px (sunt butoane, si le-am pus unul dupa altul, in CSS sunt display block float left).
ce ar trebui sa scriu ca sa le centrez? (containerul are latimea de 900 px)

Back to top

#2
mishkulake

Posted 02 April 2014 - 15:52

Member

Grup: Members
Posts: 429
Înscris: 24.01.2014

3wschool.com

Back to top

#3
genericuser01

Posted 02 April 2014 - 16:21

Member

Grup: Members
Posts: 290
Înscris: 01.09.2013

CSS:

#container{margin: 0 auto;}

Back to top

#4
MikeD

Posted 02 April 2014 - 16:39

Member

Grup: Members
Posts: 605
Înscris: 04.09.2013

NU MAI FOLOSI NICIODATĂ <align>.
Ți-a spus genericuser01 cum să le centrezi, dar dacă nu vrei să centrezi și logo-ul, muți creezi alt div care să cuprindă toate butoanele și pui în CSS-ul lui codul.

Back to top

#5
LucianMihai13

Posted 14 July 2014 - 18:33

Junior Member

Grup: Members
Posts: 43
Înscris: 09.06.2014

Ti-am centrat si pagina și ti-am pus si un efect in css la meniu, daca vrei sa le modifici ti-am dat indicatii:

<html>
<head>
<style type="text/css">
body {
background-color:#3F0; /*culoare fundal*/
}
#container {
	width:1000px;  /*inaltimea pagini*/
height: 1000px; /*latimea pagini*/
margin-bottom: auto; /* <-- Aici stergi pentru ca pagina sa nu mai fie centrata*/
margin-right: auto; /* <-- Aici stergi pentru ca pagina sa nu mai fie centrata*/
margin-left: auto; /* <-- Aici stergi pentru ca pagina sa nu mai fie centrata*/
background-color: #fff;/*culoare pagina*/
}
#meniu {
width:270px; /*latimea meniului*/
height: 20px; /*inaltimea meniului*/
margin-bottom: auto;
margin-right: auto;
margin-left: auto;
background-color:#0CF; /*culoare meniu*/
}
.buton {
width:150 px; /*latimea unui buton*/
float: left;
margin-right: 6px; /*spatiul dintre ele*/
margin-left: 6px;
}
#backtotop, #bottomScroll {
background-color:; /*aici poti pune o culoare la buton*/
}
#backtotop:hover {
background: #FFF; /*culoare meniului cand muti curosrul peste*/
}
</style>
</head>
<body>
<div id="container">
  <img src="resources/logo.png" width="latimea logo" height="inaltime logo"></img>
<div id=meniu>
   <div class="buton" > <a href="#" id="backtotop">home</a> </div>
   <div class="buton" > <a href="#" id="backtotop">servicii</a> </div>
   <div class="buton" > <a href="#" id="backtotop">parteneri</a> </div>
   <div class="buton" > <a href="#" id="backtotop">flux</a> </div>
   <div class="buton" > <a href="#" id="backtotop">contact</a> </div>
   </div>
</div>
</body>
</html>

Back to top

#6
mr_api

Posted 16 July 2014 - 11:45

Member

Grup: Members
Posts: 420
Înscris: 10.10.2010

nu cumva sunt cateva greseli,daca ai div-ul

#meniu {
width:270px
}

...
nu prea incap in el 5 div-uri unul langa altul (float: left) si de 150px

.buton {
		 width:150 px;
		 float: left;
....
	 }

la momentul asta nu au 150px pt ca este o greseala si latimea nu este aplicata,cel putin asa vad eu in Firefox
~~width:150 px;~~

corect

width:150px;

si aici sunt traduse pe dos

width:1000px; /*inaltimea pagini*/
height: 1000px; /*latimea pagini*/

in rest,iti apreciez munca,numai bine!

Edited by mr_api, 16 July 2014 - 11:48.

Back to top

#7
LucianMihai13

Posted 28 July 2014 - 16:01

Junior Member

Grup: Members
Posts: 43
Înscris: 09.06.2014

mr_api, on 16 iulie 2014 - 11:45, said:

nu cumva sunt cateva greseli,daca ai div-ul

#meniu {
width:270px
}

...
nu prea incap in el 5 div-uri unul langa altul (float: left) si de 150px

.buton {
		 width:150 px;
		 float: left;
....
	 }

la momentul asta nu au 150px pt ca este o greseala si latimea nu este aplicata,cel putin asa vad eu in Firefox
~~width:150 px;~~

corect

width:150px;

si aici sunt traduse pe dos

width:1000px; /*inaltimea pagini*/
height: 1000px; /*latimea pagini*/

in rest,iti apreciez munca,numai bine!

Așa este, am avut greșeli și mă bucur că le-ai remarcat, mă gândeam că o să mai greșesc (sau o să vrea pagina intr-un stil diferit) din acest motiv am și lăsat acele indicații, în caz de ceva să poată să ajusteze potrivit.

O zi bună!

Back to top

Anunturi

Chirurgia spinală minim invazivă

Chirurgia spinală minim invazivă oferă pacienților oportunitatea unui tratament eficient, permițându-le o recuperare ultra rapidă și nu în ultimul rând minimizând leziunile induse chirurgical.

Echipa noastră utilizează un spectru larg de tehnici minim invazive, din care enumerăm câteva: endoscopia cu variantele ei (transnazală, transtoracică, transmusculară, etc), microscopul operator, abordurile trans tubulare și nu în ultimul rând infiltrațiile la toate nivelurile coloanei vertebrale.

www.neurohope.ro

cum sa centrez div-urile

#1 chaosed Posted 02 April 2014 - 15:50

#2 mishkulake Posted 02 April 2014 - 15:52

#3 genericuser01 Posted 02 April 2014 - 16:21

#4 MikeD Posted 02 April 2014 - 16:39

#5 LucianMihai13 Posted 14 July 2014 - 18:33

#6 mr_api Posted 16 July 2014 - 11:45

#7 LucianMihai13 Posted 28 July 2014 - 16:01

Anunturi

▶ 0 user(s) are reading this topic

Sign In

#1
chaosed

Posted 02 April 2014 - 15:50

#2
mishkulake

Posted 02 April 2014 - 15:52

#3
genericuser01

Posted 02 April 2014 - 16:21

#4
MikeD

Posted 02 April 2014 - 16:39

#5
LucianMihai13

Posted 14 July 2014 - 18:33

#6
mr_api

Posted 16 July 2014 - 11:45

#7
LucianMihai13

Posted 28 July 2014 - 16:01