0

初めてのウェブサイト/ポートフォリオhttp://patrykponichtera.com/を構築していますが、解決できない問題に遭遇しました

私のウェブサイトにアクセスして一番下をスクロールすると、世界地図の画像が含まれていることがわかります。背景画像が切り取られ、下が白くなっていることがわかります。問題の原因はfloat:right;世界ですマップ、削除するfloat:right;と正常に動作します

また、マップと下部の間には大きなギャップがありますが、これは望ましくありません。これはtop:-100px;、サークル プロファイル イメージにtop:-230px;適用された と情報 div に適用された が原因です。

どうすればこれらの問題を解決できますか?

4

1 に答える 1

0

cssをこれに変更するとどうなりますか？

#world-map {
position: absolute;
margin-right: 30px;
width: 50%;
height: auto;
right: 0;
bottom:-5px;
}

#content {
height: auto;
width: 100%;
background-color: #2f2f2f;
background-image: url('images/asfalt.png');
background-repeat: repeat;
position: relative;

}


 <div id="world-map"><img alt="Worldmap" src="images/dotted-worldmap.svg"></div>

動作中のhtmlコード...

<div id="content">

    <div id="profile">
        <img id="profile-image" src="images/profile_pic.png">
    </div>

    <div id="info">
        <div id="title-wrapper">
            <h1 id="patryk-title" class="main-title">Patryk </h1> <h1 id="ponichtera-title" class="main-title">Ponichtera</h1>
        </div>

        <div id="profession">
            <div id="skew-line-1" class="skew-line"></div>
            <div id="skew-line-2" class="skew-line"></div>
            <div id="skew-line-3" class="skew-line"></div>
            <div id="profession-content1" class="skew-line">
                <h3 class="skew-text">Graphic Designer</h3>
            </div>
            <div id="profession-content2" class="skew-line">
                <h3 class="skew-text">Android Developer</h3>
            </div>
        </div>
        <div id="xp-years">
            <div id="skew-line-3" class="skew-line"></div>
            <div id="skew-line-4" class="skew-line"></div>
            <div id="skew-line-5" class="skew-line"></div>
            <div id="xp-years-content" class="skew-line">
                <h3 class="skew-text">5 years xp in graphics</h3>
            </div>

        </div>

        <div id="biography">
            <p class="bio">My name is Patryk Ponichtera, I was born in Łomża, Poland in June 1990.</p><p>
            </p><p class="bio">I'm a self taught graphic designer and Android developer.</p><p>
            </p><p class="bio">I've been working in graphics for 5 years,  in both 3D and 2D.</p><p>
            </p><p class="bio">Games and movies were my main inspiration and motivation to learn graphic design.</p><p>
            </p><p class="bio">At the end of 2010 i've purchased my first android device, which led me to android app development, I've started by helping a friend write an app for his High School graduation exam.</p><p>
            </p><p class="bio">In August 2012 I've released my first app Double Counter to the Play Store, and in September 2012 I've released my second app Wakey.</p><p>

        </p></div>

    </div> <!-- #info -->

    <div id="world-map"><img alt="Worldmap" src="images/dotted-worldmap.svg"></div>

</div><!-- #content -->
于 2013-06-18T22:40:17.590 に答える