The Cave of Dragonflies forums

Go Back   The Cave of Dragonflies forums > Websites > Webmaster Help and Discussion

Notices

Reply
 
Thread Tools
  #1  
Old 04-18-2013, 08:50 PM
qva's Avatar
qva qva is offline
pretty good
 
Join Date: November 1, 2011
Location: space coast
Age: 19
Posts: 2,814
Pronoun: she
qva is on a distinguished road
Default Help with this header thingy

So, let's assume I want to use this here picture for the thing I'm about to say.



I want to make it so I can write text over it using HTML/CSS. That is to say, I want to be able to use this banner in several instances throughout my website, but have it say different text on it every time. Is there a kind of stylesheet/attribute etc. that can help me do this?
__________________
Reply With Quote
  #2  
Old 04-18-2013, 10:16 PM
Butterfree's Avatar
Butterfree Butterfree is offline
Still loves Joltik, though!
 
Join Date: June 22, 2008
Location: Iceland
Age: 29
Posts: 2,536
Pronoun: she
Butterfree is on a distinguished road
Send a message via MSN to Butterfree
Default Re: Help with this header thingy

You'd want to use the header as a CSS background image on a regular element that contains the text and ensure that the relevant element is always of the correct size by setting its width and height properties.
__________________
Butterfree's Current Obsession
Award-winning Icelandic BDSM techno-punk performance art group Hatari, who participated in Eurovision 2019 for Iceland. They must be seen to be believed. You can see a sample of their Eurovision entry and some of them being them as featured on Last Week Tonight here.
Reply With Quote
  #3  
Old 04-18-2013, 10:46 PM
Hiikaru's Avatar
Hiikaru Hiikaru is offline
Run.
 
Join Date: October 28, 2009
Posts: 720
Pronoun: he
Hiikaru is an unknown quantity at this point
Default Re: Help with this header thingy

Are any of these what you want?

Image is in the CSS (everything linked to the stylesheet will have this header):

HTML Code:
<!DOCTYPE html>

<html>
    <head>
        <link rel="stylesheet" href="style.css" type="text/css"/>
    </head>

    <body>
        <header>
            <p>Title!!</p>
        </header>

    </body>
</html>
Code:
/* Header image */
header {
    background-image: url("13hom.png");
    background-repeat: no-repeat;
    width: 511px;
    height: 44px;
}

/*Put the text actually on the header instead of floating away*/
header p {
    padding-top: 12px;
    padding-left: 15px;
}


Image is in the HTML:

HTML Code:
<!DOCTYPE html>

<html>
    <head>
        <link rel="stylesheet" href="style.css" type="text/css"/>
    </head>

    <body>
        <header>
            <img src="13hom.png">
            <p>Title</p>
        </header>

    </body>
</html>
Code:
/*Put the text actually on the header instead of floating away*/
header p {
    margin-top: -35px;
    margin-left: 20px;
}
Instead of those, you could also have it so that in your HTML you have <header id="doduo_header"> on some pages and <header id="lugia_header"> on some other pages, and then the CSS would look like the first CSS example. (Headers that you don't talk about in your html pages would be invisible)

Code:
/* Header stuff that applies to Doduo and Lugia headers both */
header {
    background-repeat: no-repeat;
    width: 511px;
    height: 44px;
}


/*Put the text actually on the header instead of floating away*/
header p {
    padding-top: 12px;
    padding-left: 15px;
}

/* Stuff for the specific headers */

#doduo_header {
    background-image: url("13hom.png");
}

#lugia_header {
    background-image: url("lugia_header.png");
}
edit: Putting it in a <header> piece in the HTML isn't necessary, just so you know! It could be some other tag.
__________________

Last edited by Hiikaru; 04-18-2013 at 10:52 PM.
Reply With Quote
  #4  
Old 06-07-2013, 08:56 PM
qva's Avatar
qva qva is offline
pretty good
 
Join Date: November 1, 2011
Location: space coast
Age: 19
Posts: 2,814
Pronoun: she
qva is on a distinguished road
Default Re: Help with this header thingy

so, let's assume i want to make "header-sub.png" my h2, and "header-main.png" my h1. how would the CSS for that look?
__________________
Reply With Quote
  #5  
Old 06-27-2013, 01:35 PM
mewtini's Avatar
mewtini mewtini is offline
bubblegum bitch
 
Join Date: February 27, 2011
Location: astral plane
Age: 18
Posts: 1,459
Pronoun: she/her/hers
mewtini is an unknown quantity at this point
Default Re: Help with this header thingy

Quote:
Originally Posted by Qvalador View Post
so, let's assume i want to make "header-sub.png" my h2, and "header-main.png" my h1. how would the CSS for that look?
Uh, exactly the same thing as h1. Except for h2.

use the CSS Ki gave you and alter the part that says h1 to h2 :p
__________________
"and at once i knew, i was not magnificent."

http://alone-on-an-aeroplane.tumblr.com
:)
Reply With Quote
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 12:46 AM.


Powered by vBulletin® Version 3.8.8
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Pokémon, Pikachu and all other Pokémon characters © Nintendo, Game Freak and Creatures Inc. The Cave of Dragonflies, content, styles, etc. © Butterfree/Dragonfree/antialiasis.
Forum now hosted by Eevee's HQ.