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
    May 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Positioning the boxes

    Hello everyone
    Im new to web designing and im facing a problem

    Script :
    #wrapper {
    width :985px ;
    margin:0 auto ;
    border :1px solid #18A4ED ;
    }


    #design1 {
    width :150px ;
    height : 250px ;
    border : 1px solid #000 ;

    background-position : top-left ;


    }

    #header {
    width : 700px ;
    height : 250px ;
    background-image : url('../White/header.jpg');
    background-repeat : no-repeat ;
    background-size : 900px 200px ;
    background-position : centre;
    border : 1px solid #000 ;
    }

    okey so i planned for getting a bar like thing at right and left of the screen and the header to be in the middle
    somthing like this :
    another like for image :http://postimage.org/image/iduemr3sv/

    but it comes that the bar comes at top nad then the header
    if you have any solutions /suggestions please let me know
    thanks,

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    We need to see your HTML as well.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New to the CF scene
    Join Date
    May 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

    "http://www.w3.org/TR/html4/loose.dtd">


    <html>


    <head>


    <meta http-equi="Content-Type" content="text/html; charset=iso-8859-1">


    <title>




    </title>

    <style type ="text/css">



    #wrapper {
    width :985px ;
    margin:0 auto ;
    border :1px solid #18A4ED ;
    }


    #design1 {
    width :150px ;
    height : 250px ;
    border : 1px solid #000 ;

    background-position : top-left ;


    }

    #header {
    width : 700px ;
    height : 250px ;
    background-image : url('../White/header.jpg');
    background-repeat : no-repeat ;
    background-size : 900px 200px ;
    background-position : centre;
    border : 1px solid #000 ;







    }





    </style>


    </head>


    <body >
    <div id="wrapper">



    <div id = "header">

    </div>


    <div id ="design1">
    </div>


    <div id ="design2">
    </div>


    </div >



    </body>


    </html>

    Here it is ..
    not much is done since im stuck on it .
    Last edited by spoooooky; 05-11-2012 at 06:22 AM. Reason: wrong file

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Try this
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equi="Content-Type" content="text/html; charset=iso-8859-1">
    <title></title>
    <style type ="text/css">
    #wrapper {
    	width :985px;
    	margin:0 auto;
    	border :1px solid #18A4ED;
    	overflow:auto;
    }
    #design1 {
    	width :150px;
    	height : 250px;
    	border : 1px solid #000;
    	float:left;
    }
    #design2 {
    	width :129px;
    	height : 250px;
    	border : 1px solid #000;
    	float:right;
    }
    #main {
    	margin:0 131px 0 152px;
    }
    #header {
    	width : 700px;
    	height : 250px;
    	background-image : url('../White/header.jpg');
    	background-repeat : no-repeat;
    	background-size : 900px 200px;
    	background-position : center;
    	border : 1px solid #000;
    }
    </style>
    </head>
    
    <body >
    <div id="wrapper">
    	<div id="design1"> </div>
    	<div id="design2"> </div>
    	<div id="main">
    		<div id="header"> </div>
    	</div>
    </div >
    </body>
    </html>
    You need to float design1 and design2. Once you do that you need to clear your floats. Easiest way is to use overflow:auto on #wrap. To get your header and any other content in between the columns you need to add some left and right margins. I have wrapped your #header in another div as I assume you will also be adding content. I'm not sure about the support for background-size yet as CSS3 is still in a draft state. Another thing to note is CSS uses US English for spelling. Firefox will support the Australian or UK spellings e.g. centre vs center but IE may not.

    When posting code please use the [code]your code here[/code] tags, not the quote tag.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    spoooooky (05-11-2012)

  • #5
    New to the CF scene
    Join Date
    May 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Thumbs up Thanks alot

    thanks alot , it was really helpful


  •  

    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
    •