website / html / css help

[thafireball]

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.

[H3ll]

did you give the img a width and hight?

[thafireball]

did you give the img a width and hight?

yeah i did

[H3ll]

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

[cncrules45]

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'.

[Promark]

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.

[Vikzter]

<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

[Promark]

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.

[moodoc]

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

[Vikzter]

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.

[moodoc]

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

[videotape]

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.

[moodoc]

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

[thafireball]

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

[moodoc]

not noticing what you mean? link below the image

[ukrainium]

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.

[moodoc]

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

[Fuzzzie]

Going to put this in the computer forums for you. You may get better help there.

[Deleted]

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.

[moodoc]

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