Aller au contenu
Zebulon

  • Pas encore inscrit ?

    Pourquoi ne pas vous inscrire ? C'est simple, rapide et gratuit.
    Pour en savoir plus, lisez Les avantages de l'inscription... et la Charte de Zébulon.
    De plus, les messages que vous postez en tant qu'invité restent invisibles tant qu'un modérateur ne les a pas validés. Inscrivez-vous, ce sera un gain de temps pour tout le monde, vous, les helpeurs et les modérateurs ! :wink:

[Résolu] JavaScript PHP CSS XHTML - lesquels utiliser ?

Raphdu01

Par Raphdu01
dans Programmation

 Partager

Messages recommandés

KewlCat Devil Member !

KewlCat

Posté(e)
Posté(e)

Oui, c'est plus clair.

Dans ce cas-là, tu peux définir un padding de 10px sur ton conteneur (le "padding" c'est de l'espace supplémentaire à l'intérieur du bloc). La hauteurdu bloc sera déterminée par la hauteur de son contenu, hauteur à laquelle va s'ajouter le padding... Donc sur les pages où tu auras "300px de haut" de texte, le conteneur aura une hauteur de 310px....

Lien vers le commentaire
Partager sur d’autres sites

Raphdu01 Power Member

Raphdu01

Posté(e)
  • Auteur
Posté(e)

Ca a marché pour mon bloc mais pas le conteneur comment ce fait-il ?

 

Voila un extrait de mon code css :

.conteneur {
width: 768px;
background-color: yellow;
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
margin-left: auto;
margin-right: auto;
padding-bottom: 20px;
}
.droite {
padding-bottom: 20px;
width: 76%;
background-color: Navy;
margin-top: 20px;
float: right;
text-align: center;
padding-top: 20px;
color: white;
}

 

Normalement j'ai un fond jaune sur toute la page (.conteneur), et par dessus un bloc bleu (.droite) qui contient le texte de ma page.

 

Avec ce code le fond bleu s'est adapté au texte mais pas le jaune, il fait environ 2 cm de haut tout en haut de ma page...

Lien vers le commentaire
Partager sur d’autres sites
Raphdu01 Power Member

Raphdu01

Posté(e)
  • Auteur
Posté(e)

Oui c'est ça désolé je n'ai pas précisé (pour moi c'était logique). J'ai hésité à mettre le fichier html car je pensais que ça allait être inutile mais le voilà :

 

<html>
<head>
<style type="text/css" media="all">
<!--
@import url(style.css);
-->
</style>
</head>
<body>
<div class="conteneur">

<div class="haut">Quad-Electro</div>

<div class="gauche"></div>

<div class="droite"><a href="accueil.html">
<img src="Lions_copulation.jpg"></a><br><br><br>
sdjdglhglksfdglksdhsdflg<br>
sdjdglhglksfdglksdhsdflg<br>
sdjdglhglksfdglksdhsdflg<br>
sdjdglhglksfdglksdhsdflg<br>
</div>
</div>
</body>
</html>

 

Le contenu est complètement bidon mais c'est un projet qu'on avais commencé en cours et que j'adapte pour faire mes tests.

Lien vers le commentaire
Partager sur d’autres sites
KewlCat Devil Member !

KewlCat

Posté(e)
Posté(e)
Le contenu est complètement bidon
Je vois ça.....

<img src="Lions_copulation.jpg">

:-P

 

Désolé, un détail m'avait échappé sur la feuille de style...

Voila un extrait de mon code css :

.droite {
(...)
float: right;
(...)
}

Quand tu mets un élément en "float" il sort du flot normal du document, c'est à dire qu'il n'influe plus sur la taille de son conteneur (entre autres choses) donc il est normal que le conteneur ne "descende" pas jusqu'en-dessous du bloc de classe "droite"
Lien vers le commentaire
Partager sur d’autres sites
Raphdu01 Power Member

Raphdu01

Posté(e)
  • Auteur
Posté(e)

Bien vu

 

Mais comme souvent, la résolution d'un problème en créée un autre : vu que j'ai enlevé mon float: right, le bloc .droite vient se superposer à mon bloc haut et gauche ! Et d'ailleurs je crois bien que j'avais mis un float justement pour éviter ça (je me rappelle pas à quoi ça sert).

 

Je vais essayer de me démerder un peu parce que je commence à avoir l'impression de rien faire et de te faire bosser à ma place.

 

Donc je regarde et je reviens crier au secours si ça ne s'arrange pas.

Lien vers le commentaire
Partager sur d’autres sites
Greywolf Tera Power Extrem Member

Greywolf

Posté(e)
Posté(e)

il faut gérer avec l'attribut 

position:relative;
top: 10px;
left: 10px;

 

la position est relative à celle de l'élément père (ici à 10px du haut et 10px du bord gauche)

Lien vers le commentaire
Partager sur d’autres sites
Raphdu01 Power Member

Raphdu01

Posté(e)
  • Auteur
Posté(e) (modifié)

Mouais ben je galère.

 

Dès que j'ai commencé le css j'ai pas trop aimé parce que je trouvais que c'était que de la bidouille et mon avis n'a pas changé ! Mais j'en ai besoin ^^ !

 

Vu que la je suis au taf je suis pas trop en condition pour faire ça (même si au final c'est pour mon projet que je doit faire ce site) donc ce soir je ferai un petit schéma pour vous montrer ce que j'essaye de faire, et si j'ai réussi d'ici là ben je vous passerai le code pour la correction ^^

 

En tout cas je suis pas près de faire de la déco tant que je serais pas capable de placer trois pauvres blocs.

 

PS : comment on fait pour gérer la position du bloc de droite par rapport à celui de gauche (pour qu'ils se mettent à coté), parce que je crois que c'était le float qui faisait ça mais vu que je l'ai viré !

Modifié par Raphdu01
Lien vers le commentaire
Partager sur d’autres sites
KewlCat Devil Member !

KewlCat

Posté(e)
Posté(e)
la position est relative à celle de l'élément père (ici à 10px du haut et 10px du bord gauche)
En position "absolute" c'est par rapport au conteneur ("parent") en position "absolute" ou "relative" le plus proche (et à défaut, par rapport au body).

La position "relative" déplace le bloc par rapport à la place qu'il occupe dans le flot normal des éléments du document.

Lien vers le commentaire
Partager sur d’autres sites
Raphdu01 Power Member

Raphdu01

Posté(e)
  • Auteur
Posté(e)

Voila mon schéma. Je vous rassure les couleurs c'est juste pour y voir clair ^^

 

37e754bff614b95a644b2053f4d07d58.jpg

 

Et le fichier css complet : 

.conteneur {
width: 760px;
background-color: yellow;
margin-left: auto;
margin-right: auto;
padding-bottom: 10px;
}
.haut {
width: 740px;
background-color: green;
text-align: center;
text-decoration: blink;
color: Yellow;
font-size: 50px;
padding-top: 25px;
padding-bottom: 25px;
position: relative;
top: 10px;
left: 10px;
}
.gauche {
width: 180px;
background-color: red;
position: relative;	
top: 120px;
left: 10px;
padding-right: 10px;
padding-bottom: 10px;
}
.droite {
width: 550px;
background-color: Navy;
text-align: center;
color: white;
padding-top: 10px;
padding-left: 10px;
padding-bottom: 10px;
position: relative;
top: 120px;
left: 200px;
}
a {
color: White;
}
ul {
color: white;
}
a:hover {
color:red;
}

 

Le HTML est déjà posté.

 

Ce que j'arrive pas à faire :

 

Mettre les deux cadres cote à cote.

 

Faire en sorte que la taille du conteneur s'adapte à la taille du contenu, comme j'ai réussi à le faire avec les bloc gauche et droite.

 

Voilà je crois que c'est tout !

 

Bon moi j'y retourne en espérant qu'un jour ça marche histoire que je commence à faire du joli !

 

A++

 

EDIT : Kewlcat je crois que je viens de comprendre ton dernier post (je crois). j'ai mis le conteneur en absolute pour que les autres le prenne comme parents mais ça me les a mis tout à gauche de la page, alors que je voudrait bien qu'ils restent au milieu comme c'était.

 

EDIT2 : pour bien finir je rajoute ce que je vois actuellement avec ce code

 

01041715eeb8263e0a7ce9f724b1175d.jpg

Lien vers le commentaire
Partager sur d’autres sites

Rejoindre la conversation

Vous pouvez publier maintenant et vous inscrire plus tard. Si vous avez un compte, connectez-vous maintenant pour publier avec votre compte.
Remarque : votre message nécessitera l’approbation d’un modérateur avant de pouvoir être visible.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.

×
 Partager
Aller sur la liste des sujets

  • En ligne récemment   0 membre est en ligne

    • Aucun utilisateur enregistré regarde cette page.
×
×
  • Créer...