2 petits points css à régler pour mon site

**ndsaerith** · 09/11/2010, 15h40

Bonjour à vous

Je suis en train de créer un petit site perso sous joomla.
Je voulais faire un template perso pour que ça fasse bien.
Mais il me reste quelques points à régler, et j'avoue que je suis une peut perdue (j'ai encore du mal en css....)
C'est pourquoi je vous demande votre aide

Alors voici le coupable :p http://annebc.0fees.net/

Mes 2 problèmes sont :
-> je n'arrive pas à centrer le tout (j'ai essayé une div globale, avec un text-align:center ou des margin auto mais ça ne fonctionne pas)

-> le div global (fond vert) qui ne descend pas jusqu'en bas du div de contenu (articles) :'(

Voici mon php et mon css :

index.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
    <head>
        <jdoc:include type="head" />
        <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
        <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
        <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/tmp_annebc/css/template.css" type="text/css" />
    </head>
    <body><div id="global">
        <div id="conteneur_principal">
            <div id="partie_menu">
                <div id="contenu_menu"><jdoc:include type="modules" name="menu" /></div>
            </div>
            <div id="partie_contenu"><jdoc:include type="component" /></div>
        </div>
        <div id="partie_logo"><img src="templates/tmp_annebc/images/logo_annebc.png" border="none" id="img_logo"></div>
        <div id="partie_slogan"><img src="templates/tmp_annebc/images/slogan_annebc.png" border="none" id="img_slogan"></div>
    </div></body>
</html>

template.css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
body {
    background:#000000;    
}
#global {margin: 0 auto;}
#conteneur_principal {
    position:relative;
    background:#7EBC0F;
    width:850px;
    height:587px;
 
margin: 0 auto;    
}
#partie_menu {
    top:238px;
    background:#000000;
    height:25px;
    position:relative;
    width:100%;
}
#contenu_menu {
    position:relative;
    float:right;
}
#partie_contenu {
    height:324px;
    top:238px;
    position:relative;
    overflow:auto;
}
 
#partie_logo {
    position:absolute;
    float:right;
    left:68px;
    top:5px;
}
#partie_slogan {
    position:absolute;
    left:468px;
    top:25px;
    float:right;
}
#img_logo {
    height:332px;
}
#img_slogan {
    height:200px;
    top:5px;
}
a.mainlevel{
    text-decoration: none;
    color: #9ACF29;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    padding-right:4px;
    padding-left:4px;
    margin-top:2px;
    margin-bottom:2px; 
    position:relative;
}
.componentheading {
    text-decoration: none;
    color: #000000;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    text-align:right;
    margin-top:5px;
    margin-right:5px;
}
 
.contentpaneopen {
    text-decoration: none;
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    text-align:left;
    margin-top:15px;
    margin-right:5px; 
    border-bottom:2px solid #000000;
    line-height: 12pt;
}

Je vous remercie beaucoup d'avance

(N'hésitez pas à me dire s'il y a des erreurs flagrantes dedans aussi ^^).

Merci merci merci

Bisous

**franculo_caoulene** · 09/11/2010, 17h42

Salut,

Concernant le premier point, le rendu est correct sous FF, mais pas IE. C'est le symptôme typique de l'absence d'un doctype.

Concernant le second point, je n'ai pas compris.

**Atomya Rise** · 09/11/2010, 21h38

Pour le deuxième point, je me pencherais du côté :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
#conteneur_principal {
    position:relative;
    background:#7EBC0F;
    width:850px;
    height:587px;
 
margin: 0 auto;    
}

Ton height est de 587px là où il y a ton background justement...

**Macmillenium** · 11/11/2010, 12h25

Bonjour,

Envoyé par ndsaerith

-> le div global (fond vert) qui ne descend pas jusqu'en bas du div de contenu (articles) :'(

Pour #global, il faut remplacer height:100% par min-height:100% et appliquer un height:100% aux éléments BODY et HTML.

2 petits points css à régler pour mon site

CSS

Discussions similaires

Partager

Partager