28221 sujets

CSS et mise en forme, CSS3

[résolu] Design d'un minisite

Pages :
Bonjour !

En fait je veux faire comme une espèce de blog mais pour le design j'aurais aimé savoir ce que vous me conseillez :

Je vais créer un template sous photoshop et je voudrais savoir si le mieux et de l'afficher en entier comme background ou si il vaut mieux le découper ?

Ensuite, au niveau des calques, j'avais remarqué une fois qu'ils ne se plaçaient pas forcément de la même manière selon les navigateurs, y aurait il un moyen pour y remédier (je crois qu'il y a déjà des posts là-dessus mais je n'ai pas tout compris...)

Merci Smiley smile
Modifié le 31 Oct 2004 - 22:22
Merci je suis allé voir et c'est très bien fait. Le seul truc c'est qu'il y a une chose que je n'arrive pas à faire donc je mettrais l'image de mon template ce soir et j'expliquerait mon problème Smiley biggrin

En tout cas merci.
Moi aussi je vais le faire ce tuto, je l'ai juste lu mais je trouve le design interessant!!
Faudra qu'apres j'essaye de faire le mien Smiley smile
Bon j'arrive à m'en sortir en fait mais je n'arrive, pour l'instant, pas à faire des traits de séparation "pipe" ni des "tabs".
pipe ?? tabs ?? (tabs, onglet, ok mais pipe ?? tube..)

Si tu avais une explication détaillée ou au moins claire, ca aiderai ;)
Ha oui désolé en fait j'ai lu sur un site qu'il parlait du caractère "pipe", c'est une barre comme celle-ci | c'est pour séparer les boutons. Quant aux tabs ce sont comme des rectangles où le texte des boutons se situe. J'ai était plus clair là je pense et désolé mais il se fait tard et je pers la tête Smiley fou

Smiley edit Je met une capture
Ca c'est ce que j'ai sous dreamweaver mais sous IE le texte est décalé à gauche et sous Mozilla il est décalé au dessus. Pourriez-vous m'aider ?
Modifié le 30 Oct 2004 - 23:40
Le mieux serait le résultat en ligne... on ne peut pas corriger un bug si on a pas de code et d'exemple concret ;)
Oui bien sûr voici le code :
HTLM :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Document sans nom</title>
<link href="css1.css" rel="stylesheet" type="text/css">
</head>
<body>

<div class="background">
<ul class="accueil">
<a href="#">Accueil</a>
<a href="#"> Mes sites</a>
<a href="#">Contact</a>
<a href="#">Liens</a>
</ul>

<div class="centre"></div>

</div>
</body>
</html>


Le CSS
/* CSS Document */
.background {
background-image: url('images/template2.jpg');
width: 750px;
height: 500px;
background-repeat: no-repeat;
}

.accueil {
margin-left: 230px; /* on place le bloc centre par rapport à la largeur du bloc gauche */
margin-top: 4px;
width: 500px;
height: 23px;
}

.accueil a {
font-size: 16px;
font-weight: bold;
color: #060C6F;
text-decoration: none; /* pour éviter le soulignement au survol */
margin-left: 50px; /* espacement entre chaque sous-menu */
text-align: left;
}

.centre {
margin-left: 326px; /* on place le bloc centre par rapport à la largeur du bloc gauche */
margin-top: 10px;
width: 390px;
height: 442px;
}


Merci Smiley biggrin
Moi il y a un truc que je pige pas c'est pour les Urls!!
Dans le tuto je vois
background: url(little_apple.gif) no-repeat left bottom ;

Mais l'image little_apple.gif enfin nan je sais pas comment expliqué mais je pige pas!!
Modifié le 31 Oct 2004 - 00:04
T'as pas un résultat en ligne qu'on puisse voir le bug en action ?
SVP si vous voulez une aide la plus efficace possible, donnez des URLs, chaque personne qui veut aider ne vas pas créer une page à chaque fois et récupérer les images, ...
@Osiris> oui et ? qu'est ce que tu ne comprend pas ?

background: url(little_apple.gif) no-repeat left bottom ;

url(...) > background-image
no-repeat > background-repetition
left bottom > background-position
Mais c'est l'url de l'image!!
Pourquoi elle est comme ca? Smiley decu
enfin nan mais pk c'est juste "Little_image"? Smiley decu
Modifié le 31 Oct 2004 - 00:07
Euh désolé il est pas en ligne mais je vais le mettre de suite. En fait je n'avais nullement pensé que vous devriez le mettre sur votre ftp avec les images et tout ...
@Osiris... bah c'est un nom d'image, c'est tout :D

Je met un underscore "_" à la place des espace, et le nom d'image c'est pour faire significatif, c'est une petit pomme, mais les mots anglais sont souvent plus cours que les equivalents français. tu peux mettre petite_pomme.gif si tu préfères !

Tu peux mettre aussi pwetpwetcamenbert.gif ^^
Oué ca c'est j'ai compris je suis constament sur un apple Smiley biggrin !!
Mais elle est bizarre l'url, l'image elle doit etre enregistrés dans ton repertoire?
Bah en fait l'url est enregistré dans le répertoire d'un autre site et se trouve donc dans un sous-répertoire étant donné que le site n'est pas encore hébergé. Voilà Smiley biggrin 

<ul class="accueil">
<a href="#">Accueil</a>
<a href="#"> Mes sites</a>
<a href="#">Contact</a>
<a href="#">Liens</a>
</ul>


arg, il manquerait pas des li par hazard Smiley idee :

<ul><li><a>...</a></li><li>.....</li></ul>


ensuite, je pense qu'il serait mieux de decouper ton interface.

un article sur ala qui devrait t etre utile
Pages :
Sujet clos
Aller à