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.
Page 1 of 3 123 LastLast
Results 1 to 15 of 38
  1. #1
    New Coder
    Join Date
    Jun 2011
    Posts
    65
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Image over Image

    Hello, I am very new to coding. Today is my first day with it and I feel i am doing quite well, I have come across problems and have worked to fix them and here is one of them.

    Here is a preview of my design: http://img822.imageshack.us/img822/6533/unled1pd.jpg

    Here is where I am at: http://visionarycreativegrp.com/Demos/ForSale%20RED/

    I am currently trying to get the Login Box done, for some reason it wont lineup with the top of the body... I dont know what to do

    Any Help?

    P.S. If anyone wants to check my coding, that would be nice. I may be doing something wrong.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Canman07,
    You have a little uncolapsing margin that is messing with you.

    overflow: auto; can fix that for you, as well as show you another problem. Make your CSS look like this to see -
    Code:
    #navigation {
    	background-image:url(../images/nav.png);
    	width:1004px;
    /*height:56px;*/
    overflow: auto;
    	margin-top: 20px;
    	font-family:Arial, Helvetica, sans-serif;
    	text-decoration:none;
    }
    The scroll bar that makes is from your width. You set your ul at 100% width and then add 6px padding on each end which makes it more than 100% wide.
    Try adding this to your CSS as well -
    Code:
    #nav {
    /*width: 100%;
    float: left;*/
    	margin: 0 0 2em 0;
    	padding: 0;
    	list-style: none;
    }
    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:

    Canman07 (10-30-2011)

  • #3
    New Coder
    Join Date
    Jun 2011
    Posts
    65
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Thank's so much. I appreciate it. Another question i have is; If you scroll, the logo and everything else goes above the top bar.. How do i fix that, and how do i move the search bar so that it lines up with the very right of the body?

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Try these changes to your topbar -

    Code:
    #top_bar {
    	background: url(../images/topbar.jpg) repeat-x; 
    /*background-repeat:no-repeat;*/
    	height:48px;
    	width:100%;
    	position:fixed;
    	top: 0;
    	left: 0;
    	z-index: 10;
    }
    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:

    Canman07 (10-30-2011)

  • #5
    New Coder
    Join Date
    Jun 2011
    Posts
    65
    Thanks
    9
    Thanked 0 Times in 0 Posts
    You are so helpful. Thank's so much! What about lining it up with the right side of the body container?

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Canman07 View Post
    You are so helpful. Thank's so much! What about lining it up with the right side of the body container?
    #topbar has an issue or two:
    top: 0; isn't going to do anything unless you position it as well. See positioning here.

    Since, at 1004px width, #topbar is as wide as your #container, you can just center it and it should work fine.
    You center #container with one method so I'll show you another way to center #topbar.

    To center an element you need three things:
    1. a valid DocType
    2. an element with a width
    3. that elements right/left margins set to auto


    Try making your CSS look like this -
    Code:
    #searchbar {
    	width:1004px;
    /*top:0;*/
    margin: 0 auto;
    }
    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:

    Canman07 (10-30-2011)

  • #7
    New Coder
    Join Date
    Jun 2011
    Posts
    65
    Thanks
    9
    Thanked 0 Times in 0 Posts
    I guess the problem i really dont understand about coding is how to get one thing over the other... For example

    http://visionarycreativegrp.com/Demos/ForSale%20RED/

    I want the Profile picture to be in that box like i have it in the design... But i dont know what the code is that i need to put in there to have it over the other. Other than that i think i understand a lot of it.

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Canman07 View Post

    I want the Profile picture to be in that box like i have it in the design... But i dont know what the code is that i need to put in there to have it over the other. Other than that i think i understand a lot of it.
    The way you have it now, loginbox_bg.png is loaded from the markup. It didn't load from the CSS with the path you gave it, I use the full path in the example below just because it's easier on my end.

    Once you make login_bg.png a background image, you can place your profilepicture.png wherever you like inside #loginbox.

    Try these changes:

    The CSS:
    Code:
    #loginbox {
    	background:url(http://visionarycreativegrp.com/Demos/ForSale%20RED/images/loginbox_bg.png);
    height: 93px;	
    width: 385px;
    	float: right;
    	margin-right: 5px;
    	margin-top: 6px;
    }
    and the markup:
    Code:
        <div id="loginbox">
            <img src="images/profilepicture.png" alt="description">
             </div>
    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:

    Canman07 (10-30-2011)

  • #9
    New Coder
    Join Date
    Jun 2011
    Posts
    65
    Thanks
    9
    Thanked 0 Times in 0 Posts
    I put what you said in and it worked, but when i copy and pasted it to duplicated it so that i could put the headlines there, it did this...

    http://visionarycreativegrp.com/Demos/ForSale%20RED/
    Last edited by Canman07; 10-31-2011 at 12:52 AM.

  • #10
    New Coder
    Join Date
    Jun 2011
    Posts
    65
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Helppp!!!

  • #11
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Viewed in FF8 that looks really good.
    In IE I see your issue...

    Check out the box model once. It seems to be one of the hardest concepts for new coders to grasp but it will help you.
    See the box model here. The box model says that whatever you put inside an element cannot be larger than that element. margin/padding/border all count when figuring width/height.

    Your 6 images all fit in #loginbox until IE adds it's border to them. To fix it, you just need to tell IE not to add it.

    Put this in your CSS - img {border: none;}
    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:

    Canman07 (10-31-2011)

  • #12
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    In this bit of CSS -
    Code:
    #profilepicture {
        background-image: url("../images/profilepicture.png");
        background-repeat: no-repeat;
        float: left;
        margin-left: 17px;
        margin-top: 19px;
        z-index: -1;
    }
    the z-index: 1; doesn't do anything. z-index only works on positioned elements. See this about z-index.
    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:

    Canman07 (10-31-2011)

  • #13
    New Coder
    Join Date
    Jun 2011
    Posts
    65
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Thanks! I fixed it. But take a look at it now, do you see how the grey box where the headlines will go is on the right, but it moves the login box to the left? Why does it do that?

  • #14
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Look what the clear property does for you -
    Code:
    #loginbox {
        background: url("../images/loginbox_bg.png") repeat scroll 0 0 transparent;
        clear: right;
        float: right;
        height: 93px;
        margin-right: 5px;
        margin-top: 6px;
        width: 385px;
    }
    Then, obviously, #loginbox will need to come before #headlines in the markup.

    It will probably be easiest to add another containing element that can hold your #logingbox and #headlines, as well as those 4 back2back buttons and the image above them. That will keep things seperate from your 3 columns that will follow below.

    In advance, look at a simple 3 column layout that may help you.
    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

  • #15
    New Coder
    Join Date
    Jun 2011
    Posts
    65
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Is there anyway you could help me align the boxes. I cant seem to fix this.

    http://visionarycreativegrp.com/Demos/ForSale%20RED/
    Last edited by Canman07; 10-31-2011 at 04:52 AM.


  •  
    Page 1 of 3 123 LastLast

    Posting Permissions

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