#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    4
    Rep Power
    0

    Div Positioning Troubles


    Hi there,

    I'm trying to convert my photoshop template into HTML & CSS for the first time, and clearly having some problems

    The site im having trouble with can be seen here: http://www.clearplumbingandbuilding.co.uk

    My first question is, how can I get rid of that 1 pixel line just beneath the header, inbetween the div class conttop and div class contmid. No matter what I do I just can't get rid of it

    My second question, the conttmid is expanding just enough to keep the conttext div class inside (the text is, but not the entire conttext area box). The size of conttmid is set to auto so that it will fit whatever is put into conttext (well that is the intention anyway). What is the proper way to contain a div class within a div class, then have another class beneath it? You can see where the border of the conttext area is being overlapped by the contbottom class.

    I tried the -webkit calc (90% - 63px) which worked pretty well, although this just expands to almost full height of the page which isn't exactly the effect I'm after, and on top of that it doesn't work in IE.

    As you can probably tell its supposed to be 3 rows, with the middle row (contmid) auto expanding to fit conttext, while conttop and contbottom are fixed height.

    My third question, the text-indent attribute for conttext only seems to affect the first line of each paragraph, is there a better way to do this, or can you see what I'm doing wrong?

    My final question, which I haven't really made a proper attempt to tackle yet myself, what is the best way to center a layout like this?

    Thank you in advance for any help...I've been getting really frustrated with this lately, and getting pretty stumped

    My HTML Code:
    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Clear Plumbing and Building</title>
    <link href="css/stylesheet.css" rel="stylesheet" type="text/css">
    </head>
    
    <body>
    <div id=container>
    
    <div id=headerbg><div id=logocontainer>
      <div id=nav>navigation</div></div></div>
    
    <div class="content">
    <div class="conttop"></div>
    	<div class="contmid">
        <div class="conttext">
    <p><img src="images/misc/plumbing_002.jpg" width="808" height="291">
    </p>
    
    <p>Here at clear plumbing and building we aim to provide a wide range of services at the lowest price possible without any comprise on quality. Are engineers are fully qualified to carry out all aspects of plumbing and building on a flexible basis. We pride ourselves on our craftsmanship and reliability amongst many factors that make us the highly recommended company that we are today. 
      Our services include;- plumbing, tiling, building, carpentry, </p>
    <p>We pride ourselves on our craftsmanship and reliability amongst many factors that make us the highly recommended company that we are today.</p>
    <p>We offer no call out charge and no obligation quotes at a time to suite you. We offer a years guarantee on all our labour and </p>
    <p></p>
    	</div></div>
        <div class="contbottom"></div>
        </div>
    
    </div>
    </body>
    </html>

    The CSS Code:

    Code:
    @charset "utf-8";
    /* CSS Document */
    
    
    body{
    	background-color: #66b6e4;
    }
    
    #container{
    	width: 100%;
    	height: 100%;
    	}
    
    #logocontainer{
    	position: absolute;
    	left: 15%;
    	margin-left: 0px;
    	top: 0px;
    	width: 1160px;
    	height: 300px;
    	background-image: url(../images/header.jpg);
    }
    
    #headerbg{
    	position: absolute;
    	width: 100%;
    	height: 301px;
    	border: 0;
    	margin: 0;
    	padding: 0;
    	float: left;
    	top: 0px;
    	left: 0px;
    	right: 0px;
    	background-repeat: repeat-x;
    	background-image: url(../images/headerbg.jpg);
    	}
    
    
    #nav{
    	position: relative;
    	left: 594px;
    	top: 166px;
    	width: 500px;
    	height: 40px;
    	border: 0;
    }
    
    .content{
    	position: absolute;
    	left: 15%;
    	top: 300px;
    	width: 1160px;
    	height: 100%;
    	background-image: url(../images/contentbg.jpg);
    }
    
    .conttop{
    	background-image: url("../images/images/contentboxtop.jpg");
    	position: relative;
    	background-repeat: no-repeat;
    	overflow:hidden;
    	width: 1020px;
    	height: 28px;
    	left: 78px;
    }
    
    .contmid{
    	background-image: url("../images/images/contentboxmid.jpg");
    	background-repeat: repeat-y;
    	position: relative;
    	height: auto;
    	width:1020px;
    	left: 78px;
    	right: 78px;
    	}
    	
    .conttext{
    	position: relative;
    	color: #FFFFFF;
    	text-shadow: 1px 1px 1px #FFF, 1px 1px 3px blue;
    	font-size: medium;
    	font-family: Tahoma, Geneva, sans-serif;
    	background-color: #5AA1CB;
    	text-indent: 40px;
    	width: 900px;
    	left: 56px;
    	top: 20px;
    	border: 2px solid #0181c2;
    	border: 5px solid #7fbadd;
         }
    	
    .contbottom{
    	background-image: url("../images/images/contentboxbottom.jpg");
    	background-repeat: no-repeat;
    	position: relative;
    	width: 1020px;
    	height: 35px;
    	left: 78px;
    }

    Please remember I'm a real CSS noob lol.
  2. #2
  3. No Profile Picture
    buildmyweb.org
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2012
    Location
    NY
    Posts
    62
    Rep Power
    8
    you ought to read up on CSS float theory. its tricky to grasp but once you get comfortable using it, there is no going back.
    Freelance Web Developer | Web Hosting |
    PHP Applications
    Web Development, Hosting, Graphic Design, SEO

IMN logo majestic logo threadwatch logo seochat tools logo