Se connecter avec
S'enregistrer | Connectez-vous

Faire des marges en CSS

Dernière réponse : dans Programmation

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

Lassé par la pub ? Créez un compte
Expert Programmation

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

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 :=)

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 :/ 
Expert Programmation

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
Expert Programmation

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

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;
}
Expert Programmation

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
...

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?)
Lassé par la pub ? Créez un compte

Créer un nouveau sujet

Tom's guide dans le monde