28172 sujets

CSS et mise en forme, CSS3

Décalage de mes bordures arrondis (bas gauche et droite)

Bonsoir à tous voila,

Je viens de placer des éléments div id"nomducoin" dans mon conteneur (comme décrit sur l'ouvrage CSS 2 qui au passage et génial) mais voila mais coins bas gauche et bas droite lors d'un test sur FF ces deux images sortent du conteneur alors que sur IE pas du tout.

Voici les deux exemples en images (pieces jointes):

Firefox:
upload/16347-bordff.png

Internet explorer:
upload/16347-bordie6.png

Pour exemple voici l'extrait de mon balisage xhtml(strict) suivis de mon code CSS.

<div id="conteneur">
<div id="hautgauche"></div><div id="hautdroit"></div>
<ul id="menug">
	<li><a herf="accueil.html">Accueil</a></li>
	<li><a herf="captures.html">Captures</a></li>
	<li><a herf="faq.html">F.A.Q</a></li>
	<li><a herf="forum.html">Forum</a></li>
</ul>
<div id="contenu">
	<h2>Mon titre </h2>
	<p>Bla bla bla bla </p>
</div>
<p id="footer">Mon site Web</p>
<div id="basgauche"></div>
<div id="basdroit"></div>
</div>


#hautgauche, #hautdroit, #basgauche, #basdroit {
height: 19px;
width: 19px;
background-repeat: no-repeat;
font-size: 1px;}

#hautgauche{
	background: url("hautgauche.gif") no-repeat;
	float: left;}
	
#hautdroit{
	background: url("hautdroit.gif") no-repeat;
	float: right;}
	
#basgauche{
	background: url("basgauche.gif") no-repeat;
	float: left;}
	
#basdroit{
	background: url("basdroit.gif") no-repeat;
	float: right;}


Pourriez vous m'aider svp à résoudre ce problèm de rendu svp ?

Merci d'avance a tous ainsi qu'a Raphael Goetter pour son ouvrage ...
Modifié par worms30 (27 May 2008 - 21:54)
worms30 a écrit :
Smiley decu S'il vous plait aidez moi j suis en train de me tirer les cheveux.

Quelle drôle d'idée, ça doit faire mal Smiley eek

Trêve de plaisanterie, le positionnement flottant est particulier et ne souffre pas "l'a peu près" (pour rappel inititiation à la position float )
Bref, tu reliras le passage de l'excellent livre de Raphael et modifieras l'ordre d'apparition de ces boites flottantes Smiley cligne 
<div id="conteneur">
<div id="hautdroit"></div><div id="hautgauche"></div>
<ul id="menug">
	<li><a herf="accueil.html">Accueil</a></li>
	<li><a herf="captures.html">Captures</a></li>
	<li><a herf="faq.html">F.A.Q</a></li>
	<li><a herf="forum.html">Forum</a></li>
</ul>
<div id="contenu">
	<h2>Mon titre </h2>
	<p>Bla bla bla bla </p>
</div>
<p id="footer">Mon site Web</p>

<div id="basdroit"></div><div id="basgauche"></div>
</div>

A priori, cela devrait mieux fonctioner Smiley cligne

Tant que nous y sommes un autre lien interessant de l'ami Florent

Cdt,
Sylvain
grrr, ça va j'ai encore tout mes cheveux mais avec ce nouveau problem je crain le pire Smiley lol

Voila j'ai bien inversé gauche et droite comme indiqué sur ton code mais ça n'a rien changé, alors j'ai décider de reprendre ma page à zero histoire de voir ou ça péchait.

je commence par un page ordinaire

<body>
	<div id="conteneur">
	<div id="hautdroit"></div><div id="hautgauche"></div>
		<ul id="menug">
	                <li><a herf="accueil.html">Accueil</a></li>
			<li><a herf="captures.html">Captures</a></li>
			<li><a herf="faq.html">F.A.Q</a></li>
			<li><a herf="forum.html">Forum</a></li>
		</ul>
		<div id="contenu">
			<h2>Mon titre </h2>
			<p>Bla bla bla bla </p>
		</div>
		<p id="footer">Mon site Web</p>
	<div id="basdroit"></div><div id="basgauche"></div>
</div>
</body>


et place mon début de css comme cela

body{
	margin: 10px 0 ;
	padding: 0 ;
	text-align: center ;
	font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
	background: url("font.jpg") repeat-x #fff ;}

#conteneur{
text-align:center;
width: 800px;
height: 200px; 
margin:0px;
background:#FFFFFF;}

ul#menug{
	height: 35px ;
	margin: 0 ;
	padding: 0 ;
	list-style-type: none ;}
	
ul#menug li{
        float: left;
	text-align: center;}
	
ul#menug li a{
	width: 130px ;
	line-height: 25px ;
	font-size: 1.2em ;
	font-weight: bold ;
	letter-spacing: 2px ;
	color: #fd6a11 ;
	display: block ;
	text-decoration: none ;
	border-right: 2px solid #dea ;}

#hautgauche, #hautdroit, #basgauche, #basdroit {
height: 19px;
width: 19px;
background-repeat: no-repeat;
font-size: 1px;}

#hautgauche{
	background: url("hautgauche.gif") no-repeat;
	float: left;}
	
#hautdroit{
	background: url("hautdroit.gif") no-repeat;
	float: right;}
	
#basgauche{
	background: url("basgauche.png") no-repeat;
	float: left;}
	
#basdroit{
	background: url("basdroit.png") no-repeat;
	float: right;}

voici une image prise sur Dreamweawer :
upload/16347-test.jpg .

Comme tu l'a vue sur mon image, les deux bords bas gauche et droit sont sur élevé par rapport au bord bas du conteneur ceci du
à la fonction float left placé dans "ul#menug li{". J'ai essayé display: inline; affin d'affcher mon menu en ligne et non brut de pomme mais ça donne la meme chose Smiley ohwell . si tu connais une autres méthode Smiley cligne .
Autrement concernant le probleme de bord qui sort ceci était du à "height: 200px;" placé dans "#conteneur{". si qui m'empeche et j'ne sais pourquoi à étirer mon conteneur. Est ce normal ça Smiley ohwell ?

j'espere que ces renseignement pourrons t'aider à y voir plus clair dans mon css Smiley cligne
worms30,

Je suis allé un peu vite en survolant ta feuille de style, mes excuses Smiley cligne
Je n'avais pas vu que tu faisais flotter les quatre coins...Tu dois, dans ce cas de figure, ne faire flotter que "les éléments droits":
#hautgauche{
	background: url("hautgauche.gif") no-repeat;
	}
	
#hautdroit{
	background: url("hautdroit.gif") no-repeat;
	float: right;}
	
#basgauche{
	background: url("basgauche.png") no-repeat;
	}
	
#basdroit{
	background: url("basdroit.png") no-repeat;
	float: right;}


Cela devrait aller mieux Smiley cligne

Cdt,
Sylvain
Probleme des bords qui sort résolu grace a tes conseilles :

placer en bout de page :
<div class="spacer"></div>

suivis

de .spacer{
clear: both;}
et le tour et joué

Merci à toi Smiley cligne

Maintenant comment faire pour donner une hautre fixe à mon conteneur sans que les bords bas ne reste à leurs place et reste (au milieu). Ce qui casse l'effet souhaité!

Merci d'avance Smiley lol
Merci a tout les deux pour votre aide , et voici un fragment de ma création que je trouve assé sympa pour un début Smiley cligne

upload/16347-test.png

Mais j'ai toujours un problème avec le l'élargissement de mon conteneur principal , qui lorsqu'une fois allongé affiche mes bords bas gauche et droit en milieu de page . Est ce normal? et comment éviter ça ?

merci encore Smiley lol
6l20 a écrit :
Bonjour worms,

Tu peux sans doute t'inspirer des tests de Florent V. pour réaliser ta mise en page :
Pour une boite
Exemple de mise en page sur ce principe

Regardes les sources et les explications de Florent Smiley cligne

Cdt,
Sylvain


OK, j'avoue ne pas comprendre comment le responsable du deuxieme exmple si est pris pour avoir un site avec bordure e sur tout les bords et angles redimentionnable !!! Si quelqu'un pouvais m'aider car je n'arrive toujour pas à allonger mon conteneur n concervant mes bords bas B et G à leurs place.


Sur cet exemple le type à des bordures de conteneur Haut Gauche et droit non indiqué sur ça feuille de style
Smiley confus .

Pour ma pare je souhaite créer un site et hauteur fixe (450px) et à largeur variable .

Si quelqu'un pouvais m'aider j'vous en serrait super reconnaissant merci a tous
Salut,

Une piste vite fait
#conteneur{
margin: 10p;
border: 1px solid lime;
height: 450px;
position: relative;
}

#coin_h_g, #coin_h_d, #coin_b_g, #coin_b_d{
position: absolute;
width: 10px;
height: 10px;
}

#coin_h_g{
background: silver;
top: -1px;
left: -1px;
}

#coin_h_d{
background: red;
top: -1px;
right: -1px;
}

#coin_b_g{
background: green;
bottom: -1px;
left: -1px;
}

#coin_b_d{
background: orange;
bottom: -1px;
right: -1px;
}


<div id="conteneur">
	<div id="coin_h_g">
	</div>
	<div id="coin_h_d">
	</div>
	<div id="coin_b_g">
	</div>
	<div id="coin_b_d">
	</div>
</div>


Je manque un peu de temps pour explicité la chose
Merci à tous,

J'ai bein essayé cette deuxième solution mais ça ne fonctionne pas. J'en suis toujours au meme point a savoir comment fixer mais bords bas droit et bas gauche sur les angles et non centrer sur les bordures de ma pages.

Je tien à préciser que les largeur de mon conteneur est fixe, voila pourquoi c'est deux bords font tant de manière !!! Smiley lol

Comment puis je faire cela si il vous plait ?

Merci a tous pour votre soutien.
Sujet clos
Aller à