Problème de programmation html/Css

Fermé
DonMoi Messages postés 5 Date d'inscription mardi 8 juillet 2014 Statut Membre Dernière intervention 9 juillet 2014 - 8 juil. 2014 à 05:27
DonMoi Messages postés 5 Date d'inscription mardi 8 juillet 2014 Statut Membre Dernière intervention 9 juillet 2014 - 9 juil. 2014 à 04:41
Bonjour à tous,
voilà, deux soucis majeur qui me freine dans la conception de mon site, et je n'arrive pas à voir d'où le problème viens dans mes codes html et Css.
Tout d'abord, lorsque je crée un en-tête pour mon site, celui-ci ce crée en dessous de mon corps de ma page d'accueil que j'ai créé auparavant. C'est à dire que mon corps de page (qui se présente sous forme de mosaïque) chevauche mon en-tête. Pourtant dans mon code Css j'ai bien spécifié une position "absolute" pour mon en-tête et une "relative" pour ma "mosaïque". Ce problème me déroute sachant que je suis novice. voici le code Css qui définit les caractère de ma balise en-tête et celle de mon corps de page (à noter que dans le code html, j'ai bien positionné le code de mon en-tête avant celui de mon corps):
#top{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 150px;
background-color:#3a3a3a;
border-radius: 10px;
}
.grid{
width: 1140px;
height: 890px;
margin-left: auto;
margin-right: auto;
padding-left: 40px;
position: relative;
border-radius: 10px;
background-color: #3a3a3a;
}


Mon second problème concerne mon logo: je n'arrive pas à le placer ou je veux sur mon en-tête (je veux qu'il prennent toute la largeur de l'en-tête, et qu'il se positionne à gauche). De plus, comme je l'ai créer sur photoshop, j'ai voulu l'enregistrer spécialement pour le web pour le dissocier de son fond (afin qu'il puisse ce fondre avec le fond voulu sur mon site). Cela me crée un fichier ".html" et quand je l'insère dans mon code html comme une image normal, et que je veux voir le résultat sur une page web, il apparait un cadre blanc avec un point d'interrogation au milieu comme si l'image ne parvenait pas à être téléchargé. De plus, dans l'onglet de "mes fichier locaux (je travail sous dreamweaver) , je ne parvient pas à faire apparaitre l'image, bien que dans Finder (je suis sur mac), quand je me dirige vers le dossier de mon site, l'image s'y trouve.

Merci beaucoup pour vos réponse !!!!
A voir également:

7 réponses

Réponse 1 / 7
DonMoi Messages postés 5 Date d'inscription mardi 8 juillet 2014 Statut Membre Dernière intervention 9 juillet 2014
8 juil. 2014 à 08:42
mon second soucis est plus secondaire, aujourd'hui la priorité va au 1er. merci encore
0
Réponse 2 / 7
Pierrecastor Messages postés 41491 Date d'inscription mercredi 5 novembre 2003 Statut Modérateur Dernière intervention 10 avril 2025 4 147
8 juil. 2014 à 08:49
Salut

L'idéal serait d'avoir le code HTML complet avec le CSS complet aussi. Ou carrément un lien vers la page web si elle est héberger en ligne.

Pour ton logo, il faut que tu l'exportes en .png, exporter pour le web, c'est encore autre chose.
0
Réponse 3 / 7
DonMoi Messages postés 5 Date d'inscription mardi 8 juillet 2014 Statut Membre Dernière intervention 9 juillet 2014
8 juil. 2014 à 08:55
voila le code html:<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>C&A</title>

<link rel="stylesheet" type="text/css" href="style générale(transparence).css">

<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[i])&&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[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

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[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].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[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>

</head>

<body onLoad="MM_preloadImages('fichier image/logo-roll hoover.jpg')">

<header id="top">
<div id="en-tête principale">
</div>
</header>

<div class="grid">

<div id="tile1" class="tile"><a href="les pages du site/être créateur.html"><img src="fichier image/créateur.jpg" width="270" height="270" alt="image zone être créateur"/></a>
</div>

<div id="tile2" class="tile"><a href="les pages du site/être client.html"><img src="fichier image/client.jpg" alt="image zone client" width="270" height="270" /></a>
</div>

<div id="tile3" class="tile"><a href="Qui sommes-nous.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('qui sommes-nous?','','fichier image/logo-roll hoover.jpg',1)"><img src="fichier image/logotigrefinit.jpg" alt="logo centrale avec hoover" width="560" height="560" id="qui sommes-nous?"></a>
</div>

<div id="tile4" class="tile"><a href="les pages du site/nos services.html"><img src="fichier image/service.jpg" alt="Image zone services" width="270" height="270" /></a>
</div>

<div id="tile5" class="tile"><a href="les pages du site/FAQ.html"><img src="fichier image/image FAQ.jpg" alt="image zone FAQ" width="270" height="270" /></a>
</div>

<div id="tile6" class="tile"><a href="les pages du site/leconcept.html"><img src="fichier image/leconcept.jpg" alt="image zone leconcept" width="560" height="270" /></a>
</div>

<div id="tile7" class="tile"><img src="fichier image/Facebook.png" alt="logo lien facebook" width="270" height="270"/>
</div>

<div id="tile8" class="tile"><img src="fichier image/twitter - copie.png" alt="logo lien twitter" width="270" height="270" />
</div>

</div>



</body>
</html>

et voila le css:

@charset "UTF-8";
/* CSS Document */

body{
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
color:#FFF;
background-color:#333;
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity:0,5;
}

#top{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 150px;
background-color:#3a3a3a;
border-radius: 10px;

}



.grid{
width: 1140px;
height: 890px;
margin-left: auto;
margin-right: auto;
padding-left: 40px;
position: relative;
border-radius: 10px;
background-color: #3a3a3a;
}

.tile {
background-color: #2a2a2a;
position:absolute;
width: 270px;
}

#tile1{
top: 20px;
left: 20px;
width: 270px;
height: 270px;

}
#tile2{
top: 310px;
left: 20px;
width: 270px;
height: 270px;

}
#tile3{
top: 20px;
left: 310px;
width: 560px;
height: 560px;

}
#tile4{
top: 20px;
left: 890px;
width: 270px;
height: 270px;

}

#tile5{
top: 310px;
left: 890px;
width: 270px;
height: 270px;

}

#tile6{
top: 600px;
left: 20px;
width: 560px;
height: 270px;

}

#tile7{
top: 600px;
left: 600px;
width: 270px;
height: 270px;

}

#tile8{
top: 600px;
left: 890px;
width: 270px;
height: 270px;

}
0
Réponse 4 / 7
resecu Messages postés 18 Date d'inscription mardi 8 juillet 2014 Statut Membre Dernière intervention 1 septembre 2014 4
8 juil. 2014 à 10:50
Il nous faudrait plus de code pour mieux comprendre ton problème, n'hésites pas à nous fournir ta page HTML ainsi que ton CSS
0

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

Posez votre question
Réponse 5 / 7
Utilisateur anonyme
8 juil. 2014 à 11:36
C'est parce que le #top est en absolu que l'élément suivant passe devant : un absolu, il est hors du flot d'éléments.
0
Réponse 6 / 7
DonMoi Messages postés 5 Date d'inscription mardi 8 juillet 2014 Statut Membre Dernière intervention 9 juillet 2014
8 juil. 2014 à 19:11
c'est toute ma page html et tout mon css ça.
0
Réponse 7 / 7
DonMoi Messages postés 5 Date d'inscription mardi 8 juillet 2014 Statut Membre Dernière intervention 9 juillet 2014
9 juil. 2014 à 04:41
merci bcp. C'était exactement ça : j'ai changé dans mon #top la position absolute par relative et sa a fonctionné parfait. Merci bcp !
0

Discussions similaires

la balise <br> ou <br />
faamugol -
rwaness -

8 réponses
<br> ou <br /> ou </br>
corentin.93 -
jessy006 -

11 réponses
Balise </br>
erf -
erf -

3 réponses
Saut de lignes sans <br/>
Rapi-shiny -
Rapi-shiny -

13 réponses
Espace HTML
guilhem_mdg -
hodor -

10 réponses