28172 sujets

CSS et mise en forme, CSS3

Dimensions, agencement de blocs et gros bordel

Bonjour à tous,

Je suis en train de faire en thème pour un site pour ma sœur, mais elle veut des trucs spécifiques et je ne vois pas du tout comment faire vue que je débute en css, j'ai déjà bidouillé, mais rarement fait quelque chose de propre, j'aurais bien besoin d'être aiguillé ^^

Voici une maquette qu'on à fait : Maquette

Je crée le site pour une utilisation avec Wordpress.

En gros, les carrés noirs à gauches sont des boutons servant de menu, que j'ai créé avec des <figure> et <figcaption> et translate/transition pour faire apparaître le texte au survol, mais j'ai due mettre le code de l'image dans le html, et du coup je ne vois pas comment utiliser d'autres images pour le a:active.
J'ai mis ce menu dans la partie sidebar parce que je voulais qu'il soit fixe, mais j'ai l'impression que c'est une connerie vue qu'au final maintenant en rajoutant des infos dans l'article, il descends :s
Voici la css du bloc sidebar :
.sidebar {
	float: left;
	width: 45%;
	max-width: 461px;
	min-width: 864px;
	line-height : 50px;
}

pour la page j'ai pris une largeur de 100% :
#page {
	margin: 0 auto 0 auto;
	width: 100%;
	max-width: 1920px;
	min-width: 1024px;

}

Sur la partie droite, les cases en gris sont des images, la grosse l'image de l'article, plus bas du texte (si possible j'aimerais avoir une option pour afficher/masquer le texte, mais ça on verra plus tard) et dans le cadre vert une section nouveautés dans laquelle on rajouterais des images manuellement (pour l'instant, je verrais si je peux le faire avec une extension wordpress plus tard) et j'aimerais que seul la section de l'article soit mobile, que toute la section rouge de menu à gauche et la section verte de nouveautés soit fixe. (rassurez-vous c'est juste des couleurs pour la maquette on va faire un truc plus joli xD)
Voila le code de mon bloc d'article :
#content {
	float: right;
	width: 55%;
	max-width: 1056px;
	min-width: 565px;
}

Je peux mettre mon logo dans une toute petite section header en haut à gauche tout en restant dans ma partie rouge ou je le sort et je mets tout dans le body ?
J'ai mis ma section nouveautés dans le footer, mais je suppose que c'est une connerie aussi vue que j'en aurais besoin uniquement sur la page d'accueil Smiley langue
Voici le code du footer :
#footer {
	padding: 10px 10px 0 0;
	clear: left;
	float: right;
	vertical-align: bottom;
	width: 55%;
	max-width: 1056px;
	min-width: 565px;
}

Je fait un div nouveautées que je rajoute dans le index.php ?

Vous pensez que j'ai intérêt à virer mon code de menu de la sidebar pour tout mettre dans les index/page/contact etc ?

La section actualités c'est un petit bloc allant chercher le dernier article de la catégorie, mais je vois pas du tout comment agencer tous mes blocs.

Pour l'instant j'ai fait tout le site avec des dimensions variables, mais le fond (pour l'instant j'ai mis la fleur dans le fond, mais je peux en faire 2 fichiers si besoin) se déplace par rapport au menu et ça ne lui va pas, du coup je suis en train de repartir sur quelque chose de plus fixe, mais j'aimerais bien garder un truc un minimum adaptable aux différentes résolutions.
Si quelqu'un veut bien prendre un peu de temps pour m'aider ça serait super Smiley smile

Merci,
Julien
Modifié par Jiloin (02 Jan 2018 - 20:59)
Salut,
un élément block est nativement à 100%.
De plus tu peux améliorer ton code en rajoutant une propriété box-sizing: border-box; pour que les padding n'ajoutent pas nPx en plus de la taille demandée.
Tu peux également regarder comme fonctionne le positionnement avec flexbox qui te permettra de ne pas utiliser float.
Voilà, bon courage !
Salut et merci de ta réponse !

C'est la folie les flexbox je ne connaissais pas Smiley smile

Bon entre temps j'ai un peu discuté avec ma soeur, et finalement elle voudrait quelque chose de plus fixe pour pouvoir conserver sa mise en page, mais je pensait quand même utiliser les flexbox pour placer mes blocs, ça à l'air beaucoup plus simple que tout ce que je connais, mais j'ai encore un peu de mal à comprendre comment ajuster le tout.


En gros je voudrais avoir le site centré dans ma page, j'ai donc mis les infos suivantes dans mon body:
body {
	display: flex;
	justify-content: center;
	align-items : center;
}

mais ça ne fonctionne pas, j'ai pourtant un seul div page dans le body.
j'ai mis mon div page avec des dimensions fixes et les box en colonnes :
#page {
	background:url(http://localhost/prune-plum/wp-content/uploads/2018/01/page-daccueil-1366-768.png) no-repeat;
	display: flex;
	flex-direction: collumn;
	justify-content: space-between;
	width: 1366px;
	height: 768px;
}

Ensuite j'ai créé un div panneau dans lequel j'ai mis mon div logo et mon div menu (tout ce qui est situé dans le panneau de gauche) et j'ai mis le tout en colonne :
#panneau {
	display: flex;
	flex-direction: collumn;
	justify-content: space-between;
}

ici j'ai pourtant mes deux div cote à cote au lieu de l'un au dessus de l'autre.

J'ai créé un div droite dans lequel j'ai mis mon diaporama et ma section nouveautés :
#droite {
	display: flex;
	flex-direction : row;
	justify-content : space-between;
}

mais ici mon div nouveauté apparait en bas à droite, mais avec une sorte de marge invisible en bas, et rien ne s'affiche via l'inspecteur, je ne sait pas d’où elle peut provenir.

En tous cas merci beaucoup pour les infos sur les flexbox c'est vraiment cool Smiley smile
Modifié par Jiloin (05 Jan 2018 - 16:57)
Salut,
tout d'abord je te conseille de laisser ton <body> tranquille et de créer une class .container .
Ensuite pour centrer ton contenu:

#page {
background:url(http://localhost/prune-plum/wp-content/uploads/2018/01/page-daccueil-1366-768.png) no-repeat;
display: flex;
flex-direction: column; /*un seul 'l' à column*/
justify-content: space-between;
margin: auto; /*va centrer la div dans ta page */
width: 1366px; /*si tu utilise flexbox, exprime toi ici en % et non px*/
height: 768px; /*si tu utilise flexbox, exprime toi ici en % et non px*/
}


voilà essaies ceci déjà.
"Ensuite j'ai créé un div panneau dans lequel j'ai mis mon div logo et mon div menu (tout ce qui est situé dans le panneau de gauche) et j'ai mis le tout en colonne :"

#panneau {
display: flex;
flex-flow: column wrap; /*On ajoute avec 'wrap' la possibilité d'aller "à la ligne" si on est en bout de bloc*/
justify-content: space-between;
align-items: center;
flex:0;/*On conserve les proportions des éléments, pas d'étirement*/
}


Essaye ça.
Sujet clos
Aller à