Je fait un site

  • Auteur de la discussion jacktara
  • Date de début

jacktara

Modérateur
Staff
Salut tout le monde,

Alors aujourd'hui j'm'ennuie et un pote à moi m'a demandé de lui faire un site
Du coup j'ai commencé à taper le code et je m'amuse beaucoup trop pour ne pas toucher à tout et tout tester :D

J'ai commencé hier soir soyez indulgent sur ce premier code :merci:
CSS:
img
	{
		width: 35%;
		float: right;
		margin-bottom: 50px;
		margin-right: 35%;
		margin-top: 3%;
		display: inline-block;
	}

nav
	{
		margin: 5%;
		display: inline-block;

	}

body
	{
	background: url("img/bckgrd.png") fixed no-repeat top center; url("img/bckgrd2.png") fixed repeat-y center;
	
    background-color: black; 
    color: white; 
	font-style: normal;
	
	}

h1
	{
		font-size: 36px;
	}
a
	{
		color: white;
		text-decoration: none;
	}

XML:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="style.css" />
		<link rel="shortcut icon" href="img/hexagon.ico">
		<title>trouveunnom</title>
	</head>
	
	<body>
		<nav>
			<h1>Titreàtrouverouech</h1>
			<p><a href="page2.html">Album 1</a></p>
			<p><a href="page2.html">Album 2</a></p>
			<p><a href="page2.html">Album 3</a></p>
			<p><a href="page2.html">Manifeste</a></p>
			<p><a href="page2.html">Contacts</a></p>
			<p><a href="page2.html">Links</a></p>
		</nav>	
	
			<img src="img/IMG1.jpg" alt="" />
			<img src="img/IMG2.jpg" alt="" />
			<img src="img/IMG3.jpg" alt="" />
			<img src="img/IMG4.jpg" alt="" />
			<img src="img/IMG5.jpg" alt="" />
			<img src="img/IMG6.jpg" alt="" />
		
	
	</body>
</html>

Comme vous devez vous en douter j'ai déjà eu des petits problèmes

Je n'ai pas réussis à faire un block avec mes images au centre je ne sais pas pourquoi dès que j'essaie d'ajouter les propriétés dans le css ce n'est plus pris en compte alors que si je touche directement les images pas de soucis
J'regarde encore en tentant des manips au grès des sites pour apprendre :D

J'ai un autre soucis ma ligne background dans le css elle fonctionne pas
Les images ne sont pas fixed et défilent derrière le texte ce qui ne m'arrange pas du tout
J'ai tenté en rajoutant une règle background-attachment: fixed; mais la j'ai les bords blanc des images qui apparaissent et le fond qui défile toujours
EDIT: Je viens de penser que de fixer le premier et faire scroll le deuxième pourrait résoudre le problème plus facilement mais même avec
background: url("img/bckgrd.png") fixed no-repeat top center; url("img/bckgrd2.png") scroll center; ça, ça ne marche pas :/

Voila d'ordre plus générale si vous avez des choses sympas à me conseiller de tester je suis preneur que je me régale de voir mon site changer après un F5

Merci d'avance à vous pour vos conseilles :merci:


Je suis pas en cat web :o
Si quelqu'un peut me jeter la bas :D
 

jacktara

Modérateur
Staff
J'suis naze ^^
Normale que ça marchait pas

CSS:
background: url("img/bckgrd.png") scroll no-repeat top center, url("img/bckgrd2.png") top center fixed;

La ça marche
Il me reste encore un espace entre les deux images :o EDIT: c'est bon
J'continue de farfouiller

J'viens de voir qu'on pouvais faire sous la forme
CSS:
<div style="float: left; text-align: center; width: 100px; margin: 10px;">
  <img src="11h14.jpg" alt="" />
  <p>Description ici</p>
</div>
Pour pouvoir avoir la description en dessous de chaque image ce qui serrait plus pratique
Mais du coup je garde le css des images et je dois rajouter ce code pour chaque image ?

je test

Si vous voulez les fichiers img pour que ce soit plus simple faites le savoir :merci:
 

jacktara

Modérateur
Staff
Y'a plus personne en cat prog ou quoi :o

XML:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="googlebot" content="noarchive">
		<meta name="robots" content="follow,noindex">
		<meta name="generator" content="Notepad++!">
		<link rel="stylesheet" href="alb1verti.css" />
		<link rel="shortcut icon" href="img/hexagon.ico">
		<title> __◖(◣☩◢)◗__  </title>
	</head>
	
	<body>
	<body>
		
		<section>
		<img src="img/header.jpg" alt="" />
		
		</section>
		
		
		<ul id="menu">
			<li><a href="alb1.html">Album 1</a></li>
			<li><a href="alb2.html">Album 2</a></li>
			<li><a href="alb3.html">Album 3</a></li>
			<li><a href="manifest.html">Manifeste</a></li>
			<li><a href="contact.html">Contacts</a></li>
			<li><a href="link.html">Links</a></li>
			<li><a href="http://www.4chan.org/b">b</a></li>
		</ul>
		
		<div id="test">
			<img src="alb1/IMG1test.jpg" alt="" />
			<p>Description ici</p>
		</div>
		<div class="milieu">
			<div class="miniature"><a href="alb1.html"><img src="alb1/IMG1testmin.jpg" alt="" ></a></div>
			<div class="miniature"><a href="tests.html"><img src="alb1/IMG2testmin.jpg" alt="" ></a></div>
			<div class="miniature"><a href="tests.html"><img src="alb1/IMG3testmin.jpg" alt="" ></a></div>
			<div class="miniature"><a href="tests.html"><img src="alb1/IMG4testmin.jpg" alt="" ></a></div>
			<div class="miniature"><a href="tests.html"><img src="alb1/IMG5testmin.jpg" alt="" ></a></div>
			<div class="miniature"><a href="tests.html"><img src="alb1/IMG6testmin.jpg" alt="" ></a></div>
		</div>

		
	
	</body>
</html>
CSS:
body
	{
	background: url("img/bckgrdtest.jpeg") scroll repeat top center;
    background-color: grey; 
    color: white; 
	font-style: normal;
	}
h1
	{
		font-size: 36px;
	}
a
	{
		color: white;
		text-decoration: none;
	}
	
    #menu {  
        padding: 0; margin: 0;  
        text-align: center; /* centrer le texte */ 
		
		text-decoration:none;
		line-height:50px; /*hauteur de l'image de fond*/
		
    }  
    #menu li {  
        display: inline;  
        list-style: none;  
    }  
    #menu a {  
        display:inline-block;  
        margin: 0 30px;  
    } 
section{margin-left:415px;}	

div.miniature {
	
	margin: 10px;
	float: left;
	
			}

div.milieu {
	text-align: left;
	margin-left: 15%;
	margin-right: 15%;
  margin-top: 50px;
			}
#test{
		margin-left:540px;
		width: 5%;
		height: 5%;
		margin-bottom: 50px;
		margin-right: 65%;
		margin-top: 3%;
		display: inline-block
	}

Voila à quoi ça ressemble now mais j'arrive pas à fixer mes éléments genre quand je change de résolution le site devient illisible :/

Merci d'avance pour votre aide :merci:
 

drul

Obscur pro du hardware
Staff
Stun peu mort ici en effet ...

Pas expert de la prog html sorry
 

jacktara

Modérateur
Staff
Je prends PHP, javascript, CSS, ...
N'importe quel type de conseille touchant au développement web :D
 

jacktara

Modérateur
Staff
Salut :D

Y' pas grand monde mais je garde espoir que je suis motivé

Alors je me suis rendus compte que j'avais des éléments qui étaient "accroché" à la page quand je change de résolution et d'autres non notamment les images sur cette page et je ne comprends pas pourquoi :o

XML:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="googlebot" content="noarchive">
		<meta name="robots" content="follow,noindex">
		<meta name="generator" content="Notepad++!">
		<link rel="stylesheet" href="alb1verti.css" />
		<link rel="shortcut icon" href="img/hexagon.ico">
		<title> __◖(◣☩◢)◗__  </title>
	</head>
	
	<body>
	<body>
		
		<div id="section">
		<img src="img/header.png" alt="" />
		
		</div>
		
		
		<ul id="menu">
			<li><a href="alb1.html">Album 1</a></li>
			<li><a href="alb2.html">Album 2</a></li>
			<li><a href="alb3.html">Album 3</a></li>
			<li><a href="manifest.html">Manifeste</a></li>
			<li><a href="contact.html">Contacts</a></li>
			<li><a href="link.html">Links</a></li>
			<li><a href="http://www.4chan.org/b">b</a></li>
		</ul>
		
		<div id="test">
			<img src="alb1/IMG1test.jpg" alt="" />
			<p>Description ici</p>
		</div>
		<div class="milieu">
			<div class="miniature"><a href="alb1.html"><img src="alb1/IMG1testmin.jpg" alt="" ></a></div>
			<div class="miniature"><a href="tests.html"><img src="alb1/IMG2testmin.jpg" alt="" ></a></div>
			<div class="miniature"><a href="tests.html"><img src="alb1/IMG3testmin.jpg" alt="" ></a></div>
			<div class="miniature"><a href="tests.html"><img src="alb1/IMG4testmin.jpg" alt="" ></a></div>
			<div class="miniature"><a href="tests.html"><img src="alb1/IMG5testmin.jpg" alt="" ></a></div>
			<div class="miniature"><a href="tests.html"><img src="alb1/IMG6testmin.jpg" alt="" ></a></div>
		</div>

		
	
	</body>
</html>
CSS:
body
	{
	background: url("img/bckgrdtest.jpeg") scroll repeat-y top center;
    background-color: grey; 
    color: white; 
	font-style: normal;
	margin : 10px 0;
	padding: 0;
	text-align: center;
	}
h1
	{
		font-size: 36px;
	}
a
	{
		color: white;
		text-decoration: none;
	}
	
    #menu {  
        padding: 0; margin: 0;  
        text-align: center; /* centrer le texte */ 
		
		text-decoration:none;
		line-height:50px; /*hauteur de l'image de fond*/
		
    }  
    #menu li {  
        display: inline;  
        list-style: none;  
    }  
    #menu a {  
        display:inline-block;  
        margin: 0 30px;  
    } 
div.section{
		margin: 0 auto;
		width: 200px;
		display: block;
		}	

div.miniature {
	
	margin: 10px;
	float: left;
	
			}

div.milieu {
	text-align: left;
	margin-left: 15%;
	margin-right: 15%;
	margin-top: 50px;
			}
#test{
		margin-left:540px;
		width: 5%;
		height: 5%;
		margin-bottom: 50px;
		margin-right: 65%;
		margin-top: 3%;
		display: inline-block
	}

Si quelqu'un voit l'erreur ;)
 

jacktara

Modérateur
Staff
BOOOUUUYYAAAA !!! J'ai résolue je sais pas combien de problèmes en même temps j'vais vous montrer :D

XML:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="googlebot" content="noarchive">
		<meta name="robots" content="follow,noindex">
		<meta name="generator" content="Notepad++!">
		<link rel="stylesheet" href="alb1verti1.css" />
		<link rel="shortcut icon" href="img/hexagon.ico">
		<title> __◖(◣☩◢)◗__  </title>
	</head>
	
	<body>
	
		
		
		<ul id="menu">
			<li><a href="alb1.html">Album 1</a></li>
			<li><a href="alb2.html">Album 2</a></li>
			<li><a href="alb3.html">Album 3</a></li>
			<li><a href="manifest.html">Manifeste</a></li>
			<li><a href="contact.html">Contacts</a></li>
			<li><a href="link.html">Links</a></li>
			<li><a href="http://www.4chan.org/b">b</a></li>
		</ul>
		
		<div class="test">
			<img src="alb1/IMG3test1.jpg" alt="" />
			<p>Description ici</p>
		</div>
		
		
		<ul id="menu">
			<li><a href="alb1.html"><img src="alb1/IMG1testmin.jpg" alt="" ></a></li>
			<li><a href="alb2.html"><img src="alb1/IMG2testmin.jpg" alt="" ></a></li>
			<li><a href="alb3.html"><img src="alb1/IMG3testmin.jpg" alt="" ></a></li>
			<li><a href="manifest.html"><img src="alb1/IMG4testmin.jpg" alt="" ></a></li>
			<li><a href="contact.html"><img src="alb1/IMG5testmin.jpg" alt="" ></a></li>
			<li><a href="link.html"><img src="alb1/IMG6testmin.jpg" alt="" ></a></li>
			
		</ul>

		
	
	</body>
</html>
CSS:
body
	{
	background: url("img/bcktest.jpg") scroll repeat-y top center;
    background-color: grey; 
    color: white; 
	font-style: normal;
	margin : 10px 0;
	padding: 0;
	text-align: center;
	}
h1
	{
		font-size: 36px;
	}
a
	{
		color: white;
		text-decoration: none;
	}
	
    #menu {  
        padding: 0; margin: 0;  
        text-align: center; /* centrer le texte */ 
		
		text-decoration:none;
		line-height:50px; /*hauteur de l'image de fond*/
		
    }  
    #menu li {  
        display: inline;  
        list-style: none;  
    }  
    #menu a {  
        display:inline-block;  
        margin-right: 10px ;  
		margin-left: 10px ;
		margin-top: 20px;
    } 
	


div.test{
		margin-left: auto;
		margin-right: auto;
		width: auto;
		margin-top: 50px;
		}

J'ai réussi à bloquer tous les éléments peu importe la résolution, genre si vous changez la résolution il n'y a pas d'éléments qui se décales à droite ou a gauche c'est plutôt cool (centrage automatique avec les balises dans #menu et div.test)
J'ai réussis à aligner les images horizontalement en faisant une liste plutôt que de chercher à faire je sais pas quoi, surtout que j'avais le code au dessus :D
J'utilise d'ailleurs le css du menu pour le moment mais je vais les séparer pour que ce soit plus pratique dans le future

Voila je continue et je vous fait part de l'avancé :merci:
 

jacktara

Modérateur
Staff
C'est pas
Code:
 que j'ai use depuis le début 
C'est des balises code dans des balises spoilers j'pensais que c'était parfait :D

J'ai quand même tout nettoyé et rajouté les balises css et xml ;)
 

andrelec1

Modérateur
Bonjour,
Pour un site web en html/css/javascript ( et PHP), je te conseil d'utiliser Bootstrap et Jquery ...


( Humm , je me demande ce que je fais ici, vien sur ^^ ).
 

jacktara

Modérateur
Staff
Je prends note ;)

Je suis déjà, en plein dans html/css et je commence java

Et pour le spoil je suis un PPC-in dans l'âme :D
 

andrelec1

Modérateur
java != javaScript !!!!!!
Pour te simplifier la vie en javascript ya Jquery !

(Je suis triste ils sont entrain de migrer le forum IDN sur TGS ...)
 

jacktara

Modérateur
Staff
Faut les faire venir ici :D

Merci pour java j'étais au courant :o
jquery non donc je vais regarder ;)
 

jacktara

Modérateur
Staff
alors aujourd'hui je vais tenter d'héberger mon site en locale et de le rendre accessible à certaines personnes

Et aussi j'aimerais intégrer un chat pour voir ce que ça donne "http://sourceforge.net/projects/openchat/?source=dlp"
Aucune idée de la façon de l'implémenter celui la par contre :D

Je n'arrive toujours pas à faire que lorsque la résolution change les éléments reste fixe je ne sais pas pourquoi ?!
Je cherche encore :merci:
 

andrelec1

Modérateur
Pour adapter ton site a la resolution/taille du navigateur du visiteur fais des recherche sur le responsive design ...

et pour heberger ton site sur ton ordi et le rendre accercible depuis l'exterieur tu vas devoir configurer ton routeur de maniere a rediriger le port 80 sur ton pc , et debloquer le port 80 dans ton parefeux ... autrement dit c'est la merde !
 

jacktara

Modérateur
Staff
Merci bien :merci:



Et pour héberger j'peux pas juste lancer une machine virtuelle et le mettre dessus
c'est quoi le soucis pour ouvrir les ports ?
un hébergeur gratuit peut-être ?

Pour le jquery de la dernière fois ceux qui veulent
 

andrelec1

Modérateur
Si tu fais une vm linux avec un vraie apache et ce qui vas avec pourquoi pas !!!
enfin bref moi je suis plus dev ^^

 

jacktara

Modérateur
Staff
De recherche en recherche je suis tombé la dessus ce qui pourrait etre bien pratique pour le genre de site que je cherche a faire vu que c'est grosso modo une galerie photo pour plusieurs séries et des pages avec du texte



Le truc c'est que je fait des essais mais je doit pas le mettre la où il faut que ça ne fonctionne pas
J'ai testé ça déjà

XML:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="googlebot" content="noarchive">
		<meta name="robots" content="follow,noindex">
		<meta name="generator" content="Notepad++!">
		<link rel="stylesheet" href="alb1.css" />
		<link rel="shortcut icon" href="img/hexagon.ico">
		<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">
<!--[if lt IE 7]><link rel="stylesheet" href="css/bootstrap-ie6.css"><![endif]-->
<link rel="stylesheet" href="css/bootstrap-image-gallery.css">
		<title> __◖(◣☩◢)◗__  </title>
	</head>
	
	<body>

		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/load-image.js"></script>
<script src="js/bootstrap-image-gallery.js"></script>
<script src="js/main.js"></script>
		
		
		
		<ul id="menu">
			<li><a href="alb1.html">Album 1</a></li>
			<li><a href="alb2.html">Album 2</a></li>
			<li><a href="alb3.html">Album 3</a></li>
			<li><a href="manifest.html">Manifeste</a></li>
			<li><a href="contact.html">Contacts</a></li>
			<li><a href="link.html">Links</a></li>
			<li><a href="http://www.4chan.org/b">b</a></li>
		</ul>
		
		
		<!-- modal-gallery is the modal dialog used for the image gallery -->
<div id="modal-gallery" class="modal modal-gallery hide fade" tabindex="-1">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">&times;</a>
        <h3 class="modal-title"></h3>
    </div>
    <div class="modal-body"><div class="modal-image"></div></div>
    <div class="modal-footer">
        <a class="btn btn-primary modal-next">Next <i class="icon-arrow-right icon-white"></i></a>
        <a class="btn btn-info modal-prev"><i class="icon-arrow-left icon-white"></i> Previous</a>
        <a class="btn btn-success modal-play modal-slideshow" data-slideshow="5000"><i class="icon-play icon-white"></i> Slideshow</a>
        <a class="btn modal-download" target="_blank"><i class="icon-download"></i> Download</a>
    </div>
</div>


		
		
		<div id="gallery" data-toggle="modal-gallery" data-target="#modal-gallery" data-selector="div.gallery-item">
    <div class="gallery-item" data-href="alb2/IMG1min.jpg" title="Banana">Banana</div>
    <div class="gallery-item" data-href="alb2/IMG1min.jpg" title="Apple">Apple</div>
    <div class="gallery-item" data-href="alb2/IMG1min.jpg" title="Orange">Orange</div>
	<a data-gallery="gallery" href="http://farm4.static.flickr.com/3782/9209525112_ba1fcef32a_b.jpg" title="Göreme, Kapadokya - Ballooning at dawn"><img src="alb2/IMG1min.jpg"></img></a>
</div>

		
	
	</body>
</html>

J'ai qu'une image qui s'affiche avec ce bout de code
Et c'est très mal indenté dsl :merci:
 

andrelec1

Modérateur
Petite question,

XML:
	<li><a href="<a href="http://www.4chan.org/b" rel="nofollow" target="_blank">http://www.4chan.org/b</a>">b</a></li>
</ul>
XML:
<a data-gallery="gallery" href="<a href="http://farm4.static.flickr.com/3782/9209525112_ba1fcef32a_b.jpg" rel="nofollow" target="_blank">http://farm4.static.flickr.com/3782/9209525112_ba1fcef3...</a>" title="Göreme, Kapadokya - Ballooning at dawn"><img src="alb2/IMG1min.jpg"></img></a>
c'est le forum qui fais n'importe quoi avec les lien ?
( EDIT : hrumm, bon c'est le forum ! )

Si non pour ton problèmes regarde ta console javascript voir si il y a pas une erreur !
 
Vous devez vous inscrire ou vous connecter pour répondre ici.
Derniers messages publiés
Statistiques globales
Discussions
730 134
Messages
6 718 054
Membres
1 586 393
Dernier membre
mathhh28
Partager cette page
Haut