Communauté Informatique NDFR.net

Communauté Informatique NDFR.net (http://www.ndfr.net/forums/index.php)
-   Programmation Web (HTML, PHP, ASP, Java, XML, etc.) (http://www.ndfr.net/forums/forumdisplay.php?f=65)
-   -   Comment faire en CSS ? (http://www.ndfr.net/forums/showthread.php?t=8080)

Magi-X 09-08-2007 11:18
Comment faire en CSS ?
 
Salut,

Est-ce que quelqu'un peut me dire si c'est possible de faire comme l'image ci-dessous en css ?

J'en ai surtout sur le texte souligné, car un simple text-decoration: underline; met la ligne a la fin du "y".

http://www.dekeyser-sa.be/images/welcome-image.gif

Merci d'avance.

Benjy 09-08-2007 20:14
Peut-être vec une balise HR placée judicieusement ?

Magi-X 10-08-2007 10:42
2 Attachment(s)
Salut benjy,

Effectivement avec un HR c'est possible, d'ailleur après ton post je l'ai essaié et ça fontionne nickel sur Firefox mais internet explorer 7 ... bah c'est la cata.

Je dois travailler avec des positions absolute pour le HR et le petit texte "Spécialiste Cuisines", et le comportement n'est pas du tout le même sous IE7 (J'ose même pas essayer avec un IE < 7).

Le code html et css ci-dessous fonctionne parfaitement avec Firefox 2.x. Meme lors d'un [CTRL] + [SCROLL] ça s'agrendit comme il faut.

J'ai 2 sollution:
  1. Je me casse la tête à le faire fonctionner sur la pluspart des browsers
  2. Je laisse l'image, mais lors d'un zoom (sauf IE7) l'image ne s'agrendira pas.

HTML Code:
<div id="introduction">
        <h1>Dekeyser SA</h1>
                       
        <hr />
                       
        <h2>Spécialiste en Cuisines</h2>
</div>
Code:
#introduction {
        margin: 5em auto;
        width: 40em;
}

#introduction h1 {
        font-family: verdena, serif;
        font-size: 4.8em;
        text-align: center;
        color: rgb(32, 65, 98);
}

#introduction h2 {
        font-family: verdena, serif;
        font-size: 1.1em;
        position: absolute;
        top:9em;
        color: rgb(32, 65, 98);
        margin: 0 0 0 19em;
}

#introduction hr {
        position: absolute;
        top:8.68em;
        border: rgb(32, 65, 98) thin solid;
        width: inherit;
}
Firefox
http://www.ndfr.net/forums/attachmen...1&d=1186735936

IE 7 :(
http://www.ndfr.net/forums/attachmen...1&d=1186735936

Magi-X 10-08-2007 12:37
J'ai répondu trop vite ^^

J'ai réussi à le faire proprement pour que ça fonctionne en firefox et IE7 (les autres pas encore testé)

HTML Code:
<div id="introduction">
        <h1>Dekeyser SA</h1>
                       
        <div id="intro-underline">
                <hr />
        </div>
                       
        <div id="intro-msg">
                <h2>Spécialiste en Cuisines</h2>
        </div>
</div>
Code:
#introduction {
        position: relative;
        width: 40em;
        margin: 5em auto;
}

#introduction h1 {
        font-family: verdena, serif;
        font-size: 6em;
        font-weight: normal;
        line-height: normal;
        text-align: center;
        color: rgb(32, 65, 98);
}

#intro-msg {
        position: absolute;
        top: 5.8em;
        left: 0;
        right: 0;
}

#intro-msg h2 {
        font-family: verdena, serif;
        font-size: 1.1em;
        font-weight: normal;
        line-height: normal;
        color: rgb(32, 65, 98);
        text-align: right;
        padding-right: 4.5em;
}

#intro-underline {
        font-weight: normal;
        line-height: normal;
        position: absolute;
        top: 5em;
        left: 0;
        right: 0;
}

#intro-underline hr {
        color: rgb(32, 65, 98);
        border: thin rgb(32, 65, 98) solid;
}

Benjy 10-08-2007 17:05
Je te recommanderais quand même de paramétrer la taille et la position de ton logo en pixels, de sorte que tu n'aies pas de problèmes en cas de redimensionnement. Les em et les pourcentages c'est bien pour du texte standard. Pour des éléments tels que des logos et des menus, je conseille en général d'utiliser les pixels (et ça évite les [mauvaises] surprises).

Magi-X 10-08-2007 17:47
Quote:
Originally Posted by Benjy (Post 80041)
Je te recommanderais quand même de paramétrer la taille et la position de ton logo en pixels, de sorte que tu n'aies pas de problèmes en cas de redimensionnement. Les em et les pourcentages c'est bien pour du texte standard. Pour des éléments tels que des logos et des menus, je conseille en général d'utiliser les pixels (et ça évite les [mauvaises] surprises).
Oui oui, mais ce n'est pas un logo ...

Je l'affiche sur la premiere page comme intro en grand ... donc il peut être redimensioné, ca ne pose pas de problème.


All times are GMT +2. The time now is 19:51.

Powered by vBulletin® Version 3.8.4
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.