Flux rss
Ils ont besoin de votre aide
Collection CommentCaMarche.net
Rechercher : dans
Par : Pertinence Date Nom d'utilisateur
Statut : Résolu

Problème de mise en page sur un template html

oliverge, le vendredi 29 août 2008 à 22:15:57
Bonjour,

Bonjour à tous,

J'ai un problème assez stupide que mes compétences limitées en html m'empêchent
de résoudre.

J'ai acheté un template html tout simple, le problème étant que les pages de ce templates
sont centrées sur l'écran et j'ai besoin d'aligner mes pages à gauche.

La page est composée de tableaux et de balises DIV pour une largeur de 796pix ensuite il y a
des marges à droite et à gauche (normal) qui s'affichent en zone hachurée dans mon dreamweaver cs3.
Les pages son également reliées à une feuille de style CSS.

Ce problème doit certainement se régler en 30 secondes par un expert, mais moi je séche...

Merci de me contacter en MP, problème urgent. Bonus pour celui qui me dépatouillera ma page.
Répondre à oliverge  Signaler ce message aux modérateurs Aller au dernier message

1


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
societeserieuse, le vendredi 29 août 2008 à 22:34:01
et si tu postai ton code ?
   
Répondre à societeserieuse

2


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Groarh, le vendredi 29 août 2008 à 22:42:01
Bonsoir,
je suppose que quelqu'un s'est déjà proposé pour t'aider.

Moi je voudrais te poser une question : quel est l'enflé qui ose VENDRE des templates à base de tables et divs ? C'est proprement scandaleux ! C'est de l'entubage profond !!

Et conseil à propos de Dreamweaver : c'est bien pour débuter mais mets-toi en mode mixte et apprends à faire sans.
   
Répondre à Groarh

3


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
societeserieuse, le vendredi 29 août 2008 à 22:43:09
lol les 3/4 des templates html st en html a base de table
   
Répondre à societeserieuse

4


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Groarh, le vendredi 29 août 2008 à 22:44:23
Les 3/4 des templates sont gratuits !!
   
Répondre à Groarh

5


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
oliverge, le vendredi 29 août 2008 à 22:52:47
Ok, voici le code de la page, j'ai enlevé tout le contenu, il ne reste plus que la structure
c'est pas super comme ça, je peux transmettre les fichiers par mail, beaucoup plus simple :

<!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="en" lang="en">
<head>
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="layout.css" rel="stylesheet" type="text/css" />
<script src="maxheight.js" type="text/javascript"></script>
</head>

<body id="page1" onload="new ElementMaxHeight();">
<div class="min_width">
<div class="top">
<div class="row1">
<div class="site_center">
<div class="main">
<div class="fleft">
<a href="index.html"><img src="images/spacer.gif" alt="" width="215" height="124" class="pos" /></a>
<h1>steiner</h1>
</div>
<div class="fright"><a href="index-1.html"><img src="images/m2_p1.gif" alt="" /></a><a href="index-2.html"><img src="images/m3_p1.gif" alt="" /></a><a href="index-3.html"><img src="images/m4_p1.gif" alt="" /></a><a href="index-4.html"><img src="images/m5_p1.gif" alt="" /></a><a href="index-5.html"><img src="images/m6_p1.gif" alt="" /></a> </div>
</div>
</div>
</div>
<div class="row2">
<div class="site_center">
<div class="main">
<div class="right">
<div class="spacer"></div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<div class="row3">
<div class="site_center">
<div class="main">
<div class="indent">
<div style="width:100%">
<div class="col1 maxheight">
<div class="ind">
<div class="alignright"></div>
</div>
</div>
<div class="col2 y maxheight">
<div class="ind">
<div class="alignright"></div>
</div>
</div>
<div class="col3 y maxheight">
<div class="ind">
<div class="alignright"></div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</div>
<div class="row4">
<div class="site_center">
<div class="main">
<div class="col1">
<div class="indent"></div>
</div>
<div class="col2">
<div class="indent"></div>
</div>
<div class="col3">
<div class="indent"></div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
<div class="bot">
<div class="site_center">
<div class="main" id="footer">
<div class="fleft"></div>
<div class="fright"></div>
</div>
</div>
</div>
</div>
</body>
</html>

----------------------------------------------------------------------------------------------------------------------------------------------

et voici le code de la feuille CSS :

* { margin:0; padding:0;}
body { background: url(images/body.gif) }
html, input, textarea, select{font-family:arial; font-size:100%; color:#7a7a7a; font-weight:normal; font-size:0.75em; line-height:1.15em}


/*in_line*/
input, select { vertical-align:middle; font-weight:normal;}
img {border:0; vertical-align:top; text-align:left;}

a{ color:#1177b7; text-decoration:underline}
a:hover{ text-decoration:none}


.clear { clear:both;}

.fleft { float:left;}
.fright { float:right;}

.alignright { text-align:right;}

.title, .title_top, .title_bot{ display:block}

.link{ color:#1788a3; text-decoration:underline; background:url(images/marker.gif) no-repeat 0 4px; padding-left:16px}
.link:hover{ text-decoration:none}

.link1{ color:#1177b7; text-decoration:underline; background:url(images/marker.gif) no-repeat 0 4px; padding-left:16px}
.link1:hover{ text-decoration:none}

.link2{ color:#a1a1a1; text-decoration:underline}
.link2:hover{ text-decoration:none}

p {margin:0; padding:0;}
h1 { text-indent:-1000px; padding:0; margin:0; line-height:1em; font-size:1em; background:url(images/logo.gif) no-repeat 0 0; width:215px; height:124px}
.pos{ position:absolute; margin-top:0; padding:0}
h2 { padding:0; margin:0; font-size:1em; padding-bottom:15px; line-height:1.275em}

ul { margin:0; padding:0; list-style:none; line-height:1.65em}
ul li{ background:url(images/list_bg.gif) no-repeat 0 5px; padding-left:14px}
ul li a { color:#9b9b9b; text-decoration: underline; font-weight:normal}
ul li a:hover{ text-decoration:none}

.separate{ background:url(images/bgd.gif) repeat-x left bottom; height:14px}

.top{ width:100%}
.top .row1{ height:124px; width:100%; background:#FFFFFF}
.top .row1 .fright{ padding-top:49px; padding-right:33px; text-align:right}
.top .row2{ width:100%; background:#FFFFFF}
.top .row2 .left{ width:494px; float:left; background:url(images/main_pic.jpg) no-repeat 21px 0}
.top .row2 .right{ margin-left:494px; color:#000000;}
.top .row2 .right span{ color:#a1a1a1}
.top .row2 .right .spacer{ float:left; height:335px}
.top .row2 .right .indent{ padding:3px 30px 0 5px; float:left }
.top .row2 .right p{ padding-bottom:35px}
.top .row2 .right .bg{background:url(images/bg_bot.gif) repeat-x left bottom; width:100%; padding-bottom:3px}
.top .row2 .right .img{ float:left; margin:3px 25px 20px 0}

.top .row3{ width:100%; background:url(images/row3_bg.gif) repeat-x left bottom #FFFFFF}
.top .row3 .indent{ padding:28px 0 39px 0}

.top .row4{ width:100%;}
.top .row4 a{ color:#1177b7}
.top .row4 ul li a { color:#9b9b9b}

.bot{ width:100%; height:50px; background:url(images/bot_bg.gif) repeat-x}

/*txt, links*/
.link{ background:url(images/marker.gif) no-repeat 0 3px; padding-left:15px; color:#1177b7; text-decoration:underline}
.link:hover{ text-decoration:none}


/*header*/

/*content*/
.title{ margin-bottom:20px}

.y{ background:url(images/y.gif) repeat-y}
.y1{ background:url(images/y1.gif) repeat-y}


.row3 p{ padding-bottom:15px}
.row4 p{ padding-bottom:15px}

/*footer*/
#footer .fleft{ color:#9d9d9d; padding:20px 0 0 18px}
#footer .fleft a{ color:#9d9d9d; text-decoration:underline}
#footer .fleft a:hover{ text-decoration:none}

#footer .fright{ padding:18px 38px 0 0}


/*================== index.html ==================*/
#page1 .top .row2 .left{ height:335px}

#page1 .row3 .col1 .ind{ padding:10px 25px 10px 23px}
#page1 .row3 .col2 .ind{ padding:10px 25px 10px 21px}
#page1 .row3 .col3 .ind{ padding:10px 25px 10px 21px}
#page1 .row3 .col3 .img{ float:left; margin:10px 7px 0 0}
#page1 .row3 .col3 .alignright{ padding-right:30px}
#page1 .row4 .indent{ padding:49px 0 40px 28px}

/*================== index-1.html ==================*/
#page2 .separate{ height:30px}

#page2 .top .row2 .left{ height:335px}
#page2 .main{ margin:0 auto}
#page2 .top .row2 .right p{ padding-bottom:20px}
#page2 .top .row2 .right .alignright{ padding-top:14px}

#page2 .top .row3 .indent{ padding:28px 0 45px 0}
#page2 .top .row3 .col1 .ind{ padding:11px 27px 0 22px}
#page2 .top .row3 .col1 .img{ margin:3px 24px 45px 0; float:left}
#page2 .top .row3 .col1 .alignright{ padding-top:10px}
#page2 .top .row3 .col1 .block{ width:100%; margin-top:15px}
#page2 .top .row3 .col1 .block .c1{ width:57%; float:left}
#page2 .top .row3 .col1 .block .c2{ width:42%; float:left}

#page2 .top .row3 .col2 .ind{ padding:11px 27px 0 22px}
#page2 .top .row3 .col2 .img{ float:left; margin:3px 25px 29px 0}


/*================== index-2.html ==================*/
#page3 .row2{ background:url(images/row3_bg.gif) repeat-x left bottom #FFFFFF}
#page3 .row2 .left{ width:494px; float:left}
#page3 .row2 .left .r1{ height:335px; text-align:center }
#page3 .row2 .left .r2{ width:100%; padding:27px 0 16px 0}
#page3 .row2 .left .r2 .bg{ width:100%; background:url(images/y.gif) repeat-y 467px 0}
#page3 .row2 .left .r2 .bg .ind{ padding:8px 60px 22px 22px}

#page3 .row2 .right{ margin-left:494px}
#page3 .row2 .right .indent{ padding-right:33px; padding-bottom:34px}
#page3 .row2 p{ padding-bottom:15px}
#page3 .row2 .left .indent{ padding:3px 30px 30px 4px}
#page3 .row2 .left .img{ float:left; margin-right:23px}
#page3 .row2 .left ul{ margin:15px 0 0 193px}

#page3 .row4 .indent{ padding:31px 0 30px 0 }
#page3 .row4 .ind{ padding: 17px 30px 15px 23px}
#page3 .row4 .img{ float:left; margin:3px 23px 0 0}

/*================== index-3.html ==================*/
#page4 .separate{ height:34px}
#page4 .top .row2 .left{ height:335px}
#page4 .top .row2 .right .img{ margin:3px 25px 15px 0; float:left}
#page4 .top .row2 p{ padding-bottom:17px}
#page4 .top .row2 ul{ margin-left:126px}

#page4 .row3 .col1 .ind{ padding:10px 25px 10px 23px}
#page4 .row3 .col1 .img{ margin:2px 24px 24px 0; float:left}
#page4 .row3 .col2 .ind{ padding:10px 25px 10px 21px}
#page4 .row3 .col2 .img{ float:left; margin:0 17px 13px 0}

/*================== index-4.html ==================*/
#page5 .top .row2 .left{ height:335px}
#page5 .top .row2 .right .img{ margin:3px 23px 18px 0; float:left}
#page5 .top .row2 .right .indent{ padding-right:44px}
#page5 .top .row2 .right p{ padding-bottom:15px}
#page5 .separate{ height:17px}

#page5 .row3 .col1 .ind{ padding:10px 30px 10px 23px}
#page5 .row3 .col1 .img{ margin:3px 22px 0 0; float:left}
#page5 .row3 .col2 .ind{ padding:10px 25px 10px 21px}
#page5 .row3 .col2 .img{ float:left; margin:0 20px 10px 0}
#page5 .row3 .col2 ul{ margin-bottom:10px}

#page5 .row4 .indent{ padding:31px 0 30px 0}
#page5 .row4 .col1 .ind{ padding:9px 30px 15px 23px}
#page5 .row4 .col2 .ind{ padding:51px 30px 15px 33px}
#page5 .row4 .img{ margin:3px 23px 0 0; float:left}


/*================== index-5.html ==================*/
#page6 .top .row2 .left{ height:335px}
#page6 .top .separate{ height:35px}
#page6 .top p{ padding-bottom:15px}

#page6 .row3 .ind{ padding:10px 18px 5px 23px}
#page6 .row3 .col1 .img{ display:block; margin-bottom:26px}

#page6 .row3 .col3 .form_block{ width:230px}
#page6 .row3 .col3 .form_block .row{ width:100%; height:40px}
#page6 .row3 .col3 .form_block input{ width:228px; height:25px; background:#FFFFFF; border:#a1a1a1 1px solid; font-family:arial; font-size:1em; color:#7a7a7a}
#page6 .row3 .col3 .form_block textarea{ width:228px; height:121px; background:#FFFFFF; border:#a1a1a1 1px solid; font-family:arial; font-size:1em; color:#7a7a7a; overflow:auto}
#page6 .row3 .col3 .form_block .alignright{ padding-top:15px}
#page6 .row3 .col3 .form_block .alignright a{ margin-left:15px}

#page6 span{ color:#1177b7}


/*================== index-6.html ==================*/
#page7 .top .row2 .left{ height:335px}
#page7 .top p{ padding-bottom:15px}
#page7 .top span{ color:#a1a1a1}
#page7 .top .indent{ padding-right:42px}
#page7 .top .separate{ height:37px}

#page7 .row3 .indent{ padding:38px 46px 40px 21px}

/*================== index-7.html ==================*/

------------------------------------------------------------------------------------------------

.site_center {text-align:center}
.main { width:780px; margin:0 auto; text-align:left;}
.min_width {width:expression(((document.documentElement.clientWidth || document.body.clientWidth) < 780)? "780px" : "100%"); min-width:780px;}

/*======= header =======*/
#header{ height:479px; width:100%}

/*======= footer =======*/
#footer{ height:50px}

/*======= content =======*/

#header, #content, #footer{ min-width:780px}
.col_1, .col_2, .col_3, .col1, .col2, .col3 { float:left;}

/*======= index.html =======*/
#page1 .row3 .col1{ width:30%}
#page1 .row3 .col2{ width:31%}
#page1 .row3 .col3{ width:38%}

#page1 .row4 .col1{ width:33%}
#page1 .row4 .col2{ width:33%}
#page1 .row4 .col3{ width:33%}

/*======= index-1.html =======*/
#page2 .row3 .col1{ width:62%}
#page2 .row3 .col2{ width:37%}

/*======= index-2.html =======*/
#page3 .row4 .col1{ width:60%}
#page3 .row4 .col2{ width:39%}


/*======= index-3.html =======*/
#page4 .row3 .col1{ width:62%}
#page4 .row3 .col2{ width:37%}

/*======= index-4.html =======*/
#page5 .row3 .col1{ width:62%}
#page5 .row3 .col2{ width:37%}

#page5 .row4 .col1{ width:49%}
#page5 .row4 .col2{ width:50%}

/*======= index-5.html =======*/
#page6 .row3 .col1{ width:30%}
#page6 .row3 .col2{ width:31%}
#page6 .row3 .col3{ width:38%}


/*======= index-6.html =======*/
   
Répondre à oliverge

6


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
 oliverge, le samedi 30 août 2008 à 03:15:50
J' ai trouvé la solution par mes propres moyens. Merci
   
Répondre à oliverge
Posez votre question Répondre

Résultats pour problème de mise en page sur un template html

Comment transformer une page html en php (Résolu) Bonjour, j'ai créer des pages en html, et je voudrais savoir s'il y a possibilité de convrtir mes pages html en php sans changer le contenu, juste que mes pages deviennent des pages php, mais avec des codes html dedans. www.commentcamarche.net/forum/affich-8821586-comment-transformer-une-page-html-en-php
Probleme de creation page perso sur ifrance (Résolu) Bonjour, je viens de créer un site perso sur ifrance j'ai eu aucun souci jusqu'au moment ou il a fallu mettre ma page index.html j'ai bien mis ma page sur le lien pourtant quand je vais sur mon site ça me met site en construction page... www.commentcamarche.net/forum/affich-3524909-probleme-de-creation-page-perso-sur-ifrance
On peut cacher le code source d'une page HTML Mythe: On peut cacher le code source d'une page HTML. Réalité: FAUX. Explications: Pour pouvoir afficher une page web (HTML), le navigateur doit - à un moment où un autre - avoir le code HTML en clair. Il y a donc toujours moyen de le... www.commentcamarche.net/faq/sujet-5712-on-peut-cacher-le-code-source-d-une-page-html

Résultats pour problème de mise en page sur un template html

[mythes] On peut protéger une page web/une image contre la copieMythe On peut empêcher la copie d'une page web ou d'une image. On peut empêcher de voir le source d'une page HTML. On peut empêcher la copie d'une vidéo, d'une musique. Réalité FAUX Explications Quelle que soit la nature d'un document (page... www.commentcamarche.net/faq/sujet-3134-mythes-on-peut-proteger-une-page-web-une-image-contre-la-copie
Problème de fond blanc dans les pages webProblème de fond blanc dans les pages Web Vos pages Web ne s'affichent plus correctement : il n'y a plus de couleur de fond, tout est blanc : (comme sur cette image ) Pour résoudre ce problème suivre les étapes suivantes : 1. Allez dans... www.commentcamarche.net/faq/sujet-9348-probleme-de-fond-blanc-dans-les-pages-web
[PHP] Rediriger sur une autre page (redirection)N'import quel webmaster réalise un jour qu'un de ses fichiers possède un nom qui ne convient pas ou que l'arborescence des fichiers doit être modifiée. Cependant, s'il est relativement facile de changer les liens sur son site, il est beaucoup plus... www.commentcamarche.net/faq/sujet-878-php-rediriger-sur-une-autre-page-redirection
Voir les réponses

Résultats pour problème de mise en page sur un template html

[html] Lien vers la page précédente (Résolu)Bonjour, Comment puis-je faire pour que le navigateur recharge la page précédente lorsqu'on clique sur un lien dans une page en html ? et qui soit compatible au navigateur Firefox,et IE. merci d'avance ! aurelien50 www.commentcamarche.net/forum/affich-6863039-html-lien-vers-la-page-precedente
Page html non centrée sous ie 7 et ok sous mo (Résolu)Bonjour, Bonjour, j'ai cette page don.html http://jeromei.phpnet.org/rebondir/don.html qui est centrée sous mozilla mais pas sous IE7 . elle aura l'extension php plus tard mais je pense pas que ça vienne de là? par contre la page... www.commentcamarche.net/forum/affich-8233581-page-html-non-centree-sous-ie-7-et-ok-sous-mo
Recherche personne pour créé un site (Résolu)Bonjour, je crée un site de mise en relation de pro et amateur de la photographie (modele-photographe-maquilleur-coiffeur) l'URL est http://www.ophoto.fr Je me débrouille dans la mise en page en html et en graphisme avec photoshop CS2 mais... www.commentcamarche.net/forum/affich-5106266-recherche-personne-pour-cree-un-site
Voir les réponses

Résultats pour problème de mise en page sur un template html

Télécharger SmultronSmultron est un éditeur de texte évolué. Il propose différentes fonctionnalités : numérotaion des lignes coloration syntaxique en plusieurs langages exécution de commandes prévisualisation de la page en HTML rechercher/remplacer sur... www.commentcamarche.net/telecharger/telecharger-34055076-smultron
Voir les réponses

Résultats pour problème de mise en page sur un template html

Introduction au HTMLPrésentation du HTML Le HTML (« HyperText Mark-Up Language ») est un langage dit de « marquage » (de « structuration » ou de « balisage ») dont le rôle est de formaliser l'écriture d'un document avec des balises de formatage. Les balises permettent... www.commentcamarche.net/contents/html/htmlintro.php3
Les arrière-plansInsérer une image en fond Il est possible de définir une image d'arrière-plan pour la page web grâce aux attributs de la balise  : Attribut Effet Visuel BACKGROUND="image" Affiche l'image en arrière... www.commentcamarche.net/contents/html/htmlfond.php3
Voir les réponses