28173 sujets

CSS et mise en forme, CSS3

Probleme positionnement texte dans footer

Bonjour à tous

J'ai un soucis pour positionner du texte dans mon footer, voila mon code :

Ca c'est pour le html

<div class="footer">
xhtml strict / css 2.0 / Creation yan.k
</div>


Et voila le css :

.footer {
	HEIGHT: 20px;
	BACKGROUND-COLOR: #33CC33;
	font-family: "Trebuchet MS", Arial, Heveltica, sans-serif;
	font-size: 0.8em;
	font-style: normal;
	font-weight: normal;
	color: #FFFFFF;
	text-align: right;
	padding-right: 50px;
}


Donc comme vous pouvez le voir, mon texte se place à droite dans mon footer, nikel, le probleme c'est que je veux également un texte à gauche dans ce footer, voila ce que j'ai essayé mais je n'y arrive pas :

le css (texte partie gauche)

.copyright {
	HEIGHT: 20px;
	BACKGROUND-COLOR: #33CC33;
	font-family: "Trebuchet MS", Arial, Heveltica, sans-serif;
	font-size: 0.8em;
	font-style: normal;
	font-weight: normal;
	color: #FFFFFF;
	text-align: left;
	padding-right: 50px;
}


Et dans le html je bloque, je ne sais pas ou placer le div class, j'ai fait pas mal d'essai, en sachant que mon css pour la partie gauche est fausse, du moins je le pense Smiley rolleyes

Car dans le cas present à cause du 20px de copyright , cela me fait 2 footer...

Si vous voyez une solution, je suis sur qu'il y en a une ! Smiley ravi

Merçi
Modifié par yank (29 May 2006 - 15:23)
Bonjour,

Pour ma part je ferai de ton footer un conteneur dans lequel je placerai deux flottants, un à gauche et un à droite Smiley smile
Oui en effet ce serai plus simple mais je ne vois pas trop comment faire sachant que j'ai un conteneur global qui contient mes elements (entete, menu, frame contenu et footer qui sont des class)

voila mon code css :

#global {
	position:absolute;
	left: 50%;
	top: 50%;
	width: 750px;
	height: 550px;
	margin-top: -275px;
	margin-left: -375px;
	background-color: #FFFFFF;
	border: 1px solid #FFFFFF;
}
.header {
	HEIGHT: 100px;
	BACKGROUND-COLOR: #33CC33;
	color: #333333;
}
.menu {
	LEFT: 0px;
	WIDTH: 200px;
	POSITION: absolute;
	HEIGHT: 430px;
	BACKGROUND-COLOR: #33CC33;
	color: #666666;
}
.frame {
	MARGIN-LEFT: 200px;
	margin-right: 20px;
	OVERFLOW: auto;
	WIDTH: 530px;
	HEIGHT: 430px;
	BACKGROUND-COLOR: #33CC33;
}
.right {
	right: 0px;
	WIDTH: 20px;
	POSITION: absolute;
	HEIGHT: 430px;
	BACKGROUND-COLOR: #33CC33;
	color: #666666;
}
.footer {
	HEIGHT: 20px;
	BACKGROUND-COLOR: #33CC33;
	font-family: "Trebuchet MS", Arial, Heveltica, sans-serif;
	font-size: 0.8em;
	font-style: normal;
	font-weight: normal;
	color: #FFFFFF;
	text-align: right;
	padding-right: 50px;
}


Et le html :

<div id="global">
<div class="header">
</div>
<div class="menu">
<ul class="menugauche">
<li>Menu</li>
...etc
</div>
<div class="right"></div>
<div class="frame">
</div>
<div class="footer">
xhtml strict / css 2.0 / Creation yan.k
</div>
</div>

Modifié par yank (29 May 2006 - 11:50)
CSS

#footer {
HEIGHT: 20px;
BACKGROUND-COLOR: #33CC33;
font-family: "Trebuchet MS", Arial, Heveltica, sans-serif;
font-size: 0.8em;
font-style: normal;
font-weight: normal;
color: #FFFFFF;
}

.foot_left {
width: 100px;
float: left;
}

.foot_right {
width: 100px;
float: right;
}


XHTML

<div id="footer">

<div class="foot_left">
Blablablabla
</div>

<div class="foot_right">
Blablablabla
</div>

</div>


A partir de là, tu dimensionnes tes deux flottants et les places comme tu veux.
Merçi beaucoup !!! en effet ça fonctionne parfaitement Smiley lol

En fait je me demande du coup, est ce que mes class me servent à quelque chose ? (.menu, .frame , .entete...)

Est ce que je devrais pas les faire en div conteneur ?

J'ai bien lu la difference entre class et div dans les tutos...mais y a t'il vraiment une difference ? je n'ai pas besoin de changer mon code...?

Tiens je viens de voir ca :

width: 100px;

A quoi sert le 100 px ? la j'ai mis mon texte par contre il doit y en avoir trop car il se met en colonne, donc je suppose qu'il faut que je mette plus que 100 px, j'ai bien compris ? Smiley rolleyes

Pour finir j'ai enlevé les 100px et mon texte se met normalement en ligne...c'est ce que je voulais mais j'ai pas compris pourquoi du coup...le coup des 100 px Smiley ravi

En tout cas merci Smiley cligne
Modifié par yank (29 May 2006 - 12:12)
Foula, je crois que tu confonds un peu des trucs ^^

Il y a deux types de deux différences :
- Les div et les span,
- Les id et les class.

Un div est un contenant de type "block". La balise "p" étant un exemple de "block".
Un span est un contenant de type "en ligne". La balise "em" étant un autre exemple.

Ainsi :
<div>Titi</div><div>Toto</div><div>Tata</div> Apparaitront les uns en dessous des autres (chacun constituant un "block")
Alors que la même chose avec des spans les mettra les uns à la suite des autres.

D'un autre côté on a les "id" et les "class". Ca, ca se joue du côté CSS. L'on peut dire qu'une ID est une classe unique, car elle ne doit apparaitre qu'une unique fois dans ta page XHTML. Dans ta feuille de style, une id commence par dièse (#), et une class par un point (.).

Ensuite, un "conteneur" est un terme employé pour définir une chose qui contient des trucs (un div est un conteneur ^^). Un conteneur peut être définit par une id ou un class.

Concernant ton code, le changer n'est pas nécessaire, le principal étant que tu t'y repère.

Pour ma part j'ai pris tardivement l'habitude d'utiliser au maximum des id à la places des class afin de mieux me repérer dans mon code, mais ce n'est pas une obligation.

Espérant avoir répondu à tes questions et avoir été un minimum clair Smiley confused
Carrement ! merçi de m'avoir éclairé sur le sujet Smiley biggrin

C'est vrai que je comprenais un peu de travers Smiley confused

Merçi bien Smiley biggrin
C'est bien sauf qu'il y a une petite difference de positionnement entre IE et firefox...de pas grand chose mais bon j'aimerai bien que ça soit parfait...

par exemple j'ai mis


#footer {
HEIGHT: 20px;
BACKGROUND-COLOR: #33CC33;
font-family: "Trebuchet MS", Arial, Heveltica, sans-serif;
font-size: 0.8em;
font-style: normal;
font-weight: normal;
color: #FFFFFF;
}

.foot_left {
margin-left: 25px;
float: left;
}

.foot_right {
margin-right: 25px;
float: right;

}


Dans IE l'eccart est plus important que firefox...comment cela se fait t'il ? Smiley rolleyes

Merçi Smiley biggrin
Dans IE l'eccart est plus important que firefox concernant mes div class foot...comment cela se fait t'il ? Smiley rolleyes
Sujet clos
Aller à