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: 423
Î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

Neurochirurgie minim invazivă

"Primum non nocere" este ideea ce a deschis drumul medicinei spre minim invaziv.

Avansul tehnologic extraordinar din ultimele decenii a permis dezvoltarea tuturor domeniilor medicinei. Microscopul operator, neuronavigația, tehnicile anestezice avansate permit intervenții chirurgicale tot mai precise, tot mai sigure. Neurochirurgia minim invazivă, sau prin "gaura cheii", oferă pacienților posibilitatea de a se opera cu riscuri minime, fie ele neurologice, infecțioase, medicale sau estetice.

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