Sujet Précédent Sujet Suivant

Problème de mise en page sur un template html

Résolu/Fermé
oliverge Messages postés 3 Date d'inscription vendredi 29 août 2008 Statut Membre Dernière intervention 30 août 2008 - 29 août 2008 à 22:15
oliverge Messages postés 3 Date d'inscription vendredi 29 août 2008 Statut Membre Dernière intervention 30 août 2008 - 30 août 2008 à 03:15
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.
A voir également:

6 réponses

Réponse 1 / 6
societeserieuse Messages postés 172 Date d'inscription dimanche 24 août 2008 Statut Membre Dernière intervention 3 décembre 2008 7
29 août 2008 à 22:34
et si tu postai ton code ?
-1
Réponse 2 / 6
Groarh Messages postés 682 Date d'inscription vendredi 1 août 2008 Statut Membre Dernière intervention 28 juin 2015 185
29 août 2008 à 22:42
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.
-1
Réponse 3 / 6
societeserieuse Messages postés 172 Date d'inscription dimanche 24 août 2008 Statut Membre Dernière intervention 3 décembre 2008 7
29 août 2008 à 22:43
lol les 3/4 des templates html st en html a base de table
-1
Réponse 4 / 6
Groarh Messages postés 682 Date d'inscription vendredi 1 août 2008 Statut Membre Dernière intervention 28 juin 2015 185
29 août 2008 à 22:44
Les 3/4 des templates sont gratuits !!
-1

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

Posez votre question
Réponse 5 / 6
oliverge Messages postés 3 Date d'inscription vendredi 29 août 2008 Statut Membre Dernière intervention 30 août 2008
29 août 2008 à 22:52
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 =======*/
-1
Réponse 6 / 6
oliverge Messages postés 3 Date d'inscription vendredi 29 août 2008 Statut Membre Dernière intervention 30 août 2008
30 août 2008 à 03:15
J' ai trouvé la solution par mes propres moyens. Merci
-1

Discussions similaires

[référencement] Ne pas être référencé
kij_82 -
Searaphina -

10 réponses