...

View Full Version : Section with text



James Jobs
03-29-2009, 03:32 PM
When I selcet text on the page it thinks my pointer is around 50px below:

The CSS:


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


<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

abduraooft
03-29-2009, 03:56 PM
Here is the page, http://www.stuffpodcasts.com/beta/08/temp.html Remove z-index:-2; from #box.

James Jobs
03-29-2009, 04:04 PM
Thanks.

James Jobs
03-29-2009, 06:15 PM
I have added




#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?

Excavator
03-29-2009, 07:19 PM
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

Andy123
11-14-2009, 05:57 PM
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.****************** (http://www.******************)
Sentersoftech



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum