7 replies [Last post]
Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 2 years 46 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

I am trying to obtain this look

with strictly css

take a look at my sandbox for what I have so far

http://www.idprojections.com/sandbox.php

and click "'Mad About You' Logo Header"

I am trying to get .top h1:first-letter out of the natural flow so that it will stick out of the top of the .top div

if anyone has an idea, please lemme know.

Thanks! Until then I'll keep trying to figure it out...

Laughing out loud

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 20 hours 33 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9759
Points: 3841

*SOLVED* removing first-letter from the natural flow

I used spans instead of :first-letter. Seemed to work better for the approach I took. IE was wonky, of course. You'll see the hack for it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xml:lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      lang="en">
<head>
  <title></title>
  <meta name="generator"
        content=
        "HTML Tidy for Linux/x86 (vers 1 September 2005), see www.w3.org" />
        
  <meta http-equiv="content-type"
        content="text/html; charset=utf-8" />
  <meta name="editor"
        content="Emacs 21" />
  <meta name="author"
        content="Gary Turner" />
<style type="text/css">
/*<![CDATA[*/

html, body {
    margin: 0;
    padding: 0;
    }

body {
    background-color: gray;
    }

h1 {
    text-align: center;
    margin: 0;
    position: relative;
    font-weight: normal;
    }

* html h1 {
    position: relative;
    top: -.375em;
    }

h1 span {
    font-size: .9em;
    font-weight: bold;
    }

h1 span.first {
    line-height: 0;
    font-size: 2em;
    }

#banner {
    width: 17em;
    margin: 30px;
    color: white;
    background-color: black;
    }

#banner-content {
    border: 2px solid;
    border-color: #88f #008 #008 #88f;
    color: white;
    background-color: blue;
    position: relative;
    top: -5px;
    left: -5px;
    }

/*]]>*/
</style>
</head>

<body>
  <div id="banner">
    <div id="banner-content">
      <h1><span class="first">M</span>ad <span>A</span>bout <span>Y</span>ou</h1>
    </div> <!-- end banner-content -->
  </div> <!-- end banner -->
</body>
</html>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 10 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

*SOLVED* removing first-letter from the natural flow

Gary, just for the record, what was wrong with the first-letter approach?

Verschwindende wrote:
  • CSS doesn't make pies

HellsBells
HellsBells's picture
Offline
Leader
Bedford, UK
Last seen: 12 years 5 weeks ago
Bedford, UK
Joined: 2004-04-07
Posts: 851
Points: 0

*SOLVED* removing first-letter from the natural flow

BTW- I could be wrong about this (even though obviously I've never ever been wrong in the past Shock ) But I seem to remember reading over the last couple of days that Opera 9 might have "issues" with :first-letter.

As it would have been too useful for me to actually remember correctly what I've read, it might be worthwhile just checking to make sure it's all ok in Opera 9 just in case.

My strategy is so simple an idiot could have devised it!

"Also, your CSS (no offence) makes me want to gouge my eyes out with a rusty spoon" - TPH

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 2 years 46 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

*SOLVED* removing first-letter from the natural flow

thnx gary i will take a look at your code. kinda wanted to do it hackless, but i guess if i want it to work i'll have to do what i gotta do.

thnx for the info HB i don't generally use opera so i never remember to check my stuff in opera.

BTW - what is /*<![CDATA[*/ ?? I have seen it used before but never really knew why it was there.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 10 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

*SOLVED* removing first-letter from the natural flow

HTML parsing comment, it means somethign like "anythign here is character data not HTML so don't parse it as HTML".

I think.

Verschwindende wrote:
  • CSS doesn't make pies

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 2 years 46 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

*SOLVED* removing first-letter from the natural flow

Okay, well thanks for your help gary (and TPH for the CDATA thing)
I found out all i needed was line-height: 0; on my :first-letter and it worked fine.
I did end up having to use that hack that gary used but slightly altered.

ON TO THE NEXT CHALLENGE!!

(i'll be back :roll: )

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 20 hours 33 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9759
Points: 3841

*SOLVED* removing first-letter from the natural flow

thepineapplehead wrote:
Gary, just for the record, what was wrong with the first-letter approach?
I don't recall, now. I may have faulted :first-letter when it was actually another problem. My path to {line-height: 0;} was not straight. :?

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.