Page 1 of 2
1
2
LastLast
  1. #1

    Question website / html / css help

    If anyone is decent with this stuff I'm having a problem where im putting an image on my front page and having it link to another page of mine but the link is stretching across the whole page and I have no clue how to fix this. Ive been working with someone who works with websites everyday and they can't figure it out either. If you want to take a look at what I mean then the site is www.afguild.com

    The alliance logo link is stretching across the whole page. I also have a darth vader head that is going to go to a site for our swtor guild site that im working on also. The vader image is below the alliance logo but its link is stretching across the whole screen also. Any help here would be wonderful. Thanks so much.

  2. #2
    Dreadlord H3ll's Avatar
    Join Date
    Apr 2009
    Location
    The Netherlands
    Posts
    774
    did you give the img a width and hight?

  3. #3
    Quote Originally Posted by H3ll View Post
    did you give the img a width and hight?
    yeah i did

  4. #4
    Dreadlord H3ll's Avatar
    Join Date
    Apr 2009
    Location
    The Netherlands
    Posts
    774
    did u use width="150" or width="150px" (or w/e the width of the img is)
    and please don't tell me u used 100%

    EDIT: Maybe you should copy paste the code with the link and img, that might help

  5. #5
    He did, it is in his CSS file here: http://www.afguild.com/screen.css

    This seems like a complicated way to do <a href="link"><img src="src" /></a>.

    ---------- Post added 2011-02-03 at 04:00 PM ----------

    Actually, you don't set your width in your Alliance image, just the height. You do however set your width and height in your :hover section. I'm not really sure what you want to do here, so it is hard to 'fix'.

  6. #6
    You are putting the <div> tag inside the link, so you are linking a block level object, it is working correctly.

    Edit: Also, I am curious why you aren't including the image elements in the HTML. Unless you are planning to use the images as backgrounds it's ok to put them in the code. And your header image is huge and took a bit of time to load up, you might want to just use the text only and declare the black in the css.
    Last edited by Promark; 2011-02-03 at 10:06 PM.
    to: preposition; used as a function word to indicate position, connection, extent, relation ~ too: adverb; also, very, excessively, so

  7. #7
    <a href="http://afguild.com/wow.html"><div id="alliance"></div></a>
    <a href="http://afguild.com/sw.html"><div id="imperial"></div></a>

    is your current 2 links

    try do this instead:

    <a href="link"><img width="200px" src="link"/></a>
    <a href="link"><img width="200px" src="link"/></a>

    this will give the images a border however, remove this by style="border:0;" or give the IMG an ID and do it in the CSS

    OR do this

    <table>
    <tr>
    <td><a href="link"><img width="200px" src="link"/></a></td>
    <td><a href="link"><img width="200px" src="link"/></a></td>
    </tr>
    </table>

    then style the table like you want it
    Last edited by Vikzter; 2011-02-03 at 10:08 PM.

  8. #8
    Quote Originally Posted by Vikzter View Post
    OR do this

    <table>
    <tr>
    <td><a href="link"><img width="200px" src="link"/></a></td>
    <td><a href="link"><img width="200px" src="link"/></a></td>
    </tr>
    </table>

    then style the table like you want it
    You just made every web developer cringe.
    to: preposition; used as a function word to indicate position, connection, extent, relation ~ too: adverb; also, very, excessively, so

  9. #9
    instead of making it a background image.

    code the image with a div name instead of a pure div

    something like


    <img src="blabla.jpg" class="DIVNAME">

    #Divname{

    height: 300px;
    display: block;
    border:none;
    margin-top: 300px;
    z-index: 10;
    position: relative;
    }


    this way you can still control where image is located on website if u want it custom moved etc
    just make sure div height and width is size of img

  10. #10
    Quote Originally Posted by Promark View Post
    You just made every web developer cringe.
    Cuz I made a table...?

    Sorry but, gl teaching a beginner the float and div functions to make the two images align horizontal, it's not rocket science, but it sure as hell is easier to make a table... He seems like a beginner, therefor he gets beginner tips... You gotta crawl before you can walk dude.

    AND yes, I am a graduated Web Developer.
    Last edited by Vikzter; 2011-02-03 at 10:20 PM. Reason: typo

  11. #11
    nothing wrong with tables imo, i use them in my website making if im feeling lazy or client wont notice

    if u where gonna do a table

    so u can have let say 3 images rowed up in line just <td><td><td> eh? and then make the table a class and move the
    table where ever you want using div / css

    ---------- Post added 2011-02-03 at 04:26 PM ----------

    you can tho , lol if ur not worried about someone else working on what your working on you can do whatever works,
    <div class="movetable">

    <table>
    <tr>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    </table>

    </div>

    lets you put that table up and down instead of being in line with another table for people who still use table coding

    wont be the prettiest work / coding wise but it gets the job done if ur new or just doing something for a guild site

    i personally dont take the time to make a site pretty in coding unless i know , someone else is gonna be working on project with me

  12. #12
    Brewmaster videotape's Avatar
    Join Date
    Aug 2009
    Location
    Mountain View, CA
    Posts
    1,412
    I believe your problem is that you actually want your display style to be "inline-block" for the #alliance and #imperial divs, not "inline."

    The reason for this is that explicit size specifications (i.e. width: 300px, etc) are generally ignored for inline elements, as the CSS standard calls for inline elements to be automatically sized.

  13. #13
    let us know if you get it working or not "thafireball"

    i can see you working on it lol





    side note from what i see on first page you dont even need css since you can get it with the most basic html use

    from what i can see your wanting it to be
    [image]


    [image] [image]


    witch can be attained with just
    <center>
    <img src="theguldname">
    <br>
    <br> !- asmany as you want it to go down
    <br>
    <table>
    <tr>
    <td><a href=""><img src="" border="0"></a></td>
    <td><a href=""><img src="" border="0""></a</td>
    </tr>
    </table>
    </center>

    can make table size of the two images combined for width etcetc
    Last edited by moodoc; 2011-02-03 at 11:06 PM. Reason: add

  14. #14
    Quote Originally Posted by videotape View Post
    I believe your problem is that you actually want your display style to be "inline-block" for the #alliance and #imperial divs, not "inline."

    The reason for this is that explicit size specifications (i.e. width: 300px, etc) are generally ignored for inline elements, as the CSS standard calls for inline elements to be automatically sized.
    Thats what I just changed and it worked!

    It may not be perfect but at least its below the guild name and on the same line. Now i need to figure out why the link for the vader face is going down below the actual image =X
    Last edited by thafireball; 2011-02-03 at 11:12 PM.

  15. #15
    not noticing what you mean? link below the image

  16. #16
    Quote Originally Posted by Vikzter View Post
    Cuz I made a table...?

    Sorry but, gl teaching a beginner the float and div functions to make the two images align horizontal, it's not rocket science, but it sure as hell is easier to make a table... He seems like a beginner, therefor he gets beginner tips... You gotta crawl before you can walk dude.

    AND yes, I am a graduated Web Developer.
    Whoever taught you should be shot. Tables are sooooo 10 years ago.

  17. #17
    its not that its old , doesnt matter, css can be annoying when your first learning it
    he was giving a alternative method that still works

    and if u look at his site with css/html alot more coding went into play then just the table method that i listed above

    now if its a site highdetail or userbased etc then ofcourse table wont be the way to go. but when its something really simple no reason to dis something that works




    and to thafireball

    the image on front page the one with guild name is there a specific reason why you made it as big as you did? when you start adding more and more to site
    dont know if you are or not, but i mean a text logo that is 1920x1080 on a black background u can cut it down to be smaller and align center it i dont mean the size of the text just all the excess black around it thats in the img instead of just a bg
    Last edited by moodoc; 2011-02-03 at 11:25 PM.

  18. #18
    LOAD"*",8,1 Fuzzzie's Avatar
    Join Date
    Nov 2008
    Location
    Legion of Doom Headquarters
    Posts
    20,351
    Going to put this in the computer forums for you. You may get better help there.

  19. #19
    Quote Originally Posted by moodoc View Post
    its not that its old , doesnt matter, css can be annoying when your first learning it
    he was giving a alternative method that still works

    and if u look at his site with css/html alot more coding went into play then just the table method that i listed above

    now if its a site highdetail or userbased etc then ofcourse table wont be the way to go. but when its something really simple no reason to dis something that works
    You should never be using tables for layout, you use tables for presenting data that needs to be presented in a table form. There is absolutely no point in learning how to do something wrong when you can just learn to do it right from the start. Taking the little bit of extra time to learn some CSS will not only help you further down the line but will stop you getting into bad habits like using tables to do layout.

  20. #20
    explain how what hes trying to achieve wont work in table form ?>< its 4 images

    you talking like there is only one way to do something witch is wrong
    table for layouts is still being used by big people too , alot of freebased guild sites you see still use mostly tables scripted in with css so u can change look freely

Posting Permissions

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