28172 sujets

CSS et mise en forme, CSS3

Découpe d'un template en fonction des caractèristiques

Bonjour à tous,


Je me retrouve face à un problème que je n'arrive pas à résoudre et c'est pour cette raison que je sollicite la gentillesse de personnes qui s'y connaissent beaucoup mieux que moi.

Je souhaite intégrer ce template que j'ai créé :

http://www.hiboox.fr/go/images/dessin/fond-new-site-sowhat-v2, 38deab21b88093a6345956a767331206.png.html

Mes contraintes techniques sont les suivantes :

- Si possible, s'adapter aux navigateurs en hauteur et en largeur ( j'ai lu les sujets sur alsacreations mais quand j'applique mes valeurs en %, mais lorsque que je le visionne sur IE, l'image n'occupe pas tout l'espace ! fichier source trop grand ? de plus, comme vous pouvez le remarquer sur le template il y a une sorte de filigrane entre l'arrière-plan et l'en-tête, je dois donc faire en sorte qu'il n'y ait pas de coupures
...)

- Pas de scroll bar verticale dans le navigateur

- Mettre à l'intérieur du carré blanc, mon texte avec une scroll bar verticale et interne à la div

- Intégrer mon menu entre le bloc blanc et l'en-tête

Pourriez-vous me donner des conseils ?

Au moins, les premières lignes, pour me permettre d'intégrer correctement le design, je me débrouille pour intégrer les div pour le texte et le menu...

Merci beaucoup aux personnes qui accepteront de me donner un valeureux coup de main !
upload/30536-fondnewsit.png
Modifié par mamat5159 (21 Jun 2010 - 23:32)
voilà où j'en suis maintenant ...

Tout d'abord, je n'ai pas réussi à intégrer mon background en 100% du navigateur...
Donc je vais adapter ma création pour ne plus avoir de dégradé et ainsi mettre une couleur de fond pour ne pas voir de bord entre l'image et le fond.

Ensuite, j'ai suivi un tuto d'alsacreations pour réussir à écrire du texte dans une div qui possède une image d'arrière-plan.

(Voir image)

Le problème : je souhaite que la scroll bar se place dans l'image de fond Smiley ravi

Clairement, je voudrais que mon bloc rentre dans l'image avec une scrollbar pour faire défiler le texte...

Je vous joint le code 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Agence So What - Conseil &amp; Courtage en Supports de Communication</title>
<!-- La feuille de styles "base.css" doit être appelée en premier. -->
<link rel="stylesheet" type="text/css" href="base.css" media="all" />
<link rel="stylesheet" type="text/css" href="modele03.css" media="screen" />
<style type="text/css">
<!--
html, body {
margin:0;
padding:0;
height: 100%;
width: 100%;
}
body {
	background-color:#666;
	background-image: url(fond%20site%20sowhat.gif);
	background-repeat: no-repeat;
	background-position:center;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
}
#arriere {
	position: center;	/* dimension et positionnement du bloc conteneur  de l'image */
	left: 0%;
	top: 0%;
	height : 400px;
	width : 860px;
	background-image: url(fond%20new%20site%20V6.png);
	background-repeat: no-repeat;
	background-position: center;
	margin-top: 0%;
}
#arriere img {
/* l'image occupe toute la place de son bloc conteneur */
	width : 100%;
	height: 100%;
}
#arriere p {
	position: center;	/* placement du texte par-dessus l'image */
	overflow: scroll;
	top: 10%;
	left: 10%;
	font-size: 1.5em;
	color: #000000;
	margin-top: 1%;
	margin-bottom: 1%;
	margin-right: 1%;
	margin-left: 1%;
	padding: 10%;
}
.Style1 {color: #000000}
.Style2 {font-size: 14pt}
.Style6 {color: #333333; font-size: 12px; }
.Style8 {
	color: #333333;
	font-weight: bold;
	font-size: 14px;
}
.Style9 {
	font-size: 12px;
	color: #666666;
}
.Style10 {color: #999999}
.Style11 {
	color: #666666;
	font-size: 10px;
}
.Style19 {color: #FF7F00}
a:link {
	color: #FF4C00;
}

-->
</style>
<script type="text/javascript" src="includes/Creative_Menus/menuDisplay.js"></script>
<script type="text/javascript" src="includes/Creative_Menus/swfobject.js"></script>
<script type="text/javascript" src="menu.js"></script>
</head>
 
<body>

<div id="global">
  <div id="entete">
    <p align="center">&nbsp;</p>
    <p align="center">&nbsp;</p>
    <p align="center">&nbsp;</p>
    <p align="center">&nbsp;</p>
    <p align="center">&nbsp;</p>
  </div>
  <!-- #entete -->
  <ul id="menu">
        <li>
          <a href="agence.html">L'agence</a>
        </li>
        
        <li>
                <a href="metier.html">Métier</a>        </li>
        
        <li>
                <a href="exefabstudio.html">ExeFab Studio</a>
                <ul>
                        <li>
                                <a href="enseignes.html">Enseignes &amp; Signalétiques</a>                        </li>
                        <li>
                                <a href="print.html">Print</a>                        </li>
						<li>
                                <a href="developpement.html">Web</a>                        </li>
						<li>
                                <a href="execution.html">Execution</a>                        </li>
						<li>
                                <a href="objets.html">Objets</a>                        </li>
				</ul>
        </li>
        
        <li>
                <a href="equipe.html">L'équipe</a>
                <ul>
                        <li><a href="guillaume.html">Guillaume Mercier</a></li>
                        <li><a href="lyvio.html">Lyvio Frimat</a></li>
						<li><a href="mathieu.html">Mathieu Muzelet</a></li>
                </ul>
        </li>
        
        <li>
                <a href="contact.html">Contact</a>       </li>
	   <li>
                <a href="reference.html">Références</a>
                <ul>
                        <li><a href="clients.html">Clients</a></li>
                        <li><a href="partenaires.html">Partenaires</a></li>
				</ul>
    </li>        
</ul>
<!-- #navigation -->
	<div id="arriere">
	  <p>titre sur une image en arrière-plan étirée <br />
Modifiez la taille du texte avec votre navigateur : l'image suit la cadence !
fg
dg
dgd
gd
gd
gd
gd
g</p>
  </div>
  <!-- #contenu -->
  <div id="pied">
  </div>
  <!-- #pied -->
</div>
<!-- #global -->
</body>
</html>

upload/30536-aide.JPG
Modifié par mamat5159 (22 Jun 2010 - 18:42)
Bonjour,
mamat5159 a écrit :
- Pas de scroll bar verticale dans le navigateur
- Mettre à l'intérieur du carré blanc, mon texte avec une scroll bar verticale et interne à la div

(...)

Merci beaucoup aux personnes qui accepteront de me donner un valeureux coup de main !

Désolé, pas de coup de main de ma part. Je refuse de cautionner ce genre de design foireux (cf. les deux premières lignes que je cite).
Bonne continuation malgré tout.
Que voulez-vous dire par "design foireux" ?

Ce n'est pas de la "provocation", je suis intéressé de comprendre ... Car je ne suis que le "pauvre" malheureux qui se retrouve à intégrer un template fait par une autre personne...

Dans tous les cas, j'en suis arrivé au résultat suivant : http://www.test.jecreemonlogo.com/sauvegarde/ONRECOMMENCE/agence.html

Malheureusement, je ne comprend pas pourquoi mon image en background (contour chocolat avec contenu en blanc) refuse de se mettre au milieu malgré 
background-position : center;
. Pur réussir, mon texte au-dessus de cette image j'ai simplement ajouté une div dans la div avec display...

Je n'ai plus qu'a centrer mon image et mon texte ... une idée ?


Merci beaucoup quand même !
mamat5159 a écrit :
Que voulez-vous dire par "design foireux" ?

Je veux dire par là que:
1. En tant qu'utilisateur, quand le contenu est restreint à la moitié ou au tiers de l'écran, ça me fatigue. (Voir en image.) Bonjour le confort de lecture.
2. La barre de défilement globale pour toute la page, c'est une convention pour les pages web. Dès que tu t'en éloignes, tu crées des problèmes d'ergonomie (les automatismes de l'utilisateur ne marchent plus), voire des incompatibilités techniques (navigation au clavier impossible ou difficile, lecture sur écran tactile difficile ou impossible...). Les barres de défilement interne sont à éviter autant que possible.

mamat5159 a écrit :
je ne comprend pas pourquoi mon image en background (contour chocolat avec contenu en blanc) refuse de se mettre au milieu malgré 
background-position : center;

L'image de fond est centrée. C'est le bloc lui-même qui n'est pas centré horizontalement... vu que tu n'as rien fait pour le centrer horizontalement. Smiley cligne
Sujet clos
Aller à