Mettre le texte en haut dans site css

Fermé
amalthee - 22 févr. 2012 à 07:47
AssassinTourist Messages postés 5709 Date d'inscription lundi 16 janvier 2012 Statut Contributeur Dernière intervention 29 février 2024 - 23 févr. 2012 à 08:14
Bonjour, j'ai réussi à faire ma mise en page et ai pu commencer à positionner mes images dans le mode menu. Sauf que le texte est bien positionné, sauf qu'il reste en bas, et j'aimerai bien le mettre en haut pour le faire cadrer avec mes images. Comment faire ? Je vous donne mes codes css et html. Peut être y a t-il une erreur

code css

#id_monhistoire{background: #E8FF9C;}

h3 {color: #EE1162; font-family: verdana, arial, sans-serif;letter-spacing: 6px; font-size: 20pt; text-align: center;}
h4 {color: #24A743; font-family: verdana, arial, sans-serif;letter-spacing: 6px; font-size: 12pt;}
td {text-align
a { text-decoration:none ;}

a:visited { color:#006600 ;}

div#bandeau {
width:100%;
height:50px;
background-color:#00CCFF;
}

div#menu {margin : 20px 10px 10px 10px;
float:center;
width:300px;
height:470px;
background-color:#E8FF9D;
}

div#contenu {margin :20px 10px 10px 10px;
float: top;left;
width:500px;
margin-left: 400px;

height:470px;
background-color:#E8FF9C;
}
div#piedpage {
width:100%;
height:50px;
background-color:#33FF99;clear:both;
}


code html


A voir également:

7 réponses

AssassinTourist Messages postés 5709 Date d'inscription lundi 16 janvier 2012 Statut Contributeur Dernière intervention 29 février 2024 1 310
22 févr. 2012 à 08:17
Bonjour,

J'ai pu voir plusieurs erreurs.

Les balises
Est-ce que tu codes avec Notepadd++ ? Si des éléments ne sont pas colorés, ça veut dire qu'il manque une }, un ; ou un ". C'est ce qui est arrivé à ton fichier css. En html, il est plus difficile de le voir, mais tu n'as pas fermé tes balises dans ton contenu, ce qui peut gêner l'interprétation du css

Le code à rajouter
dans ton div menu, j'ai rajouté un float:left;
dans ton div contenu, j'ai mis aussi un float: left (et surtout pas de ; entre top et left hein... de toute manière, ça ne marche pas ;p)
dans ce même div, j'ai mis les margins : margin :20px 10px 10px 60px; (c'est avec le 60 que tu vas pouvoir décoller ton contenu du menu. tu peux y mettre la valeur que tu veux.
1
Merci beaucoup AssassinTourist de tes réponses. Dès ce soir ou demain au plus tard je fais l'essai avec les modifs que tu as mis et je te dis le résultat.

en fait je suis sur microsoft office (word, excel, powerpoint, publisher...) qui donne automatiquement ce qu'on appelle un bloc-note donc c'est ce que j'utilise pour faire mon site. Qu'est ce que tu appelles Notepadd++ ?
1
AssassinTourist Messages postés 5709 Date d'inscription lundi 16 janvier 2012 Statut Contributeur Dernière intervention 29 février 2024 1 310
22 févr. 2012 à 08:57
Notepadd++ est comme un bloc note mais avec des couleurs pour coder =) Il est gratuit bien sûr et est généralement utilisé pour coder un site web lorsqu'on fait "des lignes de code".

Un peu de détail par ici => https://www.commentcamarche.net/faq/4671-webmaster-choisir-un-bon-editeur-les-editeurs-a-eviter#notepad avec d'autres éditeurs différents si tu préfères.
0
Suite code html

<html>

<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>monhistoire</title>
</head>

<body id='id_monhistoire'>
<div id="bandeau"><h3><a href="default.htm">ACCUEIL</a> - MON HISTOIRE</h3></div>
<div id="menu"><img src="bobherbe.jpg" alt="bobherbe" width="350" height="422" /><br />
<br />
<img src="bobscare.jpg" alt="bobscare" width="350" height="246" />
</div>
<div id="contenu"><h4>Ceci est le contenu</div>
<div id="piedpage">Ceci est le pied de page</div>

</body>

</html>
0
Bonsoir Assassin tourist. Apparamment je ne dois pas être douée car mon texte est toujours en bas. J'ai regardé à nouveau mon html et mon css. En ce qui concerne le html, j'ai vérifié pour la balise du contenu et pourtant elle est fermée avec le </div>, c'est à dire :

<div id="contenu"><h4>Ceci est le contenu</div> Dans ces conditions il ne devrait pas y avoir de problème.

J'ai également mis le x60 et sans aucun résultat. Mais peut être quelque chose m'a échappé. Je renvoie la nouvelle mouture de mon code.

css tout d'abord

#id_monhistoire{background: #E8FF9C;}

h3 {color: #EE1162; font-family: verdana, arial, sans-serif;letter-spacing: 6px; font-size: 20pt; text-align: center;}
h4 {color: #24A743; font-family: verdana, arial, sans-serif;letter-spacing: 6px; font-size: 12pt;}

td {text-align : center;}

a { text-decoration:none ;}

a:visited { color:#006600 ;}

div#bandeau { text-align : center;
width:100%;
height:50px;
background-color:#00CCFF;
}

div#menu {margin : 20px 10px 10px 10px;
width:300px;
height:470px;
background-color:#E8FF9D;
}

div#contenu {margin :20px 10px 10px 60px;
float: top;
width:500px;
margin-left: 400px;

height:470px;
background-color:#E8FF9C;
}
div#piedpage { text-align : center ;
width:100%;
height:50px;
background-color:#33FF99;clear:both;
}
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Puis html

<html>

<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>monhistoire</title>
</head>

<body id='id_monhistoire'>

<div id="bandeau"><h3><a href="default.htm">ACCUEIL</a> - MON HISTOIRE</h3></div>

<div id="menu"><img src="bobherbe.jpg" alt="bobherbe" width="350" height="422" /><br />
<br />
<img src="bobscare.jpg" alt="bobscare" width="350" height="246" />
</div>

<div id="contenu"><h4>Ceci est le contenu</div>

<div id="piedpage">Ceci est le pied de page</div>

</body>

</html>
0
Hellou je te remets le bon code, comme toujours mal lu et cette fois ci ENFIN j'ai pu mettre mon texte en haut sauf que la police a changé et elle est plus petite, mais mon texte est en haut. Ouf. Grand merci

css

#id_monhistoire{background: #E8FF9C;}

h3 {color: #EE1162; font-family: verdana, arial, sans-serif;letter-spacing: 6px; font-size: 20pt; text-align: center;}
h4 {color: #24A743; font-family: verdana, arial, sans-serif;letter-spacing: 6px; font-size: 12pt;}

a { text-decoration:none ;}

a:visited { color:#006600 ;}

div#bandeau { text-align : center;
width:100%;
height:50px;
background-color:#00CCFF;
}

div#menu {margin : 20px 10px 10px 10px;
float : left;
width:300px;
height:470px;
background-color:#E8FF9D;
}

div#contenu {margin :20px 10px 10px 60px;
float : top left ;
width:500px;
margin-left: 400px;
height:470px;
background-color:#E8FF9C;
}

div#piedpage { text-align : center ;
width:100%;
height:50px;
background-color:#33FF99;clear:both;
}
0
AssassinTourist Messages postés 5709 Date d'inscription lundi 16 janvier 2012 Statut Contributeur Dernière intervention 29 février 2024 1 310
22 févr. 2012 à 23:14
La taille de ton texte a changé parce que le code css a enfin été pris en compte (grâce aux corrections du html) Si tu veux changer la taille, change les font-size pour que ce soit à ta convenance.
0
Bonjour AssassinTourist, j'ai envie de dire surtout grâce aux corrections faites sur le fichier css car effectivement, deux éléments float manquaient plus le fait de mettre 60 px dans le margin du contenu.

Ce qui est surtout bizzare, outre le fait que le html ait été pris en compte, c'est que non seulement ma taille de police a changé, mais également ma police qui est devenue times new roman et non Verdana, de même la couleur. Et sur mon fichier css, j'avais justement programmé une certaine taille pour la balise <h3> ainsi que la façon dont elle devait être alignée. Je regarderai cela plus attentivement ce soir.
0
AssassinTourist Messages postés 5709 Date d'inscription lundi 16 janvier 2012 Statut Contributeur Dernière intervention 29 février 2024 1 310
23 févr. 2012 à 08:14
?
De mon côté, en prenant les dernier codes que tu m'as donné, mes polices sont bien verdana...
0