image causant des problèmes d'alignement vertical

je la disposition div suivante:image causant des problèmes d'alignement vertical

Tout va bien quand je mets des éléments normaux de txt dans les deux le bleu et le div orange. Cependant, quand je place une image dans la div orange (qui est 31px), les éléments dans la div bleue sont réduits d'environ la moitié de la hauteur de la div bleue. (Info supplémentaire, en survolant le html pour le div orange dans firebug, il semble que seule la moitié de l'image est contenue à l'intérieur, même si à l'œil nu, il semble bien).

J'apprécierais toute aide, je suis encore un peu rouillé sur le modèle de boîte. Merci.

Source

2008-11-17 RekrowYnapmoc

Pourriez-vous poster le code HTML et CSS pour ce problème? –

Snarky remarque latérale: http://bancomicsans.com/home.html * S'il vous plaît * ne pas utiliser Comic Sans encore, encore plus quand il s'agit de conception web. Cette fellation est tellement ... :-) – Tomalak

lol, ce n'est pas le web design. C'est une maquette abstraite de msword des divs. – RekrowYnapmoc

Vous pouvez essayer de faire flotter l'image à gauche du texte. De cette façon, le texte sera assis à côté de l'image sans avoir besoin de positionnement. Par exemple:

<style> 
div { 
position: absolute; 
border: 1px solid blue; 
} 
div img { 
height: 31px; 
width: 50px; 
float: left; 
} 
</style> 

<div> 
    <img src="myImage.gif"> 
    <p>Lorem ipsum dolor sit amet...</p> 
</div>

Ajustez la mise en page en donnant votre conteneur div certains types de remplissage et/ou l'image d'une marge et vous devriez être en mesure d'obtenir exactement le look que vous êtes après. Bonne chance!

Source

2008-11-17 17:25:56

ah génial! Merci beaucoup. – RekrowYnapmoc

Je ne suis pas très bon avec les boîtes CSS, mais je pourrais ajouter: display: inline; au style d'image fixer le porblem? Et/ou ajouter une marge: 0px;
Oh, et c'est le rendu brwoser en mode Quirks, car ne pas le rendre en mode Quirks pourrait aussi résoudre certains problèmes.

Modifier
En mode quirks Je veux dire, est-ce que votre page a une déclaration DOCTYPE semblable à celui ci-dessous (bien que vous devriez hors utiliser bien sûr le DOCTYPE corrext)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

plus sur DOCTYPES ici: http://htmlhelp.com/tools/validator/doctype.html

Source

2008-11-17 17:00:28

malheureusement pas. merci pour suggestion cependant. Et le navigateur est les paramètres par défaut de Firefox. – RekrowYnapmoc

Essayez de faire flotter les deux divisions interales.

flotteur: gauche;

Source

2008-11-17 17:20:03 adam

Ne pas oublier de les effacer tous les deux, aussi. :) –

Pourquoi devraient-ils être effacés? – Tomalak

image causant des problèmes d'alignement vertical

Répondre

Questions connexes