probleme avec ma page d'accueil

Jackwade · Rank Pr 2 Inscrit le: 03 Sep 2005 Messages: 1617

Je suis en train de refaire ma page d'accueil en css et j'ai un petit souci pour mes blocks de page, j'espèreque vous allez pouvoir m'éclairer Neutral

Si vous voulez, j'ai créé une page en xhtml où dessus j'ai créé mon block en tête, menu qui se trouve à gauche, ma page corps qui j'aimerais bien se retrouve à côté du menu et mon pied de page.

Pour cela, j'ia utilisé les balises <div> </div> pour chaque block plus encore des <div> </div> à l'intérieur de mon block menu pour faire les sous menus.

Ensuite, j'utilise ma page css ou là j'utilise un float left dans l'id centre et je décale ma marge de gauche comme ca je me dis il va remonter juste à côté du menu et ben ca marche pas, il reste en dessous du menu.

Donc, je suis bloqué ici, j'ai essayé aussi d'utiliser des positions absolutes mais ca fait pareil.

Pour mieux comprendre, voilà la partie de mon code xhtml du moment :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Page d'accueil de PC-Informatique</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design Pc-informatique" href="pcinformatique.css">
</head>

<body>

<div id="en_tete">

</div>

<div id="menu">

<div class="sous_menu">
<h3>Accueil</h3>

</div>

<div class="sous_menu">
<h3>Forum</h3>
</div>

<div class="sous_menu">
<h3>Partenaires</h3>

</div>

<div id="centre">

<h2>Bienvenue sur PC-Informatique</h2>

<p>mon texte va être écris ici<p>

</div>

<div id="footer">

<p>Copyright "l'équipe PC-Informatique" 2006, Tous droits réservés</p>
</div>

</body>
</html>
_________________
Allez les Verts, c'est cette année ou jamais !!

orgoz · Rank Pr 10 Inscrit le: 14 Fév 2006 Messages: 34

et si tu utilisais des span plutot que des div pour tes sous-menus Neutral

Si c'est juste pour afficher une ligne de texte, les div ne sont pas forcement utile

@YvesJean01@ · Posté le: Sam Fév 18, 2006 6:49 pm Sujet du message:

Tu veut ton Menu « accueil, forum, partenaire » sur la gauche a ca place actuel et centrer le corp du texte en le remontant au même niveau pour confirmation Neutral

Il manque aussi la partie qui rejoint la feuille de style, si tu peut faire un copier/coller du tout Rolling Eyes

Jackwade · Rank Pr 2 Inscrit le: 03 Sep 2005 Messages: 1617

Non Orgoz, tu peux pas utiliser la balise span ici, ca sert que pour les balises de type inline et la c'est une balise de type block.

Oui yvesjean, je veux mon menu au même niveau que mon corps du texte, c'est exactement ca.

Je mets mon code avec le float comme j'ai essayé.

body
{
width: 1000px;
margin: auto;
margin-top: 40px;
margin-bottom: 40px;
}

#en_tete
{

width: 1000px;
height: 100px;

#menu
{
width: 120px;
float: left;
}

.sous_menu
{
background-color: #626262;
border: 3px solid black;
margin-bottom: 40px;
}

#centre
{
margin-left: 160px;
margin-bottom: 30px;
padding: 7px;
color: #B3B3B3;
background-color: #626262;
border: 3px solid black;
}
_________________
Allez les Verts, c'est cette année ou jamais !!

@YvesJean01@ · Posté le: Lun Fév 20, 2006 10:03 am Sujet du message:

Jackwade · Rank Pr 2 Inscrit le: 03 Sep 2005 Messages: 1617

Ok, j'essaye tout ca, dès que j'ai un moment et je te tiens au courant.
En tout cas, merci d'avance Wink

_________________
Allez les Verts, c'est cette année ou jamais !!

Jackwade · Rank Pr 2 Inscrit le: 03 Sep 2005 Messages: 1617

Bon alors ca marche pas trop mal comme ca mais moi, je voulais garder la commande float left dans le menu. Où ca m'embête c'est que le corps remonte pas à côté du menu alors qu'il devrait remonter.

_________________
Allez les Verts, c'est cette année ou jamais !!

@YvesJean01@ · Posté le: Mar Fév 21, 2006 11:56 pm Sujet du message:

Rajoute a

#menu

Jackwade · Rank Pr 2 Inscrit le: 03 Sep 2005 Messages: 1617

Merci bien yvesjean01 pour ton aide, ta manip fonctione bien et finallement j'ai compris aussi mon prob avec le float, j'avais un problème de balisage.
Maintenant plus qu'à l'avancé Wink

_________________
Allez les Verts, c'est cette année ou jamais !!

Jackwade · Rank Pr 2 Inscrit le: 03 Sep 2005 Messages: 1617

J'avance petit à petit mais ca avance mais là un nveau prob se pose.

C'est plus une question d'esthétique, j'aimerais en fait savoir s'il était possible que mes bordures d'un block, par exemple mon corps de page soit fait avec une image.

Pour faire plus simple, c'est intégré une image (un trait de 4px, par exemple) pour les bordures de mes blocks.
_________________
Allez les Verts, c'est cette année ou jamais !!

@YvesJean01@ · Posté le: Ven Mar 03, 2006 6:55 pm Sujet du message:

Il faut que tu rajoutes ca dans la classe ou tu veux ta modification

border-style: le style ici ;
border-color: le style ici ;

Suivant si ton image est héberger sur un autre Site ou interne a ton Site rajoute ca dans ta classe pour la couleur de ton corp de page!

background: url( url image ici );
ou
background-image: url( dossier image ici);

En rouge c’est ce qui est a modifier, si tu ne connaît pas toutes les Styles de bordures je peut tant citer quelques unes, au mieux sans vouloir t’obliger télécharge TopStyle version 3.1.0 qui permet de visualiser ces créations toutes en modifiant ces codes dans un fichier texte

Par contre tu peut la jouer autrement,

<td class=" ta classe ici " border="0"> </td>

La tu fait varier la dimension de la bordure, mais également avec ceci :

border- width: 1px 0px 0px 0px;

Tout dépend en faite du mode que tu a choisi au départ car si tu a garder le mode strict tu risque d’avoir des problèmes d’insertion suivant la méthode employer, je bosse toujours en mode Transitional de mon cotés donc les testes de fonctionnement risque de varier.
Et aussi suivant le navigateur car note que border-style est très mal représenter sous le navigateur ce jour sous Firefox.

Jackwade · Rank Pr 2 Inscrit le: 03 Sep 2005 Messages: 1617

Je savais que j'allais mal me faire comprendre mais je ne sais pas comment m'expliqué.
Mr. Green

Pour mieux comprendre, regarde sur la page d'accueil Comme par exemple autour du corps du texte ou il y a écris Bienvenue sur PC Informatique et ben en fit c'est un peu le même genre de bordure que je veux mais j'ai l'impression qu'elles sont faites par des images.
_________________
Allez les Verts, c'est cette année ou jamais !!

@YvesJean01@ · Posté le: Sam Mar 04, 2006 8:42 pm Sujet du message:

Ok, c’est pour ca que j’avait mis plusieurs manip, effectivement elle ont l’air d’etre fait par des images, ci tu na pas la banque d’image dans un dossier annexe c’est qu’il y a redirection en Javascript ..

En tout cas voici un rendu que devrait te plaire, et qui en est très proche, ces bouts de code peuvent etre optimiser suivant ton choix. Smile

tu a juste a remplacer td.test / td.testbis / class="test" / class="testbis" par ceux de ta source

Jackwade · Rank Pr 2 Inscrit le: 03 Sep 2005 Messages: 1617

Ok merci, j'essayerais cette manip Wink

_________________
Allez les Verts, c'est cette année ou jamais !!

Jackwade · Rank Pr 2 Inscrit le: 03 Sep 2005 Messages: 1617

Finallement, je me suis servi des tableaux pour autre chose Smile

_________________
Allez les Verts, c'est cette année ou jamais !!

@YvesJean01@ · Posté le: Jeu Mar 09, 2006 1:03 am Sujet du message:

Oui, c'est une table passe partout, par contre regarde bien ci la représentation est bonne sous Firefox

@YvesJean01@ · Posté le: Mer Juin 21, 2006 11:01 pm Sujet du message:

La page d'accueil est en ligne visiblement Wink

Jackwade · Rank Pr 2 Inscrit le: 03 Sep 2005 Messages: 1617

Oui ca y est elle est en ligne mais elle va changer d'ici quelques mois : je mettrais les 10 derniers messages du forum....
En tout cas, merci pour le coup de main yvesjean Wink

_________________
Allez les Verts, c'est cette année ou jamais !!

	Forum Pcinf retour aux Forums -> Langages de programmation	Toutes les heures sont au format GMT + 1 Heure
Page 1 sur 1

Pcinf Assistance Pc Matériel Logiciel et Système "Forum Informatique d'aide en ligne"