Titre: Probleme d'integration
Posté par: Cassangel le le 16-09-2011 a 09:54:53
Salut,
Je cherche depuis une heure parmis mes regles de css et j'arrive pas a trouver ce qui cloche.
Je suis en train de realiser ma maquette avec ce webdesign :
http://img33.imageshack.us/img33/5075/webdesigngecko2.png (http://img33.imageshack.us/img33/5075/webdesigngecko2.png)
Mon probleme est au niveau des 2 rectangle gris du foot.
Il ne s'affiche pas, ou le bg ne s'affiche pas...
Mon code :
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>maquette</title>
<style type="text/css">
body {
background-color: #000;
padding: 0px;
margin-top: 0px;
}
#container {
padding: 0px;
width: 1200px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
height: auto;
}
#container #foot {
background-attachment: fixed;
background-image: url(img/bgfoot.jpg);
background-repeat: no-repeat;
background-position: center center;
padding: 0px;
height: 180px;
width: 920px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#container #head #nav li {
list-style-type: none;
}
#container #head #nav li ul {
margin: 0px;
padding: 0px;
float: left;
height: auto;
width: auto;
clear: right;
list-style-type: none;
}
#container #content {
margin: 0px;
padding: 0px;
height: auto;
width: auto;
display: inline;
}
#container #content #decoleft {
float: left;
height: auto;
width: auto;
margin: 0px;
padding: 0px;
}
#container #content #article {
float: left;
height: 1294px;
width: 918px;
margin: 0px;
padding: 0px;
background-image: url(img/bgcontent.jpg);
}
#container #content #decoright {
float: left;
height: auto;
width: auto;
margin: 0px;
padding: 0px;
}
#container #plan {
height: 190px;
width: 920px;
background-image: url(img/bgplan.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
padding: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
</style>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;]
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>
<body onload="MM_preloadImages('img/servicesover.jpg','img/contactover.jpg')">
<div id="container">
<div id="head">
<div id="nav">
<li>
<ul><a href="/index.html"><img src="img/logo.jpg" width="550" height="236" alt="GeKKos Consulting" /></a></ul>
<ul><div id="accueil"><a href="/index.html"><img src="img/accueilactive.jpg" width="150" height="236" alt="Accueil" /></a></div></ul>
<ul><div id="services"><a href="/services.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','img/servicesover.jpg',1)"><img src="img/servicesinactive.jpg" alt="Services" name="Image7" width="149" height="236" border="0" id="Image7" /></a></div></ul>
<ul><div id="contact"><a href="/contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','img/contactover.jpg',1)"><img src="img/contactinactive.jpg" alt="Contact" name="Image8" width="149" height="236" border="0" id="Image8" /></a></div></ul>
<ul><img src="img/headright.jpg" width="200" height="236" /></ul>
</li>
</div>
</div>
<div id="content">
<div id="decoleft"><img src="img/decoleft.jpg" width="141" height="1294" /></div>
<div id="article"></div>
<div id="decoright"><img src="img/decoright.jpg" width="141" height="1294" /></div>
</div>
<div id="plan"></div>
<div id="foot"></div>
</div>
</body>
</html>
|
|
Merci a vous si vous avez une solution. ^^" |
Titre: Re:Probleme d'integration
Posté par: lukos le le 16-09-2011 a 19:36:06
Difficile de voir sans avoir une "vrai" page devant soit, toutefois il y a quelques trucs qui m'interpelle:
1) Pourquoi remettre #container avant chacun de tes éléments?
2)Pourquoi avoir mis tes éléments en background:fixed? Je t'invite a (re)lire cet article:
http://www.alsacreations.com/tuto/lire/608-initiation-positionnement-css.html
3)Pourquoi avoir mis ton css dans ton <head>? Ca ralentira ton site puisqu'il faudra a chaque fois recharger le css, alors qu'avec un css externe une fois c'est bon. |
Titre: Re:Probleme d'integration
Posté par: Cassangel le le 17-09-2011 a 10:06:07
J'ai regle mon probleme.
J'ai mis des "clear bottom" sur les elements qui ne fonctionner pas.
Effectivement, j'ai virer les "fixed" des background".
Pour les #container devant tout les elements, c'est dreamweaver qui me les marques automatiquement (sa gene dans quelques chose ? je suis un debutant ^^") et je pensais faire une feuille de style externe apres avoir finit ma maquette. |
Titre: Re:Probleme d'integration
Posté par: lukos le le 17-09-2011 a 10:08:55
| Le problème c'est dreamweaver ;D ;D (Nan je suis sérieux...) |
Titre: Re:Probleme d'integration
Posté par: Cassangel le le 18-09-2011 a 11:23:42
| C'est pas un bon logiciel Dreamweaver ? |
Titre: Re:Probleme d'integration
Posté par: lukos le le 18-09-2011 a 13:31:11
| Bah c'est un logiciel quoi, surement le "meilleur" dans sa catégorie mais après... C'est pas fameux fameux quoi. |
Titre: Re:Probleme d'integration
Posté par: MarvinLeRouge le le 26-09-2011 a 12:31:00
Salut,
Un logiciel d'assistance au codage est parfois une gène quand on est habitué à travailler "à la main" (comme lukos probablement, et comme moi).
Mais la question n'est pas là : aurais-tu une url histoire qu'on puisse tester ta page en ligne, stp ? |
Titre: Re:Probleme d'integration
Posté par: deadmix le le 27-09-2011 a 15:25:54
| les logiciels WYSIWYG aide a créer le design mais il faut tout de meme savoir coder aussi et lire les codes générer par ses logiciels.. certe il y'auras un problem d'affichage avec les Web Browsers, surtout Internet Explorer mais il faut bien apprendre a lire les codes aussi :) |
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|