Salut tout le monde ...
bon ben voila ...je me lance dans la réalisation de ma 1ere interface CSS...
le bouquin pratique du webdesign sur les genoux je potasse depuis le début de l'aprem ...
mais j'ai encore des problèmes ...
bon mis à part des petits bugs entre firefox et IE, j'ai encore du mal à positionner mes div correctement
J'ai pas tout à fait compris comment positionner des éléments blocks en ligne ..mais genre pas tous ...
enfin un peu de code étant surment plus parlant qu'un beau discourt je vous laisse mon code HTML (en gros le patron que je réalise) et mon code CSS.
et le CSS
Ce que j'aimerai faire c'est que le carré de news soit à droite à coté de la zone d'anim flash
et les trois autres en dessous soient alignés sous la zone d'anim flash (normalement il y a 10px entre chaque rubrique)
deja comprendre comment on fait ça se serai super
ensuite je mattaquerai à des problèmes de paufinages ...
Je continue de chercher avec le bouquin mais c'est vrai que vos lumières me seraient vraiment utilse pour bien comprendre les principes de base
grand merci d'avance
@++
bon ben voila ...je me lance dans la réalisation de ma 1ere interface CSS...
le bouquin pratique du webdesign sur les genoux je potasse depuis le début de l'aprem ...
mais j'ai encore des problèmes ...
bon mis à part des petits bugs entre firefox et IE, j'ai encore du mal à positionner mes div correctement
J'ai pas tout à fait compris comment positionner des éléments blocks en ligne ..mais genre pas tous ...
enfin un peu de code étant surment plus parlant qu'un beau discourt je vous laisse mon code HTML (en gros le patron que je réalise) et mon code CSS.
<!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" />
<meta name="generator" content="Adobe GoLive" />
<title>titre</title>
<link href="styles.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<div id="global">
<!-- ----------------------------------bandeau tout en haut------------------------------------- -->
<div id="bandeau_haut">
<a href="#">Accueil</a> - <a href="#">Rechercher</a> - <a href="#">Espace client</a>
</div><!-- fin de div id=bandeau_haut -->
<!-- ----------------------------------MENU FLASH------------------------------------- -->
<div id="menu">
FLASH ICI
</div><!-- fin de div id=menu -->
<!-- ---------------------------Contenu du site------------------------------- -->
<div id="contenu">
CONTENU DU SITE
<div id="anim_accueil">
flash d'anim
</div>
<div id="news"><h1>News</h1>
<div id="fondBlanc">
<p class="TexteAccueil">setst seth sethsrthsrthfhfv yj trf ty jyt djn<br />
rdyjh dyfj drfyj rdyj fdy jd ryj dyj dy j<br />
dfyjdfy yrj dfyj dyfj dyfj dfy j<br />
<a href="#">en savoir +</a>
</p>
<p class="TexteAccueil">setst s ty jyt djn<br />
rdyjh dyfj drfyj rdyj fdy jd ryj dyj dy j<br />
<a href="#">en savoir +</a>
</p>
</div>
</div>
<div id="materiel"><h1>fdthrdyhsdhsth</h1>
<div id="fondBlanc">
<p class="TexteAccueil">setst seth sethsrthsrthfhfv yj trf ty jyt djn<br />
rdyjh dyfj drfyj rdyj fdy jd ryj dyj dy j<br />
dfyjdfy yrj dfyj dyfj dyfj dfy j<br />
<a href="#">en savoir +</a>
</p>
</div>
</div>
<div id="logiciels"><h1>fdthrdyhsdhsth</h1>
<div id="fondBlanc">
<p class="TexteAccueil">setst seth sethsrthsrthfhfv yj trf ty jyt djn<br />
rdyjh dyfj drfyj rdyj fdy jd ryj dyj dy j<br />
dfyjdfy yrj dfyj dyfj dyfj dfy j<br />
<a href="#">en savoir +</a>
</p>
</div>
</div>
<div id="services"><h1>fdthrdyhsdhsth</h1>
<div id="fondBlanc">
<p class="TexteAccueil">setst seth sethsrthsrthfhfv yj trf ty jyt djn<br />
rdyjh dyfj drfyj rdyj fdy jd ryj dyj dy j<br />
dfyjdfy yrj dfyj dyfj dyfj dfy j<br />
<a href="#">en savoir +</a>
</p>
</div>
</div>
</div><!-- fin de div id=contenu -->
</div> <!-- fin de div id=global -->
</body>
</html>et le CSS
body {
background-color: #efefef;
font-family: Arial;
font-size: 11px;
}
h1 {
font-family: Arial;
font-size:22px;
color: #000000;
margin-top: 2px;
margin-bottom: 2px; }
a{
color:#ffa500;
}
a:hover{
color:#ffb000;
}
a:visited{
color:#e5a566;
}
div#global {
position:absolute;
top:20;
width: 850px;
background-color: #fff;
left: 50%;
margin: 20px 0px 0px -425px;
text-align: justify;
}
div#menu {
position:relative;
top:0;
left:0;
z-index:1;
}
div#bandeau_haut{
position: relative;
width: 850px;
height: 50px;
background-color: #fff;
}
div#audessus {
position:relative;
top:0;
left : 70%;
width: 200px;
z-index:2;
color:#fff;
margin-left: -100px;
text-align: justify;
}
/* ------------- PARTIE CONTENU ----------- */
div#anim_accueil{
width: 633px;
height: 210px;
margin: 5px 5px 10px 0px;
background-color: #006900;
}
div#contenu {
position:relative;
top:50;
width: 830px;
z-index:0;
left: 50%;
margin-left: -415px;
text-align: justify;
}
.TexteAccueil{
padding: 9px;
}
div#fondBlanc{
position: inherit;
width: 100%;
margin: 1px;
background-color: #fff;
}
div#news {
float: right;
display: block;
background-color: #dee2e9;
width: 197px;
height: 210px;
padding: 1px;
}
div#news h1{
margin-left: 10px;
}
div#materiel {
float: left;
width: 198px;
background-color: #748e6d;
padding: 1px;
margin-left: 10px;
margin-right: 5px;
margin-bottom: 10px
}
div#materiel h1{
color:#fff;
margin-left: 10px;
}
div#logiciels {
float: left;
width: 208px;
background-color: #ad2f2f;
margin-left: 10px;
margin-right: 5px;
margin-bottom: 10px
}
div#logiciels h1{
color:#fff;
}
div#services {
float: left;
width: 203px;
background-color: #ec7404;
margin-left: 10px;
margin-right: 5px;
margin-bottom: 10px
}
div#services h1{
color:#fff;
}
Ce que j'aimerai faire c'est que le carré de news soit à droite à coté de la zone d'anim flash
et les trois autres en dessous soient alignés sous la zone d'anim flash (normalement il y a 10px entre chaque rubrique)
deja comprendre comment on fait ça se serai super
ensuite je mattaquerai à des problèmes de paufinages ...
Je continue de chercher avec le bouquin mais c'est vrai que vos lumières me seraient vraiment utilse pour bien comprendre les principes de base
grand merci d'avance
@++
