Structure d'un site web

Fermé
crapo77 - 3 déc. 2007 à 07:25
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 - 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-->
A voir également:

1 réponse

Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 775
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 ?

--
0