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, 09:50 PM
Nira's Avatar
Nira Nira is offline
you cannot have my pain
 
Join Date: November 1, 2011
Location: Stuttgart, Germany
Age: 18
Posts: 2,677
Pronoun: they
Nira is an unknown quantity at this point
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?
__________________
"Experience herself is the great teacher, and you must seek her directly. You cannot have a spice described to you, but must taste it for yourself. However, with a dangerous spice, you can be warned to taste lightly. I would that your lesson may not be as painful as my own."
Reply With Quote
  #2  
Old 04-18-2013, 11:16 PM
Butterfree's Avatar
Butterfree Butterfree is offline
Still loves Joltik, though!
 
Join Date: June 22, 2008
Location: Iceland
Age: 28
Posts: 2,461
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
Ace Attorney, a series of visual novels about lawyers that I will never stop adoring.
Reply With Quote
  #3  
Old 04-18-2013, 11:46 PM
Hiikaru's Avatar
Hiikaru Hiikaru is offline
Run.
 
Join Date: October 28, 2009
Posts: 445
Pronoun: vi/vir/vim; they
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 11:52 PM.
Reply With Quote
  #4  
Old 06-07-2013, 09:56 PM
Nira's Avatar
Nira Nira is offline
you cannot have my pain
 
Join Date: November 1, 2011
Location: Stuttgart, Germany
Age: 18
Posts: 2,677
Pronoun: they
Nira is an unknown quantity at this point
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?
__________________
"Experience herself is the great teacher, and you must seek her directly. You cannot have a spice described to you, but must taste it for yourself. However, with a dangerous spice, you can be warned to taste lightly. I would that your lesson may not be as painful as my own."
Reply With Quote
  #5  
Old 06-27-2013, 02:35 PM
mewtini's Avatar
mewtini mewtini is offline
bubblegum bitch
 
Join Date: February 27, 2011
Location: astral plane
Age: 17
Posts: 1,457
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 05:25 AM.


Powered by vBulletin® Version 3.8.8
Copyright ©2000 - 2018, 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.