Posez votre question Signaler

Structure d'un site web

crapo77 - Dernière réponse le 3 déc. 2007 à 20:17
Bonjour,
Je construit un site a la base des cadres, la seule facon que j'ai trouver c'est avec des bloc div, je vais donner ce code qui apparait un peu flou, mais ce n'est que des blocs div imbriquer. Pour mieux le voir, il faut l'enregistrer dans un fichier .html et le compiler.
Je veux construire le meme graphisme mais pas avec des blocs div, parce que ca m'arrange pas si j'insere des image, des video...etc
peut etre avec des iframe, des tableaux, mais j'ai pas l'idee, sauf avec les div
s'il vous plait proposer moi quelque chose
Merci
<!-- Programme-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>BLOC</title>
</head>
<body>
<div id="bloc1" style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; MARGIN-TOP: 10px; FLOAT: left; MARGIN-LEFT: 15px; BORDER-LEFT: black 1px solid; WIDTH: 94.58%; BORDER-BOTTOM: black 1px solid; HEIGHT: 101px; TEXT-ALIGN: left">
bloc1 </DIV>
<div id="bloc2" style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; MARGIN-TOP: 10px; FLOAT: left; MARGIN-LEFT: 15px; BORDER-LEFT: black 1px solid; WIDTH: 20%; BORDER-BOTTOM: black 1px solid; HEIGHT: 699px; TEXT-ALIGN: left">bloc2
<div id="bloc3" style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; MARGIN-TOP: 10px; FLOAT: left; MARGIN-LEFT: 15px; BORDER-LEFT: black 1px solid; WIDTH: 78.66%; BORDER-BOTTOM: black 1px solid; HEIGHT: 69px; TEXT-ALIGN: left">bloc3</DIV>
<div id="bloc4" style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; MARGIN-TOP: 10px; FLOAT: left; MARGIN-LEFT: 15px; BORDER-LEFT: black 1px solid; WIDTH: 78.66%; BORDER-BOTTOM: black 1px solid; HEIGHT: 83px; TEXT-ALIGN: left">bloc4</DIV>
<div id="bloc5" style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; MARGIN-TOP: 10px; FLOAT: left; MARGIN-LEFT: 15px; BORDER-LEFT: black 1px solid; WIDTH: 78.66%; BORDER-BOTTOM: black 1px solid; HEIGHT: 83px; TEXT-ALIGN: left">bloc5</DIV>
<div id="bloc6" style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; MARGIN-TOP: 10px; FLOAT: left; MARGIN-LEFT: 15px; BORDER-LEFT: black 1px solid; WIDTH: 78.66%; BORDER-BOTTOM: black 1px solid; HEIGHT: 166px; TEXT-ALIGN: left">bloc6</DIV>
<div id="bloc7" style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; MARGIN-TOP: 10px; FLOAT: left; MARGIN-LEFT: 15px; BORDER-LEFT: black 1px solid; WIDTH: 78.66%; BORDER-BOTTOM: black 1px solid; HEIGHT: 244px; TEXT-ALIGN: left">bloc7</DIV></DIV>
<div id="bloc8" style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; MARGIN-TOP: 10px; FLOAT: left; MARGIN-LEFT: 15px; BORDER-LEFT: black 1px solid; WIDTH: 47.33%; BORDER-BOTTOM: black 1px solid; HEIGHT: 699px; TEXT-ALIGN: left">bloc8
<div id="bloc9" style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; MARGIN-TOP: 10px; FLOAT: left; MARGIN-LEFT: 15px; BORDER-LEFT: black 1px solid; WIDTH: 92.03%; BORDER-BOTTOM: black 1px solid; HEIGHT: 300px; TEXT-ALIGN: left">bloc9</DIV>
<div id="bloc10" style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; MARGIN-TOP: 10px; FLOAT: left; MARGIN-LEFT: 15px; BORDER-LEFT: black 1px solid; WIDTH: 44.23%; BORDER-BOTTOM: black 1px solid; HEIGHT: 169px; TEXT-ALIGN: left">bloc10</DIV>
<div id="bloc11" style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; MARGIN-TOP: 10px; FLOAT: left; MARGIN-LEFT: 15px; BORDER-LEFT: black 1px solid; WIDTH: 43.49%; BORDER-BOTTOM: black 1px solid; HEIGHT: 167px; TEXT-ALIGN: left">bloc11</DIV>
<div id="bloc12" style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; MARGIN-TOP: 10px; FLOAT: left; MARGIN-LEFT: 15px; BORDER-LEFT: black 1px solid; WIDTH: 91.13%; BORDER-BOTTOM: black 1px solid; HEIGHT: 196px; TEXT-ALIGN: left">bloc12</DIV>
</DIV>
<div id="bloc13" style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; MARGIN-TOP: 10px; FLOAT: left; MARGIN-LEFT: 15px; BORDER-LEFT: black 1px solid; WIDTH: 24.07%; BORDER-BOTTOM: black 1px solid; HEIGHT: 707px; TEXT-ALIGN: left">bloc13
<div id="bloc14" style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; MARGIN-TOP: 10px; FLOAT: left; MARGIN-LEFT: 15px; BORDER-LEFT: black 1px solid; WIDTH: 82.57%; BORDER-BOTTOM: black 1px solid; HEIGHT: 302px; TEXT-ALIGN: left">bloc14</DIV>
<div id="bloc15" style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; MARGIN-TOP: 10px; FLOAT: left; MARGIN-LEFT: 15px; BORDER-LEFT: black 1px solid; WIDTH: 82.96%; BORDER-BOTTOM: black 1px solid; HEIGHT: 371px; TEXT-ALIGN: left">bloc15</DIV>
</DIV>
<div id="bloc16" style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; MARGIN-TOP: 10px; FLOAT: left; MARGIN-LEFT: 15px; BORDER-LEFT: black 1px solid; WIDTH: 94.58%; BORDER-BOTTOM: black 1px solid; HEIGHT: 300px; TEXT-ALIGN: left">bloc16
<div id="bloc17" style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; MARGIN-TOP: 10px; FLOAT: left; MARGIN-LEFT: 15px; BORDER-LEFT: black 1px solid; WIDTH: 59.34%; BORDER-BOTTOM: black 1px solid; HEIGHT: 279px; TEXT-ALIGN: left">bloc17</DIV>
<div id="bloc18" style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; MARGIN-TOP: 10px; FLOAT: left; MARGIN-LEFT: 15px; BORDER-LEFT: black 1px solid; WIDTH: 16.29%; BORDER-BOTTOM: black 1px solid; HEIGHT: 277px; TEXT-ALIGN: left">bloc18</DIV>
<div id="bloc19" style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; MARGIN-TOP: 10px; FLOAT: left; MARGIN-LEFT: 15px; BORDER-LEFT: black 1px solid; WIDTH: 16.5%; BORDER-BOTTOM: black 1px solid; HEIGHT: 276px; TEXT-ALIGN: left">bloc19</DIV>
</DIV>
</body>
</html>
<!-- fin Programme-->
Lire la suite 

Structure d'un site web »

1 réponses
Réponse
+0
moins plus
Gihef 5246Messages postés 20 juillet 2005Date d'inscription 3 déc. 2007 à 20:17
Bonjour,

On peut déjà te proposer de le présenter comme ça
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>BLOC</title>
<style type="text/css">
div {
  float: left;
  margin-top: 10px;
  margin-left: 15px;
  border-top: #000 1px solid;
  border-right: #000 1px solid;
  border-bottom: #000 1px solid;
  border-left: #000 1px solid;
  text-align: left;
  }
#global {
  position : relative;
  float: none;
  width : 800px;
  margin : 0 auto;
  }
</style>
</head>
<body>
  <div id="global">

    <div id="bloc1" style="width: 94.58%; height: 101px;"> bloc1 </div>
  
    <div id="bloc2" style="width: 20%; height: 699px;">bloc2
      <div id="bloc3" style="width: 78.66%; height: 69px;">bloc3</div>
      <div id="bloc4" style="width: 78.66%; height: 83px;">bloc4</div>
      <div id="bloc5" style="width: 78.66%; height: 83px;">bloc5</div>
      <div id="bloc6" style="width: 78.66%; height: 166px;">bloc6</div>
      <div id="bloc7" style="width: 78.66%; height: 244px;">bloc7</div>
    </div>
  
    <div id="bloc8" style="width: 47.33%; height: 699px;">bloc8
      <div id="bloc9" style="width: 92.03%; height: 300px;">bloc9</div>
      <div id="bloc10" style="width: 44.23%; height: 169px;">bloc10</div>
      <div id="bloc11" style="width: 43.49%; height: 167px;">bloc11</div>
      <div id="bloc12" style="width: 91.13%; height: 196px;">bloc12</div>
    </div>
  
    <div id="bloc13" style="width: 24.07%; height: 707px;">bloc13
      <div id="bloc14" style="width: 82.57%; height: 302px;">bloc14</div>
      <div id="bloc15" style="width: 82.96%; height: 371px;">bloc15</div>
    </div>
  
    <div id="bloc16" style="width: 94.58%; height: 300px;">bloc16
      <div id="bloc17" style="width: 59.34%; height: 279px;">bloc17</div>
      <div id="bloc18" style="width: 16.29%; height: 277px;">bloc18</div>
      <div id="bloc19" style="width: 16.5%; height: 276px;">bloc19</div>
    </div>

  </div>
</body>
</html>
Les solutions qu'on te proposera ne t'arrangeront pas plus.
Le plus ressemblant serait un tableau. Mais ça serait dommage de transformer cette page bien faite avec ça.

En fait, ce qui va te poser problème c'est le choix que tu as fait d'utiliser des % partout pour les largeurs.
Si tu y mets des images, elle seront de toute façon décalées.

Quelqu'un aura peut-être une autre solution ?

--

 Ajouter un commentaire
Ajouter un commentaire
Posez votre question
Ce document intitulé « structure d'un site web » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Dossier à la une
Passage au tout numérique : quel coût pour les particuliers ?