Informations

Chat qui ressemble à ratière


Chat qui ressemble à dobby et je veux le montrer sous forme d'onglet

J'essaye de créer un onglet avec un chat.

Je veux qu'il ressemble exactement à la ratière, mais sans la bordure bleue.

Voici l'image :

http://www.imgur.com/fqjhxZK.png

L'onglet que j'essaie de créer est le premier. Je veux qu'il ressemble exactement à ceci, mais sans la bordure bleue et l'image d'arrière-plan.

Le code CSS que j'utilise :

.tab.contenu

border-top:1px solide #E5E5E5

border-bottom:1px solide #E5E5E5

background-image:url('http://www.coumba.com/wp-content/uploads/2014/04/Cat-in-Box-Wallpaper-with-Cats.jpg')

hauteur:400px,

largeur:600px,

poste:relatif

marge : 0px auto 0px auto,

remplissage : 20px 0px 0px 0px,

UNE:

La bordure bleue sur la première case est due à la règle CSS suivante :

.boîte

{

marge : 0px auto 0px auto,

largeur : 300px,

hauteur : 400px,

text-align : centre,

}

Si vous ne le souhaitez pas, supprimez-le simplement de cette classe.

Et puis, pour supprimer la bordure bleue des deuxième et troisième div, ajoutez simplement le CSS suivant :

.tab.contenu

{

border-top: 0px solide #E5E5E5,

border-bottom : 0px solide #E5E5E5,

background-image:url('http://www.coumba.com/wp-content/uploads/2014/04/Cat-in-Box-Wallpaper-with-Cats.jpg'),

hauteur : 400px,

largeur : 600px,

position : relative,

marge : 0px auto 0px auto,

remplissage : 20px 0px 0px 0px,

}

Vous n'avez même pas besoin de la position : relative, ici, elle n'a aucun effet.

Les deuxième et troisième div ont la classe suivante :

.chat

{

Flotter à droite,

hauteur: 150px,

largeur: 60px,

text-align : centre,

marge : 0px auto 10px auto,

}

La suppression de la bordure bleue sur le premier div vous laissera une bordure bleue sur les deuxième et troisième div (car ces div flottent vers la droite).

Si vous souhaitez qu'ils restent tout en haut de l'onglet, ajoutez le CSS suivant :

.languette

{

marge : 0px auto,

largeur : 600px,

hauteur : 100px,

position : relative,

}

.tab.contenu

{

border-top: 0px solide #E5E5E5,

border-bottom : 0px solide #E5E5E5,

background-image:url('http://www.coumba.com/wp-content/uploads/2014/04/Cat-in-Box-Wallpaper-with-Cats.jpg'),

hauteur : 400px,

largeur : 600px,

position : relative,

marge : 0px auto 0px auto,

remplissage : 20px 0px 0px 0px,

}

Vous devez ajouter position: relative, to.tab car cela vous permettra de positionner absolument la div.cat.

Et vous n'avez pas besoin de position: relative, to.tab.content car cela supprimera la bordure bleue du bas de la div.cat.

La hauteur de la tabulation est la somme de la hauteur du div .cat et de la marge supérieure du div .tab. Vous pouvez donc changer cela en ce que vous voulez en jouant simplement avec.

Vous pouvez également supprimer le text-align: center, de la classe.tab car le .tab div est déjà centré de toute façon.

La raison pour laquelle vous obtenez une bordure bleue en bas du div .tab (à la fin de la ligne) est que la largeur : 600px, dans la classe.tab est supérieure à la largeur : 600px, dans le .tab .classe de contenu.

ÉDITER:

Si vous souhaitez conserver votre bordure de tabulation, vous pouvez ajouter une autre bordure à la première case (que vous souhaitez conserver) et modifier les règles CSS suivantes :

.tab.contenu

{

border-top : 0px solide #E5E5E5,

bordure en bas : 0px


Voir la vidéo: Quand les Chats ont un Comportement Humain (Janvier 2022).

Video, Sitemap-Video, Sitemap-Videos