2011-01-11 5 views
0

私は、会社のロゴの一部がヘッダー要素の上にあり、その一部がヘッダー要素の上にあるPSDデザインを使用しています。ロゴの一部が上端を超えています。CSSのヘルプ - 要素内の画像を上端より大きくする

このようなもの:http://img193.imageshack.us/img193/5589/headerrc.png、塗りつぶされた四角は、境界線を超える必要のあるロゴです。

私は、最もアクセスしやすい方法でこれを行う最良の方法が何であるか疑問に思っています。イメージとしてすべてをスライスすることができますが、HTML要素を使用してディスプレイを構築したいと考えています。

事前に乾杯。

+0

あなたはいくつかのコードを提供することができますか? – Trufa

+0

境界線は実際のhtml境界線か、それとも背景画像ですか?主に画像のモックアップに非正方形のコーナーがあるために尋ねる – Adrian

答えて

1

あなたはあなたのhtmlセットアップを全く説明していないので、私は非常に広範にしか提案できません。

margin-top: -30px; 

代わり:

position: relative; 
top: -30px; 
1

あなただけの最高のロゴを押して、あなたのCSS内ネガティブマージンを使用することができます:あなたは絶対にそれを配置し、直接座標を設定し、まだあなたがする必要がある場合、それが中心に保つことができる

#logo { margin-top: -20px; } 
0

。ここに簡単な例があります:

 
    #header { 
     margin-top: 30px; 
     width: 100%; 
     height: 100px; 
     position: relative; 
    } 

    #logo { 
     left: 50%; 
     margin-left: 100px; 
     top: 10px; 
     height: 50px; 
     width: 50px; 
     position: absolute; 
    } 

余白を左に設定すると、中央からの距離を置くことができます。 #logoの 'top'が#headerの 'margin-top'よりも小さい場合、ヘッダーの上に表示されます。

関連する問題