Bonjour à toutes et à tous, je suis nouveau sur le site, je vais commencer avec quelques questions pour le site que je suis en train de développer, mais après, je compte bien renvoyer l’ascenseur en aidant comme je pourrais 
Je suis vraiment novice dans le codage, mais l'année prochaine, je compte intégrer une école de Web-Design. J'aimerais juste avoir quelques notions avant cela, et on m'a proposé de créer un site, donc voilà.
Voici mon premier problème :
J'aurais aimé savoir comment placé plusieurs images ou textes (différentes div) en largeur sans qu'elles se chevauchent ou changent de place lorsque l'on rétrécit la fenêtre. Là, tout bouge lorsqu'on passe sur une taille plus petite que du 1366*768 (qui est ma résolution actuelle).
Un grand merci à celui ou celle qui m'aidera
Modifié par TxReplay (29 Jun 2012 - 15:12)
Je suis vraiment novice dans le codage, mais l'année prochaine, je compte intégrer une école de Web-Design. J'aimerais juste avoir quelques notions avant cela, et on m'a proposé de créer un site, donc voilà.Voici mon premier problème :
J'aurais aimé savoir comment placé plusieurs images ou textes (différentes div) en largeur sans qu'elles se chevauchent ou changent de place lorsque l'on rétrécit la fenêtre. Là, tout bouge lorsqu'on passe sur une taille plus petite que du 1366*768 (qui est ma résolution actuelle).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Béatrice Sartouretti | Artiste Peintre dans l'Yonne.</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<!-------------------- Logo -------------------->
<div class="logo">
<a href="#"><img src="img/logo.png" alt="logo"></a>
</div>
<!-------------------- /Logo -------------------->
<!-------------------- Social -------------------->
<div class="social">
<ul>
<li><a href="#"><img src="img/facebook.png"></a></li>
<li><a href="#"><img src="img/twitter.png"></a></li>
<li><a href="#"><img src="img/google.png"></a></li>
<li><a href="#"><img src="img/yahoo.png"></a></li>
<li><a href="#"><img src="img/skype.png"></a></li>
<li><a href="#"><img src="img/rss.png"></a></li>
</ul>
</div>
<!-------------------- /Social -------------------->
<!-------------------- Menu -------------------->
<div class="menu">
<a href="#">Accueil</a>
<a href="#">Oeuvres</a>
<a href="#">Biographie</a>
<a href="#">Actualité/Expositions</a>
<a href="#">Contact</a>
<a href="#">Livre d'Or</a>
</div>
<!-------------------- /Menu -------------------->
<!-------------------- HR -------------------->
<div class="hr">
<hr />
</div>
<!-------------------- /HR -------------------->
</header>
<center>
Loremp Ipsum<br />Loremp Ipsum<br />Loremp Ipsum<br />Loremp Ipsum<br />Loremp Ipsum<br />Loremp Ipsum<br />Loremp Ipsum<br />Loremp Ipsum<br />Loremp Ipsum<br />Loremp Ipsum<br />Loremp Ipsum<br />Loremp Ipsum<br />Loremp Ipsum<br />Loremp Ipsum<br />Loremp Ipsum<br />Loremp Ipsum<br />Loremp Ipsum<br />
</center>
<nav>
</nav>
<footer>
<div class="copy">
© 2012 - Béatrice Sartouretti - Tous droits résérvés | Design by <a href="#">TxReplay - My Graphic Design</a>.
</div>
</footer>
</body>
</html>
@charset "utf-8";
/* CSS Document */
body {
background: #1e5799;
background: -moz-radial-gradient(center, ellipse cover, #1e5799 0%, #828282 0%, #2d2d2d 100%, #207cca 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#1e5799), color-stop(0%,#828282), color-stop(100%,#2d2d2d), color-stop(100%,#207cca));
background: -webkit-radial-gradient(center, ellipse cover, #1e5799 0%,#828282 0%,#2d2d2d 100%,#207cca 100%);
background: -o-radial-gradient(center, ellipse cover, #1e5799 0%,#828282 0%,#2d2d2d 100%,#207cca 100%);
background: -ms-radial-gradient(center, ellipse cover, #1e5799 0%,#828282 0%,#2d2d2d 100%,#207cca 100%);
background: radial-gradient(center, ellipse cover, #1e5799 0%,#828282 0%,#2d2d2d 100%,#207cca 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#207cca',GradientType=1 );
background-attachment:fixed;
margin:0px;
}
/******************** Social ********************/
.social{
margin: -10% 0 0 78%;
width:300px;
}
.social ul {
padding: 0 32px;
}
.social ul li{
float:right;
list-style: none;
margin-left:7px;
}
.social ul li a{
position:relative;
z-index:0;
opacity:0.3;
-moz-transition:0.3s ease;
-webkit-transition:0.3s ease;
transition:0.3s ease;
}
.social ul li a:hover{
top:8px;
opacity:1;
}
/******************** /Social ********************/
/******************** Menu ********************/
.menu {
margin:10% 0 0 35%;
word-spacing:1.5em;
letter-spacing:0.2em;
}
.menu a {
color:#83a4b0;
text-decoration:none;
}
.menu a:hover{
color:#000000;
text-decoration:none;
text-transform:uppercase;
}
/******************** /Menu ********************/
/******************** HR ********************/
.hr {
margin: 0 0 0 0;
opacity:0.1;
}
/******************** /HR ********************/
/******************** Copyright ********************/
.copy {
bottom: 0;
margin: 20px 10% 20px 10%;
text-align: center;
color:#ffffff;
font-size:13px;
}
.copy a {
text-decoration:none;
color:#989898;
}
.copy:hover a {
color:#000000;
}
/******************** /Copyright ********************/
Un grand merci à celui ou celle qui m'aidera
Modifié par TxReplay (29 Jun 2012 - 15:12)
, tu voudrais que :
