IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

HTML Discussion :

aide gabari d'un site


Sujet :

HTML

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Inscrit en
    Avril 2009
    Messages
    42
    Détails du profil
    Informations forums :
    Inscription : Avril 2009
    Messages : 42
    Par défaut aide gabari d'un site
    Bonjour a tous,

    Voila je suis a la recherche d'une aide pour la réalisation de base du code html et de css pour le design suivant:

    http://img375.imageshack.us/img375/7...eetemplate.png


    je voudrais que ce soit flexible a l'intérieur, bien sur que ce sois compatible avec les navigateur ie , ff , O et chrome.



    voila j'ai essaye comme j'ai pu en etant novice et prenant exemple sur d'autre theme et ca donne ceci.


    Sur Firefox
    http://img412.imageshack.us/img412/9875/72912965.png

    Sur IE8
    http://img193.imageshack.us/img193/1149/66015466.png

    fichier index.php
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
     
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Document sans titre</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
        <link href="lavalamp.css" rel="stylesheet" type="text/css" />
     
        <script type="text/javascript" src="js/jquery-1.1.3.1.min.js"></script>
        <script type="text/javascript" src="js/jquery.easing.min.js"></script>
        <script type="text/javascript" src="js/jquery.lavalamp.min.js"></script>
        <script type="text/javascript">
            $(function() {
                $("#1, #2, #3").lavaLamp({
                    fx: "backout", 
                    speed: 700,
                    click: function(event, menuItem) {
                       return true;
                    }
                });
            });
        </script>
    </head>
     
    <body>
     
    <div class="header_right">
    <h3>  Bienvenue  sur le site de lassociation Lesb-Gay Europe  </h3>
      </div>
    <div class="logo">
            </div>
            <div class="content">
            		<div class="topnav">
      <ul class="lavaLampWithImage" id="1">
        <li class="current"><a href="index.php"><?php echo LANG_MENU_HOME; ?></a></li>
    					<li><a href="http://************"> <?php echo LANG_MENU_DIRECTORY; ?> </a></li>
    					<li><a href="http://************"> <?php echo LANG_MENU_BOARD; ?> </a></li>
    					<li><a href="http://************"> <?php echo LANG_MENU_BLOG; ?> </a></li>
    					<li><a href="http://************"> <?php echo LANG_MENU_EVENTS; ?> </a></li>
    					<li><a href="http://************"> <?php echo LANG_MENU_CHAT; ?> </a></li>
    					<li><a href="http://************"> <?php echo LANG_MENU_MEETING; ?> </a></li>  
                        <li><a href="http://************"> <?php echo LANG_MENU_GALLERY; ?> </a></li>
    </ul>
    		</div>
     
    <div class="left">
     
    			<div class="left_articles">TEST
     
    			</div>
     
    			<div class="lt"></div>
    			<div class="lbox">
    				<div class="thumb">
     
    				</div>
     
     
    			</div>
     
    			<div class="lt"></div>
    			<div class="lbox">
     
    			<div class="thumb">
    			</div>
     
     
     
    			</div>
    		</div>
    		<div class="right">
     
    			<div class="rt">Login</div>
    			<div class="right_articles">
     
    			</div>
    			<div class="rt">Calendrier</div>
    			<div class="right_articles">
     
    			</div>
    			<div class="rt">Evenement</div>
    			<div class="right_articles">
     
    			</div>
    		</div>	
     
    <div class="footer">
      				<?php 
                    echo '<p>' .'Copyright 2010 Association Lesb-Gay Europe &copy; 2007-'. date('Y'). '</p>';   
                            ?> 
    </div>
    </div>
     
    </body>
    </html>

    Fichier Style.css
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    body { 
    	padding: 0; 
    	margin: 0; 
    	font: 0.74em Arial, Helvetica, sans-serif; 
    	line-height: 1.5em;
    	background: #3F0923; 
    	color: #454545; 
    }
     
    a {
    	color: #4A8EBC; 
    	background: inherit;
    }
     
    a:hover {
    	color: #C3593C;
    	background: inherit;	
    }
     
    a.title {
    	color: #FE6700;
    	background: #FFF;
    }
     
    h1 {
    	font: bold 2em "Trebuchet MS", Arial, Helvetica, sans-serif;
    	letter-spacing: -1px; 
    	padding: 2px 0 0 0px;
    	margin: 0;
    	color: #464548;
    	background: inherit;
    }
     
    h1 a, h2 a {
    	text-decoration: none;
    	color: #464548;
    	background: inherit;
    }
     
    h1 a:hover, h2 a:hover {
    	color: #C3593C;
    	background: #FFF;
    }
     
    h1 .red{
    	color: #C3593C;
    	background: inherit;
    }
     
     
    h2 { 
    	margin: 0 0 5px 0; 
    	padding: 0; 
    	font: bold 1.5em Arial, Helvetica, sans-serif;
    	letter-spacing: -1px;
    	color: #000; 
    	background: inherit;
    }
     
    h2 .yellow{
    	color: #FFFCD1;
    	background: inherit;
    }
     
    p {	margin: 0 0 5px 0; }
     
    ul { 
    	margin: 0; 
    	padding : 0; 
    	list-style : none; 
    }
     
    form { 
    	margin: 0; 
    }
     
     
    .content { 
    	margin: auto;
    	width: 80%; 
    }
    .logo {
    	float: left;
    	width: 20%;
    	height: 72px;	
    	padding: 0 0 0 0;
    }
    .header_right {
    	float: right;
    	width: 80%;
    	height: 72px;
    	color: #FFFFFF;
    }
    .logo p {
    	font-size: 0.9em;
    	color: #808080;
    	padding: 0 0 0 7px;
    	background: inherit;
    }
    .menu {
    	clear: both;
    	background-position:center; 
    	background-repeat:no-repeat;
    	background:#3F0923 ;
    	background-image:url(../images/menubar.png);
    }
    .topnav {
    	background:url(../images/menubar.png) no-repeat;
    	 height:29px;
    	 width:916px;
    	 margin:auto;
     	padding: 0 75px  0 0;
    	 }
    .left {
    	float: left;
    	width: 80%;
    	margin: 0 0 10px 0;
    	padding: 0 20px  0 0px; 
    }
    	.left_articles {
    		margin: 0 0 15px 0;
    		padding: 0 0 0 10px;
    	}
     
    	.lt {
    		height: 10px;
    		background: #6E6E6E url(lt.gif) no-repeat;
    		color: #FFF;
    	}
     
    	.lbox {
    		color: #eee;
    		padding: 3px 12px;
    		margin: 0 0 15px 0;
    		background: #6E6E6E url(lb.gif) no-repeat bottom left;
    		height: 178px;
    	}
     
    	.lbox a {
    		color: #FFFCD1;
    		background: inherit;
    	}
     
    	.lbox h2 {
    		color: #FFF;
    		background: #6E6E6E;
    	}
     
     
    .thumb {
    	float: left;
    	width: 150px;
    	border: 1px solid #d4d4d4;
    	color: #fff;
    	background: #6e6e6e;
    	margin: 0 15px 15px 0;
    	padding: 5px;
    }
     
    .thumb p { margin: 0; padding: 3px; color: #FFF; background: #6e6e6e; }
     
    .right {
    	float: right;
    	width: 15%;
    	margin: 0 0 10px 0;
    }
    .right a {
    	color: #FFFCD1;
    	background: inherit;
    }
    	.rt {
    		background: #C85E35 url(rt.gif) no-repeat;
    		color: #FFF;
    		height: 7px;
    	}
     
    	.right_articles {
    		font-size: 0.9em;
    		background: #C85E35 url(rb.gif) no-repeat bottom;
    		color: #FEE1D5;
    		padding: 4px 8px;	
    		margin: 0 0 10px 0;
    	}
     
     
    .image {
    	float: left;
    	margin: 0 9px 3px 0;
    }
     
    .footer { 
    	clear: both; 
    	text-align: center;
    	line-height: 1.8em;
    	color: #FFCCFF;
    	background:#490C2E;
    	border:1px solid #280617;
    	padding: 8px 0;
    }
     
    .footer a {
    	color: #C3593C;
    	background: inherit;
    }

    Merci de m'aider a faire presque comme mon image precedente

  2. #2
    Membre confirmé
    Profil pro
    Inscrit en
    Juin 2008
    Messages
    98
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2008
    Messages : 98
    Par défaut
    Voilà qui devrait t'aider.

    J'ai intégré rapidement ton gabarit à ma façon ce qui te donnera certainement la vision d'une autre méthode.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
     
    <html>
        <head>
            <style type="text/css">
                *{
                    margin:0;
                    padding:0;
                }
                body{
                }
                #container{
                    width:90%;
                    margin:0 5% 0 5%;
                    background-color:#ccc;
                    min-width: 1050px;
                }
                #logo{
                    float:left;
                    width:60px;
                    height:60px;
                    background-color:#999999;
                }
                #welcomeText{
                    margin-left:65px;
                    background-color:#666;
                    height:60px;
                }
                .clearBoth{
                    clear:both;
                    height:0px;
                }
                #content{
                    min-width: 1050px;
                }
                #contentLeft{
                    margin-right:200px;
                    background-color:#333;
                    width:100%;
                    color:#fff;
                    
                }
                #contentRight{
                    float:right;
                    width:195px;
                    background-color:#000;
                    color:#fff;
                }
                #adsenseAd{
                    background-color:green;
                    width:700px;
                    float:left;
                }
                #adsenseOther{
                    margin-left:720px;
                }
                #partners{
                    background-color:yellow;
                }
                #partners{
                    background-color:brown;
                }
            </style>
            <!--[if IE]>
                <style>
                    #container {
                        width: 1050px;
                    }
                </style>
            <![endif]-->
        </head>
        <body>
            <div id="container">
                <div id="header">
                    <div id="logo">
                        logo
                    </div>
                    <div id="welcomeText">
                        welcomeText
                    </div>
                    <div class="clearBoth">&nbsp;</div>
                </div>
                <div id="content">
                    <div id="contentRight">
                        <div id="menu">
                            menu<br />
                            menu<br />
                            menu<br />
                            menu<br />
                            menu<br />
                        </div>
                    </div>
                    <div id="contentLeft">
                        <div id="navigation">
                            navigation  
                        </div>
                        <div id="adsenseAd"> 
                            adsenseAd 
                        </div>
                        <div id="adsenseOther"> 
                            adsenseOther 
                        </div>
                        <div class="clearBoth">&nbsp;</div>
                    </div>
                    <div class="clearBoth">&nbsp;</div>                
                    <div id="partners">
                        partners
                    </div>
                </div>
                <div id="footer">
                    footer
                </div>
            </div>
        </body>
    </html>
    Bonne continuation,
    Omageus

Discussions similaires

  1. On a besoin d'aide pour créer un site de soirée électorale
    Par pliporte75 dans le forum Administration
    Réponses: 2
    Dernier message: 01/04/2007, 18h02
  2. Vos conseils et aide pour mon futur site
    Par morphine63 dans le forum EDI, CMS, Outils, Scripts et API
    Réponses: 5
    Dernier message: 08/11/2006, 17h30
  3. Aide pour créer mon site, aidez moi.
    Par ganon551 dans le forum Mon site
    Réponses: 24
    Dernier message: 30/06/2006, 19h45
  4. besoin d'aide pour mon future site
    Par vulquin dans le forum Général Conception Web
    Réponses: 3
    Dernier message: 11/06/2006, 20h33
  5. Besoin d'aide pour sécuriser un site internet
    Par Polux000 dans le forum Sécurité
    Réponses: 4
    Dernier message: 25/01/2006, 12h02

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo