HTML - Alternative Url/src

Hello guys, ew to this forum and relatively new to the world of infinite coding! I have a small dilemma, in that my funky 'competition' boxes, when put onto my page, mess up all the other styling.

I have come to the conclusion that using <div> tags was a bad idea. I have a main CSS file called master.css controlling most of the syling, however the bulk of the text and content parts are made using div tags.

Being really difficult to explain, I'll post a link:
http://www.area51clan.seemeplayme.net/ben/test2.html

The code for this:
Quote:
<form action="competition.php" method="post" target="_blank">
<div><img src="images/competition.jpg"></div>

<div id="linkinput" style="background-image:url(images/competition2.jpg); background-repeat: no-repeat; width:180px; height:30px">
<input type="text" style="background-color: transparent; border: solid 0px #FFFFFF;" size="180" maxlength="150" name ="Forename" align="center"/>

<img src="images/competition6.jpg" align="center"></div>

<div id="linkinput" style="background-image:url(images/competition3.jpg); background-repeat: no-repeat; width:180px; height:30px">
<input type="text" style="background-color: transparent; border: solid 0px #FFFFFF;" size="180" maxlength="150" name ="Surname" align="center"/>

<img src="images/competition7.jpg" align="center"></div>

<div id="linkinput" style="background-image:url(images/competition4.jpg); background-repeat: no-repeat; width:180px; height:30px">
<input type="text" style="background-color: transparent; border: solid 0px #FFFFFF;" size="180" maxlength="150" name ="Email" align="center"/>

<img src="images/competition8.jpg" align="center"></div>

<div id="linkinput" style="background-image:url(images/competition5.jpg); background-repeat: no-repeat; width:180px; height:30px">
<input type="text" style="background-color: transparent; border: solid 0px #FFFFFF;" size="180" maxlength="150" name ="Answer" align="center"/>

<img src="images/competition10.jpg" align="center"></div><br /><br />
<input type="submit" value="Submit">
</form>

This is what I want, on this page: [note that the lighter coloured parts are fields which do feed into a database and work.]
http://www.area51clan.seemeplayme.net/ben/home.html
The little box on the right side with 'ABC' in it is where I want it. Alt > View source [in IE] will show you the HTML.

I wasnt sure if you needed the CSS, as Im not very good with that and it isnt my code, so here it is:

Quote:
body{
background: url(images/bg2.jpg);
margin: 0px;
padding: 0px;
text-align: center;
}
td{
vertical-align: top;
text-align: left;
}
#div-table{
margin-left: auto;
margin-right: auto;
width: 1000px;
}
.table{
width: 1000px;
}
.left-side{
background: url(images/left-ex2.jpg) repeat-y;
width: 110px;
}
.right-side{
background: url(images/right-ex2.jpg) repeat-y;
width: 110px;
}
.top{
background: url(images/ate-fat2.jpg) no-repeat;
width: 779px;
height: 36px;
}
.foot{
background: url(images/foot2.jpg) no-repeat;
width: 779px;
height: 43px;
}
.head{
background: url(images/head.jpg) no-repeat;
width: 779px;
height: 125px;
}
.left-content-t{
background: #FFFFFF;
width: 569px;
}
.right-content-t{
background: #FFFFFF url(images/nav-bg-right2.jpg) repeat-y;
width: 210px;
}
.content-header{
background: url(images/content-head2.jpg) no-repeat;
width: 569px;
height: 47px;
}
.c-head-div{
margin-left: 25px;
margin-top: 22px;
margin-right: 25px;
font-size: 10px;
font-family: Verdana;
}
.c-head-div a:link{
text-decoration: none;
color: #1C1C19;
}
.c-head-div a:hover{
text-decoration: underline;
font-weight: bold;
color: #2C4D00;
}
.c-head-div a:visited{
text-decoration: none;
color: #1C1C19;
}
.c-head-div a:active{
text-decoration: none;
color: #1C1C19;
}
.content{
background: #1C1C19 url(images/content-bg2.jpg) no-repeat;
width: 568px;
height: 487px;
border-left: 1px solid #3D3D31;
}
.content-div{
margin-left: 22px;
margin-right: 22px;
margin-top: 3px;
font-family: Verdana;
color: #999999;
font-size: 10px;
}
.nav-top{
background: url(images/nav-topb.jpg) no-repeat;
width: 210px;
height: 34px;
}
.nav-text{
margin-left: 12px;
margin-right: 17px;
margin-top: 10px;
font-family: Verdana;
color: #999999;
font-size: 10px;
}
.nav-div{
margin-left: 12px;
margin-right: 15px;
margin-top: 9px;
font-size: 10px;
font-family: Verdana;
}
.nav-bg{
background: url(images/nav-bg2.jpg) no-repeat;
height: 89px;
}
/* Nav Linsk */
.home{
width: 81px;
height: 31px;
}
.roster{
width: 82px;
height: 31px;
}
.forums{
width: 87px;
height: 31px;
}
.join{
width: 80px;
height: 31px;
}
.servers{
width: 91px;
height: 31px;
}
.info{
width: 118px;
height: 31px;
}
.dl{
width: 120px;
height: 31px;
}
.irc{
width: 120px;
height: 31px;
}
So, is there an alternative to using div tags, do I put the code in the CSS or is there something else? Sorry to be such a bore guys, but ive been trying this for ages and it just doesnt want to work...Ignore the content too - this is for my ICT coursework.

Thanks again guys, and sorry for the huge post!

TracNav

I'm adding some ad sense code into my second side bar of my blog. However i have a large widget image which i have placed in my first (left) side panel and it's taking over both panels.

I'm un-able to add a widget into the second (right) side pannel as it overrights the code for the right side pannel for 'archives' and 'blogroll', which is fine. But i'm wanting to place some adsense code under my large image in the right side, but the ad sense code over rights the image!

So, i need to add a bunch of paragraphs to make it shift down lower, i'm using close to 30 <p<&nbsp;</p> so i can get the adsense code low enough to not cover over the left panels large image.

So i'm wondering, is there a smarter, or better way of getting this code down lower? I know i could use CSS and a margin, but i'm not really sure how to make that change. Is there a HTML way of doing this, or is the large amount of spaces i've put in ok?

Thanks!

www.nikkisblogspot.com if my description was a bit confusing.

PS. Whats with IE? My widgets are all over the shop and some aren't even showing??

I was wondering...
I really don't want to use Iframes on my website, because everybody tells me they're really unreliable.
What I'm trying to do is make it so that my site navigation code is in a seperate file than the rest of the page, so if I need to update it I don't have to redo fifty-something pages.
I've heard this can be done, but I have no idea how.

I am currently designing a site for my band, we require an mp3 player to be embedded into the site, but dont want the player to be reloaded (and therefore restarted) everytime a new link is visited - basically the music should continue to play no matter what "page" is visited and without interruption. The mp3 player we are using is xspf_player. I am able to use css and html fairly well and have a little experience with php.

I know one way to do it is to put the player in a frame and then all the other content in another frame and just have that frame updating when links are clicked, but I think frames are ugly. Is there any other way I could implement this feature, perhaps using php or css/divs? My thinking was to have all of the content on just one page and have different "sections" becoming visible or invisible but it seems too lengthy for such a simple problem.

Am I just being stupid and overlooking the simplest method?

Thanks in advance,
Matt

Hello, I have an image that I want to make "float" above a small green bar, so that it sticks out above it. I have been able to achieve the effect with the <layer> tag, but the problem is that it only displays correctly in Firefox and not in IE. Also, I want to avoid the layer tag since it is not universally supported.

Here is an example with the layers: http://dqnmusic.googlepages.com/indexenlayer.html

Here is what it looks like when I try to avoid layers:
http://dqnmusic.googlepages.com/indexen.html

Is there away around the layer tag that can still achieve the effect I want?