28220 sujets

CSS et mise en forme, CSS3

Cadre, arrondi avec barre de défilement

Bonsoir,
J'aimerais créer un cadre arrondi mais qui ne s'agrandis pas lorsque je tape du texte au delà de sa taille...
Il me faudrais donc un cadre avec une scrollbar qui permet de descendre dans ce même cadre... Smiley ohwell Smiley ohwell
Merci d'avance.
Soyuka
Modifié par soyuka (27 Jan 2007 - 22:38)
Salut,

donnes une taille fixe a ton conteneur, et tu lui mets overflow: scroll (je crois.....chercher les différents valeurs d'overflow, il y a overflow-y (et -x) mais il me semble que ce n'est pas valide...) en css.
overflow-y et overflow-x sont des propriétés non standard introduites par Internet Explorer, mais que l'on pourrait retrouver à l'avenir dans CSS 3. Elles sont comprises par Firefox depuis la version 1.5 ou 2 (je ne me souviens plus exactement), mais pas par les autres navigateurs alternatifs à ma connaissance.

En l'occurrence, on utilisera plutôt un overflow: auto sur un bloc en hauteur fixe.

Remarque : les blocs extensibles en hauteur sont généralement préférables pour l'ergonomie générale d'une page, surtout s'il s'agit d'un bloc ayant un contenu important et non pas un contenu annexe.
Hmmm j'ai ces codes : (je pense que c'est mon html qui est faux) Smiley murf 

En CSS : 
.conteneur {
height: 400px;
width: 800px;
overflow: auto;
margin-left: auto;
margin-right: auto;
position: fixed;
}

En html :

Entre les balises <head> :
<link href="style.css" rel="stylesheet"
type="text/css"

Entre les balises <body> : 
<div id="conteneur">
<p>(texte)
</p>
</div>


Je ne suis qu'un débutant en CSS (commencé aujourdhui) alors veuillez m'excuser pour els balises que je ne maitrise pas ... Smiley sweatdrop

Florent V. a écrit :
Remarque : les blocs extensibles en hauteur sont généralement préférables pour l'ergonomie générale d'une page, surtout s'il s'agit d'un bloc ayant un contenu important et non pas un contenu annexe.

Pour ta remarque, je sais mais le problème est que j'ai un fond que j'aimerais garder et qui a comme taille 1024 / 768 et si je fait un bloc extensible a l'intérieur j'aurais un autre bout de fond... pas top

edit : j'ai réussi Smiley biggrin voici mon code : 

<html>
<head>
  <meta http-equiv="content-type"
 content="text/html; charset=ISO-8859-1">
  <title>mon cadre en css</title>
  <style>
#conteneur {
width:700px;
height:250px;
margin:auto;
padding:10px;
overflow: auto;
}
  </style>
</head>
<body
 style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); background-image: url(fond.jpg);"
 link="#000099" alink="#000099" vlink="#990099">
<div style="text-align: center;"><img
 style="width: 700px; height: 175px;" alt=""
 src="../logo1.jpg">
<br>
</div>
<div id="conteneur"> Texte </div>
</body>
</html>

voilà ma réalisation pour le moment... ICI
Modifié par soyuka (28 Jan 2007 - 12:35)
soyuka a écrit :
Hmmm j'ai ces codes : (je pense que c'est mon html qui est faux)

Le HTML utilise un identifiant (attribut id), et le CSS utilise un sélecteur de classe (de type .classe). Il faut corriger soit l'un, soit l'autre. Le sélecteur d'identifiant est de la forme #identifiant.

soyuka a écrit :
Pour ta remarque, je sais mais le problème est que j'ai un fond que j'aimerais garder et qui a comme taille 1024 / 768 et si je fait un bloc extensible a l'intérieur j'aurais un autre bout de fond... pas top

C'est plutôt ça le problème, donc. Dans ce cas, autant poser sur le forum la question : « j'ai une image de fond de hauteur fixe et je ne veux pas qu'elle se répète, comment je fais si mon contenu est trop important ? ». Après quoi, on te suggérera plusieurs solutions intéressantes. Là, tu es parti sur une solution (à mon sens peu intéressante car posant de gros problèmes d'ergonomie), et tu demandes de l'aide pour la mettre en place.

Méthodologie : même si tu envisages une solution précise (ce qui en soi est une très bonne chose, hein !), il est toujours utile de préciser quelles contraintes amènent à choisir cette solution, ou tout simplement de présenter son problème et les solutions envisagées. On a toujours de meilleurs conseils quand on présente le contexte. Smiley cligne

En l'occurrence, j'aurais pu te conseiller : prévois une couleur de fond globale et une image qui viendra se fondre dedans (par un léger dégradé, par exemple). Ensuite, il suffit de préciser background-repeat: no-repeat, et on n'aura plus de répétition de l'image.


<body
 style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); background-image: url(fond.jpg);"
 link="#000099" alink="#000099" vlink="#990099">

Ouillouillouille.
Voilà quelque chose de mieux organisé :
[b]HTML :[/b]
<body>

[b]CSS :[/b]
a {color: #909;}
a:visited {color: #009;}

body {
	color: black;
	background: white url(fond.jpg);
}
Re-ouillouillouille : l'image de fond de 500 Ko ! C'est environ 460 Ko de trop !
http://antoine.bluchet.free.fr/fond.jpg

De plus, cette image n'est pas conçue pour être répétable. Sur un écran de largeur supérieure à 1024px, on la voit se répéter avec des coupures très franches entre la fin de l'image et le début d'une nouvelle itération de l'image...

La solution :
- utiliser une image plus petite (200x200px, par exemple) ;
- travailler cette image pour qu'elle soit répétable sans coupures (les logiciels de graphisme tels que Adobe Photoshop ou The GIMP proposent des fonctions pour ce genre de choses) ;
- enregistrer l'image en l'optimisant, à priori en JPEG avec un taux de compression sufisamment élevé. Objectif poursuivi : image la plus légère possible (25 Ko est un bon repère, mais on pourra peut-être faire moins).

Pour l'image de fond qui porte le contenu, on peut faire la même chose mais en extensible :
http://web.covertprestige.info/test/05-boite-avec-bordures-en-html-et-css.html
bonsoir,
Tu as bien raison pour le sujet du forum...
Sinon pour les réponses, mn fond n'est effectivement pas fait pour se répeter, il est assez anarchique au niveau des formes et c'est ce qui est bien...
La taille de l'image est apprament trop grosse mais bon cela n'affecte pas tellement la vitesse de chargement...
A part ça j'ai refait mon code, cette fois-ci il me convient, je vais rajouter un deuxième cadre à droite...
 [b]CSS : [/b]
#conteneur {
height: 250px;
width: 300px;
overflow: auto;
background-image: url(trans/in.png);
}
#tl {background: url(trans/tl.png) no-repeat top left;
position: top left;
height:20px;
}
#tr {background: url(trans/tr.png) no-repeat top right;
position: top right;
height:20px;
width:280px;
margin-left:20px;
}
#bl {background: url(trans/bl.png) no-repeat bottom left;
position: bottom left;
height:20px;
}
#br{background: url(trans/br.png) no-repeat bottom right;
position: bottom right;
height:20px;
width:280px;
margin-left:20px;
}

[b]HTML : [/b]
<div id="tl">
<div id="tr"></div>
</div>
<div id="conteneur">
aridus e lasso veniebat anhelitus ore, bla bla bla...
</div>
<div id="bl">
<div id="br"></div>
</div>

Modifié par soyuka (10 Feb 2007 - 13:34)
Sujet clos
Aller à