28220 sujets

CSS et mise en forme, CSS3

CSS et les boîtes IE e FireFox

Dans le CSS j’ai défini le id=middle et je l’ai utilisé plusieur foies dans la page html e ça marche par contre si je utilise la class dans CSS FireFox marche mais dans IE pas du tous.
La position des boite droite et gauche j’ai du la définir comme absolute mais marche pas si l’écran est plus grand o petite de 1024x768.
Il y a un autre solutions ?

Deuxième la boite #navBar est que c’est possible de la placer tout en bas de la page après la boîte de gauche ? 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title>Sans Titre</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="generator" content="HAPedit 3.1">

<link rel="stylesheet" href="style.css" type="text/css" media="all" />

</head>


<body>

<div id="top">
In questa gabbia si pou posizionare il logo la testata ed eventualmente la barra di navigazione
</div>

<div id="left">
Nelgabbia di sinistra si possono inserire dei menu o dei link
Nelgabbia di sinistra si possono inserire dei menu o dei link
memu 1
menu 2
menu3
Nelgabbia di sinistra si possono inserire dei menu o dei link
Nelgabbia di sinistra si possono inserire dei menu o dei link
</div>

<div id="middle">
<img src="./immagini/tds.jpg" style="width: 50px; height: 70px float: left" />
Nella gabbia centrale trovano posto tutti i temi principali del sito come le news o altre informazioni importanti per gli utenti del sito.
Nella gabbia centrale trovano posto tutti i temi principali del sito come le news o altre informazioni importanti per gli utenti del sito.
</div>

<div id="right">
Nella gabbia di destra trovano posto i link per la login
</div>

<div id="bottom">
barra di navigazione a fondo pagina
</div>

<div id="navBar">
&lt;back | home | next&gt;
</div>


</body>
</html>


***********************CSS**************************
body {
  margin: auto;
  padding: 0px;
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 12px;
  line-height: 22px;
  color: #000;
  background-color: #0f0;
  text-align: center;
  background-image: url(./immagini/int.jpg);
  background-position: top center;
  background-repeat: no-repeat;
  margin: auto; 
  width: 780px;
  font-family: sans-serif;
  font-size: 12px;
}

#content {
  padding: 10px;
  margin-top: 5px;
  margin-bottom: 0px;
  margin-right: auto;
  margin-left: auto;
  background-color: #fff;
  border: 1px solid #000;
  /*width: 70%;*/
}

#navBar {
  padding: 0px 10px 0px 10px;
  margin-top: 0px;
  margin-bottom: 5px;
  margin-right: auto;
  margin-left: auto;
  background-color: #fff;
  border-top: 0px;
  border-bottom: 1px solid #000;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  /*width: 70%;*/
  background-color: #f00;
  text-align: right;
}

#top {
  margin: 5px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #000;
  height: 70px;
}

#left {
  position: absolute;
  top: 5px;
  left: 0px;
  margin: 97px 117px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #000;
  width: 90px;
}

#middle {
  margin: 0px 122px 5px 122px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #000;
  text-align: float
}

#right {
  position: absolute;
  top: 97px;
  right: 0px;
  margin: 5px 118px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #000;
  width: 90px;
  text-align: right;
}

#bottom {
  margin: 5px 0px 5px 0px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #000;
}

Modifié par Carla (08 Aug 2005 - 13:09)
Bonjour aussi Carla Smiley smile

Bienvenue sur ce forum, visiblement, tu n'a pas pris la peine de lire les règles du forum.

Merci de bien vouloir "éditer" ton message et de placer ton code dans la balise "Code" prévue à cet effet afin de rendre les échanges plus lisibles. Surtout, ne créés pas un nouveau post, tu peux modifier celui d'origine Smiley cligne
Sujet clos
Aller à