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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    little css issue concerning positioning..

    Hello all
    I havent touched html, css or annything else in years..
    have to do a very simple page, with 9 squares "butons"
    positioned like this :
    # # #
    # # #
    # # #

    ill show you what i wrote sofar..
    Code:
    <HTML>
    <HEAD>
    	<STYLE>
    #een{
    	background-image: url("immage/een.png");
    	background-repeat: no-repeat;
    	width: 147px;
    	height:146px;
    	margin-left: 220px;
    	margin-top: 120px;
    }
    
    #twee{
        background-image: url("immage/twee.png");
    	background-repeat: no-repeat;
    	width: 147px;
    	height:146px;
    	margin-left: 420px;
    	margin-top: 120px;
    }
    
    #drie{
    	background-image: url("immage/drie.png");
    	background-repeat: no-repeat;
    	width: 147px;
    	height:146px;
    }
    #vier{
    	background-image: url("immage/vier.png");
    	background-repeat: no-repeat;
    	width: 147px;
    	height:146px;
    }
    #vijf{
    	background-image: url("immage/vijf.png");
    	background-repeat: no-repeat;
    	width: 147px;
    	height:146px;
    }
    #zes{
    	background-image: url("immage/zes.png");
    	background-repeat: no-repeat;
    	width: 147px;
    	height:146px;
    }
    #zeven{
    	background-image: url("immage/zeven.png");
    	background-repeat: no-repeat;
    	width: 147px;
    	height:146px;
    }
    #acht{
    	background-image: url("immage/acht.png");
    	background-repeat: no-repeat;
    	width: 147px;
    	height:146px;
    }
    #negen{
    	background-image: url("immage/negen.png");
    	background-repeat: no-repeat;
    	width: 147px;
    	height:146px;
    }
    	</STYLE>
    </HEAD>
    <BODY bgcolor="#000000">
    
    	<div id="een"><img src="immage/een.png"></div>
        <div id="een"><img src="immage/twee.png"></div>
        <div id="een"><img src="immage/drie.png"></div>
        <div id="een"><img src="immage/vier.png"></div>
        <div id="een"><img src="immage/vijf.png"></div>
        <div id="een"><img src="immage/zes.png"></div>
        <div id="een"><img src="immage/zeven.png"></div>
        <div id="een"><img src="immage/acht.png"></div>
        <div id="een"><img src="immage/negen.png"></div>                            
    
    </BODY>
    </HTML>
    soooo the problem is that the first immage/buton named een
    positions corectly.. the rest wont listen and just goes under it..
    please set me straight here..

  • #2
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    oke so ill jus call myself an idiot (before somebody else does it )
    if i point everything to #een
    its normal that they all folow the same instuctions...
    sooo now i got this :
    Code:
    <HTML>
    <HEAD>
    	<STYLE>
    #een{
    	background-image: url("immage/een.png");
    	background-repeat: no-repeat;
    	width: 147px;
    	height:146px;
    	margin-left: 220px;
    	margin-top: 120px;
    }
    
    #twee{
        background-image: url("immage/twee.png");
    	background-repeat: no-repeat;
    	width: 147px;
    	height: 146px;
    	margin-left: 520px;
    	margin-top: 120px;
    }
    
    #drie{
    	background-image: url("immage/drie.png");
    	background-repeat: no-repeat;
    	width: 147px;
    	height: 146px;
    	margin-left: 720px;
    	margin-top: 120px;
    }
    #vier{
    	background-image: url("immage/vier.png");
    	background-repeat: no-repeat;
    	width: 147px;
    	height:146px;
    }
    #vijf{
    	background-image: url("immage/vijf.png");
    	background-repeat: no-repeat;
    	width: 147px;
    	height:146px;
    }
    #zes{
    	background-image: url("immage/zes.png");
    	background-repeat: no-repeat;
    	width: 147px;
    	height:146px;
    }
    #zeven{
    	background-image: url("immage/zeven.png");
    	background-repeat: no-repeat;
    	width: 147px;
    	height:146px;
    }
    #acht{
    	background-image: url("immage/acht.png");
    	background-repeat: no-repeat;
    	width: 147px;
    	height:146px;
    }
    #negen{
    	background-image: url("immage/negen.png");
    	background-repeat: no-repeat;
    	width: 147px;
    	height:146px;
    }
    	</STYLE>
    </HEAD>
    <BODY bgcolor="#000000">
        
       	<div id="een"><img src="immage/een.png"></div>
        <div id="twee"><img src="immage/twee.png"></div>
        <div id="drie"><img src="immage/drie.png"></div>
        <div id="vier"><img src="immage/vier.png"></div>
        <div id="vijf"><img src="immage/vijf.png"></div>
        <div id="zes"><img src="immage/zes.png"></div>
        <div id="zeven"><img src="immage/zeven.png"></div>
        <div id="acht"><img src="immage/acht.png"></div>
        <div id="negen"><img src="immage/negen.png"></div>                            
    
    </BODY>
    </HTML>
    from left to right itl align how i want
    exept that its still one underneith another...
    i mean it ignores my margin-top 120
    yyyyyyyy does it do that
    somebody please help me out on this last thing so i can go to sleep...

  • #3
    Regular Coder
    Join Date
    Dec 2010
    Posts
    424
    Thanks
    22
    Thanked 56 Times in 56 Posts
    try adding float:left; to each of the items.
    or position:relative

  • #4
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanx for the imput
    dident make it go next to eachother tho :s

  • #5
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    925
    Thanks
    76
    Thanked 29 Times in 29 Posts
    Give your <div>'s a class of 'inblock'.

    Code:
    .inblock
    {
        display: inline-block;
    }
    Hope this helps. Adjust your margins for what you need by all means to make sure you get the correct amount 'squares' on each row.

    Regards,

    LC.


  •  

    Posting Permissions

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