Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 18
  1. #1
    New Coder
    Join Date
    Dec 2010
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question How do I add a link to an image header in css?

    I am new to building websites... i seem to be doing alright with the things i am trying to do. but i wanted to know how do i add a link to my image header in css? I would greatly appreciate any help anyone has to offer. thanks.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    but i wanted to know how do i add a link to my image header in css?
    No, you can't do that. CSS is for styling the elements in an HTML document. Perhaps you need to add something to your header like
    Code:
    <a href="/index.html"><img src="header.jpg"></a>
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Dec 2010
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    No, you can't do that. CSS is for styling the elements in an HTML document. Perhaps you need to add something to your header like
    Code:
    <a href="/index.html"><img src="header.jpg"></a>

    ok so if i do that... if you click the image (header) it will direct you to the page i specify? and can you tell me where i would put that in the code? thanks so much for your help

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    but i wanted to know how do i add a link to my image header in css?
    and can you tell me where i would put that in the code?
    If you are using <img> tag to display your header image, just replace the <img> tag in my above post with your current tag and insert in to your code. Or Are you using it a as background image? Can we have a link to it or some code ?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New Coder
    Join Date
    Dec 2010
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    sure.....

    not using as a backround image.

    www.americanchromeeagle.com

    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

    MASTER HEADER

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

    .header
    {
    padding: 6px 6px 10px 2px;
    height:240px;
    background: url('images/rsz_11rsz_21american_chopper_header.jpg');
    }

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    You may make an anchor tag and set display:block; to it and then set a suitable height and that background image to it, but that won't be the semantic way to do this.

    I'd separate the title (and logo ?) from that image and display them as <img> tags instead of having a big header background image with everything embedded in it. Or in other words, the document must convey something to the user (and search engines), even in the absence of CSS.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    New Coder
    Join Date
    Dec 2010
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i have no idea what you just said.

    i have to use that whole image tho.. im sorry... i was just hoping there would be an easy way to make the image a link to another page...

  • #8
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,089
    Thanks
    15
    Thanked 246 Times in 246 Posts
    There's a simple way you can link while you use that image as the background. Just make a transparent .gif the foreground image, set it's size to be the same as the header, and link to that.

  • #9
    New Coder
    Join Date
    Dec 2010
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ahhh... ok.. i can try that i guess.. but where does the code go?

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Gypz,
    Quote Originally Posted by DrDOS View Post
    There's a simple way you can link while you use that image as the background. Just make a transparent .gif the foreground image, set it's size to be the same as the header, and link to that.
    Wouldn't a trasnparent .gif still cover the menu and make it unclickable?

    Just giving the anchor a size and making it display: block; will work. This is not what ab was suggesting you do but it might be the quickest and easiest.

    In your markup, add this bit in red -
    Code:
    <option selected="selected" value="1">US Dollar</option>
    	<option value="7">Euro</option>
    	<option value="4">British Pound</option>
    
    </select>
    
            </div>
            <div class="header-languageSelector">
                
            </div>
        </div>
    <a href="http://mybike.com" id="hdrLink"></a>
    </div>
    
                
    <div class="headermenu">
    
        <ul>
            <li><a href="http://www.americanchromeeagle.com/americanchromeeagle/">
                Home page</a> </li>
    And you can style that link from your CSS with this -
    Code:
    a#hdrLink {
    width: 1020px;
    height: 260px;
    display: block;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #11
    New Coder
    Join Date
    Dec 2010
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok thanks... where did you find that markup?

  • #12
    New Coder
    Join Date
    Dec 2010
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    and where would i add that in the css? i'm sorry... im very new at this

  • #13
    New Coder
    Join Date
    Dec 2010
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok i found it in page source... but i cant find where to edit it... smh i know i sound so retarded...

  • #14
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Gypz View Post
    ok i found it in page source... but i cant find where to edit it... smh i know i sound so retarded...
    Not retarded... we all had to start somewhere, you're just diving into the deep end.
    Viewing the page source is just that, not an editor of any sort.

    Do you really need the header image to be a link this bad?

    I'm kind of afraid to tell you to edit your webpage since it's very possible you could make things worse but, for no more code than you're adding, it could easily be done from your webhosts file manager.

    ...
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #15
    New Coder
    Join Date
    Dec 2010
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    in my page source it says where it is but then when i open it up to edit... it doesnt look like the page source.. there is almost nothing there?


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •