Jump to content
Comanche

Creation De Sites

Recommended Posts

Ca se complique.

J'ai bien ma barre de défilement en bas de mes 3 photos qui sont l'une au dessus de l'autre.

En fait si je voulais dérouler à la souris de haut en bas j'aurais fini. Mais je veux dérouler comme sur le site chez orange.

Pour le CSS je cherche.

Pour englober je cherche aussi.

Bon bobo la tête, dodo car samedi j'ai un match !

Share this post


Link to post
Share on other sites

A y est !

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<style type="text/css">

body, html { padding: 0; margin: 0; background-color:#c8a97a }

.header

{

background-color: white;

position:relative;

width : 910px;

height: 50px;

margin: 20px auto;

line-height: 50px;

text-align: center;

}

.images

{

padding: 5px;

overflow: auto;

position: relative;

border: 1px dashed white;

width:1000px;

margin:20px auto;

white-space: nowrap;

}

.titre

{

display: inline-block;

width: 170px;

height: 25px;

padding-top: 0px;

margin-left:5px;

border : 2px #c88f00 solid;

border-radius: 10px;

background-color:#c8a97a;

}

.commentaire

{

position: relative;

width:910px;

color:white;

margin:auto;

}

.image

{

background-color: #c8a97a;

display: inline-block;

width: 680px;

height: 520px;

text-align: center;

line-height: 10px;

}

</style>

</head>

<body>

<header>

<div class="header">Aquarelles d'Albi</div>

</header>

<div class="images">

<?php

$titre=array (1=> 'Rue des Pénitents' , 'Le Pont-Vieux' , 'Le Pont-Vieux','Le palais de la Berbie');

$maxi=4;

for ($nbre = 1; $nbre <= $maxi; $nbre++)

{

echo'<div class="image"><img src="images/Albi/photo'

.$nbre.'.jpg" alt="photo'.$nbre.' /></div>

<div class="titre"><p>'

.$titre[$nbre].

'</p>

</div>';

}

?>

</div>

</body>

</html>

Share this post


Link to post
Share on other sites

Bon c'était pratique de tout mettre HTML / PHP et CSS dans le même fichier. On gagne un temps énorme.

Je n'ai pas pu avoir le même intervalle entre des photos en portrait ou en paysage, c'est bien trop compliqué.

En mettant la même couleur partout ( fond d'écran et fond de zone de défilement ), plus de problème de zones liées au défilement.

Je vais refaire un fichier HTML et CSS et l'autre en CSS.

La div bloc ne m'a pas avantagé ( enfin disons plutôt que je n'y ai pas approfondi, j'ai réagi en bricoleur et pas en informaticien ( peut être dans une vie futur....) °-° ).

Bon maintenant je reste en statique gratos chez Orange.

Share this post


Link to post
Share on other sites

ouais je vois pourquoi le bloc ne t'a pas aidé, c'est parce que tu as joué sur le display au lieu de jouer sur le float. pas forcément le plus élégant mais c'est sûr que c'est plus "maitrisable". pas de contrindication :)

Share this post


Link to post
Share on other sites

Ca fait mal à la tête tout ça.

D'autant plus que le site modifié ne tournera que chez mon sur mon serveur perso.

Mais merci de ton aide.

Je regarderait au calme l'optimisation du CSS.

Merci Terb.

Share this post


Link to post
Share on other sites

c'est différent, il y a une logique à comprendre c'est la hiérarchisation des classes CSS. puis bien sûr il y a une syntaxe et un vocable bien particuliers à connaitre. quand tu auras dompté les CSS tu verras que ça va t'ouvrir quelques nouvelles portes !

cela dit je précise que je préconise encore et toujours le "simple et efficace" ; la complexité ne doit exister que si elle est vraiment nécessaire, dans tous les autres cas elle ne peut être que préjudiciable. ça vaut pour tout, y compris les CSS. bref ne te complique pas trop la vie.

tu as déjà bien pigé la logique de la boucle pour tes images, je crois : le cas qu'on a vu dernièrement était à mon avis un très bon cas d'école :) pour ce qui est de comprendre les méandres de l'informatique, ça me semble nettement plus fondamental que les CSS =)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×