28172 sujets

CSS et mise en forme, CSS3

[Résolu] Problème de bannière

Bonjour.

Je développe depuis un mois mon premier site web (un intranet) et j'ai des problèmes avec ma bannière. Sur ma bannière j'ai une photo à gauche, un titre au centre et une photo à droite.

Mais en fait, le titre saute une ligne et la photo de droite saute deux lignes et se retrouve à gauche.



voila le code (un peu bordelique)

<div id="header-logo">
			<a href="https://www.collegesaintaugustin-angers.com/">
				<img id="photo1" src="https://www.collegesaintaugustin-angers.com/wp-content/themes/saintaugustin-2017/images/logo-college-st-augustin.jpg" title="accueil" alt="accueil">
			</a>
		<div id="intranet">
			<h2 id="intranet">INTRANET</h2>
		</div>
		<div id="photo2">
			<img id="photo2" src="image/image_sainto.jpg" >		
		</div>
	</div>





#photo1{
	float: left;
	height: auto;
	width: 225.75px;
	height: 107px;
	margin-left: 5px;
	padding-top: 4px;
	display: block;
}
div#photo2{
	float: right;
	display: block;
}
#photo2{
	float: right;
	width: 225.75px;
	height: 107px;
	margin-right: 5px;
	padding-top: 4px;
	position: absolute;
	display: block;
}
div#header-logo{
	font-family: 'Open Sans';
	width: 100%;
	height: 115px;
	top: 0;
	left: 0;
	background: white;
	margin: 0px;
	padding: 0px;
	background-color: #ff9900;
	display: block;
	z-index: 100;
}
div#intranet{
	float: center;
	display: block;
	z-index: 1;
}
#intranet{
	text-align: center;
	font-size: 50px;
	font-style: 'Roboto Slab',serif;
	font-weight: regular;
}


voila...
J’espère que vous pourrez me sortir de cette impasse car moi je sèche.

le-nordique49

PS: oui il y a plein de faute dans le code (c'est mon premier site).
Modifié par le-nordique49 (13 Jul 2017 - 12:27)
Bonjour,

Je pense que tu peux largement simplifier ton html :
<div class="header-logo">
  <a href="https://www.collegesaintaugustin-angers.com/">
    <img class="photo" src="https://www.collegesaintaugustin-angers.com/wp-content/themes/saintaugustin-2017/images/logo-college-st-augustin.jpg" title="accueil" alt="accueil">
  </a>
  <h2>INTRANET</h2>
  <img class="photo" src="http://via.placeholder.com/226x107?text=Sainto" >
</div>

Évite les id en HTML/CSS (SURTOUT en DOUBLE !), plus lourd.

Et dans le CSS, préfère le flex, qui va largement te faciliter la vie, surtout en tant que débutant.
.header-logo {
  display: flex;
  justify-content: space-between;
/*   justify-content: space-around; */  /* À tester sans les marges sur les .photo */
  align-items: center;
}


Un exemple ici : https://codepen.io/anon/pen/OgdZEW
Modifié par SolidSnake (13 Jul 2017 - 16:12)
Meilleure solution
Bonjour.

Pour le titre qui saute une ligne, ce doit être essentiellement dû au fait que "float: center" n'existe pas. Il va de ce fait (et "display: block" est inutile puisqu'un div a par défaut un comportement de block) prendre toute la largeur disponible de son contenant et pour cela passer à la ligne.

Pour l'image de droite qui saute deux lignes, là, je pense que c'est dû au fait que pour qu'un "float: right" fonctionne, il faut que cet élément se situe avant les éléments qui ne sont pas en "float" (et je vous rappelle que "float: center" n'a pas fonctionné).

Mais tout cela est assez compliqué, oui, Flex c'est mieux.

Smiley smile
merci beaucoup de votre aide. Ca m'avance grandement dans la structure de mon site.
Et comme je suis un ENORME débutant je ne connaissait pas encore le flex.

Le-nordique49
Modifié par le-nordique49 (23 Jul 2017 - 14:10)
Sujet clos
Aller à