28172 sujets

CSS et mise en forme, CSS3

[Résolu] Mettre plusieurs éléments dans une boite

Bonjour,

Alors accrochez-vous j'ai commencé à coder hier!!!

J'ai commencé à faire une page avec 3 blocs dont le premier correspond au bandeau. Dans ce bandeau je veux mettre une image et un menu. Je dois avoir un problème (de débutant débile) au niveau du code parce que je n'arrive pas à inclure les 2 éléments dans ce bloc. le deuxième (dans le sens d'écriture) se retrouve toujours dans le second bloc. Voici mon travail hum hum... :

<!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" lang="fr">
<head>
<title>Site web de Ma&icirc;tre Sandrine ARNAUD</title> 
<link rel="stylesheet" type="text/css" href="style/style.css" />
<link rel="stylesheet" type="text/css" href="style/style_div.css">
</head>

<body>
<div id="global">
<div id="bandeau">
<a href="index_default.htm">
<img src="pictures/sandrinearnaud.png"></a>
<ol id="menu">
<li><a href="presentation.htm">Pr&eacute;sentation</a></li>
<li><a href="domaine.htm">Domaines d'activit&eacute;</a></li>
<li><a href="honoraires.htm">Honoraires</a></li>
<li><a href="actualites.htm">Actualit&eacute;s</a></li>
<li><a href="reseau.htm">R&eacute;seau</a></li>
<li><a href="contact.htm">Contact</a></li>
</ol>
</div>

<div id="contenu">
</div>

<div id="piedpage">
<p>bla bla bla</p>
</div></div>

</body>

</html>


Quelq'un peut-il m'aidez sil vous plait?
Modifié par 6l20 (21 Feb 2013 - 16:56)
Je comprend pas trop ton problème ...

Actuelement tu as

Une div 'globale' contenant
Une div 'bandeau' contenant
une image et des li
Une div 'contenu'
Une div 'pied de page'

en gros : 


<div id="globale">
  <div id="bandeau">
     <a href="">
     <ol> <li> </li> </ol>
  </div>
  <div id="contenue">
  </div>
  <div id="piedPage">
  </div>
</div>


image + lien, et les LI sont dans la div bandeau .

et donc tu n'arrive pas mettre les LI dans la div bandeau ?
Modifié par JuseN (20 Feb 2013 - 15:51)
Bonjour et merci de vous intéresser à mon problème.

Pour commencer, honte à moi. J'avais un padding-top énorme pour ma liste ce qui la poussait vers le bas (désolé pour mon vocabulaire de débutant).

Mais puisque vous êtes là (vous êtes toujours là???), je voulais savoir pourquoi ça ne marchait pas avec une position absolue (j'ai finalement utiliser text-alin:right)? La liste est pourtant un bloc non? En utilisant cette technique, la position était calculée par rapport au bord de mon navigateur et non par rapport au bord de mon bandeau. Pourtant j'avais bien mis le code entre les balises du bandeau. Du coup, quand je changeais la taille de ma fenêtre de navigation, ma liste se décalait par rapport au bandeau.

J'aimerais bien comprendre parce que cette fois j'ai de la chance pour le positionnement verticale (ma liste est en dessous de mon image et ce positionne parfaitement là ou je le souhaite) mais si elle n'était pas là... Il y a bien la solution du padding-top mais j'ai cru comprendre que ce n'était pas une façon de faire dans les règles de l'art.

Merci encore.
Oui toujours la Smiley smile


position absolute, c'est la position déconseillé, mais tout l'utilise un peu

pourrais tu posé du 'code' pour y voir plus clair si ça ne te dérange pas ? html + css et pourquoi pas une capture de ce que tu veux, et ce que tu aimerais avoir.
Bonjour,

Alors voilà la totale!!!

LA PAGE HTML

<!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" lang="fr">

	<head>
	<title>Site web de Ma&icirc;tre Sandrine ARNAUD</title> 
	<link rel="stylesheet" type="text/css" href="style/style.css" />
	<link rel="stylesheet" type="text/css" href="style/style_div.css">
	</head>

	<body>
		<div id="global">
		<div id="bandeau">
			<a href="index_default.htm">
			<img src="pictures/sandrinearnaud.png"></a>
			<ol id="menu">
			<li><a href="presentation.htm">Pr&eacute;sentation</a></li>
			<li><a href="domaine.htm">Domaines d'activit&eacute;</a></li>
			<li><a href="honoraires.htm">Honoraires</a></li>
			<li><a href="actualites.htm">Actualit&eacute;s</a></li>
			<li><a href="reseau.htm">R&eacute;seau</a></li>
			<li><a href="contact.htm">Contact</a></li>
			</ol>
		</div>

		<div id="contenu">
		</div>

		<div id="piedpage">
			<p> Ma&icirc;tre Sandrine ARNAUD - 12, place de la R&eacute;volution 25000 BESANCON - T&eacute;l. 03 81 48 33 20 - Fax. 03 81 54 76 59</p>
		</div></div>


	</body>

</html>



LA FEUILLE DE STYLE "BLOCS"


#global {
  	margin-left: auto;
  	margin-right: auto;
  	width: 950px;
	}

div#bandeau {
	width:950px;
	height:100px;
	background-color:#3d3d3d;
	}
div#contenu {
	width:950px;
	height:580px;
	background-color:#ffffff;
	}
div#piedpage {
	width:950px;
	height:120px;
	background-color:#ffffff;
	}



ET LA FEUILLE DE STYLE DE BASE

body {
	background-color: #ffffff;
	margin: 0px;
	}


h1 {
	color: #990000;
	text-decoration: underline;
	font-style: italic;
	font-variant: small-caps;
	font-weight: bold;
	font-size: 30px;
	font-family: arial, sans-serif;
	border-width: 20px;
	border-style: outset;
	border-color: red;
	}


p {
	color: #6e6453;
	text-indent: 0px;
	text-align: center;
	font-style: none;
	font-variant: none;
	font-weight: none;
	font-size: 12px;
	font-family: arial, sans-serif;
	border-width: none;
	border-style: none;
	border-color: none;
	margin-top: 0px;
	}


a:link {
	color: #6e6453;
	text-decoration:none;
	}

a:visited {
	color: purple;
	text-decoration:none;
	}

a:active {
	background-color: yellow;
	text-decoration:none;
	}

a:hover {
	color:red;
	text-decoration:none;
	}

#menu {
	margin: 0px;
	padding-top:0px;
	text-align: right;
	}

#menu li {
  	display: inline;
	margin: 10px;
	padding: 0px;
}



ET CE QUE CA DONNE
Modifié par 6l20 (21 Feb 2013 - 16:57)
Re


Alors deja, pourquoi deux feuilles de styles ? 


<link rel="stylesheet" type="text/css" href="style/style.css" />
<link rel="stylesheet" type="text/css" href="style/style_div.css"[b][#red]/[/#][/b]>


avec la dernière balise link pas fermé Smiley nono
bref
Et ensuite si je comprend bien, la liste se décale si tu réduis la fenetre ?
Modifié par JuseN (21 Feb 2013 - 16:36)
Fais attention aussi sur ton site

tu ouvre un a2, et ferme un avec un a 



<a2 id="mentions" href="mentionslegales.htm">MENTIONS LEGALES</a>
Ben je me disais qu'ensuite pour s'y retrouver c’était peut être bien d'avoir une feuille de style pour les textes, une pour les emplacements etc...

Pour le menu, ca marche comme ca. Il ne bouge plus. Mais je me demandais pour avec position abolue ca ne marchait pas. Ca prenait en compte le bord de la fenêtre de navigation et pas le bord de ma boite "bandeau" malgré le fait de l'avoir mis à l’intérieur de la balise bandeau...

Pour info j'ai mis ma page hum... enfin mon début de page sur un serveur. Je crois que c'est plus simple pour demander de l'aide : www.rob1mag.com
Oui mais tu peux également mettre des Commentaires dans ta feuille de style pour séparer les éléments et structurer ta feuille.. je pense que deux feuille pour une page est déconseillé.

Après

a écrit :

La position absolue

La position absolue (position:absolute) permet de ne pas dépendre de l'ordre dans lequel les éléments HTML sont déclarés dans le code, contrairement aux flottants que nous verrons plus tard.

La position absolue s'affranchit définitivement du cordon liant jusqu'alors intimement contenu et présentation. L'élément étant totalement extrait du flux, il ne dépend plus du tout des éléments qui le côtoient.


Tu peux te renseigner ici
http://www.alsacreations.com/tuto/lire/608-initiation-positionnement-css.html#position-absolue

rencontre tu d'autres problèmes ?
Modifié par JuseN (21 Feb 2013 - 16:57)
j'ai corrigé a2. Merci! Par contre c'est bien comme ça qu'il faut faire si je veux deux styles de liens différents? comme pour h1 h2...

Ensuite je travaille sur texte edit. Il vaut mieux utiliser autre chose apparemment..???

Pour la position absolue, j'ai bien compris. Mais alors elle est super dure à utliser parce que ca veut dire qu'elle prend toujours en compte le bord du navigateur non? Il faut déjà être bien expérimenté je pense. Est-ce que c'est une bonne solution d'utiliser padding-top pour "pousser" un élément vers le bas ou est-ce que c'est du bricolage? Bref c'est quoi la solution pro?

Enfin, c'est bien noté pour une seule feuille de style!!! Smiley cligne

En tout cas c'est vraiment sympa vos conseils!!!!
Oué la position absolute c'est le fait de placé un élément où tu veux en faite. (en dehors de ton conteneur par exemple)

Perso je développe avec NotePad++ mais y'a pleins d'ide comme DreamWeaver, NetBeans (qui est pas mal avec l'intellisense) ou même un vieux bloc note Smiley crash

Pour le a2, non faut pas, pour appliquer deux style de lien tu fais deux classes

<a href="link.html" classe="Style1"> 
<a href="link.html" classe="Style2">


Dans ce cas ci , dans le css tu peux appliquer du style sur

.Style1{margin-top:5px}
.Style2{margin-top:10px}


Ou tu met des ID, mais pas comme H1 ou H2 .

Pour pousser un élément vers le bas, rien de plus simple qu'avec un margin-top

conseil très simple pour comprendre la différence entre un margin et un padding : http://css.mammouthland.net/margin-padding-css.php
Modifié par JuseN (21 Feb 2013 - 17:20)
Super!! J'avance bien grâce à vous. Par contre qu'est ce que je peux mettre comme image alt? une image plus légère? En fait je comprends pas trop l'intérêt. Si l'image d'origine ne s'affiche pas je vois pas pourquoi la deuxième s'aficcherait plus!?
Re Salut,

alt doit être présent sur toutes les images, même s’il peut rester vide (pour les images purement décoratives). Il sert à apporter la même information que l’image (en général le texte qu’elle porte) dans le code de la page. Le but de ce report d’information est que celle-ci reste disponible lorsque l’image ne peut être chargée (à cause d’une surcharge de serveur ou d’un problème de connexion...) ou qu'elle ne peut être vue (par un robot de moteur de recherche ou un utilisateur de lecteur d’écran...).
Understood!!!! Smiley smile Merci

Tiens j'ai un nouveau sujet. Je modifie le diaporama (jquery slider). J'y suis presque mais je dois encore faire 2 modifs. Tu veux t'y coller ou j'ouvre un nouveau sujet? Smiley lol
Re

Lol, ré-ouvre un nouveau sujet, dans la partie JavaScript.

et tu peux mettre [résolu] pour celui ci. (edit;)
Modifié par JuseN (22 Feb 2013 - 16:28)
Sujet clos
Aller à