Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1761 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Besoin d'aide pour site

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Besoin d'aide pour site

n°2167396
wolverineo​s
Graphiste Free
Posté le 09-12-2012 à 19:52:22  profilanswer
 

Voila j'ai le design que j'ai fais sous photoshop, étant graphiste pas de soucis, mais quand j'arrive dans dreamweaver avec le html et les css je merde car mes souvenirs sont lointoins ... :D  
Je n'arrive pas à centrer ma page, j'ai l'impression d'avoir oublié quelquechose  :??: Je met le design, les css et le Html si quelqu'un peut m'aider à résoudre ces petits soucis ça serait sympa, et avec une explication que je ne refasse pas les même erreurs
 
Merci d'avance
 
voila le design
http://www.ciadesign.com/images/template_page_suite.jpg
 
Voila le css

Citation :

body {
 background-color: #CCC;  
}
 
div#all {
 position:absolute;
 alignment-adjust:middle;
 box-shadow:#333;
 border-radius: 2px;
 height: 985;
 width: 1020px;
 background-color: #3e3e3e;
 alignment-adjust:auto;
}
div#header {
 width: 1020px;
 height: 80px;
 background-position:left;
 background-repeat:repeat-x;
 background-image:url(img/fd_header.jpg);
 color:#FFFFFF;
 font-family:Arial, Helvetica, sans-serif;
 
}
h1 : {
 color:#C00;
 font-family:Arial, Helvetica, sans-serif;
 font-size:14px;
 
 }
h2 : {
 color:#ffffff;
 font-family:Arial, Helvetica, sans-serif;
 font-size:9px;
 
 }
div#content_bas  {
 width: 1010px;
 height:auto;
 font: Arial, Helvetica, sans-serif;
 color:#FFFFFF;
 font-size:12px;  
}
div#footer  {
 width: 1020px;
 height: 15px;
 alignment-adjust:middle;
 font: Arial, Helvetica, sans-serif;
 color:#FFFFFF;
 background-color: #3e3e3e;
 font-size:9px;  
}


 
Et le HTML
[quote]
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>accueil ciadesign</title>
 <link href="style.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<div id="all" >
 <div id="header">
     <img src="img/fd_header.jpg" />
        <img src="img/logo1.png" width="241" height="79" align="left"/>
        <img src="img/gplus-icon.png?google +=" width="48" height="48" align="middle"/>
        <img src="img/twitter-icon.png?icone twitter=" width="48" height="48" align="middle"/>
        <img src="img/facebook-icon.png?icone facebook=" width="48" height="48" align="middle"/>
        <img src="img/linkedin-icon.png?icone linkedin=" width="48" height="48" align="middle"/>
        <img src="img/pinterest-icon.png?icone pinterest=" width="48" height="48" align="middle"/>
        <img src="img/skype-icon.png?icone skype=" width="48" height="48" align="middle"/>
    </div>
 <div id="content_haut">
     <img src="img/cover_b.png"  />  
    </div>
 <div id="content_bas" align="center">
     <p>Je suis graphiste freelance. J’interviens à tout les niveaux de la communication. Avant, pendant et après la réalisation de projet, je suis présent.
 >> Avant, pour les conseils et l’orientation à donner à votre projet.
 >> Pendant, pour mener à bien le projet, sans perte de temps.
 >> Après, pour les conseils quant à l’utilisation des moyens de communications mis à votre disposition.
 
Votre projet est destiné à l’impression, pas de soucis, mon expertise de 12 ans dans ce domaine me permet d’être éfficace et d’anticiper les éventuels soucis pouvant interférer dans la bonne conduite de votre projet.
Votre projet est à destinantion du web, pas de soucis, mon expertise et ma vielle permanente dans l’évolution du web et de ses moyens de communication me permettent de vous proposer des services tout aussi éfficaces et de qualité que pour l’impression.
 
J’interviens également en temps que formateur sur les logiciels Adobe Indesign, Photoshop & illustrator ainsi que dans le prépresse, la PAO.
Tout comme pour l’audit interne sur vos moyens de communication.
 
 // 12 ans dans la presse en temps que Redacteur Graphiste / D.A  
 // 5 ans en temps que journaliste
 // Co créateur du magazine SCOOTERGT.Fr
 // Depuis 2 ans Graphiste/D.A/Formateur/Consultant Freelance </p>
   <img src="img/sep_footer.png" align="middle" />
 
    </div>
 <div id="footer" align="center">
    <p> Copyright Alexandre Becquet - 2012 - T : 06 65 96 92 93 - @ : alexandre@ciadesign.Com</p>  
    </div>
</div>
</body>
</html>
[quote]


---------------
Galerie - Site
mood
Publicité
Posté le 09-12-2012 à 19:52:22  profilanswer
 

n°2167436
rufo
Pas me confondre avec Lycos!
Posté le 10-12-2012 à 13:22:57  profilanswer
 

dans div#all, tu mets :
margin-left: auto;
margin-right: auto;
 
Ca devrait faire l'affaire.
 
Edit : alignment-adjust est une propriété du css3. Tous les navigateurs la supportent pas forcément : http://www.cssportal.com/css-prope [...] adjust.htm


Message édité par rufo le 10-12-2012 à 13:28:15

---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
n°2167441
wolverineo​s
Graphiste Free
Posté le 10-12-2012 à 14:36:06  profilanswer
 

Merci pour les infos  :jap:  :jap:  
j'ai réussi en mettant ça dans le css
 
        position:absolute;
 width: 1020px;
 left: 50%;
 margin-left: -510px;

 
J'ai une autre petit question  :pt1cable: , la barre rouge étant ma barre de nav j'aimerais savoir si je me sert d'une div ou ul /li pour pouvoir mettre mon texte avec les liens dans cette barre
 
Merci d'avance


---------------
Galerie - Site
n°2167447
rufo
Pas me confondre avec Lycos!
Posté le 10-12-2012 à 14:55:39  profilanswer
 

En général, plutôt un ul / li. Sémantiquement, ça correspond mieux.


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
n°2167451
rufo
Pas me confondre avec Lycos!
Posté le 10-12-2012 à 14:56:53  profilanswer
 

wolverineos a écrit :

Merci pour les infos  :jap:  :jap:  
j'ai réussi en mettant ça dans le css
 
        position:absolute;
 width: 1020px;
 left: 50%;
 margin-left: -510px;

 
J'ai une autre petit question  :pt1cable: , la barre rouge étant ma barre de nav j'aimerais savoir si je me sert d'une div ou ul /li pour pouvoir mettre mon texte avec les liens dans cette barre
 
Merci d'avance


 
C'est pas une bonne solution ton position absolute avec un left à 50% et un marhin-left à -510px. T'as testé sur des écran de tailles différentes? Pour center, c'est la solution que je t'ai donnée normalement.
parfois, à rajouter un text-align: center;


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
n°2167459
gatsu35
Blablaté par Harko
Posté le 10-12-2012 à 16:39:36  profilanswer
 

margin:0 auto sur le conteneur principal


---------------
Blablaté par Harko
n°2167460
rufo
Pas me confondre avec Lycos!
Posté le 10-12-2012 à 16:48:33  profilanswer
 

gatsu35 a écrit :

margin:0 auto sur le conteneur principal


Ca revient à faire margin-left auto; et margin-right: auto; sur son conteneur principal (le div ayant pour id "all" ), sauf que ça met pas à 0 le margin-top comme avec ta proposition ;)


Message édité par rufo le 10-12-2012 à 16:48:44

---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
n°2167471
gatsu35
Blablaté par Harko
Posté le 10-12-2012 à 18:43:07  profilanswer
 

C'est pas un soucis, il n'a aucun margin-top sur #all


---------------
Blablaté par Harko
n°2167509
wolverineo​s
Graphiste Free
Posté le 11-12-2012 à 00:46:23  profilanswer
 

si je comprends bien ça marche mais c'est pas catholique  :D car je souhaites que mon site soit le plus proche du standard W3C. Mais comme je suis graphiste et que je suis plus créatif que codeur, mais que je veux le faire pour comprendre et savoir mieux le vendre à mes clients  :pt1cable: BREf j'ai ajouté une feuille de style normalyze, d'après ce que j'ai vu sur alsacreation c'est le plus simple.
 
Est ce que si je met la page en ligne à une certaine vous pouvez me dire ce que ça donne sur des écrans différents et pas en 27"  :jap: .
 
Une dernière question, avant que je commence ma recherche, est ce que l'affiche correct sur mobile ou tablette doit passer par le css ou un site entier.
 
MERKI de votre patience les gars  :jap:  
 


---------------
Galerie - Site
n°2167510
wolverineo​s
Graphiste Free
Posté le 11-12-2012 à 00:49:40  profilanswer
 

:D Ben ouai margin auto avec la taille a 1020 sans oublier px après 1020 ça fonctionne  [:b-rabbit]


---------------
Galerie - Site
mood
Publicité
Posté le 11-12-2012 à 00:49:40  profilanswer
 

n°2167511
gatsu35
Blablaté par Harko
Posté le 11-12-2012 à 02:10:39  profilanswer
 

Ya rien de pas catholique dans ce que je te propose, c'est juste comme ça qu'on écrit :)


---------------
Blablaté par Harko
n°2167537
wolverineo​s
Graphiste Free
Posté le 11-12-2012 à 13:26:42  profilanswer
 

Pas de critique envers toi Gatsu c'est pour moi ;)
Je veux bien écrire  :whistle:  :whistle:


---------------
Galerie - Site
n°2167980
wolverineo​s
Graphiste Free
Posté le 13-12-2012 à 19:04:12  profilanswer
 

ca avance mais je galère avec le placement d'icones ...  :D


---------------
Galerie - Site

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Besoin d'aide pour site

 

Sujets relatifs
Besoin d'aide pour un site web ...création de mon nouveau site. Besoin de vos lumieres
Besoin d'aide pour mon 1er sitebesoin d'aide pour finaliser mon site (position text et hover)
Besoin d'aide pour creation d'un site webbesoin d'aide pour un site svp.
Besoin d'aide pour un futur site > defilement photos (noob)Insertion de forum dans un site... Besoin d'aide svp!
besoin d'aide pour création de site de chien virtuelAvis sur une intro en flash
Plus de sujets relatifs à : Besoin d'aide pour site


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR