Mon blog...

Sebastien · 5 Août 2004

Je suis en train de passer mon site à dotclear...

http://s.billard.free.fr/dotclear/

Que pensez vous du design? trop sobre? agreable à lire? des suggestions?

**ams51** · 5 Août 2004

sympa... J'aime bien le petit lotus (c'est un lotus)

L'entête est un peu grande et vide je trouve. c'est pas moche mais ça prend de la place

Photo, Musique et Recettes végétariennes (frites) et Entrecôte (?)

edit :

je n'avais pas fini. c'est agréable à l'oeil. Si tu mets des longs textes ça devrait être agréable à lire

Monique · 5 Août 2004

Bonjour,

J'abonde dans le sens du commentaire de ams51.

J'ai toujours eu une préférence pour les camaïeus de couleurs

Sebastien · 5 Août 2004

Merci effectivement l'illustration du haut me gene un peu je vais retailler et peut etre changer de photo

Sebastien · 5 Août 2004

Probleme bizarre...Je veux juste passer mes polices de arial à verdana, aussi j'ai modifié la font family dans la section html de ma feuille de style, mais mon menu de droite s'en trouve tres fortement decalé vers le bas le bug ne concerne bien sur que IE... vous avez une idée du probleme?

Voila ma CSS :

html{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.75em;
	color: #444; /*background: #EBE8DF url(images/fond.png) repeat-x;*/
	background: #C7C5B6 url(images/fond.jpg) repeat fixed;
}

body{
	margin: 0;
	padding: 0;
	text-align: center;
}

a:link{color: #8D8B5E;	background: transparent; text-decoration: none;}
a:visited{color: #8D8B5E;background: transparent; text-decoration: none;}
a:hover{
	color: #8D8B5E;
	background: transparent;
	}
a[hreflang]:after {content: "\0000a0[" attr(hreflang) "]"; color:#999; background:transparent;}
a img{
	border: none;
}

hr{
	display: none;
}

h2{
	color: #8D8B5E;
	background: transparent;
	font-size: 1.3em;
}

h2 a{
	color: #8D8B5E;
	background: transparent;
	text-decoration: none;
}

h2 a:visited{
	color: #8D8B5E;
	background: transparent;
}

label{
	cursor: pointer;
	cursor: hand;
}

ul{
	list-style-image: url(images/puce.png);
}

ol{
	list-style: decimal;
}

blockquote{
	background: #EFEFEF none no-repeat bottom left; /*border: 1px solid #E0E0E0;*/
	padding: 10px;
	padding-bottom: 40px;
	margin: 1em;
}

pre{
	font-size: 1.2em;
	font-family: monospace;
	border: 1px solid #E0E0E0;
	padding: 1em;
	margin: 0 auto;
	background: #EEE;
	color: #000;
	width: 90%;
	overflow: auto;
}
/*******************************************************************/
div#page{
	position: relative;
	width: 60em;
	text-align: left;
	margin: 0 auto;
	padding: 0;
	border: 10px solid #EEE;
	background: #FFF;
	color: inherit;
}
/*******************************************************************/
#top{
	background: #FFF url(images/titre.jpg) no-repeat;
	height: 157px;
}

h1{
	margin: 0;
	padding: 1em;
	font-family: Verdana, arial, sans-serif;
	letter-spacing: -1px;
}

#top h1 a{
	text-decoration: none;
	color: White;
	background: transparent;
	visibility: visible;
}
/*******************************************************************/
p#prelude{
	position: absolute;
	top: 5px;
	right: 37%;
	margin: 0;
	color: White;
	background: transparent;
	font-size: 0.8em;
}

p#prelude a{
	color: White;
	text-decoration: none;
}
/*******************************************************************/
div#content{
	width: 42em;
	float: left;
	padding: 1em;
}

div.post{
	margin-bottom: 2em;
}

p.post-info{
	background: #DFDFD3 url(images/postinfo.png) no-repeat top right;
	padding: 3px;
	border: 1px solid #DFDFD3;
	-moz-border-radius: 4px;
}
/*******************************************************************/
#sidebar{
	width: 14em;
	float: right;
	padding: 1em;
}

#sidebar h2{
	font-size: 1.2em;
	color: #449500;
}

#sidebar ul{
	list-style-type: square;
	list-style-image: none;
	margin: 0;
	padding: 0;
}

#sidebar li{
	margin: 0;
	padding: 0;
	display:inline;
}

#sidebar a{
	display: block;
	padding: 0.5em;
	text-decoration: none;
}

#sidebar a:hover{
	background: transparent none;
	text-decoration: none;
	color: #CDCCB8;
}

#calendar{
	text-align: center;
}

#calendar h2{
	display: none;
}

#calendar table{
	font-size: 0.8em;
}

#calendar a{
	display: inline;
}

#calendar td a{
	font-weight: bold;
	border: 1px dotted;
	padding: 0;
}

/*******************************************************************/
#footer{
	clear: both;
	background: #CDCCB8;
	color: #666;
	margin: 0;
	padding: 1em;
	height: 1em; /* pour un bug bizarre d'IE6 */
}

#footer a{
	color: #666;
	background: transparent;
	text-decoration: none;
}

/*******************************************************************/
.field label{
	display: block;
}

fieldset{
	border: none;
}

textarea{
	width: 90%;
}

mee2 · 5 Août 2004

Je sais pas vraiment quelle est la cause du problème, mais je crois que la solution consiste à, soit agrandir le div #page, soit réduire le div #contenu ou le div#sidebar : div#page est trop "petit" pour contenir div#contenu et div#sidebar l'un à côté de l'autre (enfin, dans ce qu'interprète IE). Par contre, le rapport avec font-family m'échappe.

Au passage, je n'aime pas trop le dégradé vers le balanc sur l'image, mais le thème est sympathique. =)

Modifié 5 Août 2004 par mee2

LaurentDenis · 6 Août 2004

Probleme bizarre...Je veux juste passer mes polices de arial à verdana, aussi j'ai modifié la font family dans la section html de ma feuille de style, mais mon menu de droite s'en trouve tres fortement decalé vers le bas le bug ne concerne bien sur que IE... vous avez une idée du probleme?

Le rapport avec font-family... C'est que tu as spécifié tes largeurs de #page, #content et #sidebar en em, autrement dit des largeurs variables selon la taille des caractères... mais aussi selon certaines différences entre polices comme Arial et Verdana (Arial est plus "tassé" que Verdana, avec une différence de taille d'1px par caractère).

Comme tu spécifies par ailleurs des padding, border... le box model propre à IE calcule différemment les largeurs et obtient une valeur trop grande pour que ton calendrier (#calendar) "tienne" dans le #sidebar.

Il te suffit de modifier la police pour éviter Verdana dans #calendar :

#calendar{
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
}

Ou alors, tu cherches une nouvelle combinaison de largeur pour #content et #sidebar (en évitant de calculer au plus juste).

Au passage, quand vous spécifiez des largeurs en em, pensez à tester dans toutes les polices que vous indiquez... mais dites-vous qu'il suffit que l'utilisateur impose une autre police pour tout casser

Modifié 6 Août 2004 par LaurentDenis

Sebastien · 6 Août 2004

Merci Denis, je savais pas pour les em je suis parti du template daClear que j'ai modifié. Je vais tester tes solutions

je n'aime pas trop le dégradé vers le balanc sur l'image, mais le thème est sympathique. =)

Mee2, je suis plutot d'accord, le hic c'est que ma mise en page est elastique alors je peux pas faire de banniere à largeur fixe. Aurait tu une idée? un dégradé vers une autre couleur serait preferable tu pense ?

Sebastien · 6 Août 2004

Encore une question...maintenant que mon blog est quasi terminé, je voudrais le mettre comme page d'accueil de mon site.

Je pensais initialement le mettre à la racine, mais en fait je prefere le garder dans son repertoire /dotclear/ pour une meilleure organisation des fichiers.

Comment configurer la page http://s.billard.free.fr/dotclear/ en page d'accueil? via htaccess ou autre? je cherche une solution bien entendu compatible avec les moteurs de recherche...

mee2 · 6 Août 2004

mh, pour le dégradé je sais pas =/

Par contre, tu peux rediriger les gens de / à /dotclear/ en mettant un index.php dans / tel que :

<?php
$url=" http://s.billard.free.fr/dotclear/";
header("HTTP/1.1 301 Moved Permanently");
header("Location: ".$url);
header("Connection: close");
?>
<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html>
<head>
   <title>301 Moved</title>
   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<h1>301 Moved</h1>
The document has moved <a href="<?php echo $url;?>">here</a>.
</body>
</html>

Google suit les redirections 301, il me semble, donc de ce côté pas de problèmes.

Sebastien · 6 Août 2004

C'est la meme chose que par .htaccess avec ca?

redirect 301 /index.html http://s.billard.free.fr/dotclear/

je dois faire une redirection par page?

Je pense a la syntaxe suivante :

DirectoryIndex /dotclear/index.php

ErrorDocument 404 /404.html

redirect 301 /index.html http://s.billard.free.fr/dotclear

redirect 301 /astuces-audio.html http://s.billard.free.fr/dotclear

redirect 301 /prods.html http://s.billard.free.fr/dotclear

redirect 301 /keutchi.html http://s.billard.free.fr/dotclear

redirect 301 /liste.html http://s.billard.free.fr/dotclear

redirect 301 /galerie/ http://s.billard.free.fr/dotclear

redirect 301 /webmaster.html http://s.billard.free.fr/dotclear

Modifié 6 Août 2004 par Sebastien

mee2 · 6 Août 2004

ah, j'avais pas compris, le script php ci-dessus redirige juste l'utilisateur de http://s.billard.free.fr/ vers http://s.billard.free.fr/dotclear/.

Il doit y avoir un moyen pour avoir seulement le fichier index.php dans / et le reste dans un autre repertoire, avec l'option "Emplacement de l'application", mais je suis pas sur.

(edit) oui, en mettant dans index.php

$app_path = '/blog/';

avec seulement index.php (atom.php, rss.php et tb.php aussi, je crois) à la racine du site - et le reste dans /blog/, ça marche.

Modifié 6 Août 2004 par mee2

Sebastien · 6 Août 2004

Bon bah vu que j'avais pas beaucoup de pages j'ai fait des redirect 301 pour chacune via htaccess. Le blog est donc en place à http://s.billard.free.fr merci a tous de votre aide

Sebastien · 14 Septembre 2004

Ah oui au fait j'ai joué avec les css ajouté des puces devant les titres, mis un titre graphique...ca s'affiche bien chez tout le monde?

Marie · 14 Septembre 2004

Oui c'est très propre vu d'ici

Mais c'est quoi que tu appelle titre graphique?

Je ne l'ai pas repéré... c'est le titre du blog tout en haut?? :unsure:

Sebastien · 14 Septembre 2004

Oui avant c'etait un texte dans un h1, ca faisait un peu triste au niveau typographie donc je l'ai changé pour un gif transparent

Marie · 14 Septembre 2004

Ok!

Moi je trouve ça propre et super zen

Alors, tu trouves ça comment les CSS? Sympa, n'est-ce pas?

Sebastien · 14 Septembre 2004

Merci Marie Le css je trouve ca super niveau maintenance et propreté du code. Mais ca reste tres laborieux pour moi, surtout la partie positionnement css (design tableless).

J'imagine qu'il faut pratiquer d'avantage...

Marie · 14 Septembre 2004

surtout la partie positionnement css (design tableless).

Piouf! moi aussi c'est là que je galère fortement!

Mais je n'ai pas dit mon dernier mot

Monique · 14 Septembre 2004

Bonjour,

Superbe :up:

Juste un petit problème d'accent : thème

Sebastien · 14 Septembre 2004

Merci monique! je vais corriger ca

Loupilo · 14 Septembre 2004

C'est très simple et très joli, bravo !

Navigation vraiment agréable !

Je regrette juste l'absence d'effets au survol des liens de catégories, des liens contenus dans les billets, et des liens dans le bas de la page. Ils ne se démarquent pas assez du contenu non lié ...

Pour information, quelle est la police de ton "titre graphique" ?

Amicalement,

Loupilo

Sebastien · 14 Septembre 2004

Merci loupilo je vais reflechir pour les liens. Concernant la police c'est scriptina, disponible sur dafont.com

Connexion

Mon blog...

Sujets conseillés

Sebastien

ams51

Monique

Sebastien

Sebastien

mee2

LaurentDenis

Sebastien

Sebastien

mee2

Sebastien

mee2

Sebastien

Sebastien

Marie

Sebastien

Marie

Sebastien

Marie

Monique

Sebastien

Loupilo

Sebastien

Veuillez vous connecter pour commenter

Parcourir

Activité