position css par rapport à l'image

J'essaie d'aligner un texte et une zone de texte pour l'envoyer par-dessus une image à un endroit précis. Je veux que la position soit fixe, quelle que soit la taille de l'écran. Voici mon code html:position css par rapport à l'image

<html> 
<head> 
<style type="text/css"> 
#container { 
    background-color:blue; 
} 
#content { 
    background: url('images/orange.jpg') no-repeat center top; 
} 
#c_main { 
    color: yellow; 
} 
#c_email { 
    position:absolute; 
    top:200px; 
    left:410px; 
    color: #FFFFFF; 
    font-size: 15px; 
} 
#c_emailbox1 { 
    position:absolute; 
    top:200px; 
    left:480px; 
} 
#c_emailbox2 { 
    position:absolute; 
    top:200px; 
    left:620px; 
    color: white; 
    font-size: 12px; 
} 
input { 
    border:0; 
} 
.email_textbox1 { 
    width:130px; 
    background-image:url('images/text_bg.jpg'); 
    background-repeat:no-repeat; 
} 
.email_textbox2 { 
    color: #FFFFFF; 
    font-size: 11px; 
    width:130px; 
    background-image:url('images/text_bg.jpg'); 
    background-repeat:no-repeat; 
} 
</style> 
</head> 
<body> 
    <div id="container"> 
    <div id="content" style="height:1000px;left:0px;border:1px solid red;position:relative" > 
     <div style="height:100px;width:200px;border:1px solid red;position:absolute;top:250px;left:0px"> 
     <h4> CREATE A USERNAME AND PASSWORD </h4> 
     </div> 
    <div id="c_email"> 
     Email 
    </div> 
    <div id="c_emailbox1"> 
     <input type="textbox" id="email1" border="0" class="email_textbox1"> 
    </div> 
    <div id="c_emailbox2"> 
     <input type="text" id ="email" value="Confirm Email Address" class="email_textbox2" onfocus="if 
(this.value==this.defaultValue) this.value='';"> 
    </div> 
    </div> 
</div> 
</body> 
</html>

Je n'arrive pas à l'aligner par rapport à l'image. Le texte et la zone de texte sont égarés lorsqu'ils sont affichés sur un grand écran ou en cas de zoom avant ou arrière. Suggestion s'il vous plaît.

Source

2010-10-26 Scorpion King

si vous pouvez formater le code HTML correctement, je peux résoudre le problème. – kobe

Je ne pouvais pas faire ça ... c'est pourquoi j'ai supprimé le

Il suffit de mettre en retrait le code avec 4 espaces (ou sélectionnez le code et cliquez sur le bouton 1010) – some

Voir mon exemple de code. Cela fonctionne. Modifier la hauteur de div parent, l'enfant reste toujours en bas:

<div style="height:300px;border:1px solid red;position:relative"> 

    <div style="height:100px;width:20px;border:1px solid red;position:absolute;bottom:0px"> 
    </div> 

</div>

Source

2010-10-26 02:40:25 kobe

hey gov, quand vous zoomez et dézoomez ... pouvez-vous voir le texte déplacé. Je vois cela avec le code que vous avez fourni. Je veux que ce soit relatif à l'image1.jpg que j'utilise ... cela semble être relatif à la page web complète. –

avez-vous votre copie de travail de code anwhere? – kobe

vous voulez dire un lien direct? Si oui, je ne l'ai pas maintenant. –

Si vous les souhaitez toujours en haut de la zone de texte. Faites en sorte que le contrôle parent soit relatif. La boîte ou quoi que ce soit que vous voulez maintenir une distance constante rendent position absolue

.Container { 
position:relative 

} 

.child{ 
position:absolute 
bottom:0px; // how much u wants to maintain..from the element 
}

Source

2010-10-26 02:31:42 kobe

J'ai essayé ceci ... j'ai oublié de mettre à jour le code mais ça n'a pas fonctionné. il montre toujours la même manière –

pouvez-vous s'il vous plaît poster votre html complet, et ajouter quatre espaces blancs tout en mettant à jour, il formatera correctement.Il devrait très simple.Si vous pouvez mettre à jour le html, nous pouvons facilement résoudre le problème – kobe

Ceci est mon code complet. Je l'essaye sur la machine locale mais ne l'obtiens pas pour se positionner absolument. –

position css par rapport à l'image

Répondre

Questions connexes