28173 sujets

CSS et mise en forme, CSS3

Bonjour , je suis entrain de faire un site pour un client sur un mouvement que je deteste mais bon , la n'est pas le sujet , Le voici le sujet :
http://playstationx.free.fr/
J'aimerais que mon div gener le saut automatiquement !

<!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" >
   <head>
       <title>Index</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <link rel="stylesheet" media="screen" type="text/css" title="Design" href="style.css" />
	</head>
	<body>
	<center><table>
	<tr>
	<td id="coté-gauche"></td>
	<td>
	
	<center><div id="header" ></div></center>
	<img id="logo" SRC="/Images/logo.png" /> 
	<center><div id="haut-content" ></div></center>
	
	<center><div id="BG1">
	<table>
	<tr>
	<td class="haut">
	
	<div id="Menu">
	<div id="Haut-Menu"></div>
	<div id="BG-Menu"><p>£££££££££££££££££££££££££££££££££££££££££££££££££££££££££££££££££££££££££££££££££££££££££££££</p></div>
	<div id="Bas-Menu"></div>
	</td>
	<td class="haut">
	<div id="content">
	<div id="Haut-content"></div>
	<div id="BG-content">
		
			$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
			$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
			$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
			$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
		<div id="Le_padding">	
		</div>
	</div>
	<div id="Bas-content"></div>
	</td>
	</tr>
	
	</table>
	</div>
	
	
	
	
	
	</div></center>
	<center><div id="bas-content" ><center>|Site réalisé par <A HREF="http://minicr0.free.fr/">minicr0</A>.|
	</center></div></center>
	</td>
	<td id="coté-droit"></td>
	</table></center>
	
	</body></html>


body
{
	background-color: #000000;
}


#header
{
	background-image: url(/Images/header.png);
	width: 744px;
	height: 108px;
	text-align: left;
}

#haut-content
{
	background-image: url(/Images/haut-content.gif);
	width: 744px;
	height: 33px;
	text-align: left;
}

#BG1
{
	background-image: url(/Images/bakground-bas.png);
	background-repeat: repeat;
	width: 744px;
	height: auto;
	text-align: left;
}



#bas-content
{
	background-image: url(/Images/content-bas.png);
	width: 744px;
	height: 72px;
	text-align: left;
}

#coté-droit
{
	vertical-align: top;
	background-color: black;
	background-image: url(/Images/cot%e9-gauche.png);
	background-repeat: no-repeat;
	width: 82px;
	height: 392px;
}

#coté-gauche
{
	vertical-align: top;
	background-color: black;
	background: url(/Images/cot%e9-droit.png) bottom;
	background-repeat: no-repeat;
	width: 82px;
	height: 392px;
}

#Menu
{
	width: 154px;
	text-align: left;
	float: left;
	padding: 5px;
	
}

#Haut-Menu
{
	background-image: url(/Images/Haut-menu.gif);
	background-repeat: no-repeat;
	height: 30px;
	text-align: left;
	width: 154px;
}

#BG-Menu
{
	background-image: url(/Images/BG-menu.png);
	background-repeat: repeat-y;
	height: auto;
	text-align: left;
	padding: 14px;
	padding-right: 30px;
	width: 154px;
}

#Bas-Menu
{
	background-image: url(/Images/Bas-menu.gif);
	background-repeat: no-repeat;
	height: 29px;
	text-align: left;
	width: 154px;
}



#content
{
	float: right;
	padding: 0px;
	width: 553px;
}

#Haut-content
{
	background-image: url(/Images/Content-haut.gif);
	width: 553px;
	height: 33px;
	text-align: left;
}

#BG-content
{
	background-image: url(/Images/BG-content.png);
	width: 553px;
	height: auto;
}

#Bas-content
{
	background-image: url(/Images/bas-content.gif);
	width: 553px;
	height: 28px;
	text-align: left;
}

#Le_padding
{
	padding: 0px;

	margin: 0px;
}


#logo
{
	position: absolute;
	top: 60px;
	left: 80px;
}

.petit
{
	width: 154px;
}

.haut
{
	vertical-align: top;
}

a {
	color: #FF33CC;
}

a:hover {
	color: #000000;
}

a:active {
	color: #FF0000;
}

a:visited {
	color: #FF9900;
}


Merci d'avance !
Bonjour,
Essai avec un texte réel ou à défaut un "lorem ipsum"
Déjà tu auras plus de chance que ton texte passe à la ligne automatiquement.
Je n'ai pas regardé ton code en détail, mais si tu as défini une largeur à ton contener texte, il n' y a pas de raison que le texte dépasse.

PS ; je ne suis pas certain qu'on peut utiliser des caractères accentués pour nommer des "id" ???
Bonjour,

En tout logique le navigateur ne coupe les mots que s'il y a des espaces ou des tirets (-)

Donc en mettant uniquement des "$" ton navigateur va considérer que ta ligne est un mot 'il n'a pas le droit de le couper et ton div ne pourra pas y faire grand chose... (c'est comme si tu balance une image de 4000px de largeur)

Comme le dit gaelgerard essais avec du texte latin. Voici un générateur de texte latin : http://www.lipsum.com/

Tu peux choisir le nombre de paragraphes que tu veux etc.

L'avantage du texte latin c'est qu'il aura un comportement très proche du texte définitif du site et qu'il reflétera mieux ce que ton client auras en finalité.

C'est toujours plus sympa que du "bolo bolo" ou "$$$$$".

Cordialement,
Kaimite
un bon mix de tableau et de div ! encore une personne qui passe au css à moitié. pas étonnant les comportements indésirables avec des div dans des cellules de tableaux
jeremw a écrit :
un bon mix de tableau et de div ! encore une personne qui passe au css à moitié. pas étonnant les comportements indésirables avec des div dans des cellules de tableaux


Les tableaux font parti des balises HTMl valide !

C'est l'usage qu'on en fait qui n'est pas valide ! Smiley biggol

<hors-sujet mode="activated" />

Le fushia qui flash est illisible !

<hors-sujet mode="off" />
Kaimite a écrit :
Comme le dit gaelgerard essais avec du texte latin. Voici un générateur de texte latin : http://www.lipsum.com/

Tu peux choisir le nombre de paragraphes que tu veux etc.

L'avantage du texte latin [...]

Il ne s'agit pas de texte latin, mais de faux-texte, inspiré d'un texte latin mais ne voulant strictement rien dire.

PS: Minicr0, merci de penser à modifier le titre de ton sujet pour le rendre plus précis.
Modifié par Florent V. (22 Nov 2007 - 11:48)
Oups...

Désolé pour cette grossière erreur... Je vais de suite demander à un de mes voisins de me fouetter jusqu'au sang Smiley cligne

Je me permet juste de citer l'auteur du site :
a écrit :

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

Ce n'est donc pas toujours du faux texte. Mais c'est vraiment pinailler pour pas grand chose et je me demande si ce débat fera vraiment avancer quelque chose.

Cordialement,
Kaimite
Florent V. a écrit :

Il ne s'agit pas de texte latin, mais de faux-texte, inspiré d'un texte latin mais ne voulant strictement rien dire.

Kaimite a écrit :

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.


Kaimite, Florent V. dit exatcement ce que ta citation raconte. Smiley cligne

Vous parlez de la même chose ! Donc pas besoin de débat étant donné que vous êtes daccord ! Smiley biggrin
Merci beaucoup, pour vos réponses , je vais les essayers !

P.S : le "lorem-ipsum" est un faux -texte car si on essaye de le traduire , il ne veut rien dire -_-"
Smiley rolleyes Smiley rolleyes Smiley rolleyes
Je ne suis pas certaine que tu aies bien lu la totalité des échanges ci-dessus.
Voici les explications de Florent :

Florent V. a écrit :

Il ne s'agit pas de texte latin, mais de faux-texte, inspiré d'un texte latin mais ne voulant strictement rien dire.


Par ailleurs, je te remercierais de bien vouloir modifier ton intitulé de sujet comme Mikachu et Florent te l'ont déjà demandé.
Bon courage pour la suite...
<Mode chuchotement="on">
Smiley murmure Je crois que micr0 à du mal avec l'édition de sujet !
<Mode chuchotement="off">


Comme le dit si bien Wikipedia :


a écrit :
En imprimerie, le faux-texte (également appelé lorem ipsum, lipsum ou bolo bolo) est un texte sans valeur sémantique, permettant de remplir des pages lors d'une mise en forme afin d'en calibrer le contenu en l'absence du texte définitif.

Généralement, on utilise un texte en faux latin (le texte ne veut rien dire, il a été modifié), le Lorem ipsum ou Lipsum qui permet donc de faire office de texte d'attente. L'avantage de le mettre en latin est que l'opérateur sait au premier coup d'œil si la page contenant ces lignes n'est pas valide, et surtout que l'attention du client n'est pas dérangée par le contenu, et qu'il demeure concentré seulement sur l'aspect graphique.

Modifié par Cocci_uk (23 Nov 2007 - 14:25)