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
クタ ララ スタ ララ
 
Join Date: November 1, 2011
Location: Stuttgart, Germany
Age: 17
Posts: 2,662
Pronoun: they
Nira is an unknown quantity at this point
Send a message via AIM to Nira Send a message via Skype™ to Nira
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?
__________________
「私は光栄です, 高槻さん。」
♠ JOHARI WINDOW ♠
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: 27
Posts: 2,393
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
クタ ララ スタ ララ
 
Join Date: November 1, 2011
Location: Stuttgart, Germany
Age: 17
Posts: 2,662
Pronoun: they
Nira is an unknown quantity at this point
Send a message via AIM to Nira Send a message via Skype™ to Nira
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?
__________________
「私は光栄です, 高槻さん。」
♠ JOHARI WINDOW ♠
Reply With Quote
  #5  
Old 06-27-2013, 02:35 PM
effervesce's Avatar
effervesce effervesce is offline
bulletproof loneliness, at best
 
Join Date: February 27, 2011
Location: slřwtřwn
Age: 16
Posts: 1,433
Pronoun: she/her/hers
effervesce is an unknown quantity at this point
Send a message via Skype™ to effervesce
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
__________________
basically gone idk

tumblr: http://alone-on-an-aeroplane.tumblr.com

((I'm there more often than I'm here so yeah))
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 08:52 AM.


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