28172 sujets

CSS et mise en forme, CSS3

Menu a gauche + galerie image .... besoin d'aide

bonjour a tous
je débute en css grace à ce site et je n'arrive a obtenir une page avec un comportement satisfaisant. Donc j'en appèle aux ames charitables ....

je souhaite avoir un menu a gauche et une partie a droite avec une visionneuse d'image.

http://otoboubou.free.fr/test/tumb.html


premier problème : quand on redimensionne la fenetre du navigateur, la partie a droite passe en dessous du menu ...

[EDIT Laurie-Anne : Image trop grande] (image redimentionnée)
http://otoboubou.free.fr/test/iegrand.png

http://otoboubou.free.fr/test/iepetit.png


comment garder la visionneuse à droite ?

deuxième problème :

comment faire pour que la partie visionneuse occupe tout l'espace disponible a droite, j'ai essayé avec min-width, mais ca ne marche pas ....
et peut elle avoir également une hauteur minimale ?


merci d'avance
cyril
Modifié par cyril06 (29 Apr 2010 - 13:38)
La partie de droite passe en dessous car lors de redimensionnement il n'as plus la place pour rester a droite donc il descend.

Donne une largeur fixe en pixel pour le body alors il ne bougera plus.
En contrepartie il ne s'adaptera plus à une fenêtre plus grande, ni au résolution d'écrans.

body{width:980px;}


Pour occuper tout l'espace à droite, il te faudrait mettre ton html et css pour t'aider.

En général il te faut un block principal (largeur fixe) qui contient deux autre block.
Utilise alors des pourcentages ou des pixels pour les largeurs des deux sous block, voire un mix des deux.


<div id="block_principal">
       <div id="block_gauche"><p>Block à gauche</p></div>
       <div id="block_droite"><p>Block à droite</p></div>
</div>





block_principal
{
width: 1000px;
}

block_gauche
{
width: 150px;
}

block_droite
{
width: 100%;
}

Modifié par Htb (29 Apr 2010 - 03:23)
merci pour cette réponse nocturne !

j'ai bien modifié , et ca correspond a ce que je voulais
simple remarque, en mettant juste la propriété sur body (width=1000px)
l'effet n'est pas probant :
voir ici : http://127.0.0.1/moissac_css/tumb1.html

le code (cette fois - ci ) :
<head>
<link rel="stylesheet" type="text/css" href="tumb2.css">
</head>
<body>


<div id="bandeau">menu 1
<p><a href="test">test</a></p>
<p><a href="test_menu">test</a></p>

</div>

<div id="contenu">
<div class="thumb">
  <a href="#">
  <img src="100_i1.jpg" alt="image1" />
  <img src="300_i1.jpg" alt="image1" class="grand"/>
  </a>

  <a href="#">
  <img src="100_i2.jpg" alt="image2" />
  <img src="300_i2.jpg" alt="image2" class="grand"  />
  </a>

  <a href="#">
  <img src="100_i3.jpg" alt="image 3" />
  <img src="300_i3.jpg" alt="image 3" class="grand"  />
  </a>

</div>
</div>
</body>


la css :

body {
 background-color:black;
 color:white;
 height:500px;
 width:1080px;


 }



div#bandeau {
        float:left;
        width:200px;
	height:400px;
	background-color:#00CCFF;
	}
div#contenu
{               width:100%;
            	background-color:#00CCFF;
            	margin-left:220px;
	}


img {
 border:1px solid black;
 }

.thumb {
 position:relative;
 top:0;
 left:0;
 }

.thumb a {
 margin:0;
 text-decoration:none;
 }

.thumb a:hover {
 background-color:black;
 }

.thumb a .grand {
 display:block;
 position:absolute;
 width:0;
 }

.thumb a:hover .grand {
 position:absolute;
 top:80px;
 left:0;
 width:500px;
 height:525px;
 }

 .image    {
 top:80px;
 left:0;
 width:500px;
 height:525px;
 }




sinon en faisant les modifs sur les boites a droite (2eme conseil), ca fonctionne !


http://otoboubou.free.fr/test/tumb1.html

<head>
<link rel="stylesheet" type="text/css" href="tumb1.css">
</head>
<body>

<div id="principal">
<div id="bandeau">menu 1
<p><a href="test">test</a></p>
<p><a href="test_menu">test</a></p>

</div>

<div id="contenu">
<div class="thumb">
  <a href="#">
  <img src="100_i1.jpg" alt="image1" />
  <img src="300_i1.jpg" alt="image1" class="grand"/>
  </a>

  <a href="#">
  <img src="100_i2.jpg" alt="image2" />
  <img src="300_i2.jpg" alt="image2" class="grand"  />
  </a>

  <a href="#">
  <img src="100_i3.jpg" alt="image 3" />
  <img src="300_i3.jpg" alt="image 3" class="grand"  />
  </a>

</div>
</div>
</div>
</body>


la css

body {
 background-color:black;
 color:white;
 height:500px;
 width:1080px;


 }



div#bandeau {
        float:left;
        width:200px;
	height:400px;
	background-color:#00CCFF;
	}
div#contenu
{               width:100%;
            	background-color:#00CCFF;
            	margin-left:220px;
	}

div#principal {
              width:1000px;
}

img {
 border:1px solid black;
 }

.thumb {
 position:relative;
 top:0;
 left:0;
 }

.thumb a {
 margin:0;
 text-decoration:none;
 }

.thumb a:hover {
 background-color:black;
 }

.thumb a .grand {
 display:block;
 position:absolute;
 width:0;
 }

.thumb a:hover .grand {
 position:absolute;
 top:80px;
 left:0;
 width:500px;
 height:525px;
 }

 .image    {
 top:80px;
 left:0;
 width:500px;
 height:525px;

 }


donc c'est nickel ...


Je continue mes questions ....
maintenant je souhaiterais que les images de la visionneuse (les grandes ) soient centrées et adaptées a la taille de la place disponible dans le navigateur .... est-possible ?
par ailleurs, comment centrer les vignettes en haut sur l'espace disponible ?
et enfin ....
comment avoir une image (la première par exemple) affichée par défaut ?
merci encore
Modifié par cyril06 (29 Apr 2010 - 14:11)
Tu peux vérifier la validité de tes liens ou la config de ton serveur car tes liens donne cette erreur:

Not Found
The requested URL /null was not found on this server.

Apache/1.3.34 Server at forum.alsacreations.com Port 80

Merci.

Edit: Autant pour moi un copier coller dans l'url et sa fonctionne Smiley biggrin

Bon j'ai regarder ta page.

Il faut que tu apprennes à structurer une page HTML avec toutes les balises obligatoires.

Exemple de page:


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

	<head>

		<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />

		<meta http-equiv="Identifier-url" content="http://www.ton_site.com/" />

		<meta name="language" content="fr" />

         <title>
			Bienvenue sur Mon site
		</title>


		<link rel="stylesheet" media="screen" type="text/css" title="css" href="../css/style01_firefox.css"  />
		

	</head>

	<body>

         Ton code ici

         </body>
</html>


Voila c'est un bon début.
Modifié par Htb (29 Apr 2010 - 12:27)
bonjour

je n'avais pas mis toutes les entetes dans le head, car je suis en cours de test ...
desole
cyril
Le problème si tu omets ces balises, le navigateur ne sais pas à quoi il à faire, et interprète mal ton code, générant des problèmes de mise en page Smiley biggrin .

Car suivant le doctype utilisé, les balises ne sont pas interprétées de la même manière.

Tu as oublié de fermer </html>.
Modifié par Htb (29 Apr 2010 - 13:45)
ok, je croyais que c'était seulement déclaratif ...
j'ai modifié sur la page ...
mais pas le code ci dessus ...
Sujet clos
Aller à