Discussion :

[akaii]

Bonjour

J'ai déjà posté plus ou moins le même post, mais la question est différente.

Voici les screenshots que j'obtiens avec le code que j'ai mis plus bas:

En plein écran

En rétrécissant la fenêtre je perds la bordure entre les deux blocs

HTML:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<div id="templatemo_container">
 
    <div id="templatemo_header">
    	<div id="logosection">
	        <div class="sitelogo"></div>
        	<div class="sitename">Business</div>
        </div>
        <div id="header">
        	<div class="title">We Offer<br /><span class="bigtext">The Best Strategy</span><br />For your business.</div>
        </div>
	</div>
</div>

CSS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
#templatemo_header {
	clear:both;
	padding: 0px;
	margin: 0px 0px 5px 0px;
	width: 100%;
	height: 147px;
}
#templatemo_container {
	margin: 0px auto;
	width: 90%;
	margin-top: 15px;
	border:solid black 2px;
}
#logosection {
	margin: 0px 0px 0px 0px;
	float: left;
	width: 20%;
	height: 147px;
	background-image: url(images/logo_background.gif);	
	background-repeat:no-repeat;
}
#header {
	margin: 0px 0px 0px 0px;
	width: 80%;
	float:right;
	height: 147px;
	background: url(images/heading_background_start.jpg) repeat-x;
}

Idéalement j'aimerai avoir le bloc de droite qui commence à la largeur du bloc de droit + 2px, mais comment faire c'est ça la question?

Merci de votre aide

[Erwan31]

Bonsoir,
ta manière d'implémenter tes élément graphique (porteur de contenu ici)
pose des problème d'accessibilité :
Le nom du site et son slogan seront inaccessibles dans pas mal de cas de figure : absence de CSS, images non chargées pour une raison ou une autre, utilisation du site via un navigateur texte, un logiciel de synthèse vocale, impossibilité d'indexer ces contenus pour un moteur de recherche, désactivation des couleurs de la page etc.
Pour ces raisons principalement, toutes les images portant une information doivent se trouver dans le HTML en reproduisant dans le alt l'information présente dans l'image.

Ce qui donne (avec la synatxe XHTML)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div id="logosection">
	        <strong id="sitelogo"><img src="images/logo_background.gif" alt="Business" height="147px" width="" /></strong>
<p id="sitename">
<img src="images/heading_background_start.jpg" alt="We offer the best strategy for your business." height="147px" width="" /></p>
        </div>

et pour le CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
#logosection {
        overflow:hidden /*pour englober ses enfant en float*/
	background: url(images/....gif) repeat-x;	
}
#sitelogo {float:left; margin:...}
#sitename {float:right; margin:...}

En remplissant les largeur des images, les marge CSS éventuelles.
Le strong sert à mettre le texte du alt en gras en l'absence d'images en plus de donner plus du poids niveau indexation.
Le p sert à séparer visuellement le logo dans certains cas...
Tu dois ajouter une fond en background qui se répète sur l'axe des x au niveau du header.

Voila n'hésite pas à moser des questions si tu comprends pas tout.

Idéalement j'aimerai avoir le bloc de droite qui commence à la largeur du bloc de droit + 2px, mais comment faire c'est ça la question?

Incompréhensible.

[akaii]

Idéalement j'aimerai avoir le bloc de droite qui commence à la largeur du bloc de droit + 2px, mais comment faire c'est ça la question?

Je veux dire que le left du bloc de droite commence apres le bloc de gauche avec une petite marge entre les deux de 2px.

Que fait la propriété "overflow:hidden" exactement?

[Erwan31]

Je veux dire que le left du bloc de droite commence apres le bloc de gauche avec une petite marge entre les deux de 2px.

Avec le code que je te donne ça devrait disparaitre, oublie ça.

Que fait la propriété "overflow:hidden" exactement?

Englober ses enfants flottant qui sont sortis partiellement du flux normal (comme s'il étaient absents en gros) vis a vis de leur bloc conteneur.
Si tu cibles aussi IE6, tu dois y ajouter un height:1% (à placer idéalement dans une CSS conditionnelle pour IE6)

PS: on dit pas merci chez toi?

[Macmillenium]

Si tu cibles aussi IE6, tu dois y ajouter un height:1% (à placer idéalement dans une CSS conditionnelle pour IE6)

Dans ce cas, ne pas oublier de signaler qu'il faut aussi annuler le overflow:hidden (en remettant la valeur initiale visible) si jamais la hauteur du parent direct est spécifiée explicitement.

Bref, mieux vaut un zoom:1 : déclaration neutre sans effets secondaires

[Erwan31]

Dans ce cas, ne pas oublier de signaler qu'il faut aussi annuler le overflow:hidden (en remettant la valeur initiale visible) si jamais la hauteur du parent direct est spécifiée explicitement.

Bref, mieux vaut un zoom:1 : déclaration neutre sans effets secondaires

Oui effectivement pour l'overflow:visible que j'ai oublié de précisé même si c'est optionnel.
Comme je suppose souvent que la personne ne va pas utiliser les commentaires conditionnels, je conseil un height:1% (si hauteur non définie) pour pas invalider la CSS avec un zoom:1 mais dans l'absolu oui zoom:1 est moins risqué

[akaii]

le zoom est donc un equivalent au overflow:hidden ?

merci pour vous réponses!

[Erwan31]

le zoom est donc un equivalent au overflow:hidden ?

Non zoom est une extension propriétaire (Microsoft) donc invalidante lorsque tu fais valider ta CSS. Celle-ci permet de conférer le layout au bloc (concept qui disparait avec IE8), alors que l'overflow:hidden permet d'établir un contexte de formatage bloc (voir la spécification CSS2.1 du W3C pour plus de détails) et ainsi englober ses enfants flottants.
IE7 les englobe avec l'overflow:hidden (ou scroll ou auto) OU une propriété conférant le layout au bloc (height, width...).
Il existe d'autres méthodes pour cela pour l'overflow est une des plus commode et des plus simple, mais l'overflow hidden implique de ne pas avoir précisé de hauteur au bloc conteneur et de faire des test de zoom text via ton navigateur pour éviter les éventuels problème d'accessibilité visuelle (rognage du texte ici).