Aller au contenu

Mon blog...

Sebastien

Par Sebastien
dans Le Webdesign

 Partager

Sujets conseillés

ams51

ams51

Posté
Posté

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 (?) :D

edit :

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

Lien vers le commentaire
Partager sur d’autres sites
Monique

Monique

Posté
Posté

Bonjour,

J'abonde dans le sens du commentaire de ams51.

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

Lien vers le commentaire
Partager sur d’autres sites
Sebastien

Sebastien

Posté
  • Auteur
Posté

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%;
}

Lien vers le commentaire
Partager sur d’autres sites
mee2

mee2

Posté
Posté (modifié)

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é par mee2
Lien vers le commentaire
Partager sur d’autres sites
LaurentDenis

LaurentDenis

Posté
Posté (modifié)
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é par LaurentDenis
Lien vers le commentaire
Partager sur d’autres sites
Sebastien

Sebastien

Posté
  • Auteur
Posté

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 ?

Lien vers le commentaire
Partager sur d’autres sites
Sebastien

Sebastien

Posté
  • Auteur
Posté

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...

Lien vers le commentaire
Partager sur d’autres sites
mee2

mee2

Posté
Posté

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.

Lien vers le commentaire
Partager sur d’autres sites
Sebastien

Sebastien

Posté
  • Auteur
Posté (modifié)

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é par Sebastien
Lien vers le commentaire
Partager sur d’autres sites
mee2

mee2

Posté
Posté (modifié)

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é par mee2
Lien vers le commentaire
Partager sur d’autres sites
  • 1 month later...
Sebastien

Sebastien

Posté
  • Auteur
Posté

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...

Lien vers le commentaire
Partager sur d’autres sites
Loupilo

Loupilo

Posté
Posté

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

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...