www.creditriskmanagement.be

Invité · 17/08/2013, 14h30

Tu n'as pas compris ce que j'ai dis.

Il ne s'agit pas de corriger "par çi, par là" ton code.

Il te faut une base/ossature HTML/CSS SOLIDE !!
C'est la colonne vertébrale de ton site.

Je t'ai donné un lien : Div et CSS : une mise en page rapide et facile

=> Je te mets au défi d'écrire le CSS SANS UN SEUL position:absolute; !
Fais-le comme un EXERCICE !
Allez ! Je t'en autorise 1 : pour le bloc des drapeaux de langues.

Quand tu auras réussi cette épreuve, Petit Scarabée, j'aurais d'autres défis pour toi...

N.B. Pour info : pas de <br> entre les <li>....

**RicardoBxl** · 17/08/2013, 14h36

JReaux,

T'es fou !!! Pas un seul position absolute ??? Tu veux me faire mourir.

Bon je vais voir si je relève ce défi

Faut que je vois si je vais pas paraître bête lol

Allez je retourne coder.

Invité · 17/08/2013, 14h42

Je t'épargne le contenu (texte) du... conteneur "colonne-droite" !

Juste la mise en page principale :

header (+ logo + titre + menu-langues)
menu
conteneur :
- colonne-gauche
- colonne-droite (contenu)
footer

Tu n'as le droit d'utiliser que :

position:relative; /* éventuellement */
float:left;
float:right;
clear:both;

C'est très simple, si tu suis le tuto.
C'est une mise en page BASIQUE.

**RicardoBxl** · 17/08/2013, 14h47

oui Patron

Je m'active au plus vite

Maintenant j'ai peur car si je réussi l'épreuve que vas-tu me demander après

C'est sympa de m'accorder ton temps et ton savoir.

Si çà continue comme çà lol je vais me prendre à rêver de devenir pro dans 2 mois lol.

Bouton Google +1
J'ai dû recréer mon compte Google+ et suis retombé à 0

Pourriez-vous cliquer sur le bouton +1 lorsque vous irez encore visiter mon site.

C'est gentil à vous,

Réécriture de la section left et contenu page Web
JReaux62 j'ai réécrit la section left en faisant disparaître les position: ...

Rodolph j'ai ajouté l'effet opacité au passage de la souris sur les icônes de réseaux sociaux.

Pour ce qui est de l'apparence des information, dans ce cas-ci la page Web Devlopment, j'ai tenté de mettre les infos sur fonds noir. Vous en pensez quoi ?
En attendant j'ai gardé le fonds blanc comme pour la page SEO.

Bon je continue à bosser sur la réécriture d'un code propre

Affichage des annuaires d'indexation sur mon site
Les deux annuaires que j'affiche sur mon site sont en fait dû à l'obligation par ces des derniers de le faire pour prendre en compte mon site.

Est-ce que cela vous gêne ou non ?

Je sais que pas mal de site crée une section links...

C'est quoi la règle en la matière ?

Pour JReaux,
Le résultat se voit dans la copie d'écran mise dans le post précédent.

Mais c'est vrai que c'est plus propre dans le code.

Code SectionLeft

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<div id="SectionLeft">
 
	<div id="SectionLeft_Contact_SN">
 
		<div id="SectionLeft_NomAdresseVille">
			<h2><?php echo TXT_ContactLobby;?></h2>
			<span>Arrabito Ricardo</span><br> 
			<span><?php echo TXT_BirthDate;?></span><br> 
			<span><?php echo TXT_City;?></span><br> 
			<br>
			<br>
			<span><strong>+32 (0)483 43 04 57</strong></span><br>
			<span><strong>+32 (0)64  61 05 38</strong></span>
 
			<!--
			<span><?php echo TXT_Age;?></span>
			-->
 
		</div>
 
		<div id="SousNavNetworks">
			<ul>
				<li><a href="http://www.linkedin.com/profile/edit?trk=tab_pro" target="_blank"
					rel="me"> <img src="Images/icon_linkedin.png" id="iconli"
					alt="Linkedin" title="Linkedin" /> </a>
				</li>
				<li><a href="#" target="_blank" rel="me"> <img
					src="Images/icon_twitter.png" id="icontw"
					alt="Twitter" title="Twitter" /> </a>
				</li>
				<li><a href="https://www.facebook.com/RicardoArrabito?ref=hl" target="_blank" rel="me"> <img
					src="Images/icon_facebook.png" id="iconfb"
					alt="Facebook" title="Facebook" /> </a>
				</li>
				<li><a href="https://plus.google.com/u/0/116066804545589818094/about" target="_blank" rel="me"> <img
					src="Images/icon_google+.png" id="icong+"
					alt="Google+" title="Google+" /> </a>
				</li>
			</ul>
 
		</div> 
 
		<div>
			<?php echo "<a href=\"{$fileContact}\"> <img src=\"Images/icon_email.png\"
                                id=\"iconemail\" alt=\"Ecrivez-moi\" title=\"Ecrivez-moi\" />"?> 
			</a>
 
		</div>
 
	</div>
 
	<div id="IndexDirectories">
 
		<div id="Weborama">
 
			<script type="text/javascript">
                        WEBO_ZONE=1;
                        WEBO_PAGE=1;
                        webogold_ok=0;</script>
			<script type="text/javascript" src="http://script.weborama.fr/gold.js"></script>
			<script type="text/javascript">
                        if(webogold_ok==1){webogold_zpi(WEBO_ZONE,WEBO_PAGE,475438);}</script>
			<NOSCRIPT><A HREF="http://www.weboscope.com">Weboscope</A> mesure d'audience, statistiques, ROI<BR>
			<A HREF="http://www.weborama.fr">Classement des meilleurs sites</A> et positionnement </NOSCRIPT>
			<!--FIN WEBOSCOPE FREE - Weborama -->
 
		</div>
 
		<div id="NetLien">
 
			<a href='http://www.net-liens.com/' target='_blank'><img src='http://www.net-liens.com/img/net-liens.gif' width='88' height='31' alt='Annuaire de sites Net-liens' /></a>
 
		</div>
	</div>
</div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.SectionLeft{
    float:left;
    width:180px;
 
    background: #000000;
    background: -webkit-linear-gradient(#000000, #696969);
    background:    -moz-linear-gradient(#000000, #696969);
    background:     -ms-linear-gradient(#000000, #696969);
    background:      -o-linear-gradient(#000000, #696969);
    background:         linear-gradient(#000000, #696969);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3),
                      0 3px 5px rgba(0, 0, 0, .2),
                      0 5px 10px rgba(0, 0, 0, .2),
		      0 20px 20px rgba(0, 0, 0, .15);
 
 
    padding:5px;
    font-size:0.875em;
}
 
#IndexDirectories{
    margin-top:40px;
}

**rodolphebrd** · 21/08/2013, 16h05

Envoyé par RicardoBxl

j'ai ajouté l'effet opacité au passage de la souris sur les icônes de réseaux sociaux.

Tu peux faire la même chose sur les drapeaux.

Par contre le pop-up publicitaire

**RicardoBxl** · 21/08/2013, 16h16

Coucou Rodolphe,

Lol tu vois que j'applique ce que tu me dis

Pour la fenêtre publicitaire ce sont ces cons qui me demandent de la mettre.

En fait au départ je pensais pas qu'il y aurait une fenêtre. Ils me demandaient d'ajouter simplement un bout de code pour montrer le lien.

Ensuite j'ai vu cette horrible fenêtre

Bon j'ai compris je les vire de ma page.

Pour les drapeaux pas bête m'en occupe de suite.

**rodolphebrd** · 21/08/2013, 16h20

Ta fenêtre sera bloquée généralement par un petit plugin type adblock.
Donc l'utilité de cette opération...

Invité · 21/08/2013, 16h21

Envoyé par jreaux62

=> Je te mets au défi d'écrire le CSS SANS UN SEUL position:absolute; !

Envoyé par RicardoBxl

T'es fou !!! Pas un seul position absolute ??? Tu veux me faire mourir.

Bon je vais voir si je relève ce défi

Alors ? J'attends ! :

**RicardoBxl** · 21/08/2013, 16h28

JReaux

Ben si tu regardes le post que j'ai mis juste plus haut sur la SectionLeft tu verras que l'utilisation de la position absolute et relative ont disparu.

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.SectionLeft{
	position:relative;
	float:left;
	width:180px;
 
	background: #000000;
	background: -webkit-linear-gradient(#000000, #696969);
    background:    -moz-linear-gradient(#000000, #696969);
    background:     -ms-linear-gradient(#000000, #696969);
    background:      -o-linear-gradient(#000000, #696969);
    background:         linear-gradient(#000000, #696969);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .3),
                0 3px 5px rgba(0, 0, 0, .2),
                0 5px 10px rgba(0, 0, 0, .2),
				0 20px 20px rgba(0, 0, 0, .15);
 
 
	padding:5px;
	font-size:0.875em;
}

Mais entretemps j'ai remarqué que mon enveloppe n'apparaissait plus au même endroit.

Donc j'ai juste ajouter position:relative à SectionLeft

Et ai positionné mon icone pour le mail en absolute.

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
#iconemail{
position:absolute;
top:-25px;
left:110px;
}

Même l'icone de mon enveloppe doit éviter le positionnement ?

Sache que le footer aussi est positionné sans position: absolute.

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
footer{
	clear:both;
	margin-left:0px;
	margin-top:50px;
	width:1100px;
	height:100px;
	border-radius: 10px;
	background: #9ACD32;
	background: -webkit-linear-gradient(#CCCC00, #9ACD32);
    background:    -moz-linear-gradient(#CCCC00, #9ACD32);
    background:     -ms-linear-gradient(#CCCC00, #9ACD32);
    background:      -o-linear-gradient(#CCCC00, #9ACD32);
    background:         linear-gradient(#CCCC00, #9ACD32);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .3),
                0 3px 5px rgba(0, 0, 0, .2),
                0 5px 10px rgba(0, 0, 0, .2),
                0 20px 20px rgba(0, 0, 0, .15);

Invité · 21/08/2013, 16h42

Encore 25 position:absolute; dans ton CSS !

OK pour l’icône "enveloppe" : telle que tu la places, elle doit être en absolute.

**RicardoBxl** · 21/08/2013, 16h45

Ah oui quand même 25 !!!!

Bon on va s'attaquer à çà sérieusement lol.

Grosse surprise sur mon site !!!!
Rodolphe et JReaux,

J'ai une surprise sur mon site

Allez-vous voir de suite de quoi il s'agit lol.

Pour JReaux,

Je travaille sur le nettoyage de mon code et bientôt je te donne ma copie d'examen ;-)

Bonne nuit les gars.

PS Avant que vous ne fassiez la remarque lol sachez que je ne l'ai mis que dans mon fichier index.php en absolute mais j'étais trop impatient lol ne pas l'afficher de suite héhéhé

http://www.creditriskmanagement.be

Invité · 23/08/2013, 08h15

Oh ! + Oh ! = La tête-à-Toto !

Moi, ça me plait !
Ca met un visage sur une profession.

**rodolphebrd** · 23/08/2013, 08h17

C'est pas mal du tout, par contre le footer n'est pas centré.

Invité · 23/08/2013, 08h19

Envoyé par rodolphebrd

par contre le footer n'est pas centré.

LOL ! Ne soit pas rabat-joie dès le matin ! Un café ?

De toute façon, je "ramasse les copies" bientôt !

Je noterai sur 100, pour ne pas tomber à 0 trop vite...

**rodolphebrd** · 23/08/2013, 08h21

Euh je suis noté moi aussi

Invité · 23/08/2013, 08h22

Envoyé par rodolphebrd

Euh je suis noté moi aussi

Tu es hors concours

[Edit] Cela dit, nous sommes tous notés par DVP !

**rodolphebrd** · 23/08/2013, 08h32

Envoyé par jreaux62

Cela dit, nous sommes tous notés par DVP

Tiens c'est vrai ça.
D'ailleurs Ricardo, tu as un moyen de noter les réponses qui te sont données grâce à

ou

(je sais c'est despotique comme conseil)...
... ou alors envoyer un chèque

**XxArchangexX** · 23/08/2013, 21h47

Un petit coucou,

J'ai noté positif pour ma part

, cette discussion fait mon arrivé au taf avec le café et j'apprends des choses

. J'aime bien le design, ça change du tout début ^^.

Invité · 23/08/2013, 21h49

Bienvenu ici, XxArchangexX !

Ton avis est le bienvenu !

Plus on est de fous , plus on rit !!*

Ricardo fait preuve d'un vrai potentiel...
+ il est en train de créer son propre job :
A nous de l'encourager !...

@Ricardo : je vais bientôt ramasser les copies...
Es-tu prêt ?
N.B Je suis en train d'écouter [ame="http://www.youtube.com/watch?v=M3fpCztWWug"]Le Grand Jacques[/ame] "Quand on n'a que l'Amour..." (Brel ! Bien sûr...)
Ne me déçois pas, stp....

**RicardoBxl** · 27/08/2013, 13h27

Coucou JReaux62,

Je suis proche de rendre ma copie lol.

Tu m'avais dit qu'il restait encore 25 position:absolute la semaine passée.

Je suis passé à 12. Et là je me remet à revoir les 12 dernières pour en faire disparaître un max.

En outre j'ai nettoyé et réorganisé le code du CSS de sorte que seules restent les instructions utilisées et elles sont regroupées en fonction de la zone qu'elles impactent:

Header - SectionLeft - SectionCenter et Footer.

EHEHEH je pense que je vais avoir un A à ma copie

www.creditriskmanagement.be

Mon site

Discussions similaires

Partager

Partager