Forum PHP Romania - Discutii despre PHP, MySQL, Javascript, AJAX, etc • Vezi subiect

CSS box display

Vin Aug 17, 2012 11:53 am

TheAndrew Average Member

Mesaje: 51

Daca am mai multe boxuri de diferite dimensiuni/culori etc cum fac ca pe index sa le pun in partea dreapta ? sa le asez cum vreau eu ? de ex intr-un box (stanga) sa fie butoanele de login apoi pe partea dreapta ceva "notite" ?

Am facut login dar nu stiu cum sa aranjez in partea cealalta...

Vin Aug 17, 2012 11:59 am

hadyh Average Member

Mesaje: 118

sa spunem ca ai input-urile de login intr-un div si notice intr-un alt div
la primul ii pui float:left in css, la al doilea float:right; tot in css.

d

Ultima oară modificat de hadyh pe Vin Aug 17, 2012 12:06 pm, modificat de 2 ori în total.

Vin Aug 17, 2012 11:59 am

MihaiC

Senior Member

Mesaje: 1602
Localitate: Navodari

Cod: Selectaţi tot

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style>
.main { margin: 0 auto; width: 980px; }
.clear { clear:both; }
#content .col-1 { float:left;width:675px;margin-right:10px; }
#content .col-2 { float:left;width:280px; }
...
</style>
</head>
<body>
<div class="main">
   <div id="header">
      <!-- meniu -->
   </div>
   <div id="content">
      <div class="col-1">
         <!-- stanga -->
      </div>
      <div class="col-2">
         <!-- dreapta -->
      </div>
      <div class="clear"></div>
   </div>
   <div id="footer">
      <!-- subsol -->
   </div>
</div>
</body>
</html>

Apropo, ai gresit sectunea.

Internet Explorer – The Number one Browser For Downloading a Better Browser

Vin Aug 17, 2012 12:09 pm

TheAndrew Average Member

Mesaje: 51

hadyh scrie:

sa spunem ca ai input-urile de login intr-un div si notice intr-un alt div
la primul ii pui float:left in css, la al doilea float:right; tot in css.

d

dap am reusit, dar imi lasa spatiu gol desupra ... nu sunt pe aceeasi linie

(daca au dimensiuni diferite, sa fie si pe aceasi linie de sus pana jos...

)

Vin Aug 17, 2012 12:28 pm

TheAndrew Average Member

Mesaje: 51

MihaiC scrie:

Cod: Selectaţi tot

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style>
.main { margin: 0 auto; width: 980px; }
.clear { clear:both; }
#content .col-1 { float:left;width:675px;margin-right:10px; }
#content .col-2 { float:left;width:280px; }
...
</style>
</head>
<body>
<div class="main">
   <div id="header">
      <!-- meniu -->
   </div>
   <div id="content">
      <div class="col-1">
         <!-- stanga -->
      </div>
      <div class="col-2">
         <!-- dreapta -->
      </div>
      <div class="clear"></div>
   </div>
   <div id="footer">
      <!-- subsol -->
   </div>
</div>
</body>
</html>

Apropo, ai gresit sectunea.

prin codul asta ar trebui sa imi schimb eu tot codul si nu imi e la indemana cum arata... scz pt faza cu sectiunea

Vin Aug 17, 2012 1:16 pm

hadyh Average Member

Mesaje: 118

daca le stii dimensiunile apai pune la ambele vertical-align:top;

si padding-top:Xpx si le aliniezi

Vin Aug 17, 2012 1:27 pm

TheAndrew Average Member

Mesaje: 51

hadyh scrie:

daca le stii dimensiunile apai pune la ambele vertical-align:top;

si padding-top:Xpx si le aliniezi

nu merge....

Cod: Selectaţi tot


#box1 {
        margin: 20px;
        float: left;
   margin-bottom: 10px;
        margin-right:1188px;
   padding: 10px;
   background: #00E8E8;
   border-radius: 30px 30px 30px 30px;
   box-shadow: 6px 5px 5px 3px rgba(0,0,0,0.1);
}
#cap {
   margin-bottom: 20px;
        margin-right:0px;
   padding: 5px;
   background: #038A07;
   border-radius: 0px 0px 200px 0px;
   box-shadow: 0px 10px 0px 0px rgba(0,0,0,0.1);
}
#notite {
        float: right;
   margin-bottom: 10px;
   padding: 100px;
   background: #00E8E8;
   border-radius: 30px 30px 30px 30px;
   box-shadow: 6px 5px 5px 3px rgba(0,0,0,0.1);
}

Sâm Aug 18, 2012 9:06 am

keen Senior Member

Mesaje: 253
Localitate: Br?ila

Site web

nu ar fi mai bine sa pui partea de html si partea de css pe forum si noi sa ti le facem ?

Server Google

Dum Apr 14, 2013 12:55 am

Google Bot New Member

Mesaje: 1

Răspunde

8 mesaje • Pagina 1 din 1

Înapoi la PHP Incepători

Mergi la: