Böyle bir tasarım nasıl yapılır

02-09-2014, 16:53:42

Kimlik doğrulama veya yönetimden onay bekliyor.

Şimdi şu fotoğrafdaki gibi bişey hazırlamaya çalışıyorum ama css yeni başladım fotograftaki gibi alt alta 3 menü olacak içlerinde sırasıyla sayaç-facebook-twitter iconları ve sonuncusunda simgeler olucak gerisi yazıdıgım gibi bunları nasıl yapabilirim ?

02-09-2014, 17:02:41

#2

CebR

Kimlik doğrulama veya yönetimden onay bekliyor.

ps ile yaparsın sonra parçalarsın html ve css ile de web e dökersin

02-09-2014, 17:04:37

#3

valtor

CebR adlı üyeden alıntı: mesajı görüntüle

ps ile yaparsın sonra parçalarsın html ve css ile de web e dökersin

Hocam onu bılıyorumda şimd o divleri css ile nasıl alt alta getiricem orta swf yerini nasıl tam ortaya ve videoyu öyle saga getirecegimi soruyorum

02-09-2014, 17:23:44

#4

Maqro

HTML & CSS biliyor musun veya öğrenmek istiyor musun?

02-09-2014, 17:32:59

#5

valtor

Maqro adlı üyeden alıntı: mesajı görüntüle

HTML & CSS biliyor musun veya öğrenmek istiyor musun?

Html css biliyorum ancak mantıgını kuramadım örnek verirseniz yazaarım

02-09-2014, 19:03:51

#6

blazeirs

öncelikle bir container belirlersiniz, bu tüm tasarımın aynı çizgide kalmasını sağlar, mevcut ekran çözünürlüklerine göre bu boyutları araştırabilirsiniz.

örnek;

.container {
 width:1170px;/*burada yüzde değer de kullabilirsiniz width:80%; gibi*/
}

sonrasında bunun içine parçalama yapabilirsiniz

.solmenu{
 width:250px;/*burada da yüzde değerler de kullabilirsiniz width:35%; gibi*/
 display:inline-block;
 float:left;
position:relative;
}
.ortaalan {
width:670px; /*yüzde değer vs.*/
display:inline-block;
float:left;
position:relative;
}
.sagmenu{
width:250px;/*yüzde değer*/
float:left;
display:inline-block;
position:relative;
}

html görüntüsü de şu şekilde olacak;

<div class="container">
<div class="solmenu">
sol menü içeriği
</div>
<div class=ortaalan>
ortaalan
</div>
<div class="sagmenu">
sağ menü içeriği
</div>
</div>

umarım yardımcı olabildim.

demo: http://jsfiddle.net/t8oL5x6v/

02-09-2014, 21:03:40

#7

valtor

blazeirs adlı üyeden alıntı: mesajı görüntüle

öncelikle bir container belirlersiniz, bu tüm tasarımın aynı çizgide kalmasını sağlar, mevcut ekran çözünürlüklerine göre bu boyutları araştırabilirsiniz.

örnek;

.container {
 width:1170px;/*burada yüzde değer de kullabilirsiniz width:80%; gibi*/
}

sonrasında bunun içine parçalama yapabilirsiniz

.solmenu{
 width:250px;/*burada da yüzde değerler de kullabilirsiniz width:35%; gibi*/
 display:inline-block;
 float:left;
position:relative;
}
.ortaalan {
width:670px; /*yüzde değer vs.*/
display:inline-block;
float:left;
position:relative;
}
.sagmenu{
width:250px;/*yüzde değer*/
float:left;
display:inline-block;
position:relative;
}

html görüntüsü de şu şekilde olacak;

<div class="container">
<div class="solmenu">
sol menü içeriği
</div>
<div class=ortaalan>
ortaalan
</div>
<div class="sagmenu">
sağ menü içeriği
</div>
</div>

umarım yardımcı olabildim.

demo: http://jsfiddle.net/t8oL5x6v/

saolun hocam,bu container ne işe yarıyor acaba ? yani ne için onu css olarak yazdınız ?

03-09-2014, 02:15:13

#8

upnet

Kimlik doğrulama veya yönetimden onay bekliyor.

Youtube de mantıgını kavrayabileceginiz ders videoları mevcut çok daha iyi anlayabilirsiniz

03-09-2014, 02:17:47

#9

GrkmDlk

Bence Bootstrap kullanın, ben size Bootstrap konusunda bilgi veririm, sanırım Bootstrap grid sistem işinizi görebilir.