Mise en page lors du resize navigateur
alexislevrai
Messages postés
603
Statut
Membre
-
alexislevrai Messages postés 603 Statut Membre -
alexislevrai Messages postés 603 Statut Membre -
Bonjour tout le monde.
J'ai un problème avec mon site, sur mon navigateur (safari) la page s'affiche correctement lorsqu'on l'ouvre.
Puis si je resize la fenêtre de mon navigateur, mon contenu est déplacé a droite ou a gauche et ne s'adapte donc plu a mon Background.
Je sais pas si c'est très clair, mais je pense qu'en allant voir vous comprendrez.
http://www.musthaveonline.fr/futur/
J'ai un problème avec mon site, sur mon navigateur (safari) la page s'affiche correctement lorsqu'on l'ouvre.
Puis si je resize la fenêtre de mon navigateur, mon contenu est déplacé a droite ou a gauche et ne s'adapte donc plu a mon Background.
Je sais pas si c'est très clair, mais je pense qu'en allant voir vous comprendrez.
http://www.musthaveonline.fr/futur/
A voir également:
- Mise en page lors du resize navigateur
- Mise en forme conditionnelle excel - Guide
- Supprimer page word - Guide
- Mise a jour chrome - Accueil - Applications & Logiciels
- Page d'accueil navigateur - Guide
- Mise a jour windows 10 - Accueil - Mise à jour
18 réponses
t'as un sacré problème de css^^
pour l'aspect visuel, développe sous Firefox, avec le plug in webdevelopper toolbar, qui te facilitera grandement le travail sur les css (aperçu en direct).
Mets toutes tes infos de style dans une stylesheet.
Travail avec des identifiants et des classes.
Structure ton document:
html > body > div#cartouche (contient tout ton contenu et position l'ensemble par rapport à ton navigateur) > autres#éléments
Là, tes CSS sont pas assez rigoureuses^^ faut être très pointilleux avec ça, sinon ça foire tout et on n'arrive à rien :s :o)
pour l'aspect visuel, développe sous Firefox, avec le plug in webdevelopper toolbar, qui te facilitera grandement le travail sur les css (aperçu en direct).
Mets toutes tes infos de style dans une stylesheet.
Travail avec des identifiants et des classes.
Structure ton document:
html > body > div#cartouche (contient tout ton contenu et position l'ensemble par rapport à ton navigateur) > autres#éléments
Là, tes CSS sont pas assez rigoureuses^^ faut être très pointilleux avec ça, sinon ça foire tout et on n'arrive à rien :s :o)
Mais c'est sous wordpress, et les css j'y est pratiquement pas retouché par rapport au thème d'origine...
Je suis débutant et en fait j'ai trouvé un themes que je modifie actuellement.
J'ai agrémenté d'images dont le code est généré par iWeb (je sais qu'ils sont crasseux, je m'en rend compte et comme j'apprend de plus en plus, je les arrangerais par la suite).
Sinon je pense que je sais d'ou viens le problème c'est pasque j'ai mis un align=right et donc il s'aligne sur la bordure de la fenêtre non ?
Et au passage, j'ai un problème de "plan" si tu regarde bien sur mes images, j'ai intégré un cadre, mais il s'affiche dessous l'image et j'arrive pas a le faire passer dessus. T'aurais pas un idée pour de comment le remettre dessus ?
En tout cas merci de tes conseils.
J'ai agrémenté d'images dont le code est généré par iWeb (je sais qu'ils sont crasseux, je m'en rend compte et comme j'apprend de plus en plus, je les arrangerais par la suite).
Sinon je pense que je sais d'ou viens le problème c'est pasque j'ai mis un align=right et donc il s'aligne sur la bordure de la fenêtre non ?
Et au passage, j'ai un problème de "plan" si tu regarde bien sur mes images, j'ai intégré un cadre, mais il s'affiche dessous l'image et j'arrive pas a le faire passer dessus. T'aurais pas un idée pour de comment le remettre dessus ?
En tout cas merci de tes conseils.
#recent-posts .thumb {
height: 120px;
overflow: hidden;
padding: 5px;
background: url(media/cadre.png);
margin-bottom: 10px;
}
#recent-posts .thumb img {
width: 180px;
height: 120px;
overflow: hidden;
}
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
<span id='cadreImage'>
<img src='tonimage'/>
</span>
css:
span#cadreImage {
z-index:2;
background-image:url('tonimage.png');
height:120px;
width:180px;
padding:5px;
margin-bottom:10px;
}
span#cadreImage img {
width:180px;
height:120px
z-index:1;
}
je leur ai mis les mêmes dimensions, solution simple pour que ce soit propre, si tes images sont bien découpées^^
Le z-index défini le 'niveau' d'un élément par rapport aux autres. Par défaut, il est de 0. Là, le span est de z-index2; celui de l'image de 1, le cadre sera donc au dessus de l'image ;). Il n'y a pas de limites dans les mesures, tu peux donc avoir z-index:3000; mais c'est inutile ;)
sinon, les couleurs sont à 6 chiffres/lettres, pas à 4^^ et tu as plein d'erreurs javascript^^
suggestion pour le content, essais la et dis moi:
#content {
float: none;
margin: 100px auto;
width:480px;
}
<img src='tonimage'/>
</span>
css:
span#cadreImage {
z-index:2;
background-image:url('tonimage.png');
height:120px;
width:180px;
padding:5px;
margin-bottom:10px;
}
span#cadreImage img {
width:180px;
height:120px
z-index:1;
}
je leur ai mis les mêmes dimensions, solution simple pour que ce soit propre, si tes images sont bien découpées^^
Le z-index défini le 'niveau' d'un élément par rapport aux autres. Par défaut, il est de 0. Là, le span est de z-index2; celui de l'image de 1, le cadre sera donc au dessus de l'image ;). Il n'y a pas de limites dans les mesures, tu peux donc avoir z-index:3000; mais c'est inutile ;)
sinon, les couleurs sont à 6 chiffres/lettres, pas à 4^^ et tu as plein d'erreurs javascript^^
suggestion pour le content, essais la et dis moi:
#content {
float: none;
margin: 100px auto;
width:480px;
}
Le problème est le même pour tout :D
Pour le content et pour l'image ...
et au passage, c'est quoi la différence entre span et div ?
Pour le content et pour l'image ...
et au passage, c'est quoi la différence entre span et div ?
div est un bloc conteneur affiché en display:block
span est un élément de mise en forme de type display:inline, qu'on peut retrouver pour mettre en forme des chaînes de caractères (par exemple un mot en bleu dans un texte en noir sans que ce soit un lien ;) ). Mais span a une utilisation assez étendue :)
tu peux faire une capture d'écran de la façon dont tu veux que ton document s'affiche? j'ai besoin de mieux comprendre la disposition visée des différents éléments^^
span est un élément de mise en forme de type display:inline, qu'on peut retrouver pour mettre en forme des chaînes de caractères (par exemple un mot en bleu dans un texte en noir sans que ce soit un lien ;) ). Mais span a une utilisation assez étendue :)
tu peux faire une capture d'écran de la façon dont tu veux que ton document s'affiche? j'ai besoin de mieux comprendre la disposition visée des différents éléments^^
http://www.musthaveonline.fr/futur/site.png
sachant que tu oublie l'ensemble de la page incliné.
Ah et j'ai un petit problème de css aussi avec les catégories (bandeau jaune) =D
sachant que tu oublie l'ensemble de la page incliné.
Ah et j'ai un petit problème de css aussi avec les catégories (bandeau jaune) =D
ptdr:D
Okay, alors voilà comment on va faire:
dans ton html, tu mets un div#magazine qui contiendra un div#pageDroite, et un div#pageGauche
On travaille donc sur le #pageDroite si j'ai bien compris^^
En arrière plan du div#magazine, tu mets ton image de bouquin incliné
body {
text-align:center;
}
div#magazine {
background-image:url('zineIncline.png');
margin:100px auto;
padding:0;
width:(largeurd'unepage*2)px;
}
dans ton #pageDroite, tu mets un ul#menuDroit qui définira le style de ton menu en haut dans la page droite :D
ensuite, chaque news sera construite ainsi:
div > span#image
span#cadreImage img
span#cadreImage img.bandeau
>span.titre
>span.resume
div {
margin:0; padding:5px;
width:(largeurPage/2)px;
height:auto;
}
span#cadreImage comme précisé plus haut^^
on rajoute
span#cadreImage img.bandeau {
z-index:2;
bottom:0; left:0;
}
span.titre {
font-size:1.5em; font-weight:400;
}
span.texte {
font-size:1em;
}
l'idée étant de rendre les choses plus accessibles, notamment pour d'autres visiteurs. A l'heure actuelle, ta mise en page ne s'aligne pas pour tout le monde. Là, ce sera le cas ;), enfin, on travail dans ce sens :D
J'te laisse un peu bidouiller tout ça, j'ai la crève, donc j'm'eclipse quelques temps histoire de m'reposer^^
Bon courage, et fais moi part de ton avancement^^
Okay, alors voilà comment on va faire:
dans ton html, tu mets un div#magazine qui contiendra un div#pageDroite, et un div#pageGauche
On travaille donc sur le #pageDroite si j'ai bien compris^^
En arrière plan du div#magazine, tu mets ton image de bouquin incliné
body {
text-align:center;
}
div#magazine {
background-image:url('zineIncline.png');
margin:100px auto;
padding:0;
width:(largeurd'unepage*2)px;
}
dans ton #pageDroite, tu mets un ul#menuDroit qui définira le style de ton menu en haut dans la page droite :D
ensuite, chaque news sera construite ainsi:
div > span#image
span#cadreImage img
span#cadreImage img.bandeau
>span.titre
>span.resume
div {
margin:0; padding:5px;
width:(largeurPage/2)px;
height:auto;
}
span#cadreImage comme précisé plus haut^^
on rajoute
span#cadreImage img.bandeau {
z-index:2;
bottom:0; left:0;
}
span.titre {
font-size:1.5em; font-weight:400;
}
span.texte {
font-size:1em;
}
l'idée étant de rendre les choses plus accessibles, notamment pour d'autres visiteurs. A l'heure actuelle, ta mise en page ne s'aligne pas pour tout le monde. Là, ce sera le cas ;), enfin, on travail dans ce sens :D
J'te laisse un peu bidouiller tout ça, j'ai la crève, donc j'm'eclipse quelques temps histoire de m'reposer^^
Bon courage, et fais moi part de ton avancement^^
Salut salut :)
Alors? comment ça avance? tu es resté sur ta version de base?
En fait, il faut penser logique pour bien se débrouiller avec xhtml et css. Tes données doivent être organisées correctement. Tu me dis que tu es débutant, as tu fait un tour sur https://openclassrooms.com/fr/
Alors? comment ça avance? tu es resté sur ta version de base?
En fait, il faut penser logique pour bien se débrouiller avec xhtml et css. Tes données doivent être organisées correctement. Tu me dis que tu es débutant, as tu fait un tour sur https://openclassrooms.com/fr/
Non mais attend, je suis plutot TRES fier de moi: http://www.musthaveonline.fr/futur/
Tout fonctionne sur ma page, des petits décalé pour firefox, mais je vais créer une CSS adaptée a Firefox.
Sinon tout nikel, titre, extrait, cadre, catégorie, resize fenêtre tout fonctionne.
=D
Tout fonctionne sur ma page, des petits décalé pour firefox, mais je vais créer une CSS adaptée a Firefox.
Sinon tout nikel, titre, extrait, cadre, catégorie, resize fenêtre tout fonctionne.
=D
Pas mal du tout, je dois admettre :D félicitations, ton rendu est plutôt bon.
Maintenant, côté css, c'est la pagaille. Tu fais un mauvais usage des id (parfois tu utilises des id comme si c'était des classes), tu utilise des position:relative à tors et à travers alors que ce n'est pas nécessaire (mais tu t'en rendras compte plus tard^^) et tu as quelques erreurs du genre police Helvetica (et non Hevletica).
Donc, fais attention à tes id et classes
Trouve comment ne pas te reposer sur position:relative
Mets d'autres polices avec Helvetica, en effet, les utilisateurs qui n'ont pas cette police sur leur ordi ne la verront pas, il faut donc des choix supplémentaires (font-family:Helvetica, Times, Monotype; par exemple)
Avec une architecture bien faite et des css corrects, tu ne devrais avoir que très peu (au mieux, pas du tout) de valeurs de positionnement négatives (genre left:-55px)
Tout ça ce ne sont que des suggestions, bien entendu, à toi de voir ce que tu veux en faire :) (pareil pour la suite)
Je t'encourage à te renseigner sur CSS3 et les propriétés déjà implentées (le sélecteur enfants, les pseudo classes, les sélecteurs par attributs^^).
Et deux points pour finir:
-une css bien faite est compatible pour tous les navigateurs (la détection du navigateur pour une css appropriée étant approximative et lourde à gérer)
-bosse ton design pour qu'il s'adapte aux résolutions d'écran. Chez moi ça passe (écran 22" réso max), mais chez des utilisateurs type 25" et plus, ça le fera moins^^
Voilà, sinon c'est bien joué :) bon courage pour la suite^^
PS: renseigne toi aussi sur les déclarations globales, ex:
html,body,p,div,span,ul,label,select,input,img,a {
margin:0; padding:0;
}
ça te filera un sacré coup de main
Maintenant, côté css, c'est la pagaille. Tu fais un mauvais usage des id (parfois tu utilises des id comme si c'était des classes), tu utilise des position:relative à tors et à travers alors que ce n'est pas nécessaire (mais tu t'en rendras compte plus tard^^) et tu as quelques erreurs du genre police Helvetica (et non Hevletica).
Donc, fais attention à tes id et classes
Trouve comment ne pas te reposer sur position:relative
Mets d'autres polices avec Helvetica, en effet, les utilisateurs qui n'ont pas cette police sur leur ordi ne la verront pas, il faut donc des choix supplémentaires (font-family:Helvetica, Times, Monotype; par exemple)
Avec une architecture bien faite et des css corrects, tu ne devrais avoir que très peu (au mieux, pas du tout) de valeurs de positionnement négatives (genre left:-55px)
Tout ça ce ne sont que des suggestions, bien entendu, à toi de voir ce que tu veux en faire :) (pareil pour la suite)
Je t'encourage à te renseigner sur CSS3 et les propriétés déjà implentées (le sélecteur enfants, les pseudo classes, les sélecteurs par attributs^^).
Et deux points pour finir:
-une css bien faite est compatible pour tous les navigateurs (la détection du navigateur pour une css appropriée étant approximative et lourde à gérer)
-bosse ton design pour qu'il s'adapte aux résolutions d'écran. Chez moi ça passe (écran 22" réso max), mais chez des utilisateurs type 25" et plus, ça le fera moins^^
Voilà, sinon c'est bien joué :) bon courage pour la suite^^
PS: renseigne toi aussi sur les déclarations globales, ex:
html,body,p,div,span,ul,label,select,input,img,a {
margin:0; padding:0;
}
ça te filera un sacré coup de main
Merci beaucoup pour tous tes conseils, tes encouragements.
Pour le moment je suis assez pressé donc fait ca dans l'urgence.
Une fois le site "ouvert" je travaillerai sur l'adaptation ou même si je me dépêche un peu je pourrais faire ça avant l'ouverture.
Je regarderai ce que tu m'as dit, j'ai même l'intention d'acheter un book, pasque lire sur un écran c'est pas trop mon kif.
Merci, bonne continuation de ton coté, et si un jour tu as besoin d'aide coté design, n'hésite pas.
Pour le moment je suis assez pressé donc fait ca dans l'urgence.
Une fois le site "ouvert" je travaillerai sur l'adaptation ou même si je me dépêche un peu je pourrais faire ça avant l'ouverture.
Je regarderai ce que tu m'as dit, j'ai même l'intention d'acheter un book, pasque lire sur un écran c'est pas trop mon kif.
Merci, bonne continuation de ton coté, et si un jour tu as besoin d'aide coté design, n'hésite pas.
Merci pour l'offre, je n'oublierais pas ;)
Je suis pareil pour les bouquins, donc je me permet de te recommander de jeter un oeil à ceux ci:
XHTML et CSS2 l'essentiel du code et des commandes, de Michel Martin, aux éditions Pearson, collection Le guide de survie; c'est un bouquin très axé sur la pratique, pas prise de tête, il va à l'essentiel.
CSS2 Le guide du designer de Charles Wyke-Smith, édition Campus Press/Pearson, nettement plus théorique, il te permettra de mieux cerner la plupart des subtilités du css.
Bien entendu, regarde les avant d'investir, voir si ça te parle et te convient^^ et comme toujours, les connaissances diffusées sur le net seront un plus indéniable dans l'amélioration de tes compétences^^
Bonne continuation et à bientôt ^^, et amuse toi bien!
Je suis pareil pour les bouquins, donc je me permet de te recommander de jeter un oeil à ceux ci:
XHTML et CSS2 l'essentiel du code et des commandes, de Michel Martin, aux éditions Pearson, collection Le guide de survie; c'est un bouquin très axé sur la pratique, pas prise de tête, il va à l'essentiel.
CSS2 Le guide du designer de Charles Wyke-Smith, édition Campus Press/Pearson, nettement plus théorique, il te permettra de mieux cerner la plupart des subtilités du css.
Bien entendu, regarde les avant d'investir, voir si ça te parle et te convient^^ et comme toujours, les connaissances diffusées sur le net seront un plus indéniable dans l'amélioration de tes compétences^^
Bonne continuation et à bientôt ^^, et amuse toi bien!
Merci des références
et visite mon site "Officiel" et non celui de mon crew: http://www.paperdonut.com
et visite mon site "Officiel" et non celui de mon crew: http://www.paperdonut.com
