28217 sujets

CSS et mise en forme, CSS3

Positionnement des "boites"

Bonjour,

je débute dans le monde du CSS, et malgré les nombreux tutoriaux, je maitrise mal ce langage. Je me suis donc dit que pour progresser, rien de mieux que d'essayer Smiley lol .

J'ai donc commencer mon squelette, et le début de mon site. Voici le squelette HTML : 


<html>


	<head>
<title> Le site officiel des ***** </title>

	</head>

	<body>

<link rel="stylesheet" type="text/css" href="CSS/style.css" media=all />



<div class="box"> <h2> Et voici les news : </h2> </br> 
- Texte exemple </br></br> - Texte exemple, texte exemple </br></br> - Texte exemple : oekok date </br></br> - Texte exemple.... </br></br> - News ... etc texte exemple : </br></br> Fin </div>

<div class="box2"> <center> <h1> Petite presentation </h1> </center> </br></br> Seconde boite, test </br></br> Seconde boite, test </br></br>Seconde boite, test </br></br>Seconde boite, test </br></br>Seconde boite, test </br></br>Seconde boite, test </br></br>Seconde boite, test </br></br>Seconde boite, test </br></br>Seconde boite, test </br></br>Seconde boite, test </br></br> Seconde boite, test </br></br> Seconde boite, test </br></br> Seconde boite, test </br></br> Seconde boite, test </br></br> Seconde boite, test </div>




	</body>

</html>



Et voici mon CSS (je n'ai qu'un seul fichier pour le moment) :


body {
		background-color:#000000;
		background-image: url("images/Agroa.png");
		background-repeat: no-repeat;
		background-attachment: scroll;
		background-position:50% 0%;
		height:980px;
		overflow: auto;
		z-index:0;
}

.box {
		margin-top: 490px;
		margin-right: 570px;
		margin-left:280px;
		height: 280px;
		overflow: auto;
}

.box2 {
		margin-top: 95px;
		margin-right: 305px;
		margin-left:280px;
		height: 440px;
		overflow: auto;
}




Pour le moment, tout se présente bien. Mais une chose me gène.
En effet, lorsque je rentre ces coordonées, la premiére boite (box1) va se positioner a 490 px du haut du site, mais la seconde (.box2) à 95 px de la première boite.

Ici, cela n'est pas genant, mais lorsque je veut mettre un petit icone en "fixed" qui se deplace avec le scroll et bien, il décale tout mes cadres Smiley ohwell .

Existe-t-il une autre syntaxe permettant que chaque "boite" est ses propres coordonée "Indépendament" des autres éléments ? Merci
Modifié par Romz34 (01 Oct 2011 - 17:28)
Un positionnnement absolute rendra la boîte indépendante de ses frères au sein du même conteneur. 


.box {
position: absolute;

}


Cela dit attention avec le postionnement absolute, lis ceci avant.


Autre point: utilise les raccourcis CSS, cela te fera économiser des lignes de code:




margin: top right bottom left;
/* au lieu de margin-top, margin-left, etc. */

Modifié par jmlapam (01 Oct 2011 - 17:53)
Merci d'avoir répondu aussi vite.

Je vais donc étudier le "absolute", et dans un même temps revoir le float etc. qui pourrons bien m'aider à l'avenir.

Je retient également l'astuce pour le margin Smiley cligne .


Une fois tout ça étudié et testé je viendrait vous dire quoi Smiley smile .
Romz34 a écrit :


Je retient également l'astuce pour le margin Smiley cligne .




Ce raccourci est valable sur bon nombre de sélecteurs CSS. A la place des top, right, left, bottom, mettre de valeurs en px ou em Smiley cligne
Modifié par jmlapam (02 Oct 2011 - 00:35)
Salutation

Quelquefois il est bien de voir la position comme un objet sortie du flux normale. Qu'il s'agisse de absolute ou relative et mieux encore le float, il y a un point en commun, l'objet est en dehors du flux normale. Ce point est important ici. Un objet en dehors du flux normale nous suggère inévitablement une re-position de l'objet. Là est l'intérêt.

Certaines expériences en CSS concernant le positionnement d'objet m'auront prouver la facilité des refontes lorsque bien gérer. Le seul changement d'une valeur à width m'aura permis un changement globale avec ou sans ajout. Textes et images s'ajustent. Il s'agit dans ce cas d'un float. Le float est subtile, il agit sur son environnement. En effet les objets environnants (exemple les textes), sont réactifs et ajustables.

Quoiqu'il en soit il est important de bien saisir le positionnement en CSS. Ainsi que ces subtilités. Design assurer si vous le désirer.

..
Bon,

après mainte et mainte reprise, je me suis rendu compte que le problème ne venait pas de mon code, mais de mon design.

En effet, j'ai voulu faire une "page", sur laquelle j'ajoute des éléments textes. Mais je comprend petit à petit qu'une page web se conçoit en "bloc".

J'ai donc revu mon design avec une bannière, une bare de menu et un fond, plutot que le tout dans un fond.

Je vais maintenant essayer d'organiser tout ça. Smiley smile
Et voila, ça fonctionne et tout ça sans le positionnement absolute Smiley lol .

Voici mon code :


<!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> Le site officiel des agros de Joffre ! </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

	</head>

	<body>

<link rel=stylesheet type="text/css" href="CSS/style.css">

 		<div id="ban">
           
        </div>

		<div id="menu">

		</div>

		<div id="fb137">

		</div>
		




	</body>

</html>



Et voici le CSS :


body {
		background-color:#000000;
		background-image: url("images/fond.png");
		background-repeat: no-repeat;
		background-attachment: scroll;
		background-position:50% 0%;
		height:1450px;
		overflow: auto;
		z-index:0;
}


#ban
{
   width: 1150px;
   height: 321px; 
   margin: 10px 0px 0px 40px;
   background-image: url("images/ban.png");
   background-repeat: no-repeat;
	z-index: 1;
}

#menu {
   width: 1150px;
   height: 300px;
   margin: -80px 0px 0px 40px;
   background-image: url("images/menu.png");
   background-repeat: no-repeat;
	z-index: 2;

}

#fb137 {
   width: 100px;
   height: 1450px;
	margin: -600px 0px 0px -5px;
	background-position: 0% 50%;
   background-image: url("images/fb137.png");
   background-repeat: no-repeat;
	z-index: 3;
	background-attachment:fixed;
}



J'ai bien ma bannière, mon menu et un petit menu qui est fixé sur la page.

Cependant, j'ai un leger soucis, j'aimerais ajouter plusieurs petites images a mon menu "fixé" sur la page (mais qui seront également des lien, donc pas les coller, deux images independantes) l'un au dessus de l'autre.

Je suis tenter de recrée une balise CSS avec les même info que dans la première, et changer un peu les valeur pour que ca tombe en dessous, puis un div dans le html, mais en même temps, je suis sur qu'il y a une méthode bien plus "propre", qui permet de dire que ces images appartiennent a la même "boite" et qu'elles descend ensemble etc ...

Tout aide est la bienvenue Smiley smile . En attendant, je vais continuer la création du site Smiley cligne
Je pense également l'héberger, pour me permettre d'illustrer mes propos Smiley lol
Modifié par Romz34 (02 Oct 2011 - 15:48)
Romz34 a écrit :
mais en même temps, je suis sur qu'il y a une méthode bien plus "propre", qui permet de dire que ces images appartiennent a la même "boite" et qu'elles descend ensemble etc ...

À l'heure actuelle la manière de dire ça c'est de placer tes nouveaux contenus dans le même élément HTML. Par exemple si tu as ceci:
<div id="menu-fixe">
  <ul class="nav">
    ...
  </ul>
</div><!--#menu-fixe-->

et que tu veux rajouter des éléments en dessous de la liste de liens (ul.nav), tu peux tout simplement faire:
<div id="menu-fixe">
  <ul class="nav">
    ...
  </ul>
  <p class="machin">
    <!-- Un ou deux liens qui n'appartiennent pas au menu
         ci-dessus. -->
  </p>
</div><!--#menu-fixe-->
Bonjour,

dans ton exemple, tu utilise la fonction "ul" c'est à dire que tu fait une liste.

Il faudrait donc que j'ajoute mes images dans cettes liste (en les ordonant) plutot que directement dans le CSS avec un <img src=...> ?

Si oui, apparemment, ça ne fonctionne pas bien car l'image, plutôt que d'être fixé va venir se placer tout en haut de mon site, et ne va pas en bouger Smiley ohwell .

Je pense que je me suis mal exprimé, ce que je souhaite c'est un menu tout simple, avec par exemple : acceuil / galerie / contact <= j'aimerais que ce soit des images (pour faire plus design que de simple lien bleu). Mais je ne vois pas comment mettre plus d'une images dans mon menu Smiley cligne .
Romz34 a écrit :
tu utilise la fonction "ul" c'est à dire que tu fait une liste.

L'élément UL.

Romz34 a écrit :
Il faudrait donc que j'ajoute mes images dans cettes liste (en les ordonant) plutot que directement dans le CSS avec un <img src=...> ?

L'élément IMG est un élément HTML. Ce n'est pas du CSS...

Romz34 a écrit :
Si oui, apparemment, ça ne fonctionne pas bien

Ce n'est qu'un changement léger de la structure HTML. Si tes styles CSS ne donnent plus le résultat attendu suite à ce changement, c'est sans doute qu'ils s'appliquent aux mauvais éléments (sélecteurs CSS devenus faux suite au changement de structure HTML).

Romz34 a écrit :
Je pense que je me suis mal exprimé, ce que je souhaite c'est un menu tout simple

Et la convention de codage pour un menu simple c'est d'utiliser une liste non ordonnée (UL).

Romz34 a écrit :
j'aimerais que ce soit des images (pour faire plus design que de simple lien bleu)

Tu peux faire «plus design» que de simples liens bleus en utilisant CSS, déjà. L'utilisation d'image n'est nécessaire que pour des éléments graphiques qui ne peuvent pas être décrits en code...

Romz34 a écrit :
Mais je ne vois pas comment mettre plus d'une images dans mon menu Smiley cligne .

Un menu avec plusieurs liens texte (à mettre en forme en CSS):
<ul id="navigation">
  <li><a href="...">Accueil</a></li>
  <li><a href="...">Galerie</a></li>
  <li><a href="...">Contact</a></li>
</ul>

Et le même avec des images à la place du texte:
<ul id="navigation">
  <li><a href="..."><img src="..." alt="Accueil" /></a></li>
  <li><a href="..."><img src="..." alt="Galerie" /></a></li>
  <li><a href="..."><img src="..." alt="Contact" /></a></li>
</ul>
Sujet clos
Aller à