0

レイアウトが複雑なCSSやhtmlは苦手です。私は物事をすばやく修正できますが、本当の知識はありません。

私はこのデモを適応させようとしています: http://demo.marcofolio.net/bgimg_slideshow/私のウェブサイトのために。

問題: ロゴは div の背景画像であり、リンクではありません。

レイアウトを損なうことなく変更する方法を理解するのに十分ではありません。

修正を提供するか (5 分以上かからない場合)、または自分で解決できるようにヒントやリンクを提供していただけますか?

編集：これは最小コードのjsfiddleです

そして、ここにファイルがあります：

html :

<div id="header">
    <div id="headerimgs">
        <div id="headerimg1" class="headerimg"></div>
        <div id="headerimg2" class="headerimg"></div>
    </div>
    <div id="nav-outer">
        <div id="navigation">
            <div id="menu">
                <ul>
                    <li><a href="http://www.marcofolio.net/">Marcofolio</a></li>
                    <li><a href="http://www.twitter.com/marcofolio">Twitter</a></li>
                    <li><a href="http://feeds2.feedburner.com/marcofolio">RSS</a></li>
                    <li><a href="http://jquery.com/">jQuery</a></li>
                    <li><a href="http://en.wikipedia.org/wiki/Cascading_Style_Sheets">CSS</a></li>
                    <li><a href="http://buysellads.com/buy/detail/956">Advertisements</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

CSS :

ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{margin:0; padding:0;}

#header { height:600px; }

.headerimg { background-position: center top; background-repeat: no-repeat; width:100%; height:600px; position:absolute; }

#nav-outer { height:110px; padding-top:11px; position:relative; top:24px; background-image:url("http://demo.marcofolio.net/bgimg_slideshow/images/headerbg.png"); }

#navigation { height:100px; width:960px; margin:0 auto; background-image:url("http://demo.marcofolio.net/bgimg_slideshow/images/logo.png"); background-position:top left; background-repeat:no-repeat; }

#menu { position:relative; top:85px; }
#menu ul { list-style:none; }
#menu ul li { display:inline; font-variant:small-caps; font-size:12px; }
#menu ul li a { color:white; text-decoration:none; font-weight:bold; padding-right:20px; }
#menu ul li a:hover { text-decoration:underline; }
4

4 に答える 4

1

これが私がやった方法です。

まず、#navigationdiv から背景画像を削除します。

次に、の最初の子として次を追加します#navigation。

<a href="/" style="
    height: 80px; 
    width: 500px;  
    background-image: url('http://demo.marcofolio.net/bgimg_slideshow/images/logo.png');
    background-position: top left; 
    background-repeat: no-repeat;
    display: inline-block;
    position: absolute;
" alt="Image Description"></a>

したがって、Navigation div は次のようになります。

<!-- Remove all background attributes from #navigation in the CSS -->
<div id="navigation">
            <!-- Below is the new line!, makes your logo clickable! -->
            <a id="logo" href="" style="height: 80px; width: 500px; background-image: url('http://demo.marcofolio.net/bgimg_slideshow/images/logo.png'); background-position: top left; background-repeat: no-repeat;display: inline-block; position: absolute;"></a>
            <!-- Everything else below stays the same!... -->
            <div id="search">
                <form>
                    <input type="text" id="searchtxt">
                    <input type="submit" value="search" id="searchbtn">
                </form>
            </div>
            <div id="menu">
                <ul>
                    <li><a href="http://www.marcofolio.net/">Marcofolio</a></li>
                    <li><a href="http://www.twitter.com/marcofolio">Twitter</a></li>
                    <li><a href="http://feeds2.feedburner.com/marcofolio">RSS</a></li>
                    <li><a href="http://jquery.com/">jQuery</a></li>
                    <li><a href="http://en.wikipedia.org/wiki/Cascading_Style_Sheets">CSS</a></li>
                    <li><a href="http://buysellads.com/buy/detail/956">Advertisements</a>
                </li></ul>
            </div>
        </div>

基本的に<a href>、背景画像を持つ を作成します (すべてa href'sクリック可能です)。背景画像を に割り当てるときは、ブロック レベル要素としてレンダリングされるように<a href>を設定する必要があります。display:blockこの場合、ドキュメント フローから完全に切り離し、他の要素の邪魔にならないように配置します。

これを行うにはもっと良い方法がありますが、おそらくコードの一部を書き直す必要があります (それほど難しくはありませんが、HTML と CSS のアマチュア スキルが必要です)。

お役に立てれば！

于 2013-01-02T17:11:17.997 に答える
1

追加する必要があります

    <div id="logo">
        <a href="#">
            <img src="images/logo.png" alt="" />
        </a>
    </div>

<div id="#navigation"> へ、<div id="search"> の直前

それで：

1) ロゴを左にフロートさせる必要があります

    #logo{
         float: left;
    }

2)上を削除: 85px; #menu からclear: both;を追加します。

3) 背景画像を削除: url("../images/logo.png"); #ナビ から

このようにして、クリック可能なイメージ ロゴが作成されます。:)

説明：

  • #search が右にフロートしているため、ロゴを左にフロートします。

  • 上を削除します: 85px; これは、現在画像で埋められている空のスペースを補うためであり、clear: を追加すると、フロートがクリアされ、メニューが元の位置に戻るためです。

于 2013-01-02T17:13:48.303 に答える
1

あなたが提供したリンクでいくつかのライブ編集を行いました。これがあなたが達成したいことだと思います。

あなたのフィドルに基づいたDemoがあります。

HTML

<div id="navigation">
  <h1 id="logo"><a href="/">My Website!</a><br />
    <span>loving jQuery and CSS</span>
  </h1>
...

CSS

#navigation {
    position: relative;
}

#logo {
    position: absolute;
    top: 0;
    left: 0;
}
#logo a {
    color: #fff;
    text-decoration: none;
    font-size: 32px;
}
#logo span {
    font-size:20px;
    color:#48bdee;
    margin-left:50px;
}
于 2013-01-02T17:09:45.380 に答える