Salut, je débute en css (depuis 4 jours ! hé oué ! 
) et je voudrait simplement vous exposer mon site et mon code, pour receuillir vos avis et conseils. Me dire ou est-ce que je fai de la m**de quoi 
! Sachant que ce n'est pas du tout fini (vous le remarquerez facilement 
)
http://karyboo.free.fr/karyweb
Au final ca devrait ressembler à ca :
http://karyboo.free.fr/pagepi2.jpg
J'ai également un problème qui me met la tete un peu comme ca
: lorsque que je navigue en 1280*1024 en plein écran, pas de problème, c'est tout fait comme je veux. Mais à des tailles ou résolutions inférieures, il apparait un problème au niveau de la bordure droite, voyez vous meme :
http://karyboo.free.fr/problem.jpg
Voici le code html :
Et le code css :
Merci d'avance de vos conseils, et désolé de pas faire moins compliqué
.
Modifié par karyboo (19 Jul 2005 - 14:53)
) et je voudrait simplement vous exposer mon site et mon code, pour receuillir vos avis et conseils. Me dire ou est-ce que je fai de la m**de quoi ! Sachant que ce n'est pas du tout fini (vous le remarquerez facilement )http://karyboo.free.fr/karyweb
Au final ca devrait ressembler à ca :
http://karyboo.free.fr/pagepi2.jpg
J'ai également un problème qui me met la tete un peu comme ca
: lorsque que je navigue en 1280*1024 en plein écran, pas de problème, c'est tout fait comme je veux. Mais à des tailles ou résolutions inférieures, il apparait un problème au niveau de la bordure droite, voyez vous meme :http://karyboo.free.fr/problem.jpg
Voici le code html :
<!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=iso-8859-1" />
<title>karyweb - Présentation</title>
<link href="interface/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- Programmation du haut de page -->
<div id="hautdepage">
<div id="head1"> <!-- Bande noire -->
</div>
<div id="head2"> <!-- Partie haute de l'image -->
</div>
<div id="menuhaut"> <!-- Menu horizontal -->
<div id="menuhaut1"></div>
<a href=""><div id="menuhaut2"></div></a>
<a href=""><div id="menuhaut3"></div></a>
<a href=""><div id="menuhaut4"></div></a>
<a href=""><div id="menuhaut5"></div></a>
<a href=""><div id="menuhaut6"></div></a>
<div id="menuhaut7"></div>
</div>
<div id="head3"> <!-- Partie basse de l'image -->
</div>
<div id="head4"> <!-- Transition image/page (ombre) -->
</div>
</div>
<!-- Programmation du menu de gauche -->
<div id="imagemenu"> <!-- Image au dessus du menu de gauche -->
</div>
<div id="gauche"> <!-- Menu de gauche -->
<ul id="menugauche">
<li class="menugauchelien"><a href="">Article 1</a></li>
<li class="menugauchelien"><a href="">Article 2</a></li>
<li class="menugauchelien"><a href="">Article 3</a></li>
<li class="menugauchelien"><a href="">Article 4</a></li>
</ul>
</div>
<!-- Programmation corps de page -->
</body>
</html>
Et le code css :
/*------------------------------------------
Propriétés de la page
------------------------------------------*/
body
{
background: #FFFFFF;
background-image:url(logo.gif);
background-repeat:no-repeat;
background-position:265px 280px;
margin: 0 0 0 0;
font-family: "Times New Roman", Times, serif; /* définition du style de texte (à refaire en détails) */
font-size: 12px;
color: #676767;
}
/*------------------------------------------
Style des textes
------------------------------------------*/
/*------------------------------------------
Design - Haut de page
------------------------------------------*/
/* Images haut-dessus du menu du haut */
#head1
{
position: relative;
width: 100%; /* pour que la "boite" prenne la largeur complète de la page */
height: 80px;
background: #000000 url(noir.jpg) no-repeat top left; /* définition des attributs de fond de la boite : couleur de fond, image (obligatoire pour que la boite "apparaisse"), pas de répétition de l'image, positionnement de l'image en bas à droite */
}
#head2
{
position: relative;
width: 100%;
height: 89px;
background: #000000 url(barrehauthaut.jpg) no-repeat top left;
border-top: 2px solid #505050;
}
/* Menu du haut */
#menuhaut
{
background: #000000;
width: 100%;
}
#menuhaut1
{
position: absolute;
left: 0px;
top: 171px;
background-image: url(barrehautgauche.jpg);
width: 16px;
height: 18px;
}
#menuhaut2
{
position: absolute;
left: 16px;
top: 171px;
background-image: url(pres.jpg);
width: 144px;
height: 18px;
}
#menuhaut3
{
position: absolute;
left: 160px;
top: 171px;
background-image: url(imag.jpg);
width: 83px;
height: 18px;
}
#menuhaut4
{
position: absolute;
left: 243px;
top: 171px;
background-image: url(cv.jpg);
width: 46px;
height: 18px;
}
#menuhaut5
{
position: absolute;
left: 289px;
top: 171px;
background-image: url(lien.jpg);
width: 66px;
height: 18px;
}
#menuhaut6
{
position: absolute;
left: 355px;
top: 171px;
background-image: url(cont.jpg);
width: 106px;
height: 18px;
}
#menuhaut7
{
position: absolute;
left: 461px;
top: 171px;
background-image: url(barrehautdroite.jpg);
width: 563px;
height: 18px;
}
/* Images au-dessous du menu du haut */
#head3
{
position: relative;
width: 100%;
height: 20px;
margin-top: 18px;
background: #FFFFFF url(barrehautbas.jpg) no-repeat top left;
}
#head4
{
position: relative;
width: 444px;
height: 85px;
background: #FFFFFF url(titretpk.jpg) no-repeat bottom right;
}
/*------------------------------------------
Design - Menu de gauche
------------------------------------------*/
#imagemenu
{
position: relative;
width: 235px;
height: 72px;
background: #FFFFFF url(titpres.jpg) no-repeat bottom right;
}
#gauche {
position: absolute;
left: 0;
top: 400px;
width: 150px;
}
/*------------------------------------------
Design - Corps de page
------------------------------------------*/
/*
#corpsdepage
{
float:right;
width: 75%;
margin: 0;
padding: 0 3% 0 0;
}
*/
Merci d'avance de vos conseils, et désolé de pas faire moins compliqué
. Modifié par karyboo (19 Jul 2005 - 14:53)
!
. Si quelqu'un à une suggestion qu'il ne se prive pas ca m'aidera beaucoup, je bloque vraiment là dessus 
.
. 
