Sujet Précédent Sujet Suivant

Problème Doctype/CSS

Fermé
Dedee - 15 nov. 2014 à 13:03
elgazar Messages postés 5841 Date d'inscription mercredi 30 octobre 2013 Statut Membre Dernière intervention 17 mars 2021 - 17 nov. 2014 à 09:54
Bonjour,

Je refais mon site d'une manière différente, mais seulement, j'ai un soucis ! Sans le Doctype, tout va bien, mais dès que je le mets, le CSS est présent, mais pas totalement. Quel que soit le doctype utilisé, pas moyen de faire fonctionner correctement... J'ai beau cherché sur internet, j'ai pas trouvé de solution, ou alors je n'utilise pas les bons mot-clés. Bref, si vous avez une solution ou une idée je suis preneuse ! Merci d'avance :)

Le but recherché est d'avoir tout le background de la page utilisé, mais avec le doctype, cela prend seulement l'espace pour le texte.

Voici mes codes : 


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="all">
			<div id="f-right"></div>
			<div id="f-left"></div>
			<div id="main"> Contenu</div>
		</div>
</body>
</html>



et : 

body{
	margin:0;
}

#all{
	position:relative;
	width:100%;
}
#f-right{
	position:absolute;
	right:0px;
	background:#e6e6e6;
	width:50%;
	height:100%;
}
#f-left{
	position:absolute;
	left:0px;
	background:#e6e6e6;
	width:50%;
	height:100%;
}
#main{
	position:relative;
	width:960px;
	margin:auto;
	min-height:100%;
	background:#fff;
	text-align:justify;
}
A voir également:

5 réponses

Réponse 1 / 5
elgazar Messages postés 5841 Date d'inscription mercredi 30 octobre 2013 Statut Membre Dernière intervention 17 mars 2021 1 322
15 nov. 2014 à 17:50
je comprends pas ce que tu veux faire avec ton code

soit tu veux trois div au même niveau et dans ce cas, il ne faut pas mettre de largeur a 50% pour les div f-left et right en plus de 960 px au milieu soit tu veux les mettre les deux au dessus de la div main et c'est tes hauteurs qui ne sont pas bonnes puisqu'ils n'est pas mathématiquement possible que deux div placée l'une sous l'autre fassent toutes les deux 100% de hauteur
0
Réponse 2 / 5
Dedee
15 nov. 2014 à 18:56
C'est bien trois div au même niveau que j'aimerai.

Voilà un schéma pour m'expliquer :
http://nsa34.casimages.com/img/2014/11/15/141115064935371836.png

A la base, j'ai déjà fait mon site et ressemble à ça :
http://nsa33.casimages.com/img/2014/11/15/141115064935438416.png

Mais comme j'avais quelques soucis pour la longueur j'ai cherché une solution plus simple, d'où les trois div pour m'occuper des couleurs du fond puis appliquer mon contenu tout en gardant le header et le footer fixe avec un scroll pour le contenu, mais sans js.

Je me suis renseignée aussi avec le linear-gradient, mais je n'arrive pas à trouver si on peut supprimer le dégradé.

En fait, et en gros j'aimerai :
- un header fixe,
- un footer fixe,
- un fond body gris
- un fond central blanc
- une longueur minimum de page et + quand ça dépasse. (car c'est le problème que je rencontre)

J'espère être assez claire sur mes explications, je suis un peu perdue, j'ai essayé plein de truc sans succès :/
0
Réponse 3 / 5
elgazar Messages postés 5841 Date d'inscription mercredi 30 octobre 2013 Statut Membre Dernière intervention 17 mars 2021 1 322
15 nov. 2014 à 21:48
Il y a plusieurs façons de faire donc en voila une comme tu peux le voir en dessous, tu as donc le header qui prends 100% de la largeur et 3 div prenant chacune 33% a qui j'ai mis un float pour les coller la première a gauche, la seconde a droite et troisième (celle du centre) se glisse entre les deux en se placant exactement au centre avec margin : 0 auto, les 3 colonnes ont une hauteur de 90% avec un minimum de hauteur différent, le footer a aussi 100% de largeur et est positionné en position absolute en bas de l'écran 

code Html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="fond"> 
<div id="header">header </div>
<div id="colonne1">gauche</div>
<div id="colonne2">droite</div>
<div id="centre">centre</div>
<div id="footer"> footer</div>

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


code css
body {
background:black;
}
div#fond{

}
div#header {
width:100%;
height:30px;
background-color:white;
color:white;
margin-bottom:20px;
}
div#colonne1 {
    float: left;
    width:33%;
    background: grey;
	height:90%;
	min-height:300px;
	
}
#centre{
	margin: 0 auto;
	background-color:white;
	width:33%;
	height:500px;
	background: white;
	height:90%;
  min-height:500px;
	
}
div#colonne2 {
    float: right;
    width: 33%;
    background: grey;
	height:90%;
	min-height:300px;
	
}
div#footer {
margin-top:10px;
width:100%;
height:30px;
background: grey;
position: absolute; bottom: 1px;
}
0
Réponse 4 / 5
Dedee
16 nov. 2014 à 12:20
Merci de prendre du temps pour m'aider. Le soucis avec le footer s'est qu'il n'est pas fixe, et quand on a trop de contenu ça passe au dessus :/

Je pense avoir la solution, enfin à voir si l'on peut faire autrement pour diminuer un peu le code css... Si tu pouvais y jeter un coup d'oeil :) 

<!doctype html>
<html>

<head>
<meta charset="utf-8">
<title>Doc</title>
</head>

<style>
html, body {
	margin:0;
	height:100%;
	background-color:#e6e6e6;
	overflow-x: hidden;
}

/** HEADER **/
.header {
   position:fixed;
   background-color:#C00;
   height:146px;
   top:0;
   left:0;
   right:0;
   z-index:10;
}

/** FOOTER **/
.footer {
   position:fixed;
   background-color:#C00;
   height:40px;
   bottom:0;
   left:0;
   right:0;
   z-index:10;
}

/** CONTENU **/
.content {
   padding:146px 0px 40px 0px;
   width:980px;
   background-color:#FFF;
   margin:auto;
   min-height:80%;
}

.contenu{
	margin: 20px 0px 5px 0px;
	background-color:#FFF;
}
</style>

<body>
	<div class="header">HEADER</div>
	<div class="content">
		<div class="contenu">CONTENU</div>
	</div>
	<div class="footer">FOOTER</div>
</body>

</html>
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
elgazar Messages postés 5841 Date d'inscription mercredi 30 octobre 2013 Statut Membre Dernière intervention 17 mars 2021 1 322
17 nov. 2014 à 09:54
dans le code que je t'ai donné, j'ai volontairement fixé le footer car je croyais que ton contenu ne dépassait pas la hauteur de la page mais si tu veux que le footer soit toujours en dessous de la colonne la plus longue, tu peux par exemple le mettre directement dans le footer comme ceci

.footer {
clear:both;
margin-top:10px;
background-color:#C00;
height:40px;

}
ainsi ton footer sera toujours en dessous mais il y a un inconvénient, si tu veux insérer une div entre le footer et les float, il faudra ensuite enlever le clear;both du footer pour le mettre dans la nouvelle div sinon elle sera aussi flottante

je te conseille donc plutôt d'insérer une div spécifique qui ne contiendra que le clear;both par exemple <div id="clear"></div> qui aura pour css #clear {clear:both;}
Non seulement, tu pourras créer toutes les div que tu veux après la div clear mais en plus tu pourras réutiliser la div clear si tu veux créer d'autres div flottante, chose que tu ne pourrais pas faire si tu mettais le clear both dans le footer
0

Discussions similaires

[CSS] Forcé retour à la ligne
aKuma59 -
zigoss -

33 réponses
trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses
HTML - définir taille bouton
Diva -
Utilisateur anonyme -

14 réponses
[CSS] Mettre un objet au premier plan
Achillion -
tiran58 -

2 réponses
Enlever le soulignement sous les liens en HTML/CSS
baissaoui -
baissaoui -

0 réponse