Pcinf     Assistance Pc Matériel Logiciel et Système     "Forum Informatique d'aide en ligne"
Touch'à Tout Pro Entretien de baliment et Locaux, Nettoyage de batiment et locaux, Espaces Verts, Lyon 69, Bourg 01, Villefranche 69, Macon 71
 

 
Web Pc-Informatique.net
                                        Recherche sur le ForumRecherche sur le Forum    Groupes d'utilisateursGroupes d'utilisateurs   InscriptionInscription         

Votre ProfilVotre Profil   Vérifier ses messages privésVérifier ses messages privés   Se connecterSe connecter    FAQ du forumFAQ du forum
PC-Informatique.net     tutoriaux
 
Sécurité Internet aide en ligne logiciel gratuit       Aide au Référencement      Dossier sur la sécurité Wi-fi : WEP, WPA...       Tuto VNC 4.1.1       Réencoder des .AVI et couper vos films       Activation désactivation de WGA Windows genuine advantage       Partage de connexion Internet       Installation de Mandriva Linux    Construction dune base de données MySQL Créer un formulaire et récupérer les données  _
 

    Le Site   TV ce soir  Météo  Cartes virtuelles gratuites  Sudoku  Contact Admin  Faire un lien  Calendrier 2011

probleme avec ma page d'accueil

 
Poster un nouveau sujet   Répondre au sujet    Forum Pcinf retour aux Forums -> Langages de programmation
Voir le sujet précédent :: Voir le sujet suivant  
Auteur Message
Jackwade
Rank Pr 3
Rank Pr 3


Inscrit le: 03 Sep 2005
Messages: 2268

MessagePosté le: Sam Fév 18, 2006 12:54 pm    Sujet du message: probleme avec ma page d'accueil Répondre en citant

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>
_________________
J'ai toujours rêvé d'un ordinateur qui soit aussi facile à utiliser qu'un téléphone. Mon rêve s'est réalisé : je ne sais plus comment utiliser mon téléphone.

Bjarne Stroustrup


Dernière édition par Jackwade le Dim Fév 19, 2006 1:07 am; édité 1 fois
Revenir en haut
Voir le profil de l'utilisateur Envoyer un message privé Envoyer l'e-mail
orgoz
Rank Pr 10
Rank Pr 10


Inscrit le: 14 Fév 2006
Messages: 34

MessagePosté le: Sam Fév 18, 2006 1:31 pm    Sujet du message: Répondre en citant

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
Revenir en haut
Voir le profil de l'utilisateur Envoyer un message privé
@YvesJean01@
Rank Pr 2
Rank Pr 2


Inscrit le: 09 Sep 2005
Messages: 3409
Localisation Pays-Ville: Guéreins 01090

MessagePosté le: Sam Fév 18, 2006 7:49 pm    Sujet du message: Répondre en citant

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
Revenir en haut
Voir le profil de l'utilisateur Envoyer un message privé Envoyer l'e-mail Visiter le site web du posteur MSN Messenger - Windows Live Messenger
Jackwade
Rank Pr 3
Rank Pr 3


Inscrit le: 03 Sep 2005
Messages: 2268

MessagePosté le: Dim Fév 19, 2006 1:20 am    Sujet du message: Répondre en citant

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;
}
_________________
J'ai toujours rêvé d'un ordinateur qui soit aussi facile à utiliser qu'un téléphone. Mon rêve s'est réalisé : je ne sais plus comment utiliser mon téléphone.

Bjarne Stroustrup
Revenir en haut
Voir le profil de l'utilisateur Envoyer un message privé Envoyer l'e-mail
@YvesJean01@
Rank Pr 2
Rank Pr 2


Inscrit le: 09 Sep 2005
Messages: 3409
Localisation Pays-Ville: Guéreins 01090

MessagePosté le: Lun Fév 20, 2006 11:03 am    Sujet du message: Répondre en citant

Jackwade a écrit:
j'ai essayé aussi d'utiliser des positions absolutes mais ca fait pareil.


Voila le complément pour positionner au mieux ton (tes) éléments, Les modifications qui sont a faire sur la feuille de style sont au niveau du centre et des sous Menu auquel tu doit rajouter ceci « position :absolute » pour #centre & « width » pour .sous_menu avec le Doctype a modifier

ce qui te donne pour ta feuille de style en cascade une fois modifier:

Code:
#centre
{
margin-left: 160px;
margin-bottom: 30px;
padding: 7px;
color: #B3B3B3;
background-color: #626262;
border: 3px solid black;
position:absolute;
left:100px;
top:170px
}

Pour left et top faire varier les px aux choix
Code:
.sous_menu
{
background-color: #626262;
border: 3px solid black;
margin-bottom: 40px;
width: 120px;
}


Pour width faire varier les px aux choix.

Tu rencontre un problème avec ton (tes) browsers qui ne comprennent pas la feuille de style en cascade pour passer partout je te préconise vue les syntaxes de CSS que tu veut employer de passer du mode STRICT au mode TRANSITOIRE plus souple dont voici le Doctype pour le XHTML 1,0 Transitoire
Code:
</de PUBLIC de HTML de!doctype "-/W3C//dtd XHTML 1,0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
Revenir en haut
Voir le profil de l'utilisateur Envoyer un message privé Envoyer l'e-mail Visiter le site web du posteur MSN Messenger - Windows Live Messenger
Jackwade
Rank Pr 3
Rank Pr 3


Inscrit le: 03 Sep 2005
Messages: 2268

MessagePosté le: Lun Fév 20, 2006 10:45 pm    Sujet du message: Répondre en citant

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
_________________
J'ai toujours rêvé d'un ordinateur qui soit aussi facile à utiliser qu'un téléphone. Mon rêve s'est réalisé : je ne sais plus comment utiliser mon téléphone.

Bjarne Stroustrup
Revenir en haut
Voir le profil de l'utilisateur Envoyer un message privé Envoyer l'e-mail
Jackwade
Rank Pr 3
Rank Pr 3


Inscrit le: 03 Sep 2005
Messages: 2268

MessagePosté le: Mar Fév 21, 2006 9:53 pm    Sujet du message: Répondre en citant

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.
_________________
J'ai toujours rêvé d'un ordinateur qui soit aussi facile à utiliser qu'un téléphone. Mon rêve s'est réalisé : je ne sais plus comment utiliser mon téléphone.

Bjarne Stroustrup


Dernière édition par Jackwade le Mer Fév 22, 2006 5:30 pm; édité 1 fois
Revenir en haut
Voir le profil de l'utilisateur Envoyer un message privé Envoyer l'e-mail
@YvesJean01@
Rank Pr 2
Rank Pr 2


Inscrit le: 09 Sep 2005
Messages: 3409
Localisation Pays-Ville: Guéreins 01090

MessagePosté le: Mer Fév 22, 2006 12:56 am    Sujet du message: Répondre en citant

Rajoute a

#menu
Code:
{
height: 80px;
}

(fais varier les px) et joue avec

#en_tete en baissant a height: 50px; et au besoin avec #centre top:170px qui fait varier également la hauteur
Revenir en haut
Voir le profil de l'utilisateur Envoyer un message privé Envoyer l'e-mail Visiter le site web du posteur MSN Messenger - Windows Live Messenger
Jackwade
Rank Pr 3
Rank Pr 3


Inscrit le: 03 Sep 2005
Messages: 2268

MessagePosté le: Jeu Fév 23, 2006 1:49 am    Sujet du message: Répondre en citant

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
_________________
J'ai toujours rêvé d'un ordinateur qui soit aussi facile à utiliser qu'un téléphone. Mon rêve s'est réalisé : je ne sais plus comment utiliser mon téléphone.

Bjarne Stroustrup
Revenir en haut
Voir le profil de l'utilisateur Envoyer un message privé Envoyer l'e-mail
Jackwade
Rank Pr 3
Rank Pr 3


Inscrit le: 03 Sep 2005
Messages: 2268

MessagePosté le: Jeu Mar 02, 2006 11:53 pm    Sujet du message: Répondre en citant

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.
_________________
J'ai toujours rêvé d'un ordinateur qui soit aussi facile à utiliser qu'un téléphone. Mon rêve s'est réalisé : je ne sais plus comment utiliser mon téléphone.

Bjarne Stroustrup
Revenir en haut
Voir le profil de l'utilisateur Envoyer un message privé Envoyer l'e-mail
@YvesJean01@
Rank Pr 2
Rank Pr 2


Inscrit le: 09 Sep 2005
Messages: 3409
Localisation Pays-Ville: Guéreins 01090

MessagePosté le: Ven Mar 03, 2006 7:55 pm    Sujet du message: Répondre en citant

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.
Revenir en haut
Voir le profil de l'utilisateur Envoyer un message privé Envoyer l'e-mail Visiter le site web du posteur MSN Messenger - Windows Live Messenger
Jackwade
Rank Pr 3
Rank Pr 3


Inscrit le: 03 Sep 2005
Messages: 2268

MessagePosté le: Ven Mar 03, 2006 11:14 pm    Sujet du message: Répondre en citant

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.
_________________
J'ai toujours rêvé d'un ordinateur qui soit aussi facile à utiliser qu'un téléphone. Mon rêve s'est réalisé : je ne sais plus comment utiliser mon téléphone.

Bjarne Stroustrup
Revenir en haut
Voir le profil de l'utilisateur Envoyer un message privé Envoyer l'e-mail
@YvesJean01@
Rank Pr 2
Rank Pr 2


Inscrit le: 09 Sep 2005
Messages: 3409
Localisation Pays-Ville: Guéreins 01090

MessagePosté le: Sam Mar 04, 2006 9:42 pm    Sujet du message: Répondre en citant

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

Code:

<html>
<head>
<style type="text/css">
td.test {padding: 0 cm 3.0cm}
td.testbis {padding: 0.1cm 0.10cm}
</style>
</head>

<body>
<table border="2">
<tr>
<td class="test">
Welecome sur Pc-Informatique.net</td>
</tr>
</table>

<table border="3">
<tr>
<td class="testbis">Bienvenue sur Pc-Informatique.net
<a href="http://pc-informatique.net/forum/" target="_blank"><img src="http://pc-
informatique.net/windows/images/banniere468x60pcinf.gif" width="468" height="60" border="0" alt="PC-Informatique.net des problemes une alternative"></a></td>
</tr>
</table>
</body>
</html>
Revenir en haut
Voir le profil de l'utilisateur Envoyer un message privé Envoyer l'e-mail Visiter le site web du posteur MSN Messenger - Windows Live Messenger
Jackwade
Rank Pr 3
Rank Pr 3


Inscrit le: 03 Sep 2005
Messages: 2268

MessagePosté le: Dim Mar 05, 2006 2:47 pm    Sujet du message: Répondre en citant

Ok merci, j'essayerais cette manip Wink
_________________
J'ai toujours rêvé d'un ordinateur qui soit aussi facile à utiliser qu'un téléphone. Mon rêve s'est réalisé : je ne sais plus comment utiliser mon téléphone.

Bjarne Stroustrup
Revenir en haut
Voir le profil de l'utilisateur Envoyer un message privé Envoyer l'e-mail
Jackwade
Rank Pr 3
Rank Pr 3


Inscrit le: 03 Sep 2005
Messages: 2268

MessagePosté le: Mer Mar 08, 2006 10:27 pm    Sujet du message: Répondre en citant

Finallement, je me suis servi des tableaux pour autre chose Smile
_________________
J'ai toujours rêvé d'un ordinateur qui soit aussi facile à utiliser qu'un téléphone. Mon rêve s'est réalisé : je ne sais plus comment utiliser mon téléphone.

Bjarne Stroustrup
Revenir en haut
Voir le profil de l'utilisateur Envoyer un message privé Envoyer l'e-mail
@YvesJean01@
Rank Pr 2
Rank Pr 2


Inscrit le: 09 Sep 2005
Messages: 3409
Localisation Pays-Ville: Guéreins 01090

MessagePosté le: Jeu Mar 09, 2006 2:03 am    Sujet du message: Répondre en citant

Oui, c'est une table passe partout, par contre regarde bien ci la représentation est bonne sous Firefox
Revenir en haut
Voir le profil de l'utilisateur Envoyer un message privé Envoyer l'e-mail Visiter le site web du posteur MSN Messenger - Windows Live Messenger
@YvesJean01@
Rank Pr 2
Rank Pr 2


Inscrit le: 09 Sep 2005
Messages: 3409
Localisation Pays-Ville: Guéreins 01090

MessagePosté le: Jeu Juin 22, 2006 12:01 am    Sujet du message: Répondre en citant

La page d'accueil est en ligne visiblement Wink
Revenir en haut
Voir le profil de l'utilisateur Envoyer un message privé Envoyer l'e-mail Visiter le site web du posteur MSN Messenger - Windows Live Messenger
Jackwade
Rank Pr 3
Rank Pr 3


Inscrit le: 03 Sep 2005
Messages: 2268

MessagePosté le: Jeu Juin 22, 2006 10:02 pm    Sujet du message: Répondre en citant

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
_________________
J'ai toujours rêvé d'un ordinateur qui soit aussi facile à utiliser qu'un téléphone. Mon rêve s'est réalisé : je ne sais plus comment utiliser mon téléphone.

Bjarne Stroustrup
Revenir en haut
Voir le profil de l'utilisateur Envoyer un message privé Envoyer l'e-mail
Montrer les messages depuis:   
Poster un nouveau sujet   Répondre au sujet    Forum Pcinf retour aux Forums -> Langages de programmation Toutes les heures sont au format GMT + 2 Heures
Page 1 sur 1

 
Sauter vers:  
Vous pouvez poster de nouveaux sujets dans ce forum
Vous pouvez répondre aux sujets dans ce forum
Vous ne pouvez pas éditer vos messages dans ce forum
Vous ne pouvez pas supprimer vos messages dans ce forum
Vous ne pouvez pas voter dans les sondages de ce forum
Coin pub d'échange de bannières Pcinf
Touch' à Tout depannage Informatique et Bricolage a domicile Belleville 69220, Bourg 01, Villefranche 69, Macon 71
 

Sites Partenaires:>>   Entreprise multi-services Guéreins |Entreprise de Nettoyage |Espaces Verts |Gardiennage |Travaux de bricolage |Assistance informatique |Boules Unibloc Caudera |Cleanpc |Vistaprint cartes de visite gratuite

Référenceur:---->> |Référencement gratuit Denicher.com |metamoteur |PHP Sources |boosterforum.com


Pages vues sur la multiboard


Powered by phpBB © 2001, 2005 phpBB Group

Anti Bot Question MOD - phpBB MOD against Spam Bots
Inscriptions bloquées: 38056
Modified scripts and design © 2005, 2017 Tous droits réservés Pc-informatique.net
Traduction par : phpBB-fr.com