18073 sujets

Questions générales et questions de débutants

[résolu ] Placer 3 éléments dans une seule div

bonjour!
L'idée de refaire un petit site (2 pages) mais tout en tableau, je me suis dit voilà un bon exercice!
http://pascalformation.free.fr/Richard/Richard_accueil.htm
Ben plus j'essaye moins j'y arrive!
le header
2 boutons un titre et un logo alignés ça devrait pas être sorcier...non?
float, absolu.... j'ai lu relu les tutos... ben c'est moi qui "float"
Smiley lol
Vous avez pas une piste pour me remettre sur les rails...
Modifié par calougarou (02 Nov 2005 - 20:12)
Salut,

Fais un clic droit sur la page et clique sur "afficher le code source".

De cette manière tu verras comment a été construite cette page.

Si tu travailles sous Firefox, télécharge la barre Webdevelopper qui te permet de voir la feuille CSS.
Modifié par tanguy (30 Oct 2005 - 12:36)
Salut tanguy,

Non t'as pas compris c'est ma page (en tableau)
Je cherche à refaire cette page sans tableau!
Et je n'arrive pas à faire le header
Mettre 2 bouttons, un titre centré et un logo à droite!
ben je galère
Je cherche un modèle de structure pour me relancer!
Modifié par calougarou (30 Oct 2005 - 21:36)
Bonjour,

Ton titre de message çà ce serait bien de l'éditer pour le remplacer par quelque de chose de plus pertinent Smiley cligne .

Pour ce qui est du positionnement, il n'y a pas grand chose à faire à part enlever le tableau Smiley eek .
Demeure juste ton header qui est composé d'une liste de deux items, d'un titre et d'une image. Voici une piste avec float.
Tu peux les regrouper dans une div commune:

<div id="header">
<ul>
<li>Accueil</li>
<li>Contact</li>
</ul>
<img...>
<h1>Formations professionnelles</h1>


Tu fait flotter la liste ul et l'image respectivement à gauche et à droite.


div#header ul{width:15%; float:left;}
div#header img{float:right;}


Ton titre devra être muni de marges externe à gauche et à droite au besoin:

h1{margin:0 300px 0 200px;


Pour les positionnements tu liras avec utilité les 3 articles d'Openweb qui y sont consacrés: http://del.icio.us/search/?all=cssp
Modifié par Igor (31 Oct 2005 - 00:06)
Salut à toi,

En fait, d'après ce que j'ai compris, ton probleme se situerait principalement au niveau de la mise en page du header sans tableau ?? C'est bien ça ?

Alors euh, je ferais quelque chose en utilisant :
- un style h1 pour l'ensemble du titre (contenant les deux boutons, le titre et l'image de droite)
- un div à gauche contenant tes deux boutons flash (il y a surement une solution plus correcte que le div d'ailleurs...)
- ton titre en texte
- ton image a droite....


J'arrive à quelque chose dans ce style pour la CSS :

h1 {
width:95%;      /* largeur du titre dans la page */
height:95px;    /* hauteur de l'image de droite */
margin-left:auto;
margin-right:auto;

text-align:center;   /* pour centrer le titre a l'intérieur */
border:1px solid #000000;
}

h1 div#boutons {
width:150px;     /* largeur des boutons ??? */
height:inherit;   /* même hauteur que le h1 qui le contient */
float:left;          /* on le positionne sur la gauche dans le h1 */

border:1px solid #666666;
}

h1 img#headerDroite {
float:right;   
}


Et pour la partie (X)HTML :

<h1>
	<div id="boutons">
                 <img src="bouton_accueil.gif" alt="Accueil"/><br />
                 <img src="bouton_contact.gif"' alt="Contact" />
        </div>
	<img src="LogoRichard.gif" id="headerDroite" alt="Logo" />
	TITRE DE LA PAGE 
</h1>



Voilà, normalement cela fonctionne...!
Par contre je ne pense pas que le div boutons soit nécessaire, tu dois pouvoir remplacer ça par une liste non-ordonnée (ul), ce sera plus correct...!

Si tu as des questions n'hésite pas,
Cordialement,


PierreAd



Edit : oops, j'ai fait autre chose entre temps, une autre réponse a été postée entre temps... désolé Smiley cligne
Modifié par PierreAd (30 Oct 2005 - 14:01)
yé super !! Merci

Je vais essayer demain!

Désolé pour mon titre de message mais ça sortait du coeur!
Je vais y remédier pour que ça soit plus constructif.
J'étais parti sur une seul div, mais pour la CSS ....j'ai tout cassé et cela ne ressemble à rien !

A la force de chercher des exemples j'ai trouvé http://cssvault.com/ très sympa! (Je parie que vous connaissez!)
Mais je n’ai pas vu les css à moins qu'il faille faire comme Tanguy avec son Firefox?
Modifié par calougarou (30 Oct 2005 - 22:08)
Un grand merci a tanguy

Il n'a pas compris ma question (je ne me suis pas bien exprimé) mais il vient de me donner un nouveau regard grace :

a écrit :
Si tu travailles sous Firefox, télécharge la barre Webdevelopper qui te permet de voir la feuille CSS.


super !!

Je viens de passer à firefox et barre Web developer..quel choc! Smiley eek
Modifié par calougarou (31 Oct 2005 - 14:49)
bon voilà !

J'ai appliqué les conseils que vous m'avez donné, mais après maintes recherches j'en suis là:
http://pascalformation.free.fr/Richard2/Richard_accueil2.htm
c'est très moche avec ces couleurs mais c'est un test!
alors que je cherche plutôt cela !
http://pascalformation.free.fr/Richard/Richard_accueil.htm

J'ai progressé grace a vos explications mais je me bats avec les boutons du header qui sont de simples gif
Sur FireFox c'est en ligne! Sur IE c'est mieux mais trop à droite!
Smiley fache 

body {
	background-color: #FFFFFF;
	margin:0;
}
#conteneur {
	width: 770px;
	margin: 0 auto;
	border: 2px solid #ab4;
	background: #fff;
	background-color: #FFFFCC;
}
#header{
	background-color: #FF0000;
	height: 100px;
	color: #FF0000;
}
div#header ul{
	list-style-type: none;
	float: left;
	width: 25%;
	height: 80px;
	left: 2px;
	top:2px;
	display: block;
}
div#header img{
	float: right;
	margin: 10px;	
}
#blocphotog{
	background-color: #99ff00;
	border: 2px solid #ab4;
	padding: 10px;
}
div#blocphotog img{
	float: left;
	margin: 10px 30px 0 0;
}
#blocphotod{
	background-color: #9966FF;
	border: 2px solid #ab4 ;
}
h1 {
	font-family: "Times New Roman", Times, serif;
	font-size: 28px;
	margin:0 250px 0 300px;
	color: #0000FF;
	text-align: center;
}
h2 {
	font-family: "Times New Roman", Times, serif;
	font-size: 18px;
	color: #0000FF;
}


à la force de test je sais pas trop si j'ai pas fait des m.....s
Modifié par calougarou (01 Nov 2005 - 23:32)
Sujet clos
Aller à