Some Beginner Questions

P

papkee

New Member
A Noob Problem

Hello everyone. I decided since I'm starting to code my own website I should join a web design forum. And I've run in to a problem with my website.

I'm trying to put two things, a jQuery slideshow and a welcome image, into the same div, "highlights":

Code: 
<div id="highlights">
    <div class="fadein">
        <img src="http://imageshack.us/a/img23/705/20120603195403.png" width="533px" height="300px" />
        <img src="http://imageshack.us/a/img442/813/20120604095356.png" width="533px" height="300px" />
        <img src="http://imageshack.us/a/img14/516/20120531123115.png" width="533px" height="300px" />
    </div>
    <div class="welcome">
    	<img src="welcome.png" />
    </div>
</div>

And the css:

Code: 
.fadein {
	position: relative;
	width: 533px;
	height: 300px;
	margin-left: auto;
	margin-right: auto;
	box-shadow: 4px 0 10px #000;
	margin-top: 1%;
}
.fadein img {
	position: absolute;
	left: 0;
	top: 0;
}
.welcome {
	width: 100%;
}
#highlights {
	background: url(gallerybg.png);
	width: 70%;
	height: 400px;
	border: 1px solid #CCC;
}

Now, when I preview this, the slideshow is in the right spot, but where the welcome image should be, there's an empty space. When I scroll down, I see it has been put at the bottom of the site. (see the site here.) What's up with that? I'm sure it's something obvious that I just don't see.

Thanks for helping out a beginner!
 
Last edited:
You must log in or register to reply here.
Top