28220 sujets

CSS et mise en forme, CSS3

[Résolu] Design extensible rond et bordure a la fois !

Bonjour à tous !
J'éspére vraiment que ce post n'a pas deja été posté car j'ai chercher pendant 10 minutes donc..Voila bon je vous expose mon "probléme", en faite j'ai suivie un tuto qui explique comment faire un cadre extensible avec les propriétés css float. Alors oui ça fonctionne très bien, mais j'aimerai en plus de ces bord rond faire une bordure noir ou de la couleur de mon arrondie autour du conteneur. J'éspére que vous me comprenez, voila l'image en quéstion :

upload/2712-bordgh.jpg

Voila, et en faite cette image j'ai réussi à la mettre comme ceci :

Mon site

J'éspére que ça vous suffirat pour m'aider et si bien sur vous en avez le temps !

Merci d'avance pour tout Smiley smile

Ciao
Modifié par Styblue (24 Jul 2005 - 18:40)
GuizBizet a écrit :
Tu dois mettre

[code].ton_conteneur {
border-left: 1px solid #000;
border-rightt: 1px solid #000;
}

A+ Smiley cligne



border-right avec 1 seul t sinon ça n'ira pas
Je vois ce que tu veux dire mais en faite bah regarde sur mon site, je l'ai fais et voila ce que ça donne et en plus je veux qu'au dessus aussi je puisse avoir une bordure mais uniforme avec mes arrondies un peu comme sur la page d'accueil du blog d'alsacréations enfin si vous savez pas, c'est pas grâve et merci à toi pour ton aide Smiley smile Ce que j'ai réussi à faire au mieu c'est des trait noir à gauche et à droite...Je vais peut être vous mettre mon code ça ira mieu.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Bienvenue sur le site de styblue</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <link rel="stylesheet" media="screen" type="text/css" title="Design 2005" href="styblue.css" />
   </head>
<body>

	<div id="conteneur">
	<div id="hautdroit"></div><div id="hautgauche"></div>
		<p>bla bla bla bla</p>
	<div id="basdroit"></div><div id="basgauche"></div>
	</div>

</body>
</html>


Pour le Xhtml

/* Design Styblue 2005 */

/* Générales */

body {margin: 0; padding: 0; background-color: #B2C8DD;}
#conteneur {margin: auto; margin-left: 4%; margin-right: 4%; margin-top: 15px; margin-bottom: 15px; background-color: #CCD9E5;}
#hautgauche, #hautdroit, #basgauche, #basdroit {height: 14px; width: 14px; background-repeat: no-repeat; font-size:1px;}
#hautgauche {background: url(images/d/bord_g_h.jpg);}
#hautdroit {float: right; background: url(images/d/bord_d_h.jpg);}
#basgauche {background: url(images/d/bord_g_b.jpg);}
#basdroit {float: right; background: url(images/d/bord_d_b.jpg);}

/* Haut */

#header {height: 150px; border-left: 1px solid black; border-right: 1px solid black;}

/* Contenue */

#content {}

/* Menus */

#menu_gauche {}

/* Bas */

#footer {}


Pour le css

Voila j'éspére que ça sera un peu plus claire même si je suis pas encore très bon en css et xhtml Smiley sweatdrop désolé si c'est pas très claire etc.

Et merci à vous tous vous êtes super gentil Smiley ravi

Bonne soirée à vous tous Smiley cligne

Ciao

Edit: J'allais oublier, mon css y'a des propriétées qui sont pas encore utilisé comme le header content etc. Mais je les utiliserais par la suite je sais que j'en aurai besoin donc je les ai mise mais pour le moment je les utilises pas au cas ou vous poseriez la quéstion Smiley sweatdrop
Modifié par Styblue (23 Jul 2005 - 22:14)
Bonjour Styblue, et bienvenue sur ce forum,

Pour que tes bordures apparaissent sur tous les côtés de ton conteneur, il suffit d'écrire :

#conteneur {
...
border: 1px solid black;
}


Et pour que tes coins arrondis masquent ces bordures là où il faut, il suffit de les faire glisser chacun d'un px (la largeur de la bordure) verticalement et horizontalement, grâce à la position relative :

#hautgauche , #hautdroit , #basgauche , #basdroit {
height : 14px;
width : 14px;
background-repeat : no-repeat;
font-size : 1px;
[b]position: relative;[/b]
}
#hautgauche {
background : url(bord_g_h.jpg);
[b]right: 1px;
bottom: 1px;[/b]
}
#hautdroit {
float : right;
background : url(bord_d_h.jpg);
[b]left: 1px;
bottom: 1px;[/b]
}
#basgauche {
background : url(bord_g_b.jpg);
[b]right: 1px;
top: 1px;[/b]
}
#basdroit {
float : right;
background : url(bord_d_b.jpg);
[b]left: 1px;
top: 1px;[/b]
}


Sinon, please ! Remplace cette DTD XHTML1.1 inapropriée et incorrectement utilisée par une DTD XHTML1.0 Strict... Smiley cligne

(XHTML1.1 n'est pas du HTML, mais du XML, et ne doit pas être utilisé comme du HTML, dans un document dont le type de contenu est text/html)
Modifié par Raphael (24 Jul 2005 - 11:07)
Salut à toi !

MERCI ! Ca fonctionne nickel merci beaucoup gars et merci pour la bienvenue Smiley langue
Par compte j'ai rien piger de ce que tu m'as dis j'ai lus le lien et j'ai compris la différence mais j'ai pas compris pour la déclaration et le doctype pourquoi moi je dois pas mettre le Xml ?

Mais en tout cas, merci beaucoup car ca marche bien !

Merci aux autres aussi qui m'ont aider Smiley cligne

Ciao Smiley biggrin
Styblue a écrit :

Par compte j'ai rien piger de ce que tu m'as dis j'ai lus le lien et j'ai compris la différence mais j'ai pas compris pour la déclaration et le doctype pourquoi moi je dois pas mettre le Xml ?


XHTML1.1 a été fait pour être traité par les navigateurs comme du XML. Pour cela, la présence de la DTD ne suffit pas. Il faut aussi que le serveur de ton site envoie au navigateur une information supplémentaire, qui n'est pas dans le code de ta page, mais qui passe par ce qu'on appelle l'en-tête HTTP Content-Type. Celui-ci doit être modifié via la configuration du serveur, ou via un script PHP.

Mais si réalisait cette modification, tu tomberais sur le problème suivant : très peu de navigateurs savent réagir correctement dans cas. Internet Explorer, en particulier, n'affichera plus tes pages, mais proposera au visiteur de les télécharger Smiley cligne

A partir de là, il faut savoir gérer une négociation de contenu, c'est à dire faire en sorte que seuls les "bons" navigateurs reçoivent le XHTML1.1, tandis qu'IE et les autres recevront... du XHTML1.0 Strict !

Comme XHTML1.1 est destiné par ailleurs à répondre à des besoins bien spécifiques (intégrer d'autres langages XML à ton document, comme MathML qui permet de formatter des données mathématiques)... toute cette opération bien complexe ne t'apportera aucun bénéfice. En fait, XHTML1.1 est encore actuellement un outil très "expérimental".

En réalisant plus simplement tes pages en XHTML1.0 Strict, tu te conformes parfaitement aux normes, plus simplement, et pour un résultat strictement équivalent au final.
C'est bon, j'ai compris merci beaucoup monsieur Smiley ravi
Nen plus sérieusement merci beaucoup pour ton aide c'est bon de savoir qu'il à encore des gens toujours pret à aider les autres ! Merci beaucoup et bonne continuation Smiley cligne

Bonne fin de journée
Sujet clos
Aller à