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.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Location
    Indiana
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Content and Divs not getting along

    Hello everyone here at the forums! My first post comes in the form of a problem.

    I've got this website that I've been slowly coding, teaching myself along the way. (w3 is an amazing resource)

    Now, if you look at that page, you'll see at the bottom, there's a welcome image. It's supposed to be below the slideshow, inside the "welcome" div. If you inspect the source, it shows the img tag is within the divs. But why isn't it?

    Here's 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;
    }
    So, whaddup with that? I can't figure out why the Welcome.png image refuses to go where it's supposed to. I've tried position:relative/static but it remains where it is. It's very frustrating and strange, and probably also something obvious that as a beginner I don't see.

    Thanks in advance for your help.

  • #2
    Regular Coder
    Join Date
    Aug 2012
    Posts
    145
    Thanks
    0
    Thanked 26 Times in 26 Posts
    The welcome image falls under .welcome class...i added to your css:

    .welcome{
    position: absolute;
    }

    moved the image to under the images that are switching. Not sure if this works for you but hope it helps
    1 Corinthians 15:3-4 / Ephesians 2:8-9 - What or Who are you living for? Jesus is returning very soon

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,746
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello papkee,
    It is in .welcome, which is in #highlights, but your #sidebar is pushing it down. Remove these bits in red and see -
    Code:
    #sidebar {
        background: none repeat scroll 0 0 #FFFFFF;
        border: 1px solid #CCCCCC;
        float: right;
        height: 1300px;
        margin-left: 70%;
        margin-right: 0;
        margin-top: 0;
        width: 30%;
    }
    For a more typical way of building a 2 column layout, have a look at this example.
    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

  • Users who have thanked Excavator for this post:

    papkee (11-22-2012)

  • #4
    New to the CF scene
    Join Date
    Nov 2012
    Location
    Indiana
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Yup, that did it. Thanks a bunch!


  •  

    Tags for this Thread

    Posting Permissions

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