CODEWITHSUNDEEP
htmlcss
Sourabh
Sourabh

Reputation: 8482

HTML CSS hints for a design

First of all, I am sorry if these kinds of questions are not encouraged here, but I am really confused about how to post this as a constructive question. So please, bear with me :D

I am trying to make a blog that looks something like this:


(source: hongkiat.com)

I can make this in CSS with some hit and trial but I am confused how to do this if I want "a Crayon's Life" to go in the same h1. Any hints? Thanks!

EDIT: I am not going to include the picture, it that matters. Also, no IE<9 support required

Upvotes: 0

Views: 80

Answers (2)

JJJ
JJJ

Reputation: 33163

I would add a line break inside the header, set the indentation so that there's spacing before the second line, and move the navigation up.

<h1>A Crayon's <br> Life</h1>
<ul>
    <li>illustrations</li>
    <li>web design</li>
    <li>etc.</li>    
    <li>etc.</li>
</ul>

h1 {
    padding-left: 150px;
    text-indent: -150px;
}

ul {
    position: relative;
    top: -50px;
}

Demo

Set the pixel values as necessary.

Upvotes: 1

Tim Vermaelen
Tim Vermaelen

Reputation: 7059

You can use HTML tags inside an h1 as longs as it's semantics are correct. Basically:

<h1>
    <span>a</span>
    <strong>Crayon's</strong>
    <span>life</span>
</h1>

This is considered to be still OK for SEO, semantics, CSS markup. The trial and error to get this right, layout wise, is still the work to be done by you I assume.

Something along the lines of:

h1 { position: relative; }
h1 span { color: orange; }
h1 strong { color: red; }
h1 strong + span { position: absolute; top: 50px; left: auto/*or in px*/ }

Upvotes: 0

Related Questions