Tout d'abord bonjour à vous,
Voila je m'explique j'essai de réaliser un petit site web sur lequel j'ai crée 2 blocs principal.
-Le premier est mon menu.
-Et le second m'on texte enfermé dans la balise fieldset.
Lors de la réduction de la fenétre de mon navigateur mon bloc qui est a coté de ma fenétre passe en dessous.
Je vous soumet donc ma feuille de style, car j'ai beau retourné le probléme dans tout les sens je ne vois pas.
Je vous met aussi l'index.html afin de mieux visualiser mais différents id et classe.
Par avance, merci de l'aide que vous pourrez m'apporter.
Otso-a.
Modifié par otso-a (02 Feb 2012 - 16:06)
Voila je m'explique j'essai de réaliser un petit site web sur lequel j'ai crée 2 blocs principal.
-Le premier est mon menu.
-Et le second m'on texte enfermé dans la balise fieldset.
Lors de la réduction de la fenétre de mon navigateur mon bloc qui est a coté de ma fenétre passe en dessous.
Je vous soumet donc ma feuille de style, car j'ai beau retourné le probléme dans tout les sens je ne vois pas.
/********************************
corp de page*********************
********************************/
body {
background : #000 url("../img/background.png") repeat;
/*width: 100%;
height: 100%;*/
margin :auto;
overflow: hidden;
color : #FC7600;
font-family : 'Droid Sans', sans-serif;
font-size : 20px;
/*min-width : 700px;
min-height : 500px;*/
}
#container{
display: inline-block;
vertical-align: top;
margin-left: 10px;
}
fieldset{
width : 60%;
border: 0 none;
border-top: 1px solid white;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius: 5px;
background-color: rgba(0,0,0,0.8);
margin: 10px;
}
/*
fieldset {
width : 600px;
margin-top : 10px;
padding : 30px;
border : 2px solid #FF3458;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
margin : auto;
}
fieldset legend {
font-size : small;
font-style : italic;
color : #FF7700;
}
*/
/****************************************
*******************navigation menu*******
*****************************************/
#nav {
width: 400px;
display: inline-block;
vertical-align : top;
/*border: 1px solid green;*/
}
#nav .ww {
color :rgba(243, 50, 81, 0.68);/*#666;*/
}
#nav a {
color : #F33251;
text-decoration : none;
border: 1px #333 solid;
border-radius: 11px / 22px;
padding : 6px 8px 6px 8px;
-webkit-transition:All 0.4s ease-in-out;
-moz-transition:All 0.4s ease-in-out;
-o-transition:All 0.4s ease-in-out;
-webkit-transform: translate(0px);
-moz-transform: translate(0px);
-o-transform: translate(0px);
box-shadow : 40px 0px 1px #090909;
z-index:10;
}
#nav a:hover {
color :rgba(252, 118, 0, 0.8);
border: 1px #666 solid;
background-color : #242628;
box-shadow : 0px 0px 1px #090909;
-webkit-transform : translate(40px);
-moz-transform : translate(40px);
-o-transform : translate(40px);
z-index:10;
}
#nav a:active, a:focus {
background-color : #141618;
outline : none;
z-index:10;
}
li {
margin : 24px 0 24px 0;
list-style-type : none;
}
/********************footer********
***********************************
***********************************/
#footer {
margin-top : 40px;
text-align : center;
background : #000;
}
#footer a, a:hover, a:active, a:focus{
text-decoration : none;
}
.sign {
color : #F33251;
font-size : 14px;
}Je vous met aussi l'index.html afin de mieux visualiser mais différents id et classe.
<body>
<div id="nav">
<ul>
<li><a href="about/about.html">A propos<span class="ww"> | About me</span></a></li>
<li><a href="galerie/index.php">Ma<span class="ww"> | Photo Gallery</span></a></li>
<li><a href="liens/liens.html">Mes<span class="ww"> | Liens</span></a></li>
<li><a href="presse/presse.html">Presse<span class="ww"> | Articles & liens</span></a></li>
<li><a href="doc/doc.html">Mes<span class="ww"> | Documents</span></a></li>
<li><a href="">Nous retrouver sur<span class="ww"> | Le Bon coin</span></a></li>
<li><a href="part/part.html">Nos<span class="ww"> | Partenaires</span></a></li>
<li><a href="contact/contact.php">Contact<span class=ww> | @Mail</span></a></li>
</ul>
</div>
<div id="container">
<fieldset>
<legend>Présentation</legend>
<p><b>Bienvenue sur mon site web.</b></p>
<p>Ce site est dédié à partager notre activité autour ci<br /></p>
<p>Ici, je vais vous présenter les divers travaux que j'ai pu réaliser depuis quelques années.</p>
<p>Je vous souhaite une agréable visite sur mon site.</p>
<br/>
<p>ps : .</p>
<p><span style="float:right">auteur</span></p>
</fieldset>
</div>
</div>
<div id="footer">
<p>mon site web</p>
<div class="sign">
<p><a href="att.html">Created by "" © 2012</a></p>
</div>
</div>
</div>
</body>
</html>
Par avance, merci de l'aide que vous pourrez m'apporter.
Otso-a.
Modifié par otso-a (02 Feb 2012 - 16:06)