Ufak bir yardım. Backround

29-11-2019, 13:32:06

Merhaba,

Uzun bir aradan sonra kendi tasarladığım arayüzü html ve css'e döküyorum yarısına kadar geldim ama ufak bir problemim var. Bir bölümde ekranı full kaplamasını istiyorum ama ne yazıkki yapamadım araştırdım ettim ama bir şekilde bulamadım. Ufak bir yardım edecek hocam varsa teşekkür ederim şimdiden.

Düzeltilemsini rica ettiğim yer: "ABOUT AGANCY " kısmı arka plana verdiğim renk komple şerit olarak kaplasın istiyorum.
Site Linki : TIKLAYINIZ

Site mobil uyumlu değildir o yüzden maalesef mobilden açmanızı tavsiye etmem

29-11-2019, 13:37:47

#2

Shitric

Bootstrap kullanıyorsanız fluid container içerisinde ve w-100 classına sahip olması gerek. Framework kullanmıyorsanız width: 100%; çok basit bir şekilde işinizi görecektir.

29-11-2019, 13:56:15

#3

rws

bu yapı ile olmaz. her bölümü ayrı bir section a ayırıp öyle kodlamanız lazım, full arkaplan içinde o sectiona atama yapmanız lazım.

örnek

<header>
  <div class="row">
    <div class="container"></div>
  </div>
</header>
<section class="hero">
  <div class="row">
    <div class="container"></div>
  </div>
</section>
<section class="about">
  <div class="row">
    <div class="container"></div>
  </div>
</section>
<section class="skill">
  <div class="row">
    <div class="container"></div>
  </div>
</section>
<section class="service">
  <div class="row">
    <div class="container"></div>
  </div>
</section>
<section class="agancy">
  <div class="row">
    <div class="container"></div>
  </div>
</section>
<footer>
  <div class="row">
    <div class="container"></div>
  </div>
</footer>

29-11-2019, 14:14:59

#4

basricetinkaya

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

bu yapı ile olmaz. her bölümü ayrı bir section a ayırıp öyle kodlamanız lazım, full arkaplan içinde o sectiona atama yapmanız lazım.

örnek

<header>
<div class="row">
<div class="container"></div>
</div>
</header>
<section class="hero">
<div class="row">
<div class="container"></div>
</div>
</section>
<section class="about">
<div class="row">
<div class="container"></div>
</div>
</section>
<section class="skill">
<div class="row">
<div class="container"></div>
</div>
</section>
<section class="service">
<div class="row">
<div class="container"></div>
</div>
</section>
<section class="agancy">
<div class="row">
<div class="container"></div>
</div>
</section>
<footer>
<div class="row">
<div class="container"></div>
</div>
</footer>

     <section class="skill">
     <div class="row">
         <div class="container"></div>
      </div>
   </section>

col-sm-12 tarzı mobil uyumluluk için container'a mı yoksa row'a mı tanımlamam gerekiyor. Yoksa container'in içerisine yeni bir div mi oluşturmalıyım? Css tarafında section'a mı direk olarak kodları mı yazmam daha mantıklı olur?

29-11-2019, 15:59:37

#5

rws

bootstrap için: https://getbootstrap.com/docs/4.1/layout/grid/

col- kısmını row içinde kullanmalısınız (row içinde kesinlikle kullanılmalı. col-md-12, col-sm-12 gibi )

<div class="row">
  <div class="col-sm-8"> 8 birim </div>
  <div class="col-sm-4"> 4 birim </div>
</div>

container kullanacaksanız (ortalama yapmak için kullanılır):

<section class="skill">
  <div class="container ">
    <div class="row">
      <div class="col-sm-8"> 8 birim </div>
      <div class="col-sm-4"> 4 birim </div>
    </div>
  </div>
</section>

örnek row

<div class="col-sm-8">
  <div class="row">
    <div class="col-sm-8"> 8 birim </div>
    <div class="col-sm-4"> 4 birim </div>
  </div>
</div>

örnek row

<div class="box">
  <div class="row">
    <div class="col-sm-3"> 3 birim </div>
    <div class="col-sm-9"> 9 birim </div>
  </div>
</div>

30-11-2019, 11:15:25

#6

basricetinkaya

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

bootstrap için: https://getbootstrap.com/docs/4.1/layout/grid/

col- kısmını row içinde kullanmalısınız (row içinde kesinlikle kullanılmalı. col-md-12, col-sm-12 gibi )

<div class="row">
  <div class="col-sm-8"> 8 birim </div>
  <div class="col-sm-4"> 4 birim </div>
</div>

container kullanacaksanız (ortalama yapmak için kullanılır):

<section class="skill">
  <div class="container ">
    <div class="row">
      <div class="col-sm-8"> 8 birim </div>
      <div class="col-sm-4"> 4 birim </div>
    </div>
  </div>
</section>

örnek row

<div class="col-sm-8">
  <div class="row">
    <div class="col-sm-8"> 8 birim </div>
    <div class="col-sm-4"> 4 birim </div>
  </div>
</div>

örnek row

<div class="box">
  <div class="row">
    <div class="col-sm-3"> 3 birim </div>
    <div class="col-sm-9"> 9 birim </div>
  </div>
</div>

Teşekkür ederim