Mise ne page cassé quand je met la balise <script>

Résolu
P53ud0 Messages postés 29 Statut Membre -  
P53ud0 Messages postés 29 Statut Membre -
Bonjour ( je débute dans le javascript )

J'ai un projet a faire au lycée, ils nous demandent de faire une page web sur le zoo.
Lorsque j'insere la balise <script src > dans le head, la mise en page du CSS ce casse a moitier. Que le fichier script soit plein ou vide, ou qu il soit directement mit dans le html ou pas, le resultat est le meme. Quelqu"un pourrait m expliquer ?
Comme vous pouvez le voir sur les 2 images ci dessous ( le header et les fleches )

http://image.noelshack.com/fichiers/2016/43/1477838090-page1.png
http://image.noelshack.com/fichiers/2016/43/1477838095-page2.png

Désoler je ne sais pas faire de spoiler sur ce site...

Mon Html: 

<!DOCTYPE html>
<html>
	<head>
		<title>ZOOLAND</title>
		<meta charset="utf-8"/>
		<link rel="stylesheet" href="index.css" type="text/css"/>
		<script src="azerty.js"></script>
	</head>
	<body>	
		<section  class = "global">
			<header>
				<img id = "logo" src = "image/logo.jpg" width ="350" alt ="logo">
					<ul id ="ul_head">
						<li class = "li_header"><a class = "a_header" href = "index.html">ACCUEIL</a></li>		
						<li class = "li_header"><a class = "a_header" href = "photos.html">PHOTOS</a></li>		
						<li class = "li_header"><a class = "a_header" href = #>TARIFS</a></li>		
						<li class = "li_header"><a class = "a_header" href = #>VISITER</a></li>		
						<li class = "li_header"><a class = "a_header" href = #>ACTIVITES</a></li>		
						<li class = "li_header"><a class = "a_header" href = #>RESTAURATION</a></li>		
						<li class = "li_header"><a class = "a_header" href = #>CONTACT</a></li>		
					</ul>
			</header>
			
			<section id = "lapage">
				<article id = "article_gauche">
					<h2>L'histoire du ZOOLAND</h2>
					<br>
					<p id ="text1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc euismod elementum lacinia. Nunc id metus et eros laoreet vestibulum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris aliquet sapien et lectus congue pharetra. Fusce fermentum sed risus in consectetur. Aenean ultricies, dui nec tempus bibendum, est magna efficitur diam, rutrum tincidunt urna est vel nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam non tortor tellus. Fusce vulputate egestas maximus. Praesent eu fermentum ex. Duis convallis mollis fringilla.</p>
					
					<section id = "galerie">
						<div id ="image_voir">
							<img id ="image_v" src ="image/img1.jpg" alt = "image du zoo" width=800 height=450>
						</div>
						<div id ="fleche_gal">
							<img id ="fleche_gauche" src = "image/fleche.png" alt = "fleche" width= 120>
							<img id ="fleche_droite" src = "image/fleche.png" alt = "fleche" width= 120>
						</div>
					</section>
					
				</article>
				<article id = "article_droit">
					<div id ="meteo"></div>
					<table>
						<th> HORAIRES </th>
						<tr>
							<td>Lundi:</td>
							<td>8h - 11h</td>
							<td>13h - 18h</td>
						</tr>
						<tr>
							<td>Mardi:</td>
							<td>8h - 11h</td>
							<td>13h - 18h</td>
						</tr>
						<tr>
							<td>Mercredi:</td>
							<td>8h - 11h</td>
							<td>13h - 18h</td>
						</tr>
						<tr>
							<td>Jeudi:</td>
							<td>8h - 11h</td>
							<td>13h - 18h</td>
						</tr>
						<tr>
							<td>Vendredi:</td>
							<td>8h - 11h</td>
							<td>13h - 18h</td>
						</tr>
						<tr>
							<td>Samedi:</td>
							<td>8h - 11h</td>
							<td>13h - 18h</td>
						</tr>
					</table>
				</article>
			</section>
		</section>
	</body>
</html>



MON CSS 

/* RESET */

* {
	padding:0px;
	margin:0px;
	font-family:gourmand;
}
body {
	background-color:#E6E6E6;
}

header {
	background-color:#FFFFFF;
	height:75px;
	width:1600px;
	position:fixed;
}

.a_header {
	text-decoration:none;
	color:black;
	padding: 29 6 25 6;
}

.li_header {
	display:inline;

}

#ul_head {
	margin-top:-38px;
	margin-left:500px;
}

#logo {
	margin:10 0 0 20;
}

.a_header:hover {
	background-color:#E6E6E6;
	border-bottom:2px black solid;
}

#lapage {
	margin-left:15%;
}

#article_gauche {
	margin-top:115px;
	background-color:yellow;
	float: left;
	width:800px;
	height:800px;
	margin-right:10px;
}

#article_droit {
	margin-top:115px;
	background-color:green;
	float: left;
	width:280px;
	height:800px;
}

h2 {
	text-align:center;
	margin-top:20px;
}

#text1 {
	width:90%;
	margin:auto;
	text-align: justify;
}

#meteo {
	height:250px;
	width:250px;
	background-color:red;
	margin:auto;
	margin-top:20px;
}

table {
	margin:auto;
	margin-top:20px;
}

#galerie {
	background-color:brown;
	width:100%;
	height:400px;
	margin-top:45px;
}

#fleche_droite, #fleche_gauche {
	opacity:0.5;
}

#fleche_droite:hover, #fleche_gauche:hover {
	cursor:pointer;
	opacity:0.8;
}

#fleche_gal {
	width:800px;
	height:120px;
	margin:auto;
	position:absolute;
	top:380; left:0; bottom:0; right:310;
}

#fleche_gauche {
	transform:rotate(180deg);
	position:absolute;
}

#fleche_droite {
	position:absolute;
	right:0;
}
A voir également:

3 réponses

Réponse 1 / 3
telliak Messages postés 4387 Statut Membre 883
 
Re,
A mon avis ton CSS a un défaut dans la définition :
#fleche_gal {
width:800px;
height:120px;
margin:auto;
position:absolute;
top:380px; left:0; bottom:0; right:310px;
}
top et right y sont définis sans px.
Quant au coup du script, j'y comprends rien...
1
P53ud0 Messages postés 29 Statut Membre
 
Merci beaucoup telliak sa a marche ! des que j'ai ajouter les px le problème a étais résolut, mais je n'arrive quand même pas a comprendre pourquoi sa marche sans px si il n y a pas de balise <script>
0
Réponse 2 / 3
cs_PaTaTe Messages postés 2230 Statut Contributeur 497
 
Utilise un éditeur de texte style notepad++ pour écrire tes pages. avec la coloration syntaxique, tu devrait pouvoir trouver la faille je pense ^^

--
0
P53ud0 Messages postés 29 Statut Membre
 
J'utilise déjà notpad++ ^^ sauf qu'aucun problème ne s'affiche, même sur le site W3C validator RIEN :/ Je vais tout recopier ligne par ligne et je verrai quand est ce que sa foire :/ Merci quand même ^^ Bonne journée :)
0
telliak Messages postés 4387 Statut Membre 883
 
Salut,
@cs_PaTaTe
Autant rien dire...
0
P53ud0 Messages postés 29 Statut Membre > telliak Messages postés 4387 Statut Membre
 
Quand j'ai poster ma demande d'aide je n'avais pas pensée au fait de tout recopier un par un, de plus je ne trouve toujours pas ou sa foire, donc ma demande d'aide est toujours d'actualité
Est ce qu"il est possible qu"il y ai un truc qui cloche entre le CSS et le JS ?
0
Réponse 3 / 3
cs_PaTaTe Messages postés 2230 Statut Contributeur 497
 
@telliac très constructif ton commentaire ...

Personnellement je mettrait les scripts dans des fichiers externes pour voir ce que ça donne.

--
0
P53ud0 Messages postés 29 Statut Membre
 
C'est quand même bizarre qu'avec ci peu de code : http://image.noelshack.com/fichiers/2016/43/1477841312-corr.png

sa foire encore, si j’enlève la balise tout est ok, si je la remet, la mise en page foire...
( je précise: fichier javascript est externe, et il est vide.)
0
telliak Messages postés 4387 Statut Membre 883
 
@cs_PaTaTe
J'ai sans doute mal compris ta réponse, elle me donnait l'impression que tu avais la réponse mais ne la fournissais qu'énigmatiquement.
Je n'étais pas aussi constructif que tu le souhaitais pour une bonne raison : je n'avais aucune idée de l'erreur, malgré 1/4 d'heure de recherche...
Je ne comprends toujours pas d'ailleurs l'effet incongru produit par la ligne script.
0
P53ud0 Messages postés 29 Statut Membre > telliak Messages postés 4387 Statut Membre
 
Moi même je n'arrive pas a comprendre, mais sa a marcher, et c'est ce qui compte non ? :)
Donc pour résumer ( si jamais quelqu"un a le même soucis ).

Lors ce que je rajouter la balise <script src = nomfichier.js></script> les contenus dans le <header> et les flèches perdaient leurs mise en page.
Raison: les margin donnée dans le CSS n'avait pas de "px" a la fin.

Merci encore pour votre aide les gars/fille ;)
0
telliak Messages postés 4387 Statut Membre 883 > P53ud0 Messages postés 29 Statut Membre
 
Oui, mais il n'y a pas que ça. Je ne peux pas tout voir n'ayant pas tes images, mais le texte alternatif du logo se décale lui aussi selon qu'il y a ou pas une ligne script, le CSS étant pris en compte ou pas...
0
P53ud0 Messages postés 29 Statut Membre > telliak Messages postés 4387 Statut Membre
 
Je sais pas si tu as compris, ou c'est moi qui comprends pas^^ mais le problème a étais résolut lors ce que j'ai rajouter les px comme tu me l'a conseiller ^^

Et c'est vrais que je n'avais pas penser a vous fournie mes images, la prochaine fois je saurai mieux expliquer mon problème ^^
0

Discussions similaires

Mon écran de télé est cassé
Ugor1999 -
Utilisateur anonyme -

6 réponses
[référencement] Ne pas être référencé
kij_82 -
Searaphina -

10 réponses
Code source couleur de fond
Mehdi-Amg -
Techno01 -

9 réponses