28111 sujets

CSS et mise en forme, CSS3

Problème de bloc css

Bonjour à tous,

Je suis développeur php, je me débrouille pas trop mal mais par contre je suis vraiment nullissime en design.

Aujourd'hui je voulais faire un petit site perso.

L'idée serait d'avoir un truc classique :
Une bannière qui fait la largeur du site
Un footer qui fait pareil mais tout en bas
et entre les deux, un menu à gauche de 250 px environ, un menu à droite de 250 px aussi et le contenu entre ces deux menus...

J'ai alors réalisé ce petit bout de code :

#header, #menu, #inside, #footer {
padding:10px 0;
}
#header {
background-color:#FFFFFF;
text-align:center;
}
#main {
max-with:960px;
margin:auto;
}
#menu  {
float:left;
width:220px;
background-color:#FFFFFF;
border:1px solid black;
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
}
#right  {
float:right ;
width:220px;
background-color:#FFFFFF;
border:1px solid black;
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;

}
}
#inside {
margin-left:245px;
background-color:#FFFFFF;
background-image:url(structure/fondgb.png);
background-repeat:no-repeat;
padding: 10px 10px 10px 10px;
margin: 10px;
border:1px solid black;
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
  margin-right: auto;
  width: 400px;
}
#footer {
background-color:#FFFFFF;
text-align:center;
clear:both;
}


et ensuite un fichier HTML :

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
		
	<style type="text/css" title="currentStyle">
		@import "toto.css";
	</style>
	
</head>


<body>

<div id="header"></div>	  
		  
<div id="main">
     <div id="menu"></div>
    <div id="inside"></div>    
    <div id="right"></div>
 
</div>

<div id="footer"></div>
</body>
</html>



Voici les problèmes :

1) Les BORDER ne fonctionnent pas pour le "inside"
2) Quand je mets du contenu dans inside, il va en dessous du bloc menu.... Impossible de le mettre entre les blocs menu et right....


Quelle erreur ai-je pu faire ?

Merci d'avance. A charge de revanche !
Hello Smiley smile

Je te propose ceci: https://jsfiddle.net/0m6cysuh/

Je pense que ça pourrait te servir de base (de template lol). Je te conseille d'utiliser Flexbox pour le layout et éviter les float au maximum. Aussi, utilise plus de classes pour cibler les éléments en CSS. Créé un feuille de style séparée pour le CSS et importe la avec <link> et change le DOCTYPE. Le border n'apparait pas dans le bloc "inside" puisqu'il y a une erreur dans le CSS (une accolade fermante de trop)...

Plus d'infos ici:
https://www.alsacreations.com/article/lire/1374-html-5-structure-globale-du-document.html

Je t'envoie ça vite fait.

Je pourrai intervenir demain pour approfondir plus (si nécessaire)
Sujet clos
Aller à