Problème avec un thème

.matt · juin 2007

Bonjour

J'ai un petit problème avec un thème que je suis en train d'adapter à pluxml.

L'exemple est à cette page : http://japmusic.net/v2/

En fait, je voudrais que le design face comme sur la petite image que j'ai faite là : http://japmusic.net/images/copie.jpg

Diti · juin 2007

Ah bon ? J'espère que ton problème va s'arranger alors

!
Blague à part, tu n'as fait aucune demande

...

Bon, pour y arriver : un positionnement absolu, en pixels, partant du haut ; une largeur, avec une marge automatique pour le centrage ; un font-size d'environ 3em ; un text-transform: uppercase;.
Je crois que c'est tout.

.matt · juin 2007

Je te donne le code que j'ai fait :

#page {
	width : 750px;
	margin : 0 auto; padding : 30px 0 0 0;
	position : absolute center;
	}

Diti · juin 2007

Euh, la page a un problème là :cool:

.matt · juin 2007

Ben oui je sais c'est un peu pour ça que je te donne le code ^^'

shergui · juin 2007

Salut

C'est ça que tu veux ?

http://shergui.free.fr/japmusic/japan.htm

le code CSS

body {
background-image: url(fond_header.jpg);
background-position: top;
background-repeat: repeat-x;
text-align: center;
margin: 0;
}

#header{
background-image: url(header.jpg);
height: 250px;
width: 774px;
margin: auto;
text-align: left;
}

Le code de la page

<html>
<head>
<title></title>
<link rel="StyleSheet" type="text/css" href="japan.css">
</head>
<body>
<div id="header"></div>
</body>
</html>

Cordialement

shergui · juin 2007

Rebonsoir

Une 2ème version avec les textes. Il faut dans ce cas faire une découpe différente. La forme blanche doit se trouver dans le corps et tu positionnes lle titre et le texte avec des css.

L'exemple ici :
http://shergui.free.fr/japmusic/japan2.htm
Les images de la nouvelle écoupe :
http://shergui.free.fr/japmusic/header2.jpg
http://shergui.free.fr/japmusic/corps_haut.jpg

C'est fait rapidos, il faut faire une découpe plus précise.

le css :

body {
background-image: url(fond_header.jpg);
background-position: top;
background-repeat: repeat-x;
text-align: center;
margin: 0;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

#header{
background-image: url(header2.jpg);
height: 141px;
width: 774px;
margin: auto;

}

#corps{
background-image: url(corps_haut.jpg);
background-position: top;
background-repeat: no-repeat;
width: 774px;
height: 92px;
margin: auto;
text-align: left;
}

#corps h1{
text-align: center;
margin: 0;
padding-top: 25px;
}

p {
font-size: 12px;
text-align: justify;
padding : 25px 50px 15px 100px;
}

la page :

<html>
<head>
<title></title>
<link rel="StyleSheet" type="text/css" href="japan2.css">
</head>
<body>
<div id="header"></div>
<div id="corps">
<h1>Exemple de titre</h1>
<p>In his tractibus navigerum nusquam visitur flumen sed in locis plurimis aquae suapte natura calentes emergunt ad usus aptae multiplicium medelarum. verum has quoque regiones pari sorte Pompeius Iudaeis domitis et Hierosolymis captis in provinciae speciem delata iuris dictione formavit.</p>
</div>
</body>
</html>

Si tu ne veux pas le graphisme centré tu enlèves tous les margin: auto; et tu as le graphisme à gauche.

shergui · juin 2007

Dernière info sur ce design :

1/ on peut encore compacter le code CSS

2/ s'il ne s'agit d'après ton image de ne mettre qu'un titre toujours le même en haut de la zone blanche la découpe 1 reste valable et on place le texte dans le div du header, si le titre doit changer en fonction du contenu il faut utiliser la découpe 2 et placer le tout dans le div du corps de la page.

Je ne sais pas si je suis clair

.matt · juin 2007

Bonjour,

j'ai eu des soucis d'ordi ce week end (virus) et j'ai perdu toute mes données dont le PSD de mon design que j'avais modifier. Par chance je l'avais envoyer sur le web.

Donc, en fait, je voudrais que ca fasse comme sur l'image http://japmusic.net/images/japmusic%20copie.jpg

Problème avec un thème

Réponses