Votre question

Faire des marges en CSS

Tags :
  • CSS
  • Programmation
Dernière réponse : dans Programmation
15 Mars 2010 14:02:40

Bonjour à tous, alors voilà, j'ai lu beaucoup de tuto sur le HTMl et le CSS.
j'ai créer un petit site pour m'entrainer, et je veux qu'il sois séparer en différence partie (comme sur cette image) >>> <<<<


en HTML sa me pose pas problème. Mais j'aimerais le faire en css (car en HTML sa ne scrool pas verticalement et d'autre petite contraintes).
voilà mon code html
Citation :
<frameset rows=20%,80%>
<frame name="haut" scrolling="no" src="haut.html" noresize="no">
</frame>


<frameset cols=15%,15%,60%,15%,15%>
<frame name="espace" scrolling="no" frameborder="0" src="espace.html" noresize="no">
<frame name="menu" scrolling="no" frameborder="0" src="menu.html" noresize="no">
<frame name="principal" scrolling="no" frameborder="0" src="principal.html" noresize="no">
<frame name="menu2" scrolling="no" frameborder="0" src="menu2.html" noresize="no">
<frame name="espace" scrolling="no" frameborder="0" src="espace.html" noresize="no">
</frame></frame></frame></frame></frame>


Ma question est la suivant :

Quel est le code équivalent pour arriver à se résultat en CSS ?


Merci à tous de vos réponses :=)

Autres pages sur : marges css

15 Mars 2010 14:34:56

Salut,

Citation :
beaucoup de tuto sur le HTMl et le CSS.


Tu n'as pas dû lire les bons vu ton code html.
Pourquoi tu utilises des frames?

Si tu veux faire comme l'image, c'est à dire :

- bannière
- menu gauche
- corps

Utilises des div dans ta page html et des flottants dans ton css.


Page html:

  1. <div id="global">
  2.  
  3. <div id="banniere"></div>
  4.  
  5. <div id="menu_gauche">
  6. <ul>
  7. <li><a href="#">Lien 1</a></li>
  8. <li><a href="#">Lien 2</a></li>
  9. <li><a href="#">Lien 3</a></li>
  10. <li><a href="#">Lien 4</a></li>
  11. </ul>
  12. </div>
  13.  
  14. <div id="corps">
  15. <p>Texte</p>
  16. </div>
  17.  
  18. </div>


Page css:

  1. /* global */
  2.  
  3. /* banniere */
  4.  
  5. /* menu gauche */
  6. div#menu_gauche{
  7. float:left;
  8. height:auto;
  9. width:200px;
  10. border:1px solid black;}
  11.  
  12.  
  13. div#menu_gauche a{
  14. font-size:12px;
  15. color:black;
  16. text-decoration:none;
  17. padding:5px;}
  18.  
  19. div#menu_gauche a:hover{
  20. color:white;
  21. text-decoration:underline;}
  22.  
  23. /* corps */



Je te laisse continuez le CSS, faut apprendre par soit même, si tu veux des bon tutoriels regarde ici: http://www.siteduzero.com

m
0
l
15 Mars 2010 15:27:52

Merci de ta réponses

Maintenent, j'avance bien, mais je suis blocker à un passages : Voilà mon nouveau "index.html"
Citation :
<html>


<head>
<title> Création site web</title>


<div id="global">


<div id="banniere"></div>
<img src="image/ban.jpg">

</div>





<div id="menu1">
<a href="news.html" target="principal"><img src="image/bouton.jpg">
<a href="news.html" target="principal"><img src="image/bouton.jpg">
<a href="news.html" target="principal"><img src="image/bouton.jpg">
<a href="news.html" target="principal"><img src="image/bouton.jpg">
<a href="news.html" target="principal"><img src="image/bouton.jpg">
<a href="news.html" target="principal"><img src="image/bouton.jpg">
<a href="news.html" target="principal"><img src="image/bouton.jpg">
<a href="news.html" target="principal"><img src="image/bouton.jpg">
</div>


<div id="principal">
<text> Salut </text>
<a href="principal.html">


</div>


<style type="text/css">
#banniere {
float:top;
width: 100%;
height: 20%;
}


#menu1 {
position:absolute; left: 10%; top: 30%;
float:left;
width: 10%;
height: auto;
background-color: #000000;
}

#principal {
possition: absolute; left: 20%; top: 30%;
float: left;
witdh: 60%;
height: auto;
}




</style>

</head>



<body>








</body>

</html>


les problèmes sont que :
1/ Le cadre "principal" ne s'affiche pas après le menu mais au desus du menu.
2/ Quand je clic sur un bouton du menu, une nouvelle fenêtre s'ouvre, et ne s'affiche pas dans le cadre principal comme je le voudrais, pourtent il me semble avoir tout bien fait (nomer target="principal")



Merci à toi pour tes réponses :=)
m
0
l
Contenus similaires
15 Mars 2010 17:28:03

bonjour

tu peux t'inspirer de ça...

Tes div ne doivent pas se trouver dans le head mais dans le body.
tu peux aussi mettre ton css dans un fichier spécifique et l'intégrer par un link.

++
m
0
l
15 Mars 2010 17:38:25

Dans le fichier style.css ?

j'ai mi mes div dans <body></body>
et mes cadres (flottant) dans style.css

Mais le problèmes reste le même, mes liens s'ouvrent dans une nouvelle fenêtre et non dans le cadre "principal" et le cadre principal se situe toujours au desus du menu :/ 
m
0
l
15 Mars 2010 18:02:45

pour l'instant, fait dans la simplicité...
remets ton style dans le head... tu pourras toujours le placer dans un fichier séparé par la suite...

si tu veux qu'en cliquant sur tes liens tu "restes" sur la même page, tu le fais en ajax, sinon, tu recharges la page et tu te fais un "pseudo-moteur" dans ton index... oublies le target dans <a href="news.html" target="principal">

pour le "moteur", tu peux faire un truc du genre <a href="index.php?page=news">
couplé à un switch sur la page pour faire un include $page .'.html'); ou en testant la valeur du GET et si existant...

je sais pas si je suis clair...

Ou alors, tu attends d'autres infos des idnautes
m
0
l
15 Mars 2010 18:05:35

Mon idée est que (comme l'image en haut) en cliquand sur le bouton sa s'ouvre dans le cadre centrale et non dans une nouvelle fenetre.
m
0
l
15 Mars 2010 18:15:25

c'est ce à quoi j'ai répondu dans le post précédent...
mais si ton lien news.html (par ex) représente une page complète, tu n'as qu'à enlever le target dans le <a...>
m
0
l
15 Mars 2010 18:18:41

je ne dois ajouter aucune ballise code pour dire d'ouvrire news.html dans le cadre principale ?
m
0
l
15 Mars 2010 18:21:08

ton fichier news, il représente juste "une partie" de ta page finale ?

si oui, 2 solutions (pour moi) :
- ajax pour mettre le contenu de news dans une div de destination
- "moteur" php qui fait un include de la page à l'endroit voulu
m
0
l
16 Mars 2010 10:53:28

Enfet, mon problème le plus grand est surtout que le cadre central de ma page n'affiche pas au centre mais audesus du menu à gauche...
j'ai changer les codes, j'ai tenter pas mal de truc mais rien à y refaire.
Une petit idée ?

(voici les code :

dans ma page INDEX.HTML
Citation :
<html>


<head> <title> Création site web</title>
<link rel="stylesheet" type="text/css" href="style.css" />




</head>



<body>


<div id="global">


<div id="banniere"></div>
<img src="image/ban.jpg">



</div>




<div id="menu1">
<a href="news.html" target="principal"><img src="image/bouton.jpg">
<a href="news.html" target="principal"><img src="image/bouton.jpg">
<a href="news.html" target="principal"><img src="image/bouton.jpg">
<a href="news.html" target="principal"><img src="image/bouton.jpg">
<a href="news.html" target="principal"><img src="image/bouton.jpg">
<a href="news.html" target="principal"><img src="image/bouton.jpg">
<a href="news.html" target="principal"><img src="image/bouton.jpg">
<a href="news.html" target="principal"><img src="image/bouton.jpg">
</div>





<div id="principal">
<a href="principal.html">
</div>










<div id="menu2">
<a href="news.html" target="principal"><img src="image/bouton.jpg">
<a href="news.html" target="principal"><img src="image/bouton.jpg">
<a href="news.html" target="principal"><img src="image/bouton.jpg">
<a href="news.html" target="principal"><img src="image/bouton.jpg">
<a href="news.html" target="principal"><img src="image/bouton.jpg">
<a href="news.html" target="principal"><img src="image/bouton.jpg">
<a href="news.html" target="principal"><img src="image/bouton.jpg">
<a href="news.html" target="principal"><img src="image/bouton.jpg">
</div>











</body>

</html>



dans ma page STYLE.CSS :

Citation :
<style type="text/css">
#banniere {
float:top;
width: 100%;
height: 20%;
}



#menu1 {
position:absolute; left: 10%; top: 30%;
float:left;
width: 10%;
height: auto;
background-color: #000000;
}


}
#principal {
possition: absolute; left: 20%; top: 30%;
float: left;
witdh: 60%;
height: auto;
}


#menu2 {
position:absolute; left: 80%; top: 30%;
float:left;
width: 10%;
height: auto;
background-color: #000000;
}






</style>

html (dans index.html)
C'est comme si il igniorai mes lignes :
Citation :
<div id="principal">
<a href="principal.html">
</div>


CSS (dans style.css)
Citation :
#principal {
possition: absolute; left: 20%; top: 30%;
float: left;
witdh: 60%;
height: auto;
}
m
0
l
16 Mars 2010 18:09:30

dans le STYLE.CSS :
tu as une accolade en trop
il ne faut pas mettre les balises de style
#principal tu as mis possition au lieu de position
dans le INDEX.HTML
l'image de la bannière n'est pas dans le div "banniere" c'est normal ? tu peux la mettre background
aucune balise <a> n'est pas fermée
...
m
0
l
16 Mars 2010 18:53:57

J'ai fait les modifications, et tu as corriger un beug que j'avais :
La banniére s'affiche en css depuis que j'ai retirer : <style type="text/css"></style> de ma feuille de style.
Mais le problème est que le cadre du centre n'apparait toujours pas...
Et j'ai un petit soucis lors du redimentionnement de la page web la banniére ne se redimensionne pas mais est coupée? normal ? ou j'ai oublier un code (encore?)
m
0
l
16 Mars 2010 20:05:22

voir MP
m
0
l
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS