ligne de bordure pleine largeur et le logo transparent passe

Je pensais que ce serait le meilleur en ajoutant une image de ce que je suis en train de faire ici. Ce dont j'ai besoin est d'avoir une ligne (juste une chose visuelle pour les utilisateurs) pour séparer div diviseur et contenu div mais en même temps le logo devrait être assis directement sur cette ligne.ligne de bordure pleine largeur et le logo transparent passe

Lorsque j'ajoute border-bottom: 5px solid #ff0000; à header_wrap alors évidemment la ligne devient visible en logo transparent donc on dirait que le logo est trop doublé! C'est le seul problème que j'ai.

Une façon de faire ce dont j'ai besoin?

Arrière-plan du logo DOIT ÊTRE transparent car l'en-tête et le corps de la page auront des images en arrière-plan.

Merci à l'avance

the result I need is this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <style> 
     * 
     { 
      margin:0px; 
      padding:0px; 
     } 

     /*** HEADER *************************************************************/ 

     #header_wrap 
     { 
      float: left; 
      width: 100%; 
      height: 115px; 
      position:fixed; 
      top:0; 
      z-index:1; 
      border-bottom: 8px solid #e61923; 
     } 
     #header_centered_content 
     { 
      width: 850px; 
      height: 115px; 
      margin: 0 auto 0; 
      position: relative; 
     } 
     #logo 
     { 
      width: 229px; 
      height: 49px; 
      position: absolute; 
      left: 0px; 
      top: 76px; 
      background-image:url(images/logo-top.png); 
     } 

     /*** BODY *************************************************************/ 

     #body_wrap 
     { 
      float:left; 
      width:100%; 
      height:355px; 
      margin-top:150px; 
     } 

     #body_centered_content 
     { 
      width: 850px; 
      margin: 0 auto 0; 
      position: relative; 
     } 
    </style> 
</head> 

<body> 

    <div id="header_wrap"> 
     <div id="header_centered_content"> 
      <div id="logo"></div> 
     </div> 
    </div> 

    <div id="body_wrap"> 
     <div id="body_centered_content"> 
      A lot of TEXT !!! 
     </div> 
    </div> 


</body> 
</html>

Source

2013-01-18 BentCoder

publier votre logo et lien css image – Sowmya

Soit:

1: recréer le logo avec un fond blanc

2: mettre le logo dans un récipient avec un fond blanc , par exemple un autre div

3: si vous avez le logo en tant qu'image d'arrière-plan de la div, réglez également la couleur de fond sur blanc.

tout ce qui précède utiliser: "background-color: white;" ou couleur de fond: #ffffff; »

Source

2013-01-18 11:41:12

doit être transparente – BentCoder

Utilisez position:absolute pour placer le divs un sur l'autre

Et ajouter de la couleur d'arrière-plan en blanc à la div qui contient l'image du logo

HTML

<div id="header_wrap"> 
     <div id="header_centered_content"> 
      &nbsp; 
     </div> 
    <div class="logo"><img src="http://redframe.com/mediakit/horz/black_bg/Redframe_Logo_Black_100.png" /></div> 
    </div> 

    <div id="body_wrap"> 
     <div id="body_centered_content"> 
      A lot of TEXT !!! 
     </div> 
    </div>

CSS

#header_wrap{width:100%; position:relative; height:150px; border:green solid 1px} 
#header_centered_content{position:absolute; top:41%; border-bottom:5px solid #ff0000; height:5px; width:100%} 
.logo{position:absolute; top:38%; left:40%; background:#fff}

DEMO

Source

2013-01-18 11:50:01 Sowmya

Logo doit être transparent. L'en-tête et le corps principal ont leur propre image en arrière-plan. – BentCoder

Changer leur image bg couleur seulement au milieu est la seule solution maintenant – Sowmya

ligne de bordure pleine largeur et le logo transparent passe

Répondre

Questions connexes