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 6 of 6
  1. #1
    New Coder
    Join Date
    Jan 2009
    Posts
    22
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Exclamation Section with text

    When I selcet text on the page it thinks my pointer is around 50px below:

    The CSS:

    Code:
    body {
    	background-color: #333;
    	color: #ff7a00;
    }
    
    #box {
    	margin-left: auto;
    	margin-right: auto;
    	min-height: 625px;
    	width: 675px;
    	position: relative;
    	top: 75px;
    	z-index: -2;
    }
    
    .main-text {
    	font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
    	color: #e6e6e6;
    	text-shadow: #000 0 0 1px;
    }
    
    .main {
    	color: #fff;
    	font: 20px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    }
    
    /* @group Nav */
    
    #nav-menu
    {
    width:30em;
    	position: relative;
    	z-index: 0;
    	left: 1px;
    	margin-top: auto;
    	margin-left: auto;
    	font-family: Arial, Helvetica, Geneva, sans-serif;
    	color: #fff;
    	top: 16px;
    	text-shadow: #191919 2px 2px 1px;
    }
    
    #nav-menu li a
    {
    height: 2em;
    line-height: 2em;
    float: left;
    width: 5em;
    display: block;
    color: #fff;
    text-decoration: none;
    text-align: center;
    float: none;
    	border-width: 0.1em;
    	border-color: #dcdce9;
    	background-position: left;
    	background-repeat: repeat-x;
    	font-size: 22px;
    }
    
    #nav-menu a
    {
    height: 2em;
    line-height: 2em;
    float: left;
    width: 5em;
    display: block;
    color: #fff;
    text-decoration: underline;
    text-align: center;
    float: none;
    	border-width: 0.1em;
    	border-color: #dcdce9;
    	background-position: left;
    	background-repeat: repeat-x;
    	font-size: 22px;
    }
    
    #nav-menu li
    {
    float: left;
    	margin: 0 0.15em;
    }
    
    #nav-menu li a:hover {
    	text-decoration: none;
    	text-shadow: #fff 0 0 4px;
    }
    
    #nav-menu ul
    {
    list-style: none;
    padding: 0;
    margin: 0;
    }
    
    
    
    /* @end */
    
    #t-bar {
    	height: 75px;
    	position: fixed;
    	width: auto;
    	top: -8px;
    	left: -8px;
    	right: -8px;
    	float: none;
    	margin-left: auto;
    	margin-right: auto;
    	background: url(img/t-bar.png) repeat-x scroll;
    }
    
    h2 {
    		font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    	color: #ccc;
    	text-align: center;
    	font-weight: normal;
    	font-style: normal;
    	text-decoration: none;
    	text-transform: capitalize;
    	background-attachment: fixed;
    	border-bottom: thin solid #cacaca;
    	text-shadow: #000 0 0 0;
    }
    
    h2:hover {
    	text-shadow: #fff 0 0 100px;
    }
    
    h3 {
    		font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    	color: #fff;
    	
    }
    
    h1 {
    	font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    	color: #fff;
    	text-decoration: underline;
    }
    
    #backsoon-box {
    	height: 100px;
    	position: relative;
    	width: 400px;
    	margin-left: auto;
    	margin-right: auto;
    	text-shadow: #808080 0 0 10px;
    }
    
    .logo img {
    	position: relative;
    	margin-left: auto;
    	margin-right: auto;
    }
    
    #logo-nav {
    	height: 58px;
    	width: 354px;
    		background-image: url(img/logo-nav.png);
    	position: static;
    	margin-left: 15px;
    	margin-top: 18px;
    }
    The HTML

    Code:
    <body>
    <div id="t-bar">
    	<div id="menu-box">
    		<div id="nav-menu">
    		<ul>
    		<li><a href="#">Home</a></li>
    		<li><a href="#">Shows</a></li>
    		<li><a href="#">Join</a></li>
    		<li><a href="#">About Us</a></li>
    		</ul>
    		</div>
    	</div>
    	<div id="logo-nav">
    	</div>
    </div>
    
    <div id="box">
    <h2> Hello</h2>
    <p class="main-text">Hey, Welcome to StuffPodcasts.com. <br />
    We are an independent media producer these include Stuff Tech and GeekNe.
    The Main Producers are James Jobs and Louis Mirra.
    We are always looking for content producers if you think you have what it takes to make your own podcast with StuffPodcasts head over to the Join Page.
    
    <a href="frame_send-link.html" title="Simple form" 
    onclick="Modalbox.show(this.href, {title: this.title, width: 600}); »
        return false;"> Send link to a friend</a>
        
    </p>
    
    </body>
    Here is the page, http://www.stuffpodcasts.com/beta/08/temp.html

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Remove z-index:-2; from #box.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    James Jobs (03-29-2009)

  • #3
    New Coder
    Join Date
    Jan 2009
    Posts
    22
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Thanks.

  • #4
    New Coder
    Join Date
    Jan 2009
    Posts
    22
    Thanks
    6
    Thanked 0 Times in 0 Posts
    I have added

    Code:
    #quicklinks {
    	width: 212px;
    	height: 275px;
    	background-image: url(img/box.png);
    	position: absolute;
    	top: 11px;
    	right: 11px;
    }
    With <div id="quicklinks"> </div>

    How can I make the text warp around the box?

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by James Jobs View Post

    How can I make the text warp around the box?
    To get text to wrap around something, you need to float it. Have a look at a quick tutorial - http://www.w3schools.com/css/pr_class_float.asp
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Section with Text

    Here are some of the CSS code samples.

    CSS Text Color

    <p style="color:green;">This CSS text color is olive</p>


    CSS Text Align

    <p style="text-align:right;">This CSS text is aligned right</p>

    Indents the first line of the paragraph.
    <p style="text-indent:50px;">This text is indented by 50 pixels. What this means is that the first line of the paragraph will be indented by 50 pixels, but the following lines will not be indented. The text will need to wrap before you can see the indent - hence all this text!</p>

    CSS Letter Spacing

    <p style="letter-spacing:5px;">This text has letter spacing applied</p>

    www.******************
    Sentersoftech
    Last edited by Andy123; 11-14-2009 at 04:59 PM.


  •  

    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
    •