Arama butonu
Bu konudaki kullanıcılar: 1 misafir, 1 mobil kullanıcı
6
Cevap
547
Tıklama
0
Öne Çıkarma
Web tasarımı öğrenmeye çalışıyorum.
C
8 yıl (56 mesaj)
Çavuş
Konu Sahibi

Nereden başlasam nasıl başlasam acaba yapabilir miyim şu siteyi başkasına yaptırsam daha iyi olur aslında gibi kendimle didişmelerim sonucunda kendim yapmaya karar verdim (Amaç öğrenmek paradan kaçmak değil) Firmam için bir internet sitesi yapmaya karar verdim. Öncelikle hangi programla yapayım ne yapayım gibi soruları sorup daha baştan vazgeçmek yerine kendim seçtim Dreamweaver ile şablon editleyerek hem kendi sitemi yapabilirim (Benden yüzlerce kat iyisini yapacakların olduğunun farkındayım.) Hemde az çok birşeyler öğrenirim diye düşündüm. Çünkü sonuçta birine bunu yaptırsam bile hiç bir şekilde düzenleme yapabilecek bilgiye ve beceriye sahip değilim.

Öncelikle bazı bilgiler vereyim.

Alan adı ve Barındırmayı godaddy den aldım.

cPanel ile Linux Barındırma

Edit yapacağım template drivepro

Olayı açıkladığıma göre bundan sonraki yardım isteklerimi resim ve yazıyla anlatmaya çalışacağım. Yani kısaca bu konu benim çalışmamı sizlerle beraber bitirerek aynı zamanda birşeyler öğrenmeme yardımcı olacak konuya hakim olmadığım için bazı terimlerti anlayamıyor ya da bilmiyor olmamı mazur görün...

Şimdiden yardımlarınız için teşekkür ederim.

DH forumlarında vakit geçirmekten keyif alıyor gibisin ancak giriş yapmadığını görüyoruz.

Üye olduğunda özel mesaj gönderebilir, beğendiğin konuları favorilerine ekleyip takibe alabilir ve daha önce gezdiğin konulara hızlıca erişebilirsin.

Üye Ol Şimdi Değil



C
8 yıl (56 mesaj)
Çavuş
Konu Sahibi

İlk sorumla başlayayım...
Aşağıdaki resimde olan şabonun saysını 4 yapmak istiyorum.

< Resime gitmek için tıklayın >

Orjinal html kodu :


<div class="row">
<div class="col-sm-4">
<div class="pricing-table blue">
<div class="inner">
<div class="pricing-table-price">
<div class="inner">
<span>$200</span>
</div> <!-- end .inner -->
</div> <!-- end .pricing-table-price -->
<div class="pricing-table-heading">
Basic<small>Monthly Fee</small>
</div> <!-- end .pricing-table-heading -->
<div class="pricing-table-features">
<ul class="list-unstyled">
<li>Free Form To Sign</li>
<li>2 Month Course</li>
<li>15 Video Classes</li>
<li>4 Hours Per Day</li>
<li>Weekly 2 Tests</li>
</ul>
</div> <!-- end .pricing-table-features -->
<div class="pricing-table-button">
<a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=133541440&url=" class="button white border" data-href="" class="button white border">Join Now</a>
</div> <!-- end .pricing-table-button -->
</div> <!-- end .inner -->
</div> <!-- end .pricing-table -->
</div> <!-- end .col-sm-4 -->
<div class="col-sm-4">
<div class="pricing-table yellow">
<div class="inner">
<div class="pricing-table-price">
<div class="inner">
<span>$350</span>
</div> <!-- end .inner -->
</div> <!-- end .pricing-table-price -->
<div class="pricing-table-heading">
Standard<small>Monthly Fee</small>
</div> <!-- end .pricing-table-heading -->
<div class="pricing-table-features">
<ul class="list-unstyled">
<li>Free Form To Sign</li>
<li>3 Month Course</li>
<li>25 Video Classes</li>
<li>6 Hours Per Day</li>
<li>Weekly 2 Tests</li>
</ul>
</div> <!-- end .pricing-table-features -->
<div class="pricing-table-button">
<a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=133541440&url=" class="button dark" data-href="" class="button dark">Join Now</a>
</div> <!-- end .pricing-table-button -->
</div> <!-- end .inner -->
</div> <!-- end .pricing-table -->
</div> <!-- end .col-sm-4 -->
<div class="col-sm-4">
<div class="pricing-table dark">
<div class="inner">
<div class="pricing-table-price">
<div class="inner">
<span>$400</span>
</div> <!-- end .inner -->
</div> <!-- end .pricing-table-price -->
<div class="pricing-table-heading">
Unlimited<small>Monthly Fee</small>
</div> <!-- end .pricing-table-heading -->
<div class="pricing-table-features">
<ul class="list-unstyled">
<li>Free Form To Sign</li>
<li>5 Month Course</li>
<li>35 Video Classes</li>
<li>6 Hours Per Day</li>
<li>Weekly 3 Tests</li>
</ul>
</div> <!-- end .pricing-table-features -->
<div class="pricing-table-button">
<a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=133541440&url=" class="button white border" data-href="" class="button white border">Join Now</a>
</div> <!-- end .pricing-table-button -->
</div> <!-- end .inner -->
</div> <!-- end .pricing-table -->
</div> <!-- end .col-sm-4 -->
</div> <!-- end .row -->



Amacım 1 sutun daha ekleyip 4 sutunu aynı sırada yapmak yada bir alt satıra indirip ortadakinin altına getirmek.

Eklediğim html koduyla beraber son hali
				<div class="row">
<div class="col-sm-4">
<div class="pricing-table blue">
<div class="inner">
<div class="pricing-table-price">
<div class="inner">
<span>$200</span>
</div> <!-- end .inner -->
</div> <!-- end .pricing-table-price -->
<div class="pricing-table-heading">
Basic<small>Monthly Fee</small>
</div> <!-- end .pricing-table-heading -->
<div class="pricing-table-features">
<ul class="list-unstyled">
<li>Free Form To Sign</li>
<li>2 Month Course</li>
<li>15 Video Classes</li>
<li>4 Hours Per Day</li>
<li>Weekly 2 Tests</li>
</ul>
</div> <!-- end .pricing-table-features -->
<div class="pricing-table-button">
<a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=133541440&url=" class="button white border" data-href="" class="button white border">Join Now</a>
</div> <!-- end .pricing-table-button -->
</div> <!-- end .inner -->
</div> <!-- end .pricing-table -->
</div> <!-- end .col-sm-4 -->
<div class="col-sm-4">
<div class="pricing-table yellow">
<div class="inner">
<div class="pricing-table-price">
<div class="inner">
<span>$350</span>
</div> <!-- end .inner -->
</div> <!-- end .pricing-table-price -->
<div class="pricing-table-heading">
Standard<small>Monthly Fee</small>
</div> <!-- end .pricing-table-heading -->
<div class="pricing-table-features">
<ul class="list-unstyled">
<li>Free Form To Sign</li>
<li>3 Month Course</li>
<li>25 Video Classes</li>
<li>6 Hours Per Day</li>
<li>Weekly 2 Tests</li>
</ul>
</div> <!-- end .pricing-table-features -->
<div class="pricing-table-button">
<a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=133541440&url=" class="button dark" data-href="" class="button dark">Join Now</a>
</div> <!-- end .pricing-table-button -->
</div> <!-- end .inner -->
</div> <!-- end .pricing-table -->
</div> <!-- end .col-sm-4 -->
<div class="col-sm-4">
<div class="pricing-table dark">
<div class="inner">
<div class="pricing-table-price">
<div class="inner">
<span>$400</span>
</div> <!-- end .inner -->
</div> <!-- end .pricing-table-price -->
<div class="pricing-table-heading">
Unlimited<small>Monthly Fee</small>
</div> <!-- end .pricing-table-heading -->
<div class="pricing-table-features">
<ul class="list-unstyled">
<li>Free Form To Sign</li>
<li>5 Month Course</li>
<li>35 Video Classes</li>
<li>6 Hours Per Day</li>
<li>Weekly 3 Tests</li>
</ul>
</div> <!-- end .pricing-table-features -->
<div class="pricing-table-button">
<a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=133541440&url=" class="button white border" data-href="" class="button white border">Join Now</a>
</div> <!-- end .pricing-table-button -->
</div> <!-- end .inner -->
</div> <!-- end .pricing-table -->
</div> <!-- end .col-sm-4 -->

<div class="col-sm-4">
<div class="pricing-table yellow">
<div class="inner">
<div class="pricing-table-price">
<div class="inner">
<span>$350</span>
</div> <!-- end .inner -->
</div> <!-- end .pricing-table-price -->
<div class="pricing-table-heading">
Standard<small>Monthly Fee</small>
</div> <!-- end .pricing-table-heading -->
<div class="pricing-table-features">
<ul class="list-unstyled">
<li>Free Form To Sign</li>
<li>3 Month Course</li>
<li>25 Video Classes</li>
<li>6 Hours Per Day</li>
<li>Weekly 2 Tests</li>
</ul>
</div> <!-- end .pricing-table-features -->
<div class="pricing-table-button">
<a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=133541440&url=" class="button dark" data-href="" class="button dark">Join Now</a>
</div> <!-- end .pricing-table-button -->
</div> <!-- end .inner -->
</div> <!-- end .pricing-table -->
</div> <!-- end .col-sm-4 -->
</div> <!-- end .row -->

</div> <!-- end .container -->
</div> <!-- end .inner -->
</section> <!-- end .section -->



< Resime gitmek için tıklayın >

Görüldüğü gibi ne üstte 4. oldu ne de altta ortada ne yapmam gerekiyor? Nerede düzeltme yapmalıyım ?





< Bu mesaj bu kişi tarafından değiştirildi CryLieR -- 26 Haziran 2018; 3:23:12 >
Bu mesaja 1 cevap geldi.
J
8 yıl (2231 mesaj)
Binbaşı

Class Etiketi Olan "col-sm-4"ları "col-md-4 col-sm-6"e İle Değiştirmen Lazım. Kullandığın Template Bootstrap Framework Kullanmış. Bootstrap'ı Biraz İnceleyebilirsin.

Yani <div class="col-sm-4"> Olanları <div class="col-md-4 col-sm-6"> Olarak Değiştireceksin.

Burada Yaptığımız, Web'te O Box'lar 4'lü Gözükürken Tablet Görünümünde 2'li Olarak Alt Alta Gelecek.





< Bu mesaj bu kişi tarafından değiştirildi JacquesC -- 26 Haziran 2018; 8:34:39 >

< Bu ileti tablet sürüm kullanılarak atıldı >
Bu mesaja 1 cevap geldi.

Bu mesajda bahsedilenler: @CryLieR
C
8 yıl (56 mesaj)
Çavuş
Konu Sahibi

quote:

Orijinalden alıntı: JacquesC

Class Etiketi Olan "col-sm-4"ları "col-md-4 col-sm-6"e İle Değiştirmen Lazım. Kullandığın Template Bootstrap Framework Kullanmış. Bootstrap'ı Biraz İnceleyebilirsin.

Yani <div class="col-sm-4"> Olanları <div class="col-md-4 col-sm-6"> Olarak Değiştireceksin.

Burada Yaptığımız, Web'te O Box'lar 4'lü Gözükürken Tablet Görünümünde 2'li Olarak Alt Alta Gelecek.
Şuan sizin söylediğiniz değişikleri yaptım.


<div class="row">
<div class="col-md-4 col-sm-6">
<div class="pricing-table blue">
<div class="inner">
<div class="pricing-table-price">
<div class="inner">
<span>$200</span>
</div> <!-- end .inner -->
</div> <!-- end .pricing-table-price -->
<div class="pricing-table-heading">
Basic<small>Monthly Fee</small>
</div> <!-- end .pricing-table-heading -->
<div class="pricing-table-features">
<ul class="list-unstyled">
<li>Free Form To Sign</li>
<li>2 Month Course</li>
<li>15 Video Classes</li>
<li>4 Hours Per Day</li>
<li>Weekly 2 Tests</li>
</ul>
</div> <!-- end .pricing-table-features -->
<div class="pricing-table-button">
<a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=133550699&url=" class="button white border" data-href="" class="button white border">Join Now</a>
</div> <!-- end .pricing-table-button -->
</div> <!-- end .inner -->
</div> <!-- end .pricing-table -->
</div> <!-- end .col-md-4 .col-sm-6 -->
<div class="col-md-4 col-sm-6">
<div class="pricing-table yellow">
<div class="inner">
<div class="pricing-table-price">
<div class="inner">
<span>$350</span>
</div> <!-- end .inner -->
</div> <!-- end .pricing-table-price -->
<div class="pricing-table-heading">
Standard<small>Monthly Fee</small>
</div> <!-- end .pricing-table-heading -->
<div class="pricing-table-features">
<ul class="list-unstyled">
<li>Free Form To Sign</li>
<li>3 Month Course</li>
<li>25 Video Classes</li>
<li>6 Hours Per Day</li>
<li>Weekly 2 Tests</li>
</ul>
</div> <!-- end .pricing-table-features -->
<div class="pricing-table-button">
<a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=133550699&url=" class="button dark" data-href="" class="button dark">Join Now</a>
</div> <!-- end .pricing-table-button -->
</div> <!-- end .inner -->
</div> <!-- end .pricing-table -->
</div> <!-- end .col-md-4 .col-sm-6 -->
<div class="col-md-4 col-sm-6">
<div class="pricing-table dark">
<div class="inner">
<div class="pricing-table-price">
<div class="inner">
<span>$400</span>
</div> <!-- end .inner -->
</div> <!-- end .pricing-table-price -->
<div class="pricing-table-heading">
Unlimited<small>Monthly Fee</small>
</div> <!-- end .pricing-table-heading -->
<div class="pricing-table-features">
<ul class="list-unstyled">
<li>Free Form To Sign</li>
<li>5 Month Course</li>
<li>35 Video Classes</li>
<li>6 Hours Per Day</li>
<li>Weekly 3 Tests</li>
</ul>
</div> <!-- end .pricing-table-features -->
<div class="pricing-table-button">
<a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=133550699&url=" class="button white border" data-href="" class="button white border">Join Now</a>
</div> <!-- end .pricing-table-button -->
</div> <!-- end .inner -->
</div> <!-- end .pricing-table -->
</div> <!-- end .col-md-4 .col-sm-6 -->
<div class="col-md-4 col-sm-6">
<div class="pricing-table Mor">
<div class="inner">
<div class="pricing-table-price">
<div class="inner">
<span>$650</span>
</div> <!-- end .inner -->
</div> <!-- end .pricing-table-price -->
<div class="pricing-table-heading">
Standard<small>Monthly Fee</small>
</div> <!-- end .pricing-table-heading -->
<div class="pricing-table-features">
<ul class="list-unstyled">
<li>Free Form To Sign</li>
<li>3 Month Course</li>
<li>25 Video Classes</li>
<li>6 Hours Per Day</li>
<li>Weekly 2 Tests</li>
</ul>
</div> <!-- end .pricing-table-features -->
<div class="pricing-table-button">
<a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=133550699&url=" class="button dark" data-href="" class="button dark">Join Now</a>
</div> <!-- end .pricing-table-button -->
</div> <!-- end .inner -->
</div> <!-- end .pricing-table -->
</div> <!-- end .col-md-4 .col-sm-6 -->
</div> <!-- end .row -->

</div> <!-- end .container -->
</div> <!-- end .inner -->
</section> <!-- end .section -->



Yaptığım değişiklikler

 <div class="col-md-4 col-sm-6"> 


 </div> <!-- end .col-md-4 .col-sm-6 --> 


bitiş için farklı varyasyonlar denedim ama olmadı. Bir kaç değişiklik yaptım 4. şablonu mor yaptım.

< Resime gitmek için tıklayın >

Şuan elde ettiğim sonuç sayfayı yaklaştırınca şablon 2 şer görünüyor. Orada bir sıkıntı yok ama ekran olması gerektiği yakınlıkta olunca hala resimdeki gibi duruyor.
Benim isteğim ise ya mor olan stunun yukarı çıkması ya da siyahı aşağı indirmek normal uzaklıkta ya da moru sarının altına getirmek.





< Bu mesaj bu kişi tarafından değiştirildi CryLieR -- 26 Haziran 2018; 20:22:49 >
Bu mesaja 1 cevap geldi.
J
8 yıl (2231 mesaj)
Binbaşı

Pardon Dostum. Benim Hatam. "col-md-4" Olanları "col-md-3" Yapabilirmisin. Ayrıca Bootstrap Grid Yapısına Bir Göz Gezdirmende Fayda Var Bu Tür Column Düzenlemesi Yapacaksan.



< Bu ileti tablet sürüm kullanılarak atıldı >
Bu mesaja 1 cevap geldi.

Bu mesajda bahsedilenler: @CryLieR
C
8 yıl (56 mesaj)
Çavuş
Konu Sahibi

quote:

Orijinalden alıntı: JacquesC

Pardon Dostum. Benim Hatam. "col-md-4" Olanları "col-md-3" Yapabilirmisin. Ayrıca Bootstrap Grid Yapısına Bir Göz Gezdirmende Fayda Var Bu Tür Column Düzenlemesi Yapacaksan.
İşlerimin yoğunluğu dolayısıyla bakamadım şimdi bakacağım. Bootstrap bölümünü anlayamadım. Tamamen karma karışık bir alan nasıl bir düzenleme yapacağımı bilemediğim için onunla ilgili webde bişeyler bulup neler yapabilirim nasıl yapabilirime bakayım. Herşey armut piş ağzıma düş olmaz.



P
8 yıl (818 mesaj)
Teğmen

Takip ediyorum konunuzu hocam güzel bir sayfa olmasi dileğiyle



< Bu ileti mobil sürüm kullanılarak atıldı >

DH Mobil uygulaması ile devam edin. Mobil tarayıcınız ile mümkün olanların yanı sıra, birçok yeni ve faydalı özelliğe erişin. Gizle ve güncelleme çıkana kadar tekrar gösterme.