SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS layout for text information

    I am developing a website based on this jQuery plugin

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

    HTML Code:
    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:
    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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by successfulfail View Post
    I can't place the text where I want them to be even if I specify the pixels...
    Where do you want the text? It's not clear from the code you've posted.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    #section1 .text {
    	width: 300px;
    	margin: 0;
    	top: 15%;
    	left: 10%;
    }
    from this code I would change

    "top" to
    Code:
    top: 200px
    however for some reason it does not work... (applies same fro "left" is well)

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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):

    Code:
    #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)


Bookmarks

Posting Permissions

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