CSS layout for text information

HTML & CSS
1

I am developing a website based on this jQuery plugin

I am having trouble placing the text information I want to place.

HTML Code:

		
<body>
<div class="section" id="section1"><h1>Section1</h1>
			<div class="text">
				<p>The <b>internet</b> is a global system of interconnected computer networks that use the standard protocols to several billion users worldwide.</p>
			</div>
</div>
</body>

CSS Code:

#section1 {
	background-image: url(../imgs/bgs2.jpg);
	height: 100%;
	display: block;
	padding: 6% 0 0;
}

#section1 .text {
	width: 300px;
	margin: 0;
	top: 15%;
	left: 10%;
}

#section1 .text p {
	font: arial;
	font-size: 20px;
	color: #FFF;
	margin: 0;
}

For some reason I can’t place the text where I want them to be even if I specify the pixels…

What is the problem?

2

Where do you want the text? It’s not clear from the code you’ve posted.

3 
#section1 .text {
	width: 300px;
	margin: 0;
	top: 15%;
	left: 10%;
}

from this code I would change

“top” to

top: 200px

however for some reason it does not work… (applies same fro “left” is well)

4

Hi,

Top and left only applies to positioned elements. Your element would need to be position:absolute or position:relative for that code to have any effect. However, I doubt either is what you want and you would be better off with just a margin-top and left in pixels.

Also this rule makes the element 106% high (approx):


#section1 {
	background-image: url(../imgs/bgs2.jpg);
	height: 100%;
	display: block;
	padding: 6% 0 0;
}

100% height + 6% padding (percentage padding and margin is always based on the width of the element anyway even for vertical padding/margin).

If you want some padding then put it on an inner container (or for IE8+ you could used box-sizing rules)