Forum d'entraide PHPFrance

Bonjour,

Meilleurs voeux à tous !!!

J'ai un tout p'tit souci avec ce code :

<html>
<head>
<title>Mon modèle</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#conteneur {
position: relative;
width: 100%;
margin: 0 auto; 
background-color:#CCCCCC;
}
#centre {
background-color:#0000CC;
margin-left: 150px;
}
#gauche {
position: absolute;
left:0px;
width: 150px;
}
</style>
</head>
<body>
<div id="conteneur">
<div id="gauche">gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche
 gauche</div>
  <div id="centre">partie ccontenu occupant le reste de la largeur partie avec 
    du contenu occupant le reste de la largeur partie avec du contenu occupant 
    le reste de la largeur partie avec du contenu occupant le reste de la largeur 
    partie avec du contenu occupant le reste de la largeur partie avec du contenu 
    occupant le reste de la largeur partie avec du contenu occupant le reste de 
    la largeur partie avec du contenu occupant le reste de la largeur partie avec 
    du contenu occupant le reste de la largeur partie avec du contenu occupant 
    le reste de la largeur partie avec du contenu occupant le reste de la largeur 
    <hr style="visibility:hidden;clear:both;" /></div>
</div>
</body>
</html>

Comment faire pour que :
- le contenu du float "gauche, gauche..." ne dépasse pas de ce float justement ?
- le float reste imbriqué dans le conteneur ?
- le conteneur suive la taille du float

3 idées pour exprimer 1 résultat au final si possible compatible avec toutes les résolutions et tous les navigateurs, sinon je jouerai du if

Merci de votre aide ^^

En forme moi dis donc

Hello,

On est d'accord que tu as bien le doctype dans ta page ?

Pour ton soucis :
* pourquoi width:100 % dans ton conteneur ? Soit rien ou soit une valeur exprimée en pixel.
* Pourquoi ce positionnement en absolu ?

Code : Tout sélectionner

#conteneur {
	width: 960px; /*À toi de corriger la valeur*/
	margin: 0 auto;
	background-color:#CCCCCC;
}
#centre {
	background-color:#0000CC;
	margin-left: 150px;
}
#gauche {
	float:left;
	width: 150px;
}
/*Au passage :*/
hr{
	visibility:hidden;
	clear:both;
}

Également, connaître div c'est bien, connaître les autres éléments, c'est mieux.

Bonne journée

Hého Mr W3C

Plus sérieusement, ça marche nickel niuxe, merci.

Pour répondre à tes questions :
Le width, c'était pour prendre toute la largeur. Je pensais que c'était comme les tableaux...
L'autre propriété : un oubli de ma part ^^

Pour la dernière phrase, était-ce vraiment utile ? Le but d'un forum c'est de progresser, non ? On ne maitrise pas tout...et moi je suis qu'une fille en plus

Tu veux pas partager ta matière grise plutôt et tenter de me filer quelques clefs supplémentaires voir si tu as le temps une p'tite expli car visiblement j'ai pas tout saisi...

Ps : ça donne quoi Komodo ?

Hello Foetus69,

En me relisant, je vois que j'ai fait un peu le hussard. Je vais me rattraper. ^^

Le width, c'était pour prendre toute la largeur. Je pensais que c'était comme les tableaux...

Surtout ne pas penser en mise en page tableau (voir plus loin) et penser que chaque élément html n'a pas le même comportement.

Par défaut, un élément HTML (balise) à son propre rendu. Un élément li par exemple à un rendu différent que son père ul ou ol.
css :

Code : Tout sélectionner

ul{
    background-color:purple;
}
li{
    background-color:red;
}

html :

<ul>
    <li>une puce</li>
</ul>

Aussi, un élément de rendu en ligne (ex : a) n'aura pas le même comportement qu'un élément de rendu bloc (ex p). Bientôt l'élément a aura un autre comportement avec l'arrivée de l'HTML 5 si je ne m'abuse.
css :

Code : Tout sélectionner

p{
    background-color:rgb(64,128,64); /* depuis css3 rgba(160,64,32,0.5) ^^ (hum IE....)*/
}
a{
    background-color:rgb(128,64,64);
}

À noter qu'une balise en ligne ne doit pas être à l'extérieur d'une balise bloc :

<span class="une_classe"><h2>un titre de 2e niveau</h2></span>

l'écriture correcte serait :

<h2><span class="une_classe">un titre de 2e niveau</span></h2>

Pour optimiser le tout car là, il n'y a pas vraiment lieu de mettre un spansur un élément h2

<h3 class="une_classe">un titre de 3e niveau</h3>

Pour te donner une idée du comportement de span et de son utilisation :
css :

Code : Tout sélectionner

h1 span{
    background-color:#F69;
}
html :

<h4 class="une_classe">un titre de <span>4e niveau</span></h4>

Pour un comportement plus élaboré avec span en exemple :

Code : Tout sélectionner

#global{
    width:300px;
}
h1 span{
    background-color:black;
    color:white;
    padding:3px;
}
.lettrine {
    float: left;
    height: 32px;
    width: 32px;
    font-size:2.5em;
}
.pcap{
    font-variant:small-caps;
}
p span{
    color:teal;
}

<div id="global">
    <h1>une <span>présentation</span></h1>
    <p><span class="lettrine">U</span><span class="pcap">n lecteur</span>, même s’il est intéressé, peut abandonner la lecture si la présentation n’est pas agréable. Inversement une présentation soignée peut décider un lecteur réticent à prendre connaissance d’un document.</p>
</div>

Je pensais que c'était comme les tableaux...

Si tu as bien suivi ce que je viens d'écrire, chaque élément ne se comporte pas comme un tableau donc je t'invite à oublier cette vieille notion d'un point de vue web 2.0. Je t'encourage à factoriser tous les styles (pas de style en ligne)

En ce qui concerne ton positionnement initial :
* Utiliser le positionnement absolue avec parcimonie (avec qui ?)
* utiliser les éléments HTML suivant une bonne sémantique non pas suivant leur rendu par défaut. Une bonne sémantique donne des résultats très convaincant sur de nombreux points tel que le référencement par exemple. À noter que le rendu d'un élément peut être changé via le CSS
* Faire attention aux notions de père et enfant. Certains éléments n'acceptent qu'un seul père ou enfant (dl, dt et dd par exemple).

En lisant ton code css html, je vois l'emploi de l'élément hr. Cela peut être très judicieux de la placer mais ça peut être également défavorable. Si ton contenu demande une vrai séparation, je dis oui et c'est judicieux. Si c'est pour palier à un problème de positionnement après, je dis non sauf si le contenu suivant exprime une autre idée.
Pour être plus précis dans ton code, j'écrirai plutôt un truc du style :
html :

Code : Tout sélectionner

<div id="conteneur">
<div id="gauche"><p>gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche gauche</p>
 gauche</div>
  <div id="centre"><h1>partie contenu</h1><p>occupant le reste de la largeur partie avec
    du contenu occupant le reste de la largeur partie avec du contenu occupant
    le reste de la largeur partie avec du contenu occupant le reste de la largeur
    partie avec du contenu occupant le reste de la largeur partie avec du contenu</p><p>
    occupant le reste de la largeur partie avec du contenu occupant le reste de
    la largeur partie avec du contenu occupant le reste de la largeur partie avec
    du contenu occupant le reste de la largeur partie avec du contenu occupant
    le reste de la largeur partie avec du contenu occupant le reste de la largeur</p>
    <hr /></div>
</div>

css :

Code : Tout sélectionner

#conteneur {
   width: 960px; 
   margin: 0 auto;
   background-color:#CCC;
}
#centre {
   background-color:#00C;
   margin-left: 150px;
   clear:right;
}
#gauche {
   float:left;
   width: 150px;
}
hr{
   visibility:hidden;
}

et moi je suis qu'une fille en plus

Arf, je prône pour l'égalité. ^^

Bonne soirée à toi.

Trop chou !!! MERCI NIUXE, c'est beaucoup plus clair maintenant

Je mets en résolu

Inkscape c'est vraiment chouette. Par contre ça donne quoi Komodo, connai po

?

Foetus69

Hello Foretus69,

Trop chou !!! MERCI NIUXE, c'est beaucoup plus clair maintenant

De rien.

Inkscape c'est vraiment chouette. Par contre ça donne quoi Komodo, connai po ?

Foetus69

De mon côté, je connais très bien la suite Adobe (Photoshop, Illustrator, Dream, inDesign,etc.) et je remarque que depuis pas mal de temps que beaucoup de logiciels gratuits font aussi bien voir mieux que les payant (Komodo vs Dreamweaver par exemple). Donc, de plus en plus, je me tourne vers le monde de linux. Là, sur ma machine j'ai installé Karmic Koala depuis peu. Je ne suis pas encore sous Linux, vu que je suis nomade et que j'ai des soucis de connexion internet avec mon portable (clef 3g+). Toutefois, le wifi fonctionne à merveille. Je suis également sûr qu'une connexion via un câble Ethernet fonctionne également. Pour le moment, je mets ce problème de côté, car j'ai plus urgent à faire. Donc, je suis encore obligé de tourner sous vista. Je peux dire que vista, je n'en suis pas du tout content. Il est moux, problème de sécurité, etc. Bien que je ne vais pas dans des sites poubelles, régulièrement je suis obligé de lancer : ccleaner, anti spym**** et autres anti sales bestioles de trolls sauvages.

Je ne comprends pas pourquoi les constructeurs d'ordinateurs (hp (hum...), packard bell, acer (hum...), ASUS ^^, Toshiba ^^, Sony ^^) n'offrent pas à leur client la possibilité d'avoir Linux soit en dual boot ou soit seul à l'origine. Aller sur internet et faire de la bureautique, Linux sait très bien le faire... Payer un OS pour faire ce genre de choses (aller essentiellement sur internet), je ne vois pas l'intérêt.

j'utilise Komodo depuis à peu près un an. Je peux dire que ce logiciel est très bien. Bien que j'ai ma petite préférence pour Fireftp (extension firefox), Komodo a un client ftp intégré.
La saisie auto supportée à ma connaissance et suivant les langages que j'utilise :
html, css 2.1, php 5.3, javascript partiellement (sa logique est un peu différente. Enfin, je ne suis pas un cador en js). Je me doute qu'il fait cela avec le Python (ce qui serait très logique), Ruby, XSLT, etc.

La saisie auto en HTML, c'est du caviar. Dès le départ, elle est sympa, mais si tu ajoutes une extension (htmltoolkit : gratuite) à cette fonctionnalité, Dreamweaver peut aller se rhabiller. J'exagère un peu puisque Dreamweaver est tout de même un très bon éditeur. Par exemple lorsque je suis sous Komodo et que je fais soit :

* <p + espace, j'aurai : <p class=""></p>
* <p + tab, j'aurai <p></p>

À noter que le curseur sera placé dans un endroit bien définit. C'est un exemple, mais il y en a d'autres aussi. fermeture automatique des balises, etc.

Il y a des langages où la saisie auto est totalement inexistante. ex : le sql.
Par contre, la coloration syntaxique ou la gestion du code sont maintenus.

Les dernières versions des langages supportées ne sont pas vraiment voir pas du tout reconnues par Komodo. (html 5 - css 3).

Avec Komodo, tu peux afficher en temps réelle le résultat de ton code (php, hml, css, js, etc.) via le browser interne (moteur Mozilla). Également, si tu crées une variables en amont dans ton code, même dans un autre fichier (!), cette dernière peut être auto-saisie.

Komodo plante très rarement (une ou deux fois depuis que je l'utilise). Via des raccourcis clavier ou petite « snipet », tu peux écrire des lignes de codes pré-saisies. Tu peux les créer toi même ou utiliser la bibliothèque existante mis à ta disposition. Le tout peut être rangé dans des dossiers.
ex :

Code : Tout sélectionner

<ul>
	<li>le curseur à cet endroit</li>
</ul>

Il a une gestion de fichiers sympa. Tu crées un projet et à partir de là, tu as un explorateur de projets. D'ailleurs je n'ai pas encore bien compris comment réellement faire un copier/coller. Bien que tu puisses accéder au vrai explorateur de fichier via le bouton droit, il y a également une extension gratuite prévue pour cet effet.

Grâce au browser interne, tu peux créer des liens vers tes sites favoris (local ou online). Après, tu n'as plus qu'à lancer l'url et tu as l'affichage du site dans Komodo. Il y a la possibilité de rechercher un fichier, un mot dans un fichier.

La version IDE est plus poussée. Cependant, elle est payante. Personnellement, il y a des chances que je finisse par l'acheter (300 $ tout de même). Je pense que peut être j'essaierai Eclipsepour voir ce que ça donne également. Mais sinon pour le moment Komodo ^^. Si quelqu'un sur le forum connait les deux logiciels et me dire les point forts et faibles, ce serait sympa ^^.

En ce qui concerne Inkscape, je commence à l'appréhender. Sa logique est différente d'Illustrator, mais il est très sympa. J'ai déjà fait des petits trucs avec. ex : nounours.svg (s'il ne s'affiche pas dans ton browser, bouton droit sur le lien -> enregistrer la cible sous...)

bon test

Je ne comprends pas pourquoi les constructeurs d'ordinateurs (hp (hum...), packard bell, acer (hum...), ASUS ^^, Toshiba ^^, Sony ^^) n'offrent pas à leur client la possibilité d'avoir Linux soit en dual boot ou soit seul à l'origine.

Dell propose des PC où Ubuntu est installé.

Hello,

Il me semble qu'Asus fait ou a fait la même chose (eeepc). C'est dommage que Linux ne se démocratise pas d'avantage.

Forum d'entraide PHPFrance

J'ai l'float qui déborde, ça déborde !!!

J'ai l'float qui déborde, ça déborde !!!

Re: J'ai l'float qui déborde, ça déborde !!!

Re: J'ai l'float qui déborde, ça déborde !!!

Re: J'ai l'float qui déborde, ça déborde !!!

Re: J'ai l'float qui déborde, ça déborde !!!

Re: J'ai l'float qui déborde, ça déborde !!!

Re: J'ai l'float qui déborde, ça déborde !!!

Re: J'ai l'float qui déborde, ça déborde !!!