28172 sujets

CSS et mise en forme, CSS3

Bonjour,

À tâtons, mais avec ténacité, je construis langue tirée (sur MacBook Air) un site simple, sans fioriture:
www.worrberstein.com

Il n'est pas terrible ; je l'embellirai une fois cette première version lancée.

Je suis allé dans un cybercafé pour le visionner sur du matériel PC et là, catastrophe !
(Seule la page index est concernée.)

Le texte qui se trouve à droite de l'image se présente en une colonne étroite, chevauchant et dépassant la ligne du bas (<footer>). Or sur mon Mac, le texte est bien aligner en largeur et hauteur avec l'image…

Je soupçonne le code css, mais où est l'erreur ?
En plongeant mes mains dans le cambouis je me suis astreint à suivre les règles de HTML5 et CSS3…

Ce morceau de code peut-il vous aider ?

#couverture
	{
		float: left;
		position: relative;
		top: 50px;
		left: 190px;
		box-shadow: 8px 8px 12px #aaa;
		-moz-box-shadow: 8px 8px 12px #aaa;
			}
.e /*lettrine première lettre premier paragraphe*/
    {
        margin-right: 0.1em;
        margin-left: 0em;
        margin-top:22px;
        float: left;
        line-height:22px;
        padding:1px;
        font-style: uppercase;
        font-size: 4.5em;
        	}
        	
.texte /* texte présentation générale*/
	{
    	font-family: "times new roman", arial, sans-serif;
    	font-size: 1.3em;
		position: relative;
		top: 50px;
		height: 454px;
		color: black;
		margin-left: 600px;
		text-align: justify;
		margin-right: 200px;
                 }


P.S. Les résultats sont les mêmes sur les différents navigateurs Opéra, Firefox, Chrome : bons sur Mac, désolants sur PC.
Merci pour votre aide
Till
Modifié par Till (19 Apr 2013 - 10:23)
Bonjour,

Chez moi, le texte n'est pas dans une colonne "étroite" (il doit prendre les deux tiers de la page). Et pour l'alignement avec l'image, tentez d'ajouter ceci à votre feuille de styles :

.titre {
    overflow : hidden;
}


Est-ce le résultat que vous attendiez ?
Bonjour,
il y a des erreurs au niveau du balisage HTML, mauvaise imbrication des element et balises manquantes. Il faut corriger le HTML avant de relever les défaut de styles.
Chaque navigateur tenteras de reconstruire le document comme il peut (en ajoutant les balises manquantes ou en enlevant ). Les règles CSS , même si cohérentes auront donc des impact différents selon les navigateurs tant que la structure HTM ne sera pas bien formée.

Cdt,
GC

<edit > tu peut verifier la validité de ton document (dont la syntaxe) http://validator.w3.org/check?uri=http%3A%2F%2Fwww.worrberstein.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0 </edit>
Modifié par gc-nomade (19 Apr 2013 - 11:49)