Votre question

Blocs en CSS (Au secours !)

Tags :
  • Logo
  • Programmation
Dernière réponse : dans Programmation
22 Novembre 2009 15:26:29

Bonjour à tous,

Bon voilà mon problème : je suis incapable de faire des blocs en CSS qui fassent ce que j'ai envie qu'ils fassent !

Bon alors voici une image de ce qui est attendu :

http://www.casimages.com/img.php?i=091122032717557056.j...

Là je suis dans une situation où mon code source comporte uniquement le menu horizontal (çà au moins ca marche), mais j'ai l'impression que tout les blocs que je créer se positionne par rapport à ce menu horizontal... :??: 

Voici mon code CSS :


/* LOGO + IMAGE */

.logo {
background-image : url("image.jpg")
width : ;
height : ;
margin-left : ;
margin-right : ;
padding-top : ;
}

.image {
background-image : url("image.jpg")
width : ;
height : ;
margin-left : ;
margin-right : ;
padding-top : ;
}



/* ARRIERE PLAN */

body {
background-image: url("");
background-repeat: no-repeat;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
margin: 0px;
padding: 0px;
}


/* PARAGRAPHES */

p {
padding: 10px 10px 10px 20px;
display:block;
color:black;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold
}



/* MENU HORIZONTAL */

#nav {
width : 100%;
height : 50%;
margin-left : auto;
margin-right : auto;
padding-top:12%;
}

#nav ul {
margin-top: auto;
padding-left:0 ;
padding-right: 0 ;
margin-left: auto;
margin-right: auto;
list-style-type:none;
text-align: center ;
}

#nav li {
margin-left:2px;
float:left; /*pour IE*/
}

#nav ul li a {
display:block;
float:left;
width:100px;
background-color:black;
color:white;
text-decoration:none;
text-align:center;
padding:5px;
border:2px solid;
border-color:"white" "white" "white";
}

#nav ul li a:hover {
background-color:#710000;
border-color:"white" "white" "white";
font-weight:bold;
}



/* BLOCS */

#menu{
margin-left : 20%;
float:left;
width:130px;
height:600px;
background-color:white;
padding-top: 20%;
border-width : 2px;
border-style : double;
border-color : black;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}


#texte {
margin-right : 50%;
float:right;
width:80%;
height:80%;
background-color:white;
border-width : 2px;
border-style : double;
border-color : black;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}



/* TITRES */

h1 {
font-color : black ;
font-weight: bold ;
font-size : 250% ;
}

h2 {
font-color : #B4AF91 ;
font-weight : bold ;
font-size : 150%;
}



Bref si quelqu'un pouvait m'aider pour faire ces fichus blocs, ce serait vraiment exceptionnellement salutaire pour moi :p  . Je précise que même en lisant un tas de tutos, j'y arrive toujours pas, ... je suis nulle ^^

Autres pages sur : blocs css secours

22 Novembre 2009 16:43:49

On pourrait avoir le code HTML pour savoir quoi est quoi ?
m
0
l
22 Novembre 2009 16:45:29

Tu as un lien de ce que tu as pour le moment ? Ton code source ?

Edit : owned :o 
m
0
l
24 Novembre 2009 11:41:42

Salut,
Je pense qu'il y a un principe de base que tu n'a pas compris, le flux HTML.

Quand tu sort un élément de se flux HTML, il n'occupe plus la place de son contenu ou des dimensions que tu lui a donné.
Les éléments qui sortent du flux sont les éléments flottés et les éléments positionnés (les float:left, les postion:absolute etc ...)

Tu a donc deux solutions, ou tous tes bloques sortent du flux et se positionnent entre eux, soit tu rétablie le flux avec un clear (clear:both) au début du bloc suivant.

J'espère que ca t'éclaire un peut :p 

Mais le mieux est de nous donner la source pour t'aider !
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