28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous et à tous, je suis débutant dans le codage HTML/CSS et ne possède que très peu de bases... Je ne sais pas si je suis au bon endroit, j'ai hésité à poster sur [Débutants].

Voici mon cas : afin de d'améliorer mon site Internet actuel je souhaiterai créer un header statique qui viendrait accompagner le scroll lors du mouvement de page.
Pour l'instant tout semble d'être correct, mais j'ai mis une couleur dans le header (en dessous du logo) alors que j'aimerai mettre un pattern qui serait répété sur une hauteur limité de 130 px mais de façon illimité en largeur à 100% de l'écran...

Voici l'adresse "test" où vous pourrez voir concrètement mon idée : http://www.designatic-creations.fr/test

Voici le code que j'ai actuellement créé :

• CODE CSS :
<style>
* {
    	margin: 0;
    	padding: 0;
}
	
#pattern {
		position: fixed;
		top: 0px;
		width: 100%;
		height: 130px;
		left: 0px;
		background-color: rgba(255, 255, 255, 0.8);
	}

#logo {	
		position: fixed;
		top: 18px;
	}

#header {
		position: fixed;
		top: 122px;
		width: 100%;
		height: 47px;
		left: 0px;
		background: #5780c1;
	}

#content_header {
		color: white;
	}

</style>


• CODE HTML :
<div id="pattern">
	<center><p id=pattern></p></center>
</div>

<div id="logo"> <a href="index.html"><img src="http://www.designatic-creations.fr/Logo_20Designatic.png" width="581" height="80"> title="Retour vers l'accueil"</a>
</div>

<div id=header>
	<center><p id=content_header></p></center>
</div>


• Lien du pattern souhaité : http://www.designatic-creations.fr/squairy_light.png

J'espère avoir été assez précis et conçis dans ma requête !
Merci d'avance à tous ceux qui souhaiteront apporter leur aide Smiley smile

À très bientôt, merci.
Aurélien.
Modifié par 6l20 (10 Sep 2013 - 16:57)
Saloute, ajoute ceci dans ton #pattern

    background-image: url("http://www.designatic-creations.fr/squairy_light.png");
Merci c'est parfait ! Smiley smile
Je n'étais vraiment pas loin en fin de compte.

PS : ton site est superbe Arthur.

[SUJET RÉSOLU]
Hello,

Attention lors de la création des liens (je viens de les corriger) Smiley cligne
La balise center est dépréciée, on centrera via la feuille de styles Smiley cligne