Responsive site nasıl ayarlanır?

Hsyn1111

Hsyn1111

Hectopat
Katılım
24 Aralık 2018
Mesajlar
185
Arkadaşlar selam. Responsive site denerken bir şeyi çözemedim ve sizlere danışmak istedim. Eklediğim resimdeki kısmı nasıl düzeltebilirim acaba? Araya krem rengi girmesini istemiyorum. Şimdiden teşekkürler.
Ekran görüntüsü 2022-08-10 013331.png
 
Son düzenleyen: Moderatör:
Hsyn1111 dedi:
Arkadaşlar selam. Responsive site denerken bir şeyi çözemedim ve sizlere danışmak istedim. Eklediğim resimdeki kısmı nasıl düzeltebilirim acaba? Araya krem rengi girmesini istemiyorum. Şimdiden teşekkürler.
Eki Görüntüle 1480296
Genişletmek için tıkla...

Tam anlayamadım siyahın altına mı girmesini istemiyorsunuz?

Tablo oluşturup renk ayarlamayı deneyebilirsiniz hem daha hoş gözükebilir.
 
Kodlarınızı paylaşırsanız daha iyi bir şekilde yardımcı olabiliriz. Ne istediğinizi de tam olarak belirtirseniz daha iyi olacaktır.
 
Sorunu şöyle çözebilirsin. Eğer arkaplan yani sarı olan kısıma padding vermediysen, resimin height değeri ile oynamadan bu sorunu çözebilirsin. Yani kısacası resimin yükseklik değeri ne ise arkaplanı da ona göre ayarlarsan bu işi çözebilirsin. Resimin height değeri ile oynarsan istediğini sonucu elde etmeyeceksin çünkü. Yani muhtemelen onu siyah kısıma birleştirmek istiyorsun. Yani footer dediğimiz alana.
 
CSS kodları bu şekilde. İstediğim şey tam olarak about us kısmının altında direkt footer olması araya krem rengi girmemesi.

CSS: 
* {

 Margin: 0;

 Padding: 0;

 Box-sizing: Border-box;

}

HTML {

 Font-size: 7px;

}

@Media screen and (Max-width: 700px) {

 HTML {

 Font-size: 10px;

 }

}

Body {

 Font-family: 'trocchi', serif;

 Font-size: 1.6RAM;

 Color: Black;

 Line-height: 1.5;

 Text-align: Center;

 Background-color: Bisque.

}

İmg {

 Width: 100%;

 Height: Auto;

}

A {

 Text-decoration: None;

 Color: Royalblue.

}

P {

 Padding: 1.6RAM 0;

}

Header {

 Height: 46RAM;

}

Clearfix: After {

 Content: "";

 Display: Block;

 Clear: Both;

 Background: Black;

}

Header. Bg-image {

 Position: Absolute;

 Background-image: url(image/bg.jpg);

 Background-size: Cover;

 Background-position: Center;

 Height: 46RAM;

 Width: 100%;

 Opacity: 0.5;

 Z-index: -1;

}

Header H1 {

 Padding: 12RAM;

 Padding-bottom: 0;

}

Btn {

 Display: İnline-block;

 Background: Bisque;

 Color: Saddlebrown;

 Border: 2px Solid saddlebrown;

 Padding: 1.6RAM 3.2RAM;

 Margin: 0.5RAM 0;

 Border-radius: 25px;

}

Btn: Hover {

 Background-color: Saddlebrown;

 Color: Bisque;

 Transition: All 0.2s;

}

#Section-a {

 Background-color: Navajowhite;

 Color: Saddlebrown;

 Padding: 3.2RAM 0;

 Border-top: 2px Solid saddlebrown;

 Border-bottom: 2px Solid saddlebrown;

}

#Section-b {

 Padding: 2RAM;

}

#Section-b ul {

 List-style: None;

}

#Section-bli {

 Background-color: Navajowhite;

 Margin-bottom: 1.6RAM;

}

Col-content {

 Padding: 1.5RAM;

}

#Section-C {

 Background-color: White;

 Padding: 5RAM;

 Color: Black.

}

#Section-D. Box {

 Padding: 5RAM;

}

#Section-D. Box: First-child {

 Background-color: Dimgrey;

 Margin-bottom: 1.6RAM;

}

Footer {

 Padding: 4RAM;

 Background: Black;

 Color: White;

}

Footer a {

 Color: Deepskyblue.

}

@Media screen and (min-width: 800px) {

 HTML {

 Font-size: 9px;

 }

}

@Media screen and (min-width: 1200px) {

 HTML {

 Font-size: 11px;

 }

 #Section-bli {

 Width: 28%;

 Margin: 1%;

 Display: İnline-block;

 }

}

Box {

 Width: 50%;

 Float: Left;

}
HTML: 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Site Test</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Trocchi&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"
        integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

<body>
    <header>
        <div class="bg-image"></div>
        <div class="content">
            <h1>Vincent Van GOGH<i class="fa-solid fa-paintbrush"></i></h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
            <a href="#" class="btn">Read More</a>
        </div>
    </header>
    <main>
        <section id="section-a">
            <div class="content">
                <h2>The Starry Night, June 1889. Museum of Modern Art, New York</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum, nemo.</p>
            </div>
        </section>
        <section id="section-b">
            <ul>
                <li>
                    <div class="col">
                        <img src="image/resim1.jpg" alt="The Starry Night">
                        <div class="col-content">
                            <h3 class="col-title">
                                Yıldızlı Gece
                            </h3>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="col">
                        <img src="image/resim2.jpg" alt="The Starry Night">
                        <div class="col-content">
                            <h3 class="col-title">
                                Yıldızlı Gece
                            </h3>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="col">
                        <img src="image/resim3.jpg" alt="The Starry Night">
                        <div class="col-content">
                            <h3 class="col-title">
                                Yıldızlı Gece
                            </h3>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                        </div>
                    </div>
                </li>

            </ul>




        </section>

        
    </main>
    <section id="section-c">
        <div class="alt">
            <h2><i class="fa-solid fa-circle-info"></i>İnformation</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, ipsa deleniti saepe dolores eaque
                at?</p>
        </div>
    </section>
    <section id="section-d" class="clearfix">
        <div class="box">
            <h2 class="content-title">
                <i class="fa-solid fa-address-card"></i>About Us
            </h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, dolores!</p>
            <p><i class="fa-brands fa-github"></i>Github.com/huso7</p>
        </div>

        <div class="box">
            <h2 class="content-title">
                <i class="fa-solid fa-phone"></i>Contact Us
            </h2>
            <p>Lorem ipsum dolor et consectetur a elit. Cupiditate odio incidunt voluptate veniam
                possimus libero? Et expliunt sed.</p>

            <p><i class="fa-brands fa-instagram"></i>www.İnstagram.com/hsyntznr</p>
        </div>
    </section>


    <footer>
        <div>Lorem, ipsum dolor.</div>
        <div>Created by <a href="#">hsyntznr</a> </div>
    </footer>
</body>

</html>

ad
Hsyn1111 dedi:
CSS kodları bu şekilde. İstediğim şey tam olarak about us kısmının altında direkt footer olması araya krem rengi girmemesi.

CSS: 
* {

 Margin: 0;

 Padding: 0;

 Box-sizing: Border-box;

}

HTML {

 Font-size: 7px;

}

@Media screen and (Max-width: 700px) {

 HTML {

 Font-size: 10px;

 }

}

Body {

 Font-family: 'trocchi', serif;

 Font-size: 1.6RAM;

 Color: Black;

 Line-height: 1.5;

 Text-align: Center;

 Background-color: Bisque.

}

İmg {

 Width: 100%;

 Height: Auto;

}

A {

 Text-decoration: None;

 Color: Royalblue.

}

P {

 Padding: 1.6RAM 0;

}

Header {

 Height: 46RAM;

}

Clearfix: After {

 Content: "";

 Display: Block;

 Clear: Both;

 Background: Black;

}

Header. Bg-image {

 Position: Absolute;

 Background-image: url(image/bg.jpg);

 Background-size: Cover;

 Background-position: Center;

 Height: 46RAM;

 Width: 100%;

 Opacity: 0.5;

 Z-index: -1;

}

Header H1 {

 Padding: 12RAM;

 Padding-bottom: 0;

}

Btn {

 Display: İnline-block;

 Background: Bisque;

 Color: Saddlebrown;

 Border: 2px Solid saddlebrown;

 Padding: 1.6RAM 3.2RAM;

 Margin: 0.5RAM 0;

 Border-radius: 25px;

}

Btn: Hover {

 Background-color: Saddlebrown;

 Color: Bisque;

 Transition: All 0.2s;

}

#Section-a {

 Background-color: Navajowhite;

 Color: Saddlebrown;

 Padding: 3.2RAM 0;

 Border-top: 2px Solid saddlebrown;

 Border-bottom: 2px Solid saddlebrown;

}

#Section-b {

 Padding: 2RAM;

}

#Section-b ul {

 List-style: None;

}

#Section-bli {

 Background-color: Navajowhite;

 Margin-bottom: 1.6RAM;

}

Col-content {

 Padding: 1.5RAM;

}

#Section-C {

 Background-color: White;

 Padding: 5RAM;

 Color: Black.

}

#Section-D. Box {

 Padding: 5RAM;

}

#Section-D. Box: First-child {

 Background-color: Dimgrey;

 Margin-bottom: 1.6RAM;

}

Footer {

 Padding: 4RAM;

 Background: Black;

 Color: White;

}

Footer a {

 Color: Deepskyblue.

}

@Media screen and (min-width: 800px) {

 HTML {

 Font-size: 9px;

 }

}

@Media screen and (min-width: 1200px) {

 HTML {

 Font-size: 11px;

 }

 #Section-bli {

 Width: 28%;

 Margin: 1%;

 Display: İnline-block;

 }

}

Box {

 Width: 50%;

 Float: Left;

}
HTML: 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Site Test</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Trocchi&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"
        integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

<body>
    <header>
        <div class="bg-image"></div>
        <div class="content">
            <h1>Vincent Van GOGH<i class="fa-solid fa-paintbrush"></i></h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
            <a href="#" class="btn">Read More</a>
        </div>
    </header>
    <main>
        <section id="section-a">
            <div class="content">
                <h2>The Starry Night, June 1889. Museum of Modern Art, New York</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum, nemo.</p>
            </div>
        </section>
        <section id="section-b">
            <ul>
                <li>
                    <div class="col">
                        <img src="image/resim1.jpg" alt="The Starry Night">
                        <div class="col-content">
                            <h3 class="col-title">
                                Yıldızlı Gece
                            </h3>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="col">
                        <img src="image/resim2.jpg" alt="The Starry Night">
                        <div class="col-content">
                            <h3 class="col-title">
                                Yıldızlı Gece
                            </h3>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="col">
                        <img src="image/resim3.jpg" alt="The Starry Night">
                        <div class="col-content">
                            <h3 class="col-title">
                                Yıldızlı Gece
                            </h3>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                        </div>
                    </div>
                </li>

            </ul>




        </section>

       
    </main>
    <section id="section-c">
        <div class="alt">
            <h2><i class="fa-solid fa-circle-info"></i>İnformation</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, ipsa deleniti saepe dolores eaque
                at?</p>
        </div>
    </section>
    <section id="section-d" class="clearfix">
        <div class="box">
            <h2 class="content-title">
                <i class="fa-solid fa-address-card"></i>About Us
            </h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, dolores!</p>
            <p><i class="fa-brands fa-github"></i>Github.com/huso7</p>
        </div>

        <div class="box">
            <h2 class="content-title">
                <i class="fa-solid fa-phone"></i>Contact Us
            </h2>
            <p>Lorem ipsum dolor et consectetur a elit. Cupiditate odio incidunt voluptate veniam
                possimus libero? Et expliunt sed.</p>

            <p><i class="fa-brands fa-instagram"></i>www.İnstagram.com/hsyntznr</p>
        </div>
    </section>


    <footer>
        <div>Lorem, ipsum dolor.</div>
        <div>Created by <a href="#">hsyntznr</a> </div>
    </footer>
</body>

</html>
Genişletmek için tıkla...
@Ecmel Yardımcı olur musunuz ? hocam.
 
Son düzenleme:
@Hsyn1111 attığınız CSS kodlarını otomatik düzenlemişsiniz bu yüzden kopyalayıp düzenlemek lazım ve resimler de mevcut değil, link değiller çünkü.

GitHub'da tüm dosyaları repoya yükleyip repo linki atarsanız oradan alabilirim direkt, daha kolay olur. Başka bir yere de host edebilirsiniz.
 

Benzer konular

impreizzers
Responsive nasıl ayarlanır?
Mesaj
4
Görüntüleme
204
221samet
221samet
C
Wix ile responsive tasarımlı site nasıl yapılır?
Mesaj
2
Görüntüleme
2B
Can_Coşkun01
C
TeknoEmir
Responsive site için Framework şart mı?
Mesaj
6
Görüntüleme
437
Jasanayaka
Jasanayaka
Yeniçocuk
Bir sitede Responsive olduğu nasıl anlaşılır?
Mesaj
3
Görüntüleme
607
ulas serin
ulas serin
Recep Yıldırım
Web sitesini responsive etmek
Mesaj
1
Görüntüleme
138
Mehmet Akif12
Mehmet Akif12

Yeni konular

Yeni mesajlar

Geri
Yukarı