18041 sujets

Questions générales et questions de débutants

Quand design rime avec alignement...

Bonsoir à toutes et à tous,

A mes heures perdues (c'est à dire la nuit), je tente de me mettre au design web, j'ai créé un template sous photoshop et je désire le passer sous Dotclear... Vous trouverez une image de ce que j'ai fait. Je suis face à plusieurs problème actuellement je me suis basé sur le tutoriel de votre site web pour me permettre d'utiliser des images à la place d'une liste (de mémoire, tutoriel en 5 étapes, basé sur le CSS).

Je pense que je brule les étapes en voulant aller trop vite, car je me suis servis d'un fichier CSS déjà existant et que j'ai épuré pour mes besoins, mes problèmes sont les suivants :

1. Centrer mon menu (je me suis basé aussi sur le tutoriel cité précédemment)
2. Rendre mon site web accessible sous IE6.

Voici une vignette de mon template

upload/16989-template.png

Voici une preview sous Firefox
upload/16989-ffox.jpg

Voici mon fichier CSS
Pourriez-vous m'indiquer les erreurs commises (sur la mauvaise utilisation des propriétés)et m'aiguiller sur l'utilisation correcte ou non de mes balises.

Cordialement Nicolas
Bonjour,

Nik0s a écrit :
Vous trouverez une image de ce que j'ai fait.

... et ainsi vous pourrez deviner quel code HTML j'ai utilisé. Ou pas. Smiley biggol

Nik0s a écrit :
je me suis basé sur le tutoriel de votre site web pour me permettre d'utiliser des images à la place d'une liste

Je ne suis pas sûr que ce tutoriel soit destiné à «utiliser des images à la place d'une liste». Ni que ça corresponde à quoi que ce soit dans ton design. Je suis perplexe, là. Smiley confuse

Nik0s a écrit :
car je me suis servis d'un fichier CSS déjà existant et que j'ai épuré pour mes besoins

Ah oui, mauvais plan. Je te conseille une intégration HTML-CSS statique (tu écris ton code HTML, et ton CSS, sans passer par Dotclear dans un premier temps). Ça fait un peu plus de travail mais tu maitrises alors mieux ce que tu fais, et c'est formateur. Et un peu de lecture pour la route.

Nik0s a écrit :
Pourriez-vous m'indiquer les erreurs commises (sur la mauvaise utilisation des propriétés) et m'aiguiller sur l'utilisation correcte ou non de mes balises.

Non, car tu n'indiques pas ces balises. Et comme aujourd'hui c'est la grève des médiums et que les boules de cristal sont hors de prix avec l'inflation, le pétrole, touça, ben ça va pas être possible. Smiley cligne
Boulet que je suis...

Voici le code source ainsi généré par Dotclear :

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"
lang="fr">
<head>
	<meta http-equiv="Content-Type"
	content="text/html; charset=UTF-8" />
	<meta name="MSSmartTagsPreventParsing" content="TRUE" />
	<link rel="next" href="/dotclear/index.php/2008/06/11/4-youhou" title="Youhou" />
<link rel="previous" href="/dotclear/index.php/2008/06/05/2-humjim" title="Hum...jim..." />
<link rel="section" href="/dotclear/index.php/Technotes" title="TechNotes" />
<link rel="section" href="/dotclear/index.php/Dossiers" title="Dossiers" />
<link rel="section" href="/dotclear/index.php/General" title="General" />
<link rel="section" href="/dotclear/index.php/Test" title="Test" />
<link rel="archive" href="/dotclear/index.php/2008/06" title="juin 2008" />
	<link rel="alternate" type="application/rss+xml" title="RSS" href="/dotclear/rss.php" />

	<link rel="alternate" type="application/atom+xml" title="Atom" href="/dotclear/atom.php" />
	<meta name="DC.title" content="Techno-blog.net" />
	<title>Nero... Sans les mains - Techno-blog.net</title>
	
	<link rel="stylesheet" type="text/css" href="/dotclear/themes/techno-blog/style.css" media="screen" />
	<!--
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
  xmlns:dc="http://purl.org/dc/elements/1.1/"
  xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/">
<rdf:Description
  rdf:about="http://127.0.0.1/dotclear/index.php/2008/06/05/3-nero-sans-les-mains"
  dc:identifier="http://127.0.0.1/dotclear/index.php/2008/06/05/3-nero-sans-les-mains"
  dc:title="Nero... Sans les mains"
  trackback:ping="http://127.0.0.1/dotclear/tb.php?id=3" />
</rdf:RDF>
-->
</head>

<body>

<div id="top">
	<h1 id="header"><a href="/dotclear/index.php/">Techno-blog.net</a></h1>

			<ul id="menu"><li><a href="/dotclear/index.php/Technotes">TechNotes</a></li><li><a href="/dotclear/index.php/Dossiers">Dossiers</a></li><li><a href="/dotclear/index.php/General">General</a></li><li><a href="/dotclear/index.php/Test">Test</a></li></ul></div>
<div id="page">
	<div id="main_post">
	<div id="content">
			
<div class="post">
	<h2 class="post-title">Nero... Sans les mains</h2>
	<p class="post-info">Par Nico,
	jeudi  juin 2008 à 22:55	<span>::</span> <a href="/dotclear/index.php/Dossiers">Dossiers</a>

	<span>::</span> <a href="/dotclear/index.php/2008/06/05/3-nero-sans-les-mains"
	title="Lien permanent vers : Nero... Sans les mains">#3</a>
	<span>::</span> <a href="/dotclear/rss.php?type=co&post=3"
	title="fil RSS des commentaires de : Nero... Sans les mains">rss</a>
	</p>
	
	<div class="post-chapo">Nero ou comment se faciliter la vie sans avoir à passer sur tous les postes... [smile]<br/>
<img src="/dotclear/images/tuto_nero.png" alt="" /></div>	<div class="post-content">Blah blah blah</div>

	
	
</div>

<div id="trackbacks">
	<h3 id="tb">Trackbacks</h3>
			<p>Aucun trackback.</p>
		
		
	
				<p>Pour faire un trackback sur ce billet :
		 http://127.0.0.1/dotclear/tb.php?id=3</p>
 
	</div>
	

<div id="comments">
	<h3 id="co">Commentaires</h3>
			<p>Aucun commentaire pour le moment.</p>
		
		
	<h3>Ajouter un commentaire</h3>
						<form action="/dotclear/index.php/2008/06/05/3-nero-sans-les-mains" method="post" id="comment-form">
<fieldset>
			<p class="field"><label for="c_nom">Nom ou pseudo :</label>

	<input name="c_nom" id="c_nom" type="text" size="30" maxlength="255"
	value="" />
	</p>

	<p class="field"><label for="c_mail">Email (facultatif) :</label>
	<input name="c_mail" id="c_mail" type="text" size="30" maxlength="255"
	value="" />
	</p>

	<p class="field"><label for="c_site">Site Web (facultatif) :</label>

	<input name="c_site" id="c_site" type="text" size="30" maxlength="255"
	value="http://" />
	</p>
	
	<p class="field"><label for="c_content">Commentaire :</label>
	<textarea name="c_content" id="c_content" cols="35" rows="7">

Je pense sérieusement à refaire ce design avec mon propre CSS
Modifié par Nik0s (12 Jun 2008 - 18:51)
Nik0s a écrit :
Voici le code source ainsi généré par Dotclear

Mouais, bof. Le truc, c'est que reproduire une page à partir d'un code HTML et CSS posté sur le forum est un peu fastidieux. De plus, bien souvent il manque des images pour se rendre compte du rendu obtenu. La solution? Mettre une page en ligne (page complète ou page épurée reproduisant le problème). Ce n'est pas absolument indispensable, mais ça aide à obtenir de l'aide. Smiley cligne
Bonjour/Bonsoir à toutes et tous,

Me voici avec un exemple pour parlant

http://www.techno-blog.net/temp/index.html

Premier état mon CSS est valide en 2.1
Par contre ma page n'est pas validée conforme xhtml...

Bizarrement (vous allez vous dire encore ?) mon affichage diffère grandement entre un Ie6 Ie7 et un FF3. Je me demande si je ne devrais pas ajouter de balise speciale pour internet explorer?

Que pensez-vous de mon code CSS, j'ai essayé au maximum de me passer de ces fou**s tableaux, bon... sauf cas particulier j'ai presque réussi, par contre ma grande question est la suivante mon menu (symbolisé par étape 1 | étape 2 ...) se positionne correctement sur Ff mais pas sur Ie pourriez-vous m'indiquer les points à corriger.

Vous en remerciant par avance
Je crois que si tu supprimes le tableau, ça résoudra en partie ton problème...
Au boulot Smiley cligne
Modifié par versgui (02 Jul 2008 - 10:03)
Sujet clos
Aller à