18041 sujets

Questions générales et questions de débutants

Mettre 2 fonds d'écran

Bonjour,

Je débute dans la création de mon site. J'ai réalisé une maquette pdf et je souhaite réaliser un site à l'identique. En revanche je m'aperçois que la partie graphique est bien plus moins évidente (css) que je l'espérais!!!!

Je souhaite faire deux fonds :
Soit un premier fond vert et puis un deuxième fond noir rectangle (qui centré sur le premier fond).

Je pense à peu près comment faire cela mais ce qui me préoccupe est de centrer mes blocs à l'intérieur de ce rectangle.

De plus je m'y perd dans les notions de % et de pixel car je ne sais pas à elles correspondent au résultat visuels.

Help I need somebody!!!

Nadya 56
Bonjour Nadya, et bienvenue sur Alsacreations!

As-tu déjà essayé quelque chose? Peux-t-on voir tes ébauches de travail afin de t'aider à comprendre la marche à suivre?
Bonne continuation!
Bonjour nady56,

Tu pourrais éventuellement commencé par regarder quelques tutoriels pour bien comprendre le positionnement css dans la section idoine Smiley cligne
http://css.alsacreations.com/
Ce lien par exemple Smiley cligne
http://css.alsacreations.com/Bases-et-indispensables/Comprendre-le-positionnement-des-balises-en-CSS
Et/Ou sur le site d'Openweb

Lances toi, fais des tests et exposes les éventuels problèmes que tu rencontres (postes le code html/css que tu auras produit) une copie d'écran de ton pdf pourrait également nous aider à te venir en aide Smiley cligne

Bon courage,
Cdt,
Sylvain

* Quelqu'un a des vitamines, je suis vraiment trop lent Smiley lol
Modifié par 6l20 (10 Apr 2008 - 13:06)
Merci pour vos réponses je vais en effet lire un peu plus sur le sujet.

En attendant, voici le pdf de ma maquette de la première page.


Vraiment je pensais que html était difficile mais finalement c'est plutôt simple à coté de CSS!

Bonne journée

Nadia




upload/16349-site.gif
Wop ....




Voici un prémice de code à analyser et bidouiller...

Le fond du body est vert...

La boite noire de dimensions fixes est aligné au milieu en X et Y... Elle joue le role de "référence"...
Tu positionneras tes éléments par rapport à cette boite et non plus par rapport au bords de la fenêtre...

Les petites boites sont de dimensions connues (pour l'instant)... On pourra faire des dimensions libre par la suite ...

J'ai fais ça vite fais en freestyle car on ne voit pas trop ton dessin .... Smiley confus

HTML 
<body>

<div class="blackbox">

<div class="whitebox">essai</div>
<div class="orangebox">essai</div>

</div>

</body>


CSS
body {
background-color:green
}

.blackbox {
background-color:black;
position:absolute;
width:800px;
margin-left:-400px;
left:50%;
height:500px;
margin-top:-250px;
top:50%;
}

.whitebox {
background-color:white;
position:absolute;
width:100px;
margin-left:-50px;
left:50%;
height:200px;
margin-top:-100px;
top:50%;
}

.orangebox {
background-color:orange;
position:absolute;
width:50px;
margin-left:-25px;
left:20%;
height:50px;
margin-top:-25px;
top:50%;
}

Modifié par Velbain (10 Apr 2008 - 16:53)
Merci Velbain,



Ca marche, j'ai mon block noir qui est bien centré sur ma page verte. Pour le reste je vois cela après un bonne nuit de repos.

Ca commence à devenir fun!

Nady56
Maintenant que j'ai ma boite noir en "référence" et après beaucoup de lecture sur le positionnement mon problème est le suivant:

J'ai réussi à mettre en absolu :mon bouton retour accueil en haut à gauche - mon entête en haut à droite et dessous mes menus.

Maintenant pour le reste je voudrais essayer de positionner mes textes et photos en flu. D'après ce que j'ai pu comprendre les éléments en flu ne teinnent pas compte des absolu. Par conséquent je peu les placer en fonction du dossier parent (qui je pense être ma boite noir).
Maintenant que j'ai ma boite noir en "référence" et après beaucoup de lecture sur le positionnement mon problème est le suivant:

J'ai réussi à mettre en absolu : mon bouton retour accueil en haut à gauche - mon entête en haut à droite et dessous mes menus.

Maintenant pour le reste je voudrais essayer de positionner mes textes et photos en flux. D'après ce que j'ai pu comprendre les éléments en flux ne tiennent pas compte des absolu. Par conséquent je peu les placer en fonction du dossier parent (qui je pense être ma boite noir).

Pourtant lorsque j'essaie de les mettre en flux les éléments se placent par rapport aux absolu.

C'est un peu déconcertant!

J'aimerais bien un petit coup de pouce.

Merci

Nady56



Smiley decu
Hop...



Aurais tu un code et une page en ligne à nous filer ?
Qu'on puisse bidouiller à partir d'une base...

Et qu'est ce que tu appelles un flux de texte-image ?
Des images et des textes à dimensions variables ?
Voici mes textes: je pensais que mon text box (autres que les absolu) pouvait être placé en flux soit à coté d'une image à droite.
Même positionnées en absolu, j'en conclue que les images sont quand même placées dans l'ordre des lignes html.

Suis pas sur d'être claire?

Nady56

html
<body>
<div class="blackbox">
<div class="entete"><img src="entete.png"/></div>
<div class="retour acceuil">
<a href="index.html"><img src="accueil.png" alt="retour acceuil"/></a></div>

<div class="menus">
<a href="contact.html"><img src="contact.png" alt="contact"/></a>
<a href="calendrier.html"><img src="calendrier.png" alt="calendrier"/></a>
<a href="les partenaires.html"><img src="partenaires.png" alt="les partenaires"/></a>
<a href="l'Equipe.html"><img src="equipe.png" alt="l'Equipe"/></a>
<a href="les clubs.html"><img src="les clubs.png" alt="les clubs"/></a>
</div>

<div id="carte_avantage"> </div>
<div id="texte_carte"> </div>

<div id="voir_avantages"> </div>
<div id="logos"> </div>

<div class="photo_de_la_semaine">
<h2>L'Image de la semaine <h2>
<p><img src="velo.jpg" alt="image de la semaine" /></p>
</div>

<div id="article">
<p>Voici un texte qui pourrait convenir à ce type de présentation
enfin je pense car il faudrait que les phrases ce placent touts seules. Apparrement je çà a l'air d evouloir bien fonctionnner!</p>
</div>

<div id="annonceur"> </div>

</div>

</body>
</html> CSS:

body {

background-color:#9EF254;


}

.blackbox {

color:white;
font-family:Arail, "Times New Roman", Times, sans -serif;

background-color:black;

position:absolute;

width:900px;

margin-left:-450px;

left:50%;

height:500px;

margin-top:-250px;

top:50%;
}

img {border:none}

.retour acceuil {
position:absolute;
top:4px;
left:4px;
}

.entete {
position:absolute;
top:1px;
left:410px;

}

.menus{
position:absolute;
top:100px;
left:330px;
}

.photo_de_la_semaine{
padding-left:330px;

}


#article {
font-size:14px;
font-family:verdana;
background-color:white;
color:red;
border:2px solid red;
width:45%;
height:60%;
margin-left:52%;
margin-right:auto;
padding:5%
font-size:120%;
text-align:justify;


}








}
Hop hop...


J't'ai fait un p'tit gribouilli vite fait Smiley murf ...

http://60gp.ovh.net/~velbain/essai.php

A toi de regarder le code source et de bidouiller...


Quelques erreurs en passant dans le code que tu as proposé avant :

- les lien (href) se mettent sans espaces et sans caractères spéciaux (é,', à,...) et en évitant les majuscules et "s" à la fin des mots car souvent on les oublie Smiley biggol ...

- le nom d'une classe ne prend pas d'espaces non plus : pas ".retour acceuil" mais ".retouraccueil" par exemple...

Si tu veux je pourrais t'aider plus si j'avais une maquette du site en image ...
merci velbain

J'en conclu que ce n'est pas la peine de me prendre la tête avec les positions float... Si je laisse mes éléments en absolue, est'il certain qu'ils seront lu par IE et les autres navigateurs?

Pour une maquette comment puis-je en mettre une en ligne?

Pour le moment je n'en suis qu'a l'apprentissage de codes et je ne sais pas encore comment je vais mettre ce site sur le web. Smiley rolleyes

Suis vraiment une grande débutante.

nady56
Sujet clos
Aller à