Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1253 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Positionnement div

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Positionnement div

n°1537386
lancevo7
Posté le 02-04-2007 à 15:27:26  profilanswer
 

Bonjour
 
j'ai un conteneur dans lequel il y a un contenu
dans le contenu je voudrais afficher une page accueil
 
 
dans cette page accueil ce trouve de div
la est le probleme
 
text = div 1 de accueil
accueil = page accueil
image2 = div 2 de accueil
 

Code :
  1. #text
  2. {
  3. width:400px ;
  4. border:3px solid #006699 ;
  5. background-color:#333333 ;
  6. }
  7. #accueil
  8. {
  9. width:700px;
  10. }
  11. #image2
  12. {
  13. width:210px;
  14. }


 
 
donc la normal, si j'ouvre ca donne bien text et image2 l'un en dessous de l'autre encadre dans "contenu"
 
 
maintenant lorsque je veux les mettre l'un a cote de l'autre
je met test en float left c'est bien ca?
 
 
en faite le souci c'est que je positionne il sorte du cadre contenu, comment les faire reste dedan?
 
merci


Message édité par lancevo7 le 02-04-2007 à 15:27:48
mood
Publicité
Posté le 02-04-2007 à 15:27:26  profilanswer
 

n°1537392
dartyduck
n00b AttitudE
Posté le 02-04-2007 à 15:29:21  profilanswer
 

tu donnes ton code html? Ce sera plus facile à comprendre pasque là, je capte rien à l'ordre de tes div. et mets le dans la balise C/C++.


---------------
Nikon D7000 + 18-105VR + 35mm 1.8
n°1537406
lancevo7
Posté le 02-04-2007 à 15:39:06  profilanswer
 

page accueil
 

Code :
  1. <div id="accueil">
  2. <div id="text">
  3. <p id="h1">Entreprise familiale forte de 18 années d’expérience dans le domaine du bâtiment, pouvant satisfaire vos besoins de délais, de prix et de qualité des ouvrages accomplis
  4. <br />
  5. <br />
  6. Pour se faire, nous vous proposons nos services dans différents domaines :
  7. </p>
  8. <p id="h2"><font color="#990000">*</font> R&eacute;novation de b&acirc;timents anciens<br />
  9. <font color="#990000">*</font> Agencement et r&eacute;habilitation<br />
  10. <font color="#990000">*</font> Extension de maison, garage, annexe<br />
  11. <font color="#990000">*</font> Construction neuve<br />
  12. <font color="#990000">*</font> Am&eacute;nagement ext&eacute;rieur<br />
  13. <font color="#990000">*</font> Ravalement neuf et ancien</p>
  14. </div>

n°1537548
dartyduck
n00b AttitudE
Posté le 02-04-2007 à 21:42:06  profilanswer
 

Bonsoir à toi,
Bon alors, commencons par les bases du xhtml: balises <font> dans le code xhtml à bannir (utiliser les class).
<p id="h1"> n'existe pas, c'est <h1> tout court (à définir dans ton css).
pour ta liste avec les étoiles, utilise les listes <li>.
Enfin, je vois pas ou est #image2, ni contenu.
Pour terminer, je vois que tu as besoin d'un bon cours de xhtml et de css, tu as trop de lacunes en prog. Tu vas te retrouver avec des problemes d'affichage dus à tes erreurs et au non respect des normes.
vas faire un tour ici:
www.siteduzero.com
www.alsacreations.com


---------------
Nikon D7000 + 18-105VR + 35mm 1.8
n°1537550
lancevo7
Posté le 02-04-2007 à 21:47:50  profilanswer
 

dartyduck a écrit :

Bonsoir à toi,
Bon alors, commencons par les bases du xhtml: balises <font> dans le code xhtml à bannir (utiliser les class).
<p id="h1"> n'existe pas, c'est <h1> tout court (à définir dans ton css).
pour ta liste avec les étoiles, utilise les listes <li>.
Enfin, je vois pas ou est #image2, ni contenu.
Pour terminer, je vois que tu as besoin d'un bon cours de xhtml et de css, tu as trop de lacunes en prog. Tu vas te retrouver avec des problemes d'affichage dus à tes erreurs et au non respect des normes.
vas faire un tour ici:
www.siteduzero.com
www.alsacreations.com


 
 
en faite h1 c'est un style css que j'ai nommé h1
 
 
j'ai pas mit tout le code il en manque pas mal la
 
le site c'est www.sarlsobat.fr (pas fini)
 
sous ie ca marche impec mais firefox non

n°1537556
dartyduck
n00b AttitudE
Posté le 02-04-2007 à 21:58:18  profilanswer
 

h1, c'est comme a, p, table... ce sont des balises déjà existantes dans la bibliotheque css/xhtml. Si tu ne les définis pas dans ton css, h1, h2, h3... ont des propriéts par défaut, sachant que h1 est un gros titre, h2 un titre un peu moins gros... donc pas besoin d'associer avec <p> car tu fais une sorte d'euphémisme, comprends-tu ?


---------------
Nikon D7000 + 18-105VR + 35mm 1.8
n°1537557
lancevo7
Posté le 02-04-2007 à 22:10:30  profilanswer
 

mais il sont defeni dans une feuille css, je l'ai pas mit entierre ma feuille,

n°1537558
dartyduck
n00b AttitudE
Posté le 02-04-2007 à 22:12:46  profilanswer
 

je n'en doute pas, juste je dis que tu ne les accompagnes pas d'un <p>. Ce que tu mets <p id="h1"></p> doit etre écrit <h1></h1> car dans ton css, faut pas écrire #h1{} mais h1{} tout court.
Pour ton h1, supprime <font color="xxxxxx"></font> et mets dans ton h1 (css) color:#xxxxxx;
Et pour tes *, supprime <font color="xxxxxx"></font> et fais une class (.etoile par ex) que tu appeleras à chaque fois que tu en auras besoin.


Message édité par dartyduck le 02-04-2007 à 22:16:40

---------------
Nikon D7000 + 18-105VR + 35mm 1.8
n°1537561
lancevo7
Posté le 02-04-2007 à 22:17:56  profilanswer
 

donc pour le css, je met par exemple
 
test
{
}
 
et non #test?
 
mais je met tjs div id="" pour l'appeler?
 
 
en faite mon probleme c'est surtout les bloc qui se sauve regarde sous ie et sous firefox tu verra ce que je veux dire

n°1537565
dartyduck
n00b AttitudE
Posté le 02-04-2007 à 22:35:26  profilanswer
 

nan, test c'est toi qui l'as créé ce div, alors c'est #test et <div id="test">. Cherche sur le net les balises css/xhtml qui existent, et celles qui n'existent pas et que tu créé c'est avec # qu'il faut les écrire dans le css.


Message édité par dartyduck le 02-04-2007 à 22:36:15

---------------
Nikon D7000 + 18-105VR + 35mm 1.8
mood
Publicité
Posté le 02-04-2007 à 22:35:26  profilanswer
 

n°1537566
lancevo7
Posté le 02-04-2007 à 22:36:27  profilanswer
 

oki et pour les bloc?

n°1537567
dartyduck
n00b AttitudE
Posté le 02-04-2007 à 22:38:21  profilanswer
 

lancevo7 a écrit :

en faite mon probleme c'est surtout les bloc qui se sauve regarde sous ie et sous firefox tu verra ce que je veux dire


je suis avec mon pc pro, alors j'ai pas FF (pas de droits en écriture sur le disque, donc pas d'installation...). mais je regarde demain si tu veux.


---------------
Nikon D7000 + 18-105VR + 35mm 1.8
n°1537690
lancevo7
Posté le 03-04-2007 à 11:20:07  profilanswer
 

je veux bien merci :)

n°1537729
dartyduck
n00b AttitudE
Posté le 03-04-2007 à 11:47:59  profilanswer
 

petite précision: <h1 id="header"> tu peux pas. C'est <div id="header"> ou <h1> (voire <h1 class="header"> )
ensuite, dans ton css, tu peux enever cette ligne  
<style type="text/css"></style> qui est du code html, et donc n'a rien à faire ici. ton navigateur sait que la feuille css c'est du style, pas la peine de lui rappeler.
Autre chose:

Code :
  1. <div id="image2">
  2. <table align="right" cellspacing="20">
  3. <tr><td><img src="Images/Cadres/2.JPG" id="imgbor" /></td></tr>
  4. <tr><td><img src="Images/Cadres/11.JPG" id="imgbor" /></td></tr>
  5. <tr><td><img src="Images/Cadres/14.JPG" id="imgbor" /></td></tr>
  6. </table>
  7. </div>


Comprends bien: les div (id #) c'est pour les blocs de ton site (en général on les appelle qu'une seule fois). Les class (.class) c'est pour du style ponctuel, et que tu vas appeler plusieurs fois. C'est plus du style appliqué à du texte qu'un bloc complet. Donc ton "imgbor" c'est du style aplliqué à tes images, et tu l'appelles plusieurs fois. Donc c'est une class, pas un div, ok ? c'est pas un bloc, c'est juste une bordure que tu applique à ton image.
tu as commencé avec les blocs, donc continue avec les blocs et supprime moi cette table ! tu pourras ajouter à ta class imgbor des margin pour positionner tes images et faire en sorte qu'elles s'ajustent à ta page.

Code :
  1. <div id="image2">
  2. <img src="Images/Cadres/2.JPG" />
  3. <img src="Images/Cadres/11.JPG" />
  4. <img src="Images/Cadres/14.JPG" />
  5. </div>


et pour tes étoiles, mets plustot ça :

Code :
  1. <h2><span class="redstar">*</span> R&eacute;novation de b&acirc;timents anciens<br />
  2. <span class="redstar">*</span> Agencement et r&eacute;habilitation<br />
  3. <span class="redstar">*</span> Extension de maison, garage, annexe<br />
  4. <span class="redstar">*</span> Construction neuve<br />
  5. <span class="redstar">*</span> Am&eacute;nagement ext&eacute;rieur<br />
  6. <span class="redstar">*</span> Ravalement neuf et ancien</h2>


---------------
Nikon D7000 + 18-105VR + 35mm 1.8
n°1537732
dartyduck
n00b AttitudE
Posté le 03-04-2007 à 11:51:18  profilanswer
 

mais en lisant tes codes complets html et css sur ton site, je me rends compte que tu connais à peine les bases de la prog. Je te propose df'apprendre ces bases avant d'essayer de faire un site.
Tu ne comprends pas les conseils que j'essaie de te donner, comme l'histoire des h1, tu confond div et class, tu mets des <font></font> alors que ca n'existe plus depuis une décénie au moins, ...
vas là:
www.siteduzero.com
www.alsacreations.com
et apprends les bases du xhtml et du css. Tu verras, tout vas s'éclairer enuite...
bon courage


---------------
Nikon D7000 + 18-105VR + 35mm 1.8
n°1537850
lancevo7
Posté le 03-04-2007 à 14:44:54  profilanswer
 

Bon j'ai modifier les id, en effet je croyais c'etais comme class, deja c'est resolu
 
 
j'ai resolu aussi mon probleme
 
du coup mes 3 image sont dans un div float unique et sous firefox niquel! (avant chacune etait float)
 
peut tu rejeter un coup d'oeil et me dire ce qui va pas merci
 
www.sarlsobat.fr


Message édité par lancevo7 le 03-04-2007 à 16:20:35
n°1538164
dartyduck
n00b AttitudE
Posté le 04-04-2007 à 00:08:03  profilanswer
 

sous ie6 (celui qui me fait le plus chier mes mises en pages) c'est nikel, franchement rien à dire. propre, joli rendu visuel, bien fait. bravo. J'ai pas regardé le code mais j'espere que tu vas te mettre à apprendre les bases xhtml/css, ok ?


Message édité par dartyduck le 04-04-2007 à 00:08:46

---------------
Nikon D7000 + 18-105VR + 35mm 1.8
n°1538548
lancevo7
Posté le 04-04-2007 à 18:02:31  profilanswer
 

oué tkt pas de soucis!! merci bien!


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Positionnement div

 

Sujets relatifs
Positionnement de texte, problème sous IE (Au secours)Probleme positionnement de menu a onglets
Réussir à garder un positionnement absolu et changer de résolutionPositionnement
[ HTML-CSS] pb de positionnementXHTML strict 1.0 positionnement firefox ie
[CSS] Positionnement dans IE :-((([Résolu] Positionnement DIV Css
positionnement de collonnespositionnement cadre css
Plus de sujets relatifs à : Positionnement div


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR