Problème de CSS

Sujet résolu

25 avril 2006 à 0:39:03

Bonjour à tous!

Comme l'indique mon titre, j'ai un petit problème avec du CSS.
Pour faire simple, je fais parti d'une association étudiante et j'ai été chargé de créer le site web.

Je me suis donc mis au boulot pour faire ça.

Un designe simple mais suffisant.
A noté que les couleurs ne sont pas définitives, je vais voir avec toutes l'association pour ça.

Comme vous pouvez le voir, l'ascenseur permet de descendre bien bas, trop bas meme!
Ceci est du au fait que si je n'applique pas de CSS pour placer chaques cadres, ils se retrouvent naturellement les uns sous les autres.
Malheureusement, l'espace occupé par leur place d'origine est conservé en mémoire et reste vide!
Je n'ai pas trouvé le moyen de réduire cet espace avec du CSS.
Est-ce possible ou je dois refaire tout mon design pour que ça s'arrange?

Merci d'avance pour vos réponses.

zito

25 avril 2006 à 8:12:18

Salut
En rajoutant:

height: 800px;

a ta balise body ton ascensseur ne descendra plus aussi bas :-°

scareface

25 avril 2006 à 11:45:18

Salut!

Normalement tu n'as pas besoin de définir de hauteur. En principe une fois que tu as positionné tes blocs, il ne doit pas y avoir d'espace vide en bas.
Mais pour etre sûr envoies ton code css et on pourra mieux voir ce qui ne marche pas

Tuttu

26 avril 2006 à 10:13:47

J'ai déjà essayé de redimenssionner le body.

Mais comme les éléments que j'y ajoute dépassent, ça ne prend pas en compte la taille que je demande.
Le CSS est disponible ici.

Je sais que les noms ne sont pas très parlant mais je m'y retrouve.
Par exemple:
.tmg
{
width:140px;
margin:auto;
margin-top:5px;
margin-bottom:5px;
text-align:center;
background-color:white;
border: solid black 1px;
}

.tmg c'est pour tableau menu gauche
et .ctmg pour cellule tableau menu gauche et ainsi de suite.

llouis

26 avril 2006 à 10:20:28

J'ai une solution un peu radicale que tu peux essayer sur les pages courtes : tu ajoutes

body
{
overflow : hidden
}

Cela t'enlèvera purement et simplement la barre de défilement !
Après, tu peux essayer de tout faire tenir sur un écran en plaçant chaque news dans une iframe (overflow : scroll ; height : machinbidule ;), mais pour les petites résolutions (800*600)

Tuttu

26 avril 2006 à 10:29:25

Je viens d'essayer ta méthode.
J'aime bien le résultat...

Ca fait disparaitre seulement l'ascenceur.
Le bas de page vide reste et on peux le faire défiler à la mollette.

Une autre solution? lol

scareface

26 avril 2006 à 11:42:45

Tu n'aurauis pas la page xhtml qui va avec afin qu'on puisse voir en détail comment sont disposés les blocs?

Désolé j'ai rien dit^^

Tuttu

26 avril 2006 à 11:59:21

La page xHTML est là.
Un clic droit -->Enregistrer la cible du lien sous

Ou visionner le code source pour les utilisateurs de Firefox.

Petit rappel : le CSS est ici.

jp949

26 avril 2006 à 13:06:02

corrige cette regle

#bas
{
margin-top:10px;
width:750px;
height:50px;
background-color:rgb(187,199,207);
border: solid black 1px;
position:relative;
bottom:780px;
}

bottom:780px;

scareface

26 avril 2006 à 13:24:43

j'ai jetté un rapide coup d'oeil sur ton code xhtml et je constate que tu utilises beaucoupe de cadre et même trop. Il faut privilégier les blocs avec la balise <div>.

YassBoule

26 avril 2006 à 14:56:58

scuse mais j'en avait envie !

<!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>
<title>.: Bienvenue sur le site de l'ASSODEIC :.</title>

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

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

<body>
<div id="haut">
<p id="asso1"><strong>ASSODEIC</strong></p>
<p id="asso2">L'association des étudiants de l'IUT de Chartres</p>
</div>

<div id="barrelien">
<table id="tbl">
<tr>
<td class="ctbl">Lien</td>
<td class="ctbl">Lien</td>
<td class="ctbl">Lien</td>
<td class="ctbl">Lien</td>
<td class="ctbl">Lien</td>
</tr>
</table>
</div>
<div id="pub">
VOTRE PUB ICI
</div>
<div id="home">
<img src="images/maison.gif" alt="Accueil" title="Retour à l'accueil"/>
</div>
<div id="contact">
<img src="images/favoris.gif" alt="Contact" title="Nous contacter"/>
</div>
<div id="menugauche">
<table class="tmg">
<tr>
<th class="ctmg">Menu</th>
</tr>
<tr>
<td class="ctmg">Lien</td>
</tr>
<tr>
<td class="ctmg">Lien</td>
</tr>
<tr>
<td class="ctmg">Lien</td>
</tr>
</table>

<table class="tmg">
<tr>
<th class="ctmg">Menu</th>
</tr>
<tr>
<td class="ctmg">Lien</td>
</tr>
<tr>
<td class="ctmg">Lien</td>
</tr>
<tr>
<td class="ctmg">Lien</td>
</tr>
</table>
</div>

<div id="menudroite">
<table id="vide">
<tr><td></td></tr>
</table>

<table class="tmd">
<tr>
<th class="tcd">Partenaire</th>
</tr>
<tr>
<td class="cmd"></td>
</tr>
</table>

<table class="tmd">
<tr>
<th class="tcd">Sondage</th>
</tr>
<tr>
<td class="cmd"></td>
</tr>
</table>
</div>

<div id="corps">
<table id="bienvenue">
<tr>
<th id="ttbc">Bienvenue sur le site de l'ASSODEIC !</th>
</tr>
<tr>
<td class="corpsvide"></td>
</tr>
</table>

<table id="article">
<tr>
<th id="ttac">Article</th>
</tr>
<tr>
<td class="corpsvide"></td>
</tr>
</table>
</div>

<div id="bas">
</div>
</body>
</html>

scareface

26 avril 2006 à 15:07:42

je viens de refaire toute la structure de ta page xhtml avec des nom d'id plus explicites.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>.: Bienvenue sur le site de l'ASSODEIC :.</title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="haut"></div>

<div id="barre_lien"></div>

<div id="menu_droite"></div>

<div id="pub"></div>

<div id="home"></div>
<div id="contact"></div>

<div id="menu_gauche"></div>

<div id="corps"></div>

<div id="bas"></div>

</body>
</html>

Et voici le code css qui va avec.

body
{
margin:auto;
width:750px;
background-color:#f4f9fd;
margin-top:10px;
}

#haut
{
width:750px;
height:123px;
border: solid black 1px;
background-color:#bbc7cf;
}

#barre_lien
{
float:left;
margin-top:15px;
background-color:#bbc7cf;
border: solid black 1px;
width:538px;
height:18px;
}

#menu_droite
{
float:right;
margin-top:15px;
width:198px;
height:418px;
background-color:#bbc7cf;
border: solid black 1px;
}

#pub
{
float:left;
width:498px;
height:73px;
margin-top:10px;
margin-bottom:15px;
text-align:center;
font-size:x-large;
background-color:#bbc7cf;
border: solid black 1px;
}

#home
{
float:left;
width:28px;
height:28px;
background-color:#bbc7cf;
border: solid black 1px;
margin-top:10px;
margin-left:10px;
margin-bottom:15px;
}

#contact
{
float:left;
width:28px;
height:28px;
background-color:#bbc7cf;
border: solid black 1px;
margin-left:10px;

}

#menu_gauche
{
float:left;
width:148px;
height:298px;
background-color:#bbc7cf;
border: solid black 1px;
margin-bottom:15px;
}

#corps
{
float:left;
width:378px;
height:458px;
background-color:#bbc7cf;
border: solid black 1px;
margin-bottom:15px;
margin-left:10px;
}

#bas
{
clear:both;
margin-bottom:10px;
width:750px;
height:48px;
background-color:#bbc7cf;
border: solid black 1px;
}

désolé mais j'ai la fleme de remettre le contenu

PS:

évite d'utiliser des tableaux sauf quand tu en as vraiment besoin car la mise en forme des tableaux est je trouve beaucoup plus complexe que celle d'un bloc <div>

Tuttu

26 avril 2006 à 15:15:55

Un grand merci à tous et surtout à Scraface.
Je viens de tester et ça marche du tonnerre

J'ai vu que tu as mis des floats : c'est ce que j'avais commencé à faire mais vu que tu as finis, si ça ne te dérange pas, je te pique ton CSS.

J'ai plus qu'à remplir tout ça pour que ça soit opérationnel pour la présentation.

Encore merci à tous!

scareface

26 avril 2006 à 15:21:22

De rien mais moi c'est Scareface et non pa Scraface^^

Tuttu

26 avril 2006 à 15:22:53

Désolé.

J'ai tapé trop vite!^^
Si jamais j'ai un autre problème, je vous recontacterai.

Problème de CSS

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.

× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.

Problème de CSS

Problème de CSS

Supprimer

Modérer

Signaler le message aux modérateurs