28173 sujets

CSS et mise en forme, CSS3

Bonjour,

Après avoir parcouru différents forum et témoignages, à moins de ne pas avoir tout compris, je me permets de poster à mon tour.

Pour situer, je ne suis pas qualifiée en programmation d'aucune sorte,
mais je suis en train de refaire un site qui tournait jusqu'à présent, uniquement dans une iframe. Aujourd'hui, je souhaite le refaire pour le rendre plus accessible à tous.

Mon identité et logo étant celle d'une plaque de rue type PARIS, il me faut respecter cette contrainte visuelle ce qui me pose problème... Car j'aimerais que le site soit :

-visible sur tout type d'écran, donc réajustable automatiquement et surtout centré dans le navigateur...
-navigable par lien incorporé à ce fameux cadre-plaque de rue figé dans la page...

Jusqu'à présent les "fausse iframe" ne semble figer que 3 côtés au maximum (sur les exemples des tuto de ce site)... j'ai essayé l'idée #objet et #iframe mais je n'arrive pas à centrer le tout.

Est-ce possible ? car là, je chercher partout mais je ne trouve pas. Smiley decu

Je vous remercie par avance de vos conseils et commentaires et vous souhaite une bonne fin de journée !

Floxe.
Des nouvelles...

J'ai enfin réussi à faire mon cadre en css... (enfin grâce à un tuto d'ici et en me basant sur le 4 zones avec scroll !

il se décompose ainsi :


---------------------------CSS :-------------------------------------

body {
margin: 0;
padding: 0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
background: url(images/fond.jpg);
}
.conteneur {
position: relative;
width: 800px;
margin: 0 auto;

}

.header {
height: 117px;
background: url(images/haut.png);
width: 800px;
}

.menu {
position: absolute;
left:0px;
width: 150px;
height: 391px;
background: url(images/gauche.png);
background-repeat: no-repeat;
top: 117px;
}
.frame {
margin-left: 151px;
width: 568px;
height: 391px;
background-color:white;
overflow: auto;
margin-right: -760px;
}

.droit {
position: absolute;
right:186px;
width: 96px;
height: 391px;
float: inherit;
margin-right: -200px;
background: url(images/droit.jpg);
top: 117px;
background-repeat: no-repeat;
}
.bas {
height: 115px;
background: url(images/bas.jpg);
width: 800px;
margin-bottom: 10px;
background-repeat: no-repeat;
}

p {
margin: 0 0 5px 0;
}
.menugauche {
list-style-type: none;
margin: 0;
padding:0;
}
.menugauche li {
margin-bottom: 5px;
}
.menugauche a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
.menugauche a:hover {
text-decoration: none;
}

-----------------------------HTML :---------------------------------

<div class="conteneur">

<div class="header"> </div>

<div class="menu">

<ul class="menugauche">
<li><a href="">Menu 1</a></li>
<li><a href="">Menu 2</a></li>
<li><a href="">Menu 3</a></li>
<li><a href="">Menu 4</a></li>

</ul></div>

<div class="frame">

<p>partie "frame" scrollable </p>
<p>partie "frame" scrollable </p> </div>


<div class="droit"> </div>

<div class="bas"> </div>

</div>



Alors lorsque je le visualise sur Firefox ----> tout est bien aligné impec !
Mais sous IE----> catastrophe ! il n'affiche pas du tout la partie DROITE de mon cadre... Smiley decu
Ca fait 2 jours que je planche la-dessus... pour ça ! arf !

Je me demande alors s'il ne vaudrait mieux pas que je refasse le site comme au bon vieux temps avec cette fameuse "iframe"... surtout que j'ai l'impression ne pas être sortie de l'auberge encore notamment pour les liens !...
Mon objectif était de rendre ce site bcp plus fluide et rapide que la précédente version... qu'en pensez-vous ?

Merci encore par avance de vos réponses et à très bientôt de vous lire.

Floxe.
AH ! j'ai identifié le problème... il viendrait de la balise <objet> que j'avais inséré dans mon code pour essayer les liens... alors par contre, ça ne semble pas fonctionner du tout... pourtant j'avais bien défini les dimensions requises pour la "frame"... zut... à priori dans IE ça décale tout... finalement les "iframe" étaient plus simples non ?