HTML'de hazırlanan tasarım ASP.Net Core ile yüklenince uyuşmuyor

MNakruf · 17 Ekim 2024

Merhaba, ASP.Net Core kullanarak bir site yapıyorum. Bu siteyi hazır bir HTML'den aktarıyorum ama bir sorun yaşıyorum. Sitenin Index.cshtml sayfasında header kısmının altında bir resim var. O resim tam yatay oturmuyor ama HTML'de yatay duruyor (Aşağı da vereceğim görsellerden ne demek istediğimi anlayacaksınız.)

Ben bunu HTML'deki hâline nasıl çevirebilirim?

Olmasını istediğim:

ASP.Net'te oluşan:

İlgili bölümün kaynak kodu ve header:

HTML:

<section class="ipad-top-space-margin bg-dark-gray cover-background one-third-screen d-flex align-items-center" style="background-image: url(&quot;../images/page-title-about.jpg&quot;); margin-top: inherit;">
<div class="background-position-center-top h-100 w-100 position-absolute left-0px top-0" style="background-image: url('../images/vertical-line-bg-small.svg')"></div>
<div id="particles-style-01" class="h-100 position-absolute left-0px top-0 w-100" data-particle="true" data-particle-options="{&quot;particles&quot;: {&quot;number&quot;: {&quot;value&quot;: 12,&quot;density&quot;: {&quot;enable&quot;: true,&quot;value_area&quot;: 2000}},&quot;color&quot;: {&quot;value&quot;: [&quot;#d5d52b&quot;, &quot;#d5d52b&quot;, &quot;#d5d52b&quot;, &quot;#d5d52b&quot;, &quot;#d5d52b&quot;]},&quot;shape&quot;: {&quot;type&quot;: &quot;circle&quot;,&quot;stroke&quot;:{&quot;width&quot;:0,&quot;color&quot;:&quot;#000000&quot;}},&quot;opacity&quot;: {&quot;value&quot;: 1,&quot;random&quot;: false,&quot;anim&quot;: {&quot;enable&quot;: false,&quot;speed&quot;: 1,&quot;sync&quot;: false}},&quot;size&quot;: {&quot;value&quot;: 8,&quot;random&quot;: true,&quot;anim&quot;: {&quot;enable&quot;: false,&quot;sync&quot;: true}},&quot;line_linked&quot;:{&quot;enable&quot;:false,&quot;distance&quot;:0,&quot;color&quot;:&quot;#ffffff&quot;,&quot;opacity&quot;:1,&quot;width&quot;:1},&quot;move&quot;: {&quot;enable&quot;: true,&quot;speed&quot;:1,&quot;direction&quot;: &quot;right&quot;,&quot;random&quot;: false,&quot;straight&quot;: false}},&quot;interactivity&quot;: {&quot;detect_on&quot;: &quot;canvas&quot;,&quot;events&quot;: {&quot;onhover&quot;: {&quot;enable&quot;: false,&quot;mode&quot;: &quot;repulse&quot;},&quot;onclick&quot;: {&quot;enable&quot;: false,&quot;mode&quot;: &quot;push&quot;},&quot;resize&quot;: true}},&quot;retina_detect&quot;: false}"><canvas class="particles-js-canvas-el" width="1028" height="700" style="width: 100%; height: 100%;"></canvas></div>
<div class="opacity-light bg-dark-gray"></div>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-10 position-relative text-center appear anime-child anime-complete" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;opacity&quot;: [0, 1], &quot;translateX&quot;: [50, 0], &quot;staggervalue&quot;: 100, &quot;easing&quot;: &quot;easeOutQuad&quot; }">

<h1 class="page-title text-white w-100 lg-w-80 md-w-70 sm-w-100 fw-700 ls-minus-2px text-white primary-font mb-30px overflow-hidden mb-0 xl-fs-40 l-fs-70 fs-60" style=""></h1>


</div>
</div>
</div>
</section>

Header:

HTML:

    <header>
        <!-- start navigation -->
        <nav class="navbar navbar-expand-lg header-transparent bg-transparent disable-fixed" data-header-hover="dark">
            <div class="container-fluid">
                <div class="col-auto col-lg-2 me-lg-0 me-auto">
                    <a class="navbar-brand" href="#">
                        <img src="~/images/logo.svg" data-at2x="~/images/logo.svg" alt=""
                            class="default-logo" width="300px" height="" style="width:300px;">
                        <img src="~/images/logo.svg" data-at2x="~/images/logo.svg" alt=""
                            class="alt-logo" width="0" height="0">
                        <img src="~/images/logo.svg" data-at2x="~/images/logo.svg" alt=""
                            class="mobile-logo" width="0" height="0" style="width:200px !important;">
                    </a>
                </div>
                <div class="col-auto col-lg-3 text-end lg-pe-0">
                    <div class="header-icon">

                        <div class="header-push-button hamburger-push-button icon sm-pe-15px">
                            <div class="push-button">
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </nav>
        <!-- end navigation -->
        <!-- start hamburger menu -->
        <div class="push-menu hamburger-nav header-light hamburger-menu-half bg-white md-w-60 sm-w-100">
            <span class="close-menu text-dark-gray bg-white"><i class="fa-solid fa-xmark"></i></span>
            <div class="d-flex flex-column justify-content-center h-100 ps-18 pb-12 xxl-p-12 sm-p-20px">
                <div class="hamburger-menu menu-list-wrapper w-80 lg-w-100 lg-no-margin sm-mt-auto sm-mb-auto mCustomScrollbar _mCS_1"
                    data-scroll-options="{ &quot;theme&quot;: &quot;light&quot; }">
                    <div id="mCSB_1" class="mCustomScrollBox mCS-light mCSB_vertical mCSB_inside"
                        style="max-height: none;" tabindex="0">
                        <div id="mCSB_1_container" class="mCSB_container mCS_y_hidden mCS_no_scrollbar_y"
                            style="position:relative; top:0; left:0;" dir="ltr">
                            <div id="mCSB_1" class="mCustomScrollBox mCS-light mCSB_vertical mCSB_inside"
                                style="max-height: none;" tabindex="0">
                                <div id="mCSB_1_container" class="mCSB_container"
                                    style="position:relative; top:0; left:0;" dir="ltr">
                                    <ul class="menu-item-list fw-500 p-0">
                                    <li class="menu-item"><a href="~/Home/Index" class="inner-link nav-link">Homepage</a></li>
                                    <li class="menu-item"><a href="~/Home/OurGoals" class="inner-link nav-link">Our Goals</a></li>
                                    <li class="menu-item"><a href="~/Home/Sustainability" class="inner-link nav-link">Sustainability</a></li>
                                    <li class="menu-item ">
                                            <div class="accordion " id="accordion-style-01"
                                                data-active-icon="fa-angle-up" data-inactive-icon="fa-angle-down">
                                                <!-- start accordion item -->
                                                <div class="accordion-item  active-accordion">
                                                    <div class="accordion-header w-80">
                                                        <a href="#" data-bs-toggle="collapse"
                                                            data-bs-target="#accordion-style-01-01" aria-expanded="true"
                                                            data-bs-parent="#accordion-style-01">
                                                            <div
                                                                class="accordion-title position-relative  d-flex align-items-center pe-20px text-dark-gray   mb-0 nav-link">
                                                                Our Production Facilities<span><i
                                                                        class="fa-solid fa-angle-down icon-small"></i></span>
                                                            </div>
                                                        </a>
                                                    </div>
                                                    <div id="accordion-style-01-01" class="accordion-collapse collapse "
                                                        data-bs-parent="#accordion-style-01">
                                                        <div class="w-80 last-paragraph-no-margin fs-18">
                                                            <a asp-area="" asp-controller="Facilities" asp-action="" class="">Giyim</a><br>
                                                            <a asp-area="" asp-controller="Facilities" asp-action="" class="">Kıyafet</a>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!-- end accordion item -->

                                            </div>






                                        </li>
                                        <li class="menu-item"><a href="~/Home/HumanFocusedStudies" class="inner-link nav-link">Human-Focused Studies</a></li>
                                        <li class="menu-item "><a href="~/Home/Blog" class="inner-link nav-link">Blog</a> </li>

                                        <li class="menu-item "> <a href="#"
                                                class="btn btn-link hover-text-light btn-large text-lowercase text-base-color  d-lg-inline-block xl-mb-15px md-mx-auto"
                                                style="">
                                                <span>
                                                    <span class="btn-text fs-20 fw-500">2024 Sustainability
                                                        Report</span>

                                                    <span class="btn-icon fs-20"><i
                                                            class="fa-solid fa-download fs-14"></i></span>
                                                </span>
                                            </a>
                                        </li>



                                    </ul>
                                </div>
                                <div id="mCSB_1_scrollbar_vertical"
                                    class="mCSB_scrollTools mCSB_1_scrollbar mCS-light mCSB_scrollTools_vertical"
                                    style="display: none;">
                                    <div class="mCSB_draggerContainer">
                                        <div id="mCSB_1_dragger_vertical" class="mCSB_dragger"
                                            style="position: absolute; min-height: 48px; height: 0px; top: 0px; display: block; max-height: 326px;">
                                            <div class="mCSB_dragger_bar" style="line-height: 48px;"></div>
                                        </div>
                                        <div class="mCSB_draggerRail"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="mCSB_1_scrollbar_vertical"
                            class="mCSB_scrollTools mCSB_1_scrollbar mCS-light mCSB_scrollTools_vertical">
                            <div class="mCSB_draggerContainer">
                                <div id="mCSB_1_dragger_vertical" class="mCSB_dragger" style="position:absolute;">
                                    <div class="mCSB_dragger_bar"></div>
                                </div>
                                <div class="mCSB_draggerRail"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="w-90 xxl-w-100  d-lg-inline-block">
                    <div class="row row-cols-1 row-cols-xl-2 menu-address">
                        <div class="col">
                            <a href="">TR</a>

                        </div>

                    </div>
                </div>
            </div>
        </div>
        <!-- end hamburger menu -->
    </header>

Not: Header bölümü "_Layout.cshtml" dosyasında olup, oluşturulan sayfalara otomatik olarak ekler.

yunus · 17 Ekim 2024

Resmin olduğu Div öğresinin style kısmına aşağıdaki CSS kodlarını ekler misiniz?

CSS:

  width: 100%;
background-repeat: no-repeat;
background-size: cover;

Ek olarak Bootstrap paketini Aspnet'e entegre ettiniz mi?

İkinci tasarımda sanırsam Bootstrap kısa kodları geçersiz kalıyor. Bunlar olmadan tasarım tam olarak çalışamaz.

Bu kısım Header'da mevcut mu?

MNakruf · 17 Ekim 2024

yunus dedi:
Resmin olduğu Div öğresinin style kısmına aşağıdaki CSS kodlarını ekler misiniz?

CSS:

width: 100%; background-repeat: no-repeat; background-size: cover;

Ek olarak Bootstrap paketini Aspnet'e entegre ettiniz mi?

İkinci tasarımda sanırsam Bootstrap kısa kodları geçersiz kalıyor. Bunlar olmadan tasarım tam olarak çalışamaz.

Bu kısım Header'da mevcut mu?

Eki Görüntüle 91469

Kodlar iş yerinde kaldığı için yarına deneyeceğim. Bir şey olursa bildiririm hocam. Çok sağ olun.

Hocam merhaba tekrardan. Dediğiniz gibi Bootstrap bağlantılarını header bölümüne ekledim. Gönderdiğiniz CSS kodlarını da ekledim. İstediğim şey olmadı ama değerlerini değiştirdiğimde değişiklik gösteriyor. @yunus
Aşağıdaki görsel sizin verdiğiniz kodlarla son hâli:

HTML'de hazırlanan tasarım ASP.Net Core ile yüklenince uyuşmuyor

Detaylar

MNakruf

Yetkin

yunus

Üstün

MNakruf

Yetkin

Benzer konular

Yeni konular

Yeni mesajlar