Rechercher : dans
Par :

Problème css : Div de positionnement

Dernière réponse le 21 jan 2009 à 01:21:29 rogerfon, le 10 sep 2006 à 23:26:48 
 Signaler ce message aux modérateurs

Bonjour à tous,
Je découvre les joies des CSS et plus particulièrement au niveau du positionnement. Je travaille avec dreamweaver mx 2004 que je trouve sympa pour dessiner les "calques" ...enfin les div :-) . Voici mon problème : j'ai fait 5 div : bannière, menu hori, menu vertical , page , bas de page . Les boîtes sont positionnées avec "position: absolute;" et cela marche très bien ... MAIS ; comme il s'agit d'un site dynamique , le contenu de la page varie ... conclusion le pied de page se retrouve au milieu des pages longues .... . J'ai réglé le problème en mettant "position :relative" et en imbriquant le boîte div "pied de page" dans la boîte "page" ... cela marche (sur le site) MAIS quand je vais dans Dreamweaver, (en mode création) , il ne m'affiche pas cela correctement.... comme je suis un grand débutant, je me disais qu'il y a avait peut-être un moyen simple de "dire" à la boîte pied de page de se mettre en dessous de la boîte page sans l'imbriquer. Je ne sais pas si c'est clair ... merci pour votre compréhension et votre indulgence .
Roger [cligne]
ps : j'oubliais , j'ai essayé ceci "overflow: scroll;" sur la page c'est sympa on dirait des frames... mais ce n'est pas que je cherche

Meilleures réponses pour « Problème css : Div de positionnement » dans :
Les CSS pour présenter vos images VoirPour présenter agréablement vos images, vous pouvez intégrer quelques codes supplémentaires dans votre CSS et vous en servir à bon escient. Elles sont bien sur modulables en fonction de la charte graphique de votre site. Utilisation Mettez les codes...
Créer une DIV avec transparence VoirLes DIV transparents en CSS Vous voulez rendre une DIV transparente ? Rien de plus simple, il suffit d'utiliser une des techniques CSS suivantes : Rendre le DIV ainsi que le contenu transparent Le div lui même sera transparent, mais aussi...
Popup en CSS, sans Javascript VoirVoici comment réaliser une popup d'information en pure CSS, sans Javascript. L'astuce est d'utiliser :hover de manière à utiliser des CSS différents au passage du curseur. Parmis les attributs CSS modifiés, on utilise display:none afin de...
Positionner des éléments grâce aux CSS VoirIl est possible grâce aux feuilles de style de positionner au pixel près du texte ou des images grâce aux balises et . Cela est possible avec les versions 4 de Netscape et d'Internet Explorer, cependant cette technique reste hasardeuse...
Les classes de style (CSS) VoirLes classes et les ID Les classes Il peut s'avérer intéressant d'affecter des styles différents à des mêmes balises. Pour cela les spécifications CSS ont introduit le concept de classe. La définition des classes est aussi simple que celles des...
DHTML - La notion de couche VoirQu'est-ce qu'une couche? Le DHTML est basé sur une fonctionnalité provenant de la norme 4.0 du HTML: les feuilles de style en cascade de positionnement, aussi appelée CSS-P (Cascading Style Sheets Positionning). Celles-ci permettent de définir des...

1

king, le 11 sep 2006 à 12:21:08

Ce que voit dreamweaver, n'a guère d'importance, faut vérifier avec les navigateurs.
Note que NVU tient compte du css (même externe) et qu'il lit correctement le positionnement.

Répondre à king

2

Ssylvainsab, le 12 sep 2006 à 17:10:43

Tu peux aussi utiliser les float :

<div>
<div id="banniere"></div>
<div id="menuvertical"></div>
<div id="menuhori" </div>
<div id="page"></div>
<div id="basdepage"></div>
</div>


et le code css qui va avec :
div#banniere
{float:top;}
div#menuvertical
{float:left;}


Je pense que tu n'as pas besoin de mettre de style pour le reste, si tu as mis les div dans l'ordre indiqué plus haut ils se mettront comme il faut.

Mais je pense que ca serait plus facile en faisant moins de blocs, par exemple un seul pour le menu ou un seul pour la page.

Le div qui entoure tout, c'est aussi pour le placement. Sylvain

Répondre à Ssylvainsab

3

sebsauvage, le 12 sep 2006 à 17:41:23
  • +2

Un exemple de positionnement CSS pour la mise en page:
http://tjkdesign.com/articles/one_html_markup_many_css_layou­ts.asp

Répondre à sebsauvage

4

Ssylvainsab, le 12 sep 2006 à 19:07:19

Ah oui, tu l'as marqué sur del.icio.us ! :p
Pas mal cet exemple. Sylvain

Répondre à Ssylvainsab

5

Gihef, le 12 sep 2006 à 20:21:50
  • +1

Bonjour,

Une solution :
http://forum.alsacreations.com/faq/#item25
-- > Nous avons su vous aider ? Alors, aidez-nous, dites-le et
-- > • cochez le problème comme résolu. Merci.

Répondre à Gihef

6

link 11, le 20 oct 2007 à 22:09:55

Bonjour, jai un petit pb, quand j'alume css et ke je choisit un serv sa marche tres bien mais au bou de 2 ou 3 minutes css se ferme et menvoie un message d'erreur <<failed to lock vertex buffer in CMeshDX8::lockvertex buffer>> ou encore <<internal driver error in IDirect3DDEvice9::present>> donc je c vraiment po koi faire merci d'avance

Répondre à link 11

7

Gihef, le 21 oct 2007 à 00:16:57

Bonjour,

Essaye d'adapter dans un français plus lisible.
Pose plutôt ta question ici.
Mais avant, vérifie avant qu'on parle bien de la même chose : CSS.

--

Répondre à Gihef

8

gryzzly, le 21 oct 2007 à 00:20:57

Lol,

salut ici,

moi ce genre de messages HS, je laisse tomber maintenant... faute à la lassitude ? à un temps moindre aussi...
mais rassures toi, il a posté son message n'importe où : "son" css, c'est ça.
Forcément... ©brupala : Le méchant nounours ©Moi

Répondre à gryzzly

9

Gihef, le 21 oct 2007 à 02:53:21

La lassitude me reprendra (-;

--

Répondre à Gihef

10

link 11, le 21 oct 2007 à 09:56:57

Bonjour, ki aurai une reponse mieux ke sa svp merci :/

Répondre à link 11

11

RAD ZONE, le 21 oct 2007 à 10:12:13

Bonjour, ki aurai une reponse mieux ke sa svp merci :/

TU N AS PAS COMPRIS QUE ICI ON PARLE PROGRAMATION WEB !!!!!! ET PAS DE JEU VIDEO

CSS veut dire Cascading Style Sheet pour nous !!!

RAD
♣ La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣

Répondre à RAD ZONE

12

bigmama, le 3 sep 2008 à 16:34:05

Pour les Problème CSS ie6 ie7
Voici un bon article : http://www.faclic.com/html/probleme-css-ie6-ie7-93.html

Répondre à bigmama

13

 Bannière de bas de page, le 21 jan 2009 à 01:21:29

Salut,

je désespère d'arriver à mettre une bannière de bas de page. Tout mon site s'affiche bien sinon.
La ligne de la bannière devrait être ceci en css:

background: url(../../media/bottombanner.jpg) no-repeat;

Voici le css entier. La partie bas de page en css est logiquement dans "footer":

#footer {
width : 980px;
height : 45px;
padding-top : 0;
padding-bottom : 0;
margin-left : auto;
margin-right : auto;
color : #b0b0b0;
text-align : center;
background: url(../../media/bottombanner.jpg) no-repeat;
}


la feuille css complète:


body {
font-family : Verdana, Geneva, Arial, helvetica, sans-serif;
font-size : 10pt;
padding : 0;
margin-top : 10px;
}
#nav {
width : 980px;
height : 22px;
border-top : 5px solid black;
position : relative;
margin : 0;
margin-top : 0;
margin-bottom : 0;
padding-left : 0;
text-align : right;
background-color: #9f9bd1;
background: url(../../media/topbanner.png) no-repeat;
border-bottom : 1px dotted #666666;
}
#nav li {
padding-left : 16px;
padding-right : 10px;
display : inline;
height : 20px;
background: url(../../media/traitvertical2.jpg) no-repeat;
}
#nav li a {
/*padding-left : 10px;*/
/*padding-right : 12px;*/
color : #FFFFFF;
text-decoration : none;
font : bold normal normal 10px/20px "Lucida Grande", Lucida, Verdana, sans-serif;
}
#nav li a:hover
{
color: #cb1625;
}
#main {
font-family : Verdana, Geneva, Arial, helvetica, sans-serif;
font-size : 9pt;
width : 980px;
margin-left : auto;
margin-right : auto;
border-right : 1px solid #666666;
border-left : 1px solid #666666;

}
#hero {
margin : 0 10px;
width : 200px;
height : 106px;
background-image : url(../../media/banner.jpg);
background-repeat : no-repeat;
float : left;
}
#hero2 {
margin : 0;
margin-left: 286px;
margin-right: auto;
height : 106px;
background-image : url(../../media/topbanner.jpg);
background-repeat : no-repeat;
}
.gear {
width : 970px;
height : 0px;
margin-top : 0;
margin-left : 15px;
}
#header h1 {
position : absolute;
left : 94px;
top : 8px;
color : white;
font-size : 48px;
font-weight : bold;
margin : 0;
}
#header em {
font-style : normal;
text-decoration : underline;
}
#wrapper {
display : inline;
/*display : block;*/
padding-top : 0;
background-color : white;
position : relative;


}
#wrapper:after {
content : '.';
display : block;
height : 20;
clear : both;
visibility : hidden;
background: url(../../media/bottombanner.png) no-repeat;


}
#sidebar {
/*background: url(../../media/menu-fond.jpg) no-repeat;*/
float : left;
text-align : center;
margin-left : 0;
margin-top : 0;
position : relative;
padding : 10px 10px 20px 10px;
width : 160px;
height : 820px;
border-right : 1px dotted;
}
#aktuelles {
float : right;
text-align : center;
margin-left : 0;
margin-top : 0;
position : relative;
padding : 0px 10px 20px 10px;
width : 160px;
height : 820px;
background: #fff url(../../media/imagenews.jpg) no-repeat center 200px;
border-left : 1px dotted;
}
#news h4 {
/*background-color : #ae8055;*/
color : #4daeb4;
}
#sidebar h3 {
font-size : 18px;
border-bottom : 1px solid black;
margin-bottom : 4px;
margin-top : 16px;
clear : both;
}
#sidebar ul {
margin-left : 1em;
padding-left : 0;
}
#sidebar p {
margin-bottom : 8px;
}
#sidebar div.subtabs ul {
list-style : none;
width : 155px;
margin : 0;
padding : 0;
}
#sidebar div.subtabs ul ul {
list-style : none;
width : 130px;
margin : 0;
padding : 0 0 0 25px;
;
}
#sidebar div.subtabs ul ul ul {
list-style : none;
width : 125px;
margin : 0;
padding : 0 0 0 5px;
}
#sidebar div.subtabs ul a {
width : 100%;
margin : 3px;
text-align : left;
text-decoration : none;
display : block;
padding : 3px 3px 3px 5px;
border-bottom : 1px solid #949494;
border-left : 4px solid #cccccc;
font: bold 0.8em Verdana, Arial, Helvetica, sans-serif;
}
#sidebar div.subtabs ul a:hover {
text-decoration : none;
background : #eaeaea url(img/menubg2.gif) repeat-x left;
color : #da0434;
border-left : 4px solid #110200;
}
/*#sidebar div.subtabs ul a:visited {
text-decoration : none;
background : #eaeaea url(img/menubg2.gif) repeat-x left;
color : #da0434;
border-left : 4px solid #110200;
}*/

#content {
margin : 0 0 0 180px;
min-height : 310px;
height : auto !important ;
/*height : 600px;*/
width : 600px;
display : block;
position : relative;
padding : 0 3px 20px 10px;
color : #333333;
#content h1 {
font-size : 20px;
margin : 0;
text-decoration : underline;


}
#content h2 {
font-size : 18px;
margin : 0;
text-decoration : underline;
}
#content .date {
float : right;
}
#content .postedBy {
float : left;
}
#content .meta {
height : 1em;
}
#content p {
text-align : justify;
text-indent : 1em;
line-height : 1.3em;

}
.comments {
border-top : 1px dotted #666666;
border-bottom : 1px dotted #666666;
padding : 4px;
text-align : right;
margin-bottom : 2em;
background-image : url(images/comment_edit.gif);
background-repeat : no-repeat;
background-position : center left;
}
a {
color : #666666;
}
.pullout {
background-color : #eeeeee;
padding : 5px;
float : right;
margin : 8px;
}
#footer {
width : 980px;
height : 45px;
padding-top : 0;
padding-bottom : 0;
margin-left : auto;
margin-right : auto;
color : #b0b0b0;
text-align : center;
}
.right {
float : right;
}
.csskeyword {
color : blue;
}
.cssvalue {
color : red;
}
p.caption {
text-align : center;
}
small.super {
vertical-align : top;
font-size : 0.75em;
line-height : 1.3em;
}
.nodisplay {
display : none;
}
.menu_current {
background-color: #666666;
color: #ffffff;
}


Aucune bannière de bas de page ne s'affiche.

Qui peut m'aider?

Répondre à Bannière de bas de page
Collection CommentÇaMarche.net