Flux rss
Rechercher : dans
Par : Mots clés Nom d'utilisateur
Messages sans réponse

Problème css : Div de positionnement

rogerfon, le dimanche 10 septembre 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

1

king, le lundi 11 septembre 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 mardi 12 septembre 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 mardi 12 septembre 2006 à 17:41:23

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 mardi 12 septembre 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 mardi 12 septembre 2006 à 20:21:50

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 samedi 20 octobre 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 dimanche 21 octobre 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 dimanche 21 octobre 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 dimanche 21 octobre 2007 à 02:53:21

La lassitude me reprendra (-;

--

Répondre à Gihef

10

link 11, le dimanche 21 octobre 2007 à 09:56:57

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

Répondre à link 11

11

RAD ZONE, le dimanche 21 octobre 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 mercredi 3 septembre 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 mercredi 21 janvier 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
Div et css centrer txt verticalement (Résolu) Bonjour, je souhaite centrer le texte verticalement dans mon tableau. j'utilise des mais le texte se trouve en haut de la cellule. CSS: div.nav { text-align:right; vertical-align:middle; background-image:url(nav.png); height: 33px;... www.commentcamarche.net/forum/affich-7462634-div-et-css-centrer-txt-verticalement
DIV css (Résolu) SALUT j ai un petit problème avec un alignement de div en css!! j ai cree 2 petite div en bas de page css div#w3c { position: fixed; left: 0; bottom: 0px; } div#css { position: fixed; right: 0; bottom: 0px; } donc comme vous voyez elles sont toute 2... www.commentcamarche.net/forum/affich-3037108-div-css
CSS, DIV et formulaire Bonjour, j'ai un fichier css pour le squelette de mon site spip que je doit modifier pour pouvoir afficher un formulaire. Le soucis ce situe au niveau du div : BODY { font : 10pt Verdana, Geneva, Arial, Helvetica, sans-serif; color : #000000;... www.commentcamarche.net/forum/affich-7045449-css-div-et-formulaire
Les CSS pour présenter vos imagesPour 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... www.commentcamarche.net/faq/sujet-9100-les-css-pour-presenter-vos-images
Menu CSS DIVBonjour, Après de vaines recherches sur google, je m'adresse à vous ! J'ai réalisé un site avec du XHTML / CSS. Mon site ressemble à l'exemple développé sur http://pbnaigeon.developpez.com/tutoriel/CSS-HTML/mise-en-page-CSS/. Comment faire pour qu'un... www.commentcamarche.net/forum/affich-2984108-menu-css-div
Les css et la superposition des div (Résolu)Bonjour à tous, Une question sur les css. J'utilise des div avec des positions absolues. Ces positions dépendent du haut gauche de la page, comment faire pour que la position de référence soit de UN de mes objets dans ma page? En effet j'aimerai... www.commentcamarche.net/forum/affich-830532-les-css-et-la-superposition-des-div
[CSS] Ajuster hauteur divBonjour, j'ai un petit soucis (qui me tracasse quand même depuis quelques heures) avec mon CSS que vous trouverez ci dessous : Le problème est le suivant, comment avoir mes 2 div menu et contenu qui s'ajustent automatiquement en hauteur en fonction du... www.commentcamarche.net/forum/affich-6317723-css-ajuster-hauteur-div
Positionner des éléments grâce aux CSSIl 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... www.commentcamarche.net/contents/css/cssposition.php3
DHTML - La notion de coucheQu'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... www.commentcamarche.net/contents/dhtml/dhtmllayer.php3