April 9th, 2013, 03:45 PM
Div Positioning Troubles
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:
<title>Clear Plumbing and Building</title>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css">
<div id=headerbg><div id=logocontainer>
<p><img src="images/misc/plumbing_002.jpg" width="808" height="291">
<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>
The CSS Code:
/* CSS Document */
text-shadow: 1px 1px 1px #FFF, 1px 1px 3px blue;
font-family: Tahoma, Geneva, sans-serif;
border: 2px solid #0181c2;
border: 5px solid #7fbadd;
Please remember I'm a real CSS noob lol.
April 9th, 2013, 08:44 PM
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.