Mise en page header

bebertbouv · 05-03-2012 01:46:59

Bonjour à tous
Je suis nouveau sur le forum et j'aurai besoin d'aide pour de la mise en page.
Je test un site en php avec fonction includes qui marche très bien.
Je souhaite avoir des infos sur la mise en page de mon header, il ressemble à ça:

<div id="header">
<h2 align="center" class="Style1">Location La Doyenne</h2><h1> </h1>
</div>

J'aimerai mettre plusieurs lignes d'écriture dans ce header et surtout un logo que la gauche. Je n'arrive pas à faire tenir tout ça dans mon header, ça fait descendre ma page et mon menu.Voila mon CSS:
#header {
width:1020px;
height:135px;
margin:0 auto;
margin-bottom:25px;
background-image:url(images/bois2.jpg);
}
#header h2 {
padding:10px;
}
#header h3 {
padding:10px;
}

Avez vous des idées?
Je vous remercie d'avance

Jc · 06-03-2012 08:21:30

Bonjour,

Tu mets ton code css dans un fichier texte avec une extension .css que tu appeles par exemple monfichier.css
Ensuite tu places une feuille de style en référence dans ton header de ta page html (entre les balises <header> </header>)
comme suit:

<link href="monfichier.css" rel="stylesheet" type="text/css">

 

et voilà

PS: Si ton souci est ailleurs, comme par exemple mettre en forme un contenu en particulier, merci de faire une demande en Français, parce que là, je suis navré, mais je n'ai... rien compris

++

Dernière modification par Jc (06-03-2012 08:24:37)

bebertbouv · 07-03-2012 09:34:38

Excuse moi JC de ne pas avoir été clair dans mon explication.
Je te remercie déjà d'avoir répondu.

En fait j'ai bien 2 fichiers, 1php avec mon bout de code header et un css qui correspond à l'ensemble de ma mise en page.

Le problème est que j'ai du mal à organiser ma partie Header en php, j'aimerai du texte un logo..... mais à chaque fois c'est ma page php entière qui descend.

J'aurais pensé travailler sur ma page header php en faisant mon texte........et que la mise en page et l'incrustation dans la page finale se fasse automatiquement.

J'espère avoir été plus clair que la première fois lol.

Maljuna Kris · 07-03-2012 10:03:12

Saluton,
Tout cela est très confus.

bebertbouv a écrit :

<h2 align="center" class="Style1">Location La Doyenne</h2><h1> </h1>

Déjà, sémantiquement, un <h1> qui suit un <h2>, il faudra m'expliquer.
Tu as un problème de positionnement de contenus dans ta page HTML.
PHP n'est pas en cause, mais uniquement HTML et CSS.
Précise ton problème en exposant précisément le code HTML du contenu des différentes <div> de ta page HTML.

bebertbouv · 07-03-2012 20:53:52

Bon, je suis d'accord sur le h1 et h2.
Alors je vais reprendre en étant simple et bref.
J'ai une page header.php avec ce code:
<div id="header">
<h2 align="center" class="Style1">Location La Doyenne</h2>
</div>

J'ai mon CSS du header qui ressemble à ça:
#header {
width:1020px;
height:135px;
margin:0 auto;
margin-bottom:25px;
background-image:url(images/bois2.jpg);
}
#header h2 {
padding:10px;
}
#header h3 {
padding:10px;
}

Je fais un appel de mon header.php sur mes pages avec un include, il s'affiche très bien sauf que je voudrais faire de la mise en page pour pouvoir afficher un logo et du texte sans que ça me change la mise en page totale (menu en include qui descends .....).
Est ce plus clair?

Jc · 07-03-2012 21:11:05

Bonjour,

oui c'est clair, mais ne connaissant pas les élements à afficher on ne peut vous présenter une manière optimisée pour les représenter. D'ailleurs votre div #header n'est même pas fermée. Comment souhaitez-vous afficher votre logo par rapport à votre texte?, avez-vous un découpage de template particulier à respecter?, etc...
Donc en résumé, notre boule de cristal ne fonctionne pas^^.

De façon générale, il faut prévoir une div par zone d'affichage sur votre site. La façon de gérer le comportement de ces zones pour qu'elles restent invariantes à l'affichage, dépend exclusivement de leur contenu et de la façon dont on veut rendre disponible l'information qui s'y trouve.

++

bebertbouv · 08-03-2012 16:09:50

Maljuna Kris · 08-03-2012 16:12:19

Et alors ?

bebertbouv · 08-03-2012 16:12:45

Voila le style de header que j'aimerai faire.
Je voudrais rajouter aussi une phrase avec un lien sous le titre vers une newsletter.

Maljuna Kris · 08-03-2012 16:27:51

Selon moi, le fond (background-image) de la <div> header contiendra l'image des planches, la trombine de la mémère, soit fait partie de l'image de fond, soit est positionnée par dessus.
Pour la phrase et le lien veux-tu qu'ils soient dans le header où en dehors ?

bebertbouv · 08-03-2012 16:45:43

Le background en bois aucun problème, la memere j'aimerai savoir comment la placer à cette endroit. la phrase et le lien insérer dans le header

Maljuna Kris · 08-03-2012 18:56:48

bebertbouv a écrit :

Le background en bois aucun problème, la memere j'aimerai savoir comment la placer à cette endroit. la phrase et le lien insérer dans le header

Alors, pour la tronche de Mémée tu peux la déclarer en position-relative dans le div (à toi de jouer sur les valeurs pour tester ce qui rend le mieux), et pour le texte avec son lien, s'ils sont dans la div, ils devraient se positionner d'eux-mêmes sous le titre <h1>.
Charge à toi de leur donner des couleurs qui tranchent sur le fond bois.

bebertbouv · 09-03-2012 14:28:19

J'ai trouvé la solution:
</style><div id="header">
<div style="position:relative; height:150px">
<div style="position:absolute;z-index:1">
<img src="img/para.gif">
</div>
<div style="position:absolute;top:0px; width:1024px; height:75px; z-index:2;font-size:250%">
<center><b>Location la Doyenne</b></center>
</div>
<div style="position:absolute;top:50px; width:1024px; height:75px; z-index:2;font-size:100%">
<div align="center"><a href="inscri.htm" target="wclose" class="Style1" onclick="window.open('inscri.html','wclose', 'width=350, height=300, toolbar=no, status=no, left=20, top=30')">Inscrivez vous ici &agrave notre Newsletter </a></div>
</center>
</div>
</div>

je vous remercie pour votre aide et certainement à bientôt lol.
je vais pouvoir mettre mon site www.ladoyenne.fr en php en ligne

PHP|Débutant :: Forums

Advertisement

#1 05-03-2012 01:46:59

Mise en page header

#2 06-03-2012 08:21:30

Re : Mise en page header

#3 07-03-2012 09:34:38

Re : Mise en page header

#4 07-03-2012 10:03:12

Re : Mise en page header

#5 07-03-2012 20:53:52

Re : Mise en page header

#6 07-03-2012 21:11:05

Re : Mise en page header

#7 08-03-2012 16:09:50

Re : Mise en page header

#8 08-03-2012 16:12:19

Re : Mise en page header

#9 08-03-2012 16:12:45

Re : Mise en page header

#10 08-03-2012 16:27:51

Re : Mise en page header

#11 08-03-2012 16:45:43

Re : Mise en page header

#12 08-03-2012 18:56:48

Re : Mise en page header

#13 09-03-2012 14:28:19

Re : Mise en page header

Pied de page des forums