28173 sujets

CSS et mise en forme, CSS3

VRAIMENT BESOIN D'AIDE SVP

Bonjour à tous ça fait deux jour que je me galère à cherccher et bien sur je ne trouve pas...

Voilà ma page HTML tout ce qu'il y a de plus classique : header / content (menu+page) / footer :


body>

    <div id="container">

        <div id="header">
        </div>

        <div id="content">
        
            <div id="menu">
            </div>
        
            <div id="page">
            </div>
            
        </div>

        <div id="footer">
        </div>
    
    </div>

</body>


Et voilà la CSS qui va avec :


body
{
    background-color:#0A038D;
    margin:10px 10px 10px 10px;
}

#container 
{
    width:99%;
    height:100%;
}

#header 
{
    width:100%;
    height:75px;
    background:url(Images/haut_centre.gif) repeat-x;
}

#content 
{
    width:100%;
    background-color:#F0F0FF;
}

#menu 
{
    float:left;
    margin-left:1px;
    width:169px;
}

#page 
{
    margin-left:170px;
}

#footer 
{
    width:100%;
    height:50px;
    background:url(Images/bas_centre.gif) repeat-x;
}


J'aimerai savoir qu'est ce que je dois rajouter pour placer deux images dans les deux coins (gauche et droite) de mon header ? En fait c'est pour faire des coins arrondis aux header et j'ai deux images pour les arrondis...

J'ai essayé ça :

=> HTML

<img src="..." class="haut_gauche">
<img src="..." class="haut_droite">


=> CSS

.haut_gauche
{
    position:absolute;
    top:10px;
    left:10px;
}

.haut_droite
{
    position:absolute;
    top:10px;
    right:10px;
}


ça place bien l'image de gauche celle de doite ça fait n'importe quoi étant donné que je travailler en % pour que mon appli se redimensionne automatiquement à la taille de la fenêtre...

Vous avez une idée ? SVP je suis désespéré là...

Merci d'avance
Bonjour,
a écrit :
Vous avez une idée ?
Plutôt que de faire deux images pour les arrondis, pouquoi ne pas en faire une seule, de la largeur de l'entête avec les deux arrondis.
Ainsi, plus d'ennuis avec ton problème de positionnement.

Tu n'as pas présenté les images de cet entête, mais cette solution ne devrait pas peser plus lourd. (Avec une image bien compressée.)
Si tu as un lien vers une page en ligne, ou une capture d'écran...

a écrit :
celle de doite ça fait n'importe quoi étant donné que je travailler en % pour que mon appli se redimensionne automatiquement à la taille de la fenêtre...
Dans ce cas, essaye en donnant une taille relative (em, %...) et non pas fixe (en pixels).
Si je fais qu'une seule image (que je la fasse grande ou que je la fasse petite) les arrondis deviennent tout vilains quand l'utilisateur redimensionne (réduit ou agrandit) la fenêtre donc c pour ça que je suis parti sur la tactique Smiley biggrin suivante :
- deux images pour les coins
- et une centrale en repeat-x

Pour ta solution de mettre le Right en %, ça fonctionne pas bien non plus puisque mon container a un margin-right à 10px et mon % ne correspond pas forcément aux 10px de la div content qui est en dessous par exemple...

Comme c une appli ASP.NET g trouvé une solution qui consiste à rajouter l'attribut ImageAlign=Left pour la première et ImageAlign=Right pour la seconde dans les balises <asp:Image> et ça aligne par rapport à l'élément parent automatiquement. Smiley ravi
Seul cas de conscience ce positionnement n'est pas dans la CSS Smiley ohwell Mais bon pour quatre images je vais pas chipoter surtout que c dans ma MasterPage qui est par définition le modèle de présentation .NET donc RESOLU !

Merci en tout cas pour cette réponse si rapide

++
Administrateur
Bonjour,

L'usage et l'abusage des majuscules, surtout dans un titre, est proscrit sur ce Forum, c'est une des Règles.

a écrit :
11- Conventions d'écriture
L'emploi des majuscules est à utiliser avec parcimonie dans les titres de sujet comme dans les messages. En effet, un texte entièrement rédigé en majuscules donne l'impression que la personne crie sur un ton agressif, sur internet. Veuillez donner un titre de sujet évocateur lorsque vous en rédigez un nouveau, et non pas simplement 'Question', 'HELP', 'Problème!' ou 'URGENT!!!!'. Retenez ceci : à question bien posée, réponse vite trouvée. Le forum n'étant pas équipé d'un vérificateur d'orthographe, veuillez vous relire afin que votre message soit bien compris par tous et qu'on vous prenne au sérieux. Il est rappelé également que ce forum est... un forum, et non un tchat ou un support SMS. Vous êtes donc priés de respecter un minimum ce langage qu'est le français.


Je te demanderai donc d'éditer ton 1er message où tu peux éditer le titre de ton sujet pour quelque chose de plus pertinent et en minuscules. Merci d'avance,

Felipe
Modifié par Felipe (28 Apr 2006 - 13:20)
Sujet clos
Aller à