28173 sujets

CSS et mise en forme, CSS3

Bordures sur les côtés

Bonjour à tous,

Déjà merci pour ce site qui m'a bien aidé et appris.
Malheureusement je suis bloqué depuis des jours pour réaliser quelque chose.

Je veux mettre des bordures de chaque côté de ma page qui descendent jusqu'en bas.

J'ai essayé plein de chose mais rien ne fonctionne.
Je croyais avoir trouvé le solution avec des elements en position absolute et des positions top:0; bottom: 0;
mais ... Smiley bawling
http://aegispix.free.fr/test/test.php
les bordures s'arretent a la limite de l'écran.

Pourriez-vous m'aider a trouver la bonne méthode ?
Modifié par sabotage (24 Oct 2007 - 21:44)
hi,

tu as plusieurs solutions à ton problème :

1) pour mettre une bordure, pourquoi ne pas utiliser tout simplement l'attribut "border" ? au lieu de mettre des div, avec un background-color !

l'idée est donc de donner une taille à ton body, ou de créer une div contenant tout ton site, de class="conteneur" par exemple.
Tu veux une bordure continue et simple ?
border-style : solid;
une bordure noire ?
border-color : black;
Tu ne veux mettre que des bordures à gauche et à droite ?
border-top : none;
border-bottom-none;

une bordure épaisse ?
border-width:10px;

etc...
en résumé :
border : solid black 10px;
border-top : none;
border-left : none;
(il y a moyen de ne faire qu'une ligne avec ces deux, mais je ne sais plus la syntaxe).

2) ce qui ne marche pas dans ton exemple est : height:100%;
cela prend 100% de la taille de ton browser internet, mais ne va pas plus loin.
Donc, soit tu lui fixes une taille très grande quitte à avoir ton site qui descend en dessous de ton contenu (déconseillé) soit tu connais exactement la taille de ton site, et tu fixe la taille de tes div de bordure avec cette taille là.
Mais je te conseille d'utiliser la première solution, tu te compliques la vie là !

bon courage !
Merci pour la réponse rapide.

J'ai oublié de préciser quelque chose : dans la bordure je met une image de fond en repeat-y, j'ai simplifié dans mon test pour qu'on voit mieux.
ah ok,

bon alors il faut que tu mettes tes div de bordure DANS ton div conteneur
tu leur mets :

position:relative;
float:left; //right pour la border de droite
height:100%;
background: url(....) repeat-y

et puis ce qui t'arrange !!
ca marchera grâce au : position:relative, au height:100% et au fait que la div de border est à l'intérieur de ta div conteneur, et prendra sa taille !

good luck
Merci pour ton aide !

Je reprendrais tout demain a tête reposée car maintenant tout mon contenu se place sur la bordure.
Smiley sweatdrop
Mais je tiens le bon bout en partant de ton exemple.
Malheureusement j'ai fais tout le contraire Smiley confused
Je ne m'en suis pas sorti avec ton exemple : impossible de faire exactement la meme chose avec en plus la bordure de droite.

J'ai donc placé un fond à gauche dans mon div #page.
et j'ai imbriqué un div #page-bis avec le fond de droite.

Je ne suis pas content parce que c'est pas propre mais depuis des jours que je patouille c'est la premiere fois que ca marche et sur tous les navigateurs que je teste.
Salut,

Heu... En bas de quoi, de l'écran, de ta page? Quoiqu'il en soit restons simple Smiley cligne 
<style type="text/css">
*{margin: 0; padding: 0;}

#conteneur{
background: lime;
}

#contenu{
margin: 0 10px 0 10px;
background: yellow;
}

</style>
</head>
<body>
<div id="conteneur">
	<div id="contenu">
    <p>Lorem ipsum dolor sit amet, sapien nulla erat ut sit etiam, semper id, nulla nec mattis in. Quisque curabitur, vestibulum consectetuer eleifend aliquam. Ultricies nascetur aliquet vivamus duis diam, hendrerit eget justo aliquam, wisi dui varius mi vel nunc pariatur. Egestas pulvinar eget sed ad, diam at nam at parturient, integer elit sapien non. Cras in felis neque feugiat sociis, donec mauris vel tincidunt, mi sed venenatis convallis vestibulum elementum, suscipit pellentesque, commodo sit. Lorem ut ea nulla.
	</p>
	</div>
</div>
</body>

A tester selon ton besoin
Merci.

C'est c'est que j'ai fais, sauf que j'ai un deuxieme conteneur juste apres le premier, le premier affichant l'image repeté a gauche, le second celle de droite.
Sujet clos
Aller à