Accueil > Forum > > > > Faire un cadre dynamique
 Faire un cadre dynamique
mardi 15 mars 2005 à 22:17:28 |
Faire un cadre dynamique
jdeboer
|
Bonjour a tous, J'aimerai faire un cadre dynamique , dont la hauteur s'adapte au texte. Je m'explique : voila j ai un site. Et je voudrai entourer toutes les pages de mon site par un cadre (pas juste un rectangle a trait fin mais un rectangle a trait personnalise. Pour faire les traits, j ai donc creer des images). Le truc est que je voudrai repeter le motif du trait de cote autant de fois qu'il le faut afin qu'il entoure bien tout le texte de mon site, et que le trait du bas s affiche a la fin. Comment faire? Merci PS: j espere que je me suis bien exprime ... Julien |
|
mercredi 16 mars 2005 à 02:05:48 |
Re : Faire un cadre dynamique
JeanPoldeux
|
Réponse acceptée !
Quelle explication claire et précise !! C'est une chose de plus en plus rare sur ce forum que l'on a que l'envie d'y répondre.
Pour moi, la première solution qui me vient en tête en lisant ton post,
est d'utiliser du HTML couplé au Feuilles de styles (CSS).
Le principe est le suivant:
* Dans ta partie CSS, tu définis un bloc <div
class="bordure_dessus"> que tu rends fixe de sorte à être toujours
visible même si la fenêtre est "scrollée".
* Tu en définis deux autres destinés à être placés à gauche et à droite, eux aussi fixe de sorte à ne pas les répéter.
* Tu ecris l'ensemble de page dans le body et tu termines par la dernier <div> qui représentera la bordure du bas de page.
Dans ta partie HTML, tu definis alors 4 <div> qui ne comprendront
qu'une balise <img> afin de réaliser les bordures et ta page
pourra alors être écrites entre une cinquième balise <div>.
Exemple:
------------
/* Fichier : "bordures.css" */
/*-----------------*/
/* Bodyground */
/*-----------------*/
body
{
/* Size and position for MS IExplorer */
margin:0;
padding-top: 56px ;
padding-right: 0;
padding-bottom: 25px;
padding-left: 155px;
overflow:hidden;
}
/*-------------------*/
/* Page header */
/*-------------------*/
div#header
{
/* Color properties */
background-image: url(./images/horizontal_border.jpg);
background-repeat: no-repeat;
background-position: left;
/* Size and position for MS IExplorer */
position:absolute;
top:0;
left:0;
width:500%;
height:51px;
}
/*-------------------*/
/* Sidebar Left */
/*-------------------*/
div#sidebar_left
{
/* Color properties */
background-image: url(./images/vertical_border.jpg);
background-repeat: no-repeat;
background-position: left;
/* Size and position for MS IExplorer */
position:absolute;
top:51px;
left:0;
width:51px;
height:500%;
padding-left: 5px;
}
/*-------------------*/
/* Sidebar right */
/*-------------------*/
div#sidebar_right
{
/* Color properties */
background-image: url(./images/vertical_border.jpg);
background-repeat: no-repeat;
background-position: left;
/* Size and position for MS IExplorer */
position:absolute;
top:51px;
left:749px;
width:51px;
height:500%;
padding-right: 5px;
}
/*-----------------*/
/* Page footer */
/*-----------------*/
div#footer
{
/* Color properties */
background-image: url(./images/horizontal_border.jpg);
background-repeat: no-repeat;
background-position: left;
/* Size and position for MS IExplorer */
position:absolute;
bottom:0;
left:51px;
width:100%;
height: 51px;
}
/*------------------*/
/* Page body */
/*------------------*/
div#content
{
/* Size and position for MS IExplorer */
height: 100%;
overflow:auto;
}
/* ------------------------------------------------------ */
/* Size and position for other browsers than MS IExplorer */
/* ------------------------------------------------------ */
html>body
{
/* Size and position */
padding: 0;
margin: 0;
height: 100%;
width: 100%;
overflow: auto;
}
body>div#header
{
background-position: center;
/* Size and position */
height: 51px;
width: 100%;
top: 0;
left: 0;
position: fixed; /* Out of stream position */
}
body>div#sidebar_left
{
height: 100%;
width: 51px;
overflow: auto;
top: 51px;
left: 0;
position: fixed; /* Out of stream position */
}
body>div#sidebar_right
{
height: 100%;
width: 51px;
overflow: auto;
top: 51px;
left: 749px;
position: fixed; /* Out of stream position */
}
body>div#content
{
width: 80%;
height: auto;
position: relative; /* In stream position */
left: 51px;
top: 51px;
padding-left: 2px;
padding-top: 2px;
min-height: 100%;
overflow: hidden;
}
body>div#footer
{
height: 35px;
width: 75%;
bottom: 0px;
left: 51px;
margin-left:0;
position: fixed; /* Out of stream position */
overflow: hidden;
}
------------
page HTML
-------------
<html>
<head>
<link rel="stylesheet" type="text/css" href="bordures.css"/>
</head>
<body>
<div class="content">
<!-- Ta page HTML -->
</div>
<div class="header"></div>
<div class="sidebar_left"></div>
<div class="sidebar_right"></div>
<div class="footer"></div>
</body>
</html>
Il te faudra sans doute jouer sur les tailles(height,width) et les
positions(padding, margin) des blocs afin d'avoir une belle
présentation.
Un bon site pour le css
http://www.openweb.eu.org/css
ou encore
http://css.alsacreations.com/
Ce n'est qu'une piste qu'il faut approfondir
Jean Poldeux
 Every problem has a solution. The difficulty is to find it
|
|
mercredi 16 mars 2005 à 10:41:22 |
Re : Faire un cadre dynamique
jdeboer
|
Merci pour ta reponse. Effectivement, apres avoir poste cette question, je suis tombe sur les excellents sites que tu proposes. Merci pour ton exemple, il completera celui que javais trouve sur alsacreation.
Julien
PS: bon je reconnais que ceci n'a rien avoir avec le PHP, mais je trouvais que si en fait. On voit pas mal de sites en PHP utilises ce systeme, ca m'enervait de pas savoir comment il faisait.
|
|
Cette discussion est classée dans : dynamique, site, texte, cadre, trait
 Répondre à ce message
 Sujets en rapport avec ce message
site web dynamique [ par las3ad ]
je vais construire un site web dynamique pour une inscription en lignej'utilise PHP et mysqlla base de donnée contenait les champs (num, nom, prenom .
arguments et url ? (débutant) [ par inconnuanonyme ]
Bonjour !Avant toute chose je tiens à préciser que je suis débutant en la matière.Voici ma question :un site propose une page où l'on peut écrire un t
champ dynamique transparent [ par zaq ]
Est il possible d'avoir un champ de texte dynamique, avec un ascenseur permettant de charger du texte mais dont le fond serait transparent.Le but étan
gestion dynamique du site [ par najat ]
je voudrais bien me donner une idée sur la gestion dynamique des sites par PHP tel que l'ajout de page au site en utilisant une base de donnée pour st
Creation liste dynamique [ par houloul1 ]
Bonjour à tous ,et merci d'avoir pris le temps de lire ce message.Mon souci est le suivant :je voudrai qu'apres avoir saisi un code postal cela affich
Générer un lien dans un texte avec PHP [ par redsungraphics ]
Je suis étudiant et je termine mes études en réalisant un site en php. C'est un site d'écriture et j'aimerais pouvoir faire correspondre chaque mot du
Prise de texte d'un site [ par RockmanX ]
Ben voila, je cherche à prendre un certains texte d'un certains site... comment faire???
un site qui genére des sites [ par SemBy ]
salut,je projette de creer un site ki permetra de generer des sites ou plutot des pages web basic "images et texte" pour les personnes qui ne savent p
J'ai vraiment besoin d'aide [ par Chatnet ]
Bonjour à tous.Alors voilà, je suis tout nouveau tout frais sur ce forum, et dans le monde de la création de site également. Alors je vous appelle tou
site web dynamique [ par sagesse ]
Bonjour,j'ai un pb ds ma base de données MySql:j'ai installé easyphp7.1.j ai une base access que j'ai basculé vers MySql.je dois réaliser un intranet
 Livres en rapport
|
Derniers Blogs
 IMAGINE CUP 2012, MAKE A SIGN EN FINALEIMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg
Voilà qui est fait, la nouvelle est officielle ! L'équipe belge "Make a Sign" va au pays des kangourous défendre son projet dans la catégorie Software Design. http://www.imaginecup.com/CompetitionsContent/Competition/WorldwideFinalists.aspx V...
Cliquez pour lire la suite de l'article par junarnoalg KINECT 1.5 IS OUT !KINECT 1.5 IS OUT ! par Vko
La version 1.5 du Kinect For Microsoft vient tout juste de sortir ! Plein de nouveautés: Tracking de squelette en Near Mode Détection en position assise Détection faciale avec un SDK dédié Documentation et des guideline (enfin) Un out...
Cliquez pour lire la suite de l'article par Vko LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc
Mise à jour des Web API du 14 Mai
Réservez dès maintenant votre journée du 20 juin pour le Windows Azure Dev Camp 2012 à Paris
Mise à jour de Team Foundation Service
MechCommander 2 sur Windows 8
Entity Framework 5 Release Candidate e...
Cliquez pour lire la suite de l'article par richardc REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITERREACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc
Une mauvaise utilisation de rx lors de l'écriture d'une couche d'accès à des services peut conduire à des cas embarassants avec des erreurs mal gérées, des appels qui ne partent lorsqu'ils le devraient, et même des résultats incorrects . le tout nuis...
Cliquez pour lire la suite de l'article par Groc SHAREPOINT BLOG SITE, PROBLèME D'ARCHIVESSHAREPOINT BLOG SITE, PROBLèME D'ARCHIVES par junarnoalg
Dernièrement, nous avons migré le site
myTIC
vers un nouveau serveur SharePoint 2010. Dans les contenus que nous vouloins récupérer, nous avions un certain nombre de blogs.
Nous avons utilisé les commandes Power...
Cliquez pour lire la suite de l'article par junarnoalg
Forum
 XML ET PHPXML ET PHP par karouani
Cliquez pour lire la suite par karouani
Logiciels
 sDEVIS-FACTURES vlPRO (8.1.0.3)SDEVIS-FACTURES VLPRO (8.1.0.3)sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa... Cliquez pour télécharger sDEVIS-FACTURES vlPRO 974 Application Server (12.2.4.6)974 APPLICATION SERVER (12.2.4.6)Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc... Cliquez pour télécharger 974 Application Server vPicture (1.4.2.1)VPICTURE (1.4.2.1)Avec vPicture, hébergez vos images facilement et rapidement.
vPicture est un utilitaire simple, ... Cliquez pour télécharger vPicture Easy-Planning (2.2.1.6)EASY-PLANNING (2.2.1.6)Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au... Cliquez pour télécharger Easy-Planning COM-BACKUP (2.0)COM-BACKUP (2.0)
COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...
Cliquez pour télécharger COM-BACKUP
|