[Résolu] Mettre ce logo de cette manière...

Bonjour à tous,

je tiens à dire d'avance que je suis un bon gros débutant en html & css donc peut être que mon code va vous piquer les yeux. J'essaye d'intégrer une maquette (PSD que j'ai sous la main)

Je ne sais pas vraiment comment expliquer mon problème alors je vais vous donner une image de ce que j'aimerais réaliser :

https://imgur.com/t0rv9le

J'aimerais tout simplement mettre le logo orange par dessus le menu et la topbar mais je ne sais pas trop comment procéder, si vous pouviez m'éclairer ce serait incroyable.

et voila où j'en suis au niveau de mon code :

https://j0wz.000webhostapp.com/

Merci d'avance!

Bonjour,

Par exemple on peut mettre le logo en position:absolute, mettre son conteneur en position:relative, placer le logo comme on veut (je l'ai aligné sur le bas de son conteneur, et décalé vers la droite de 100px), et décaler les autres éléments qui sont en dessous avec des padding.

Exemple de code à rajouter dans le css (je n'ai pas cherché à faire coller pile-poil les décalages : à toi de voir en fonction de ce que tu veux faire) :

	div.topbar
	{
		position:relative;
	}
	a.logo
	{
		display:block;
		position:absolute;
		left:100px;
		bottom:0;
	}
	div.top-topbar
	{
		padding-left:300px;
	}
	div.block-menu
	{
		padding-left:600px;
	}

Amicalement,
Modifié par parsimonhi (25 Oct 2019 - 17:46)

Tu as plusieurs possibilité pour faire cela.

Un autre est de mettre ton logo dans ton block-menu et de le faire remonter avec un margin négatif

.logo {
    margin-top: -42px;
}

Salut anatov,
J'éviterais au maximum les positionnements en absolu et les marge négatives car on ne connait jamais les hauteurs des éléments selon le contenu.
Voici comment je ferais la chose : https://cdpn.io/korell/debug/xxxrVWY/RBMOJXevxKVk
Le code est là : https://codepen.io/korell/pen/xxxrVWY
Je n'ai pas fais le menu en haut à droite mais c'est le même principe.

Le truc réside dans l'utilisation de flex et surtout que les bandes noire et blanche sont ajoutées avec des pseudos-éléments :after.
A+
Modifié par MatthieuR (26 Oct 2019 - 01:25)

Merci beaucoup à vous d'avoir pris votre temps pour toutes vos réponses ! Je vais étudier tout ça.