28173 sujets

CSS et mise en forme, CSS3

[RESOLU] Bordure en css idem qu'avec tableau.

Bonjour,

J'affiche actuellement un tableau, avec border=1.

Je souhaiterais trouver comment faire le tableau sans <table>, mais en gardant le 'border=1', autrement dit, sans changer le design.

le code (d'exemple) qui affiche une bordure 'classique' :
<table border=1><tr><td>coucou</td></tr></table>

Quel serait le code alternatif, sans <table>, mais en gardant la jolie bordure ?

Merci d'avance.
Modifié par Anonymus (16 Oct 2006 - 17:17)
Anonymus a écrit :
le code (d'exemple) qui affiche une bordure 'classique' :
<table border=1><tr><td>coucou</td></tr></table>

Tout dépend du « statut » de ton contenu.

S'il s'agit d'un titre :
HTML :
<h2>Mon titre de niveau 2</h2>

CSS :
h2 {border: solid 1px black;}

S'il s'agit d'un paragraphe :
HTML :
<p>Mon paragraphe</p>

CSS :
p {border: solid 1px black;}

S'il s'agit d'un conteneur pour d'autres éléments de type bloc :
HTML :
<div>Mon paragraphe</div>

CSS :
div {border: solid 1px black;}
En fait, ca n'est vraiment pas une question de contenu, c'est juste un effet design : L'effet 'grosse bordure du tableau', que je souhaiterais reproduire en css.

Ici : http://www.galle.fr/dev/css/test.css.php

On voit que le second exemple (en tableau classique) a une bordure d'une certaine facon. C'est ce que j'essaie de reproduire, avec les css (exemples 1 et 3), pour le design.
Smiley biggrin

Apparemment t'en est pas si loin...

il faut forcer niveau couleur la bordure gauche et haute pour la bordure intérieur, puis la droite et basse pour la bordure exterieure.

Donc faire deux styles séparés je pense :
CSS

exterieurBord {...}
interieurBord {...}


puis

HTML

<p class="exterieurBord interieurBord"></p>


Pour pouvoir lui donner ses deux bordures avec différents réglages.

(tu me comprends ?)

Dans ton exemple 1, tu as forcé les basses et droites pour les bordures intérieurs et exterieures.

Dans ton exemple 3, tout est au meme niveau.
Modifié par Hum (16 Oct 2006 - 14:37)
J'ai essayé plusieurs possibilités, mais ca ne veut pas afficher 2 bordures l'une après l'autre. Si je n'en mets pas une, elle affiche l'autre, et inversement. Mais pas les 2 à la fois. J'ai essayé avec des padding et des margin, mais idem, il semble que l'une prend le pas sur l'autre..

Comment peut on faire, en partant de ceci :
<p class="interieurBord exterieurBord" >
pour afficher 2 bordures l'une autour de l'autre ?

Merci d'avance Smiley cligne
Ben, comme je t'ai montré ça devrait le faire je pense :


.exterieurBord {
	border-top: 1px solid #bbbbbb;
	border-left: 1px solid #bbbbbb;
	border-bottom: 1px solid #E8EFB9;/*color plus sombre*/
	border-right: 1px solid #E8EFB9;/*color plus sombre*/
	}

.interieurBord {
	border-top: 1px solid #E8EFB9;/*color plus sombre*/
	border-left: 1px solid #E8EFB9;/*color plus sombre*/
	border-bottom: 1px solid #bbbbbb ;
	border-right: 1px solid #bbbbbb;
	}


Bien que...elle vont etre collées je pense, là je sais poas comment gérer l'ecart entre les deux. Ducoup je ne suis pas sur de t'envoyer dans la bonne direction...
Oui, ca ne parait pas trop concluant. (merci tout de même !!)

Par contre, je note la synthaxe :
class="exterieurBord interieurBord">

Ca veut dire 'appliquer 2 styles différents, l'un après l'autre ?
Ou appliquer le second style si l'on ne trouve pas le 1er ?

Merci d'avance. Smiley smile
Oui, on peux appliquer deux styles sur un même element séparés d'un espace.

a écrit :
Ou appliquer le second style si l'on ne trouve pas le 1er ?

Je ne sais pas.

Déja pour commencer tu devrais bosser avec une structure valide, avec doctype , pas d'imbrications interdites, et syntaxes correctes.

Il me semble qu'il existe des propriétées comme outer, pour pouvoir faire des bordures internes et externes...je crois...

Sinon, en appliquant les deux styles plus haut à <p>, enfait les deux bordures différentes sont bien là mais elles se superposent.

Je pense etre pas loin du compte avec ça :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<head>
<title>TEST</title>

<style type="text/css">
.exterieurBord {
border-top: 1px solid gray;
border-left: 1px solid gray;
border-bottom: 1px solid black;/*color plus sombre*/
border-right: 1px solid black;/*color plus sombre*/
}

.interieurBord {
margin: 2px;
border-top: 1px solid black;/*color plus sombre*/
border-left: 1px solid black;/*color plus sombre*/
border-bottom: 1px solid gray ;
border-right: 1px solid gray;
}
</style>
</head>

<body>
<p class="interieurBord exterieurBord">
lorem ipsum lorem ipsum<br />
lorem ipsum lorem ipsum lorem 
</p>

<hr />

<table border="1">
<tbody>
<tr><td>coucou</td></tr>
</tbody>
</table>

<hr />

<div class="exterieurBord"> 
<div class="interieurBord">
lorem ipsum lorem ipsum<br />
lorem ipsum lorem ipsum lorem 
</div>
</div>

</body>
</html>


Mais c'est dommage de faire de l'imbrication de div comme ça juste pour cet effet, recherche plutot du coté des propriétés sur les bordures.
Modifié par Hum (16 Oct 2006 - 16:39)
J'ai exactement l'effet recherché, merci vraiment beaucoup Smiley smile

(en haut, tableau classique, en bas css normal Smiley smile ) > http://www.galle.fr/dev/css/test.css.php

Pour ceux que ca intéresse, le code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>

<title>TEST</title>



<style type="text/css">


.exterieurBord{
	border-top: 1px solid gray;
	border-left: 1px solid gray;
	border-bottom: 1px solid black;/*color plus sombre*/
	border-right: 1px solid black;/*color plus sombre*/
	}


.interieurBord{
	margin: 2px;
	border-top: 1px solid black;/*color plus sombre*/
	border-left: 1px solid black;/*color plus sombre*/
	border-bottom: 1px solid gray ;
	border-right: 1px solid gray;
	}

</style>

</head>



<body>


<table border="1" width=100%>
<tbody>
<tr><td>coucou</td></tr>
</tbody>
</table>

<hr />

<div class="exterieurBord"><p class="interieurBord">
coucou</p>
</div>

</body>

</html>
Sujet clos
Aller à