Programming Help

Web Development



What's Here?

  • Members: 136,575
  • Replies: 479,700
  • Topics: 74,759
  • Snippets: 2,567
  • Tutorials: 677
  • Total Online: 1,869
  • Members: 82
  • Guests: 1,787

Welcome to Dream.In.Code
Getting Help is Easy!

Join 136,575 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 1,869 people online right now. Registration is fast and FREE... Join Now!




Text Indent and Alignment Issue

 
 Reply to this topicStart new topic

Text Indent and Alignment Issue
Israel
3 Oct, 2008 - 02:58 PM
Post #1

D.I.C Addict
Group Icon

Joined: 21 Nov, 2004
Posts: 604


Dream Kudos: 175
My Contributions
Ok, I'm in a bit of a panic. I accidentally deleted a website I had finished for work and with no luck using forensic tools I'm having to do the whole thing over again from scratch without pay. Problem is I'm having a bit of trouble remember some of the things I did. For example I can't remember how I got this text to indent inside of "#content" in my css without shrinking content inside the layout causing my background to show through. Here's what I have:

CSS:
CODE
body {
    background-color: #330099;
}

#wrapper {
    text-align: left;
    margin: 0px auto;
    padding: 0px;
    border:0;
    width: 925px;
    background: url("/path/to/your/background_cols.gif") repeat;
}

#header {
    margin: 0 0 0px 0;
    
}

#side-a {
    float: left;
    width: 150px;
    height: 700px;
    background: #3300FF;
}

#side-b {
    float: right;
    width: 150px;
    height: 700px;
    background: #3300FF;
}

#content {
    text-indent: 3px;
    float: left;
    width: 67%;
    height: 700px;
    background: #FFFFFF;
}

#footer {
    clear: both;
    background: #A2A2A2;
}


HMTL:
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<LINK REL=StyleSheet HREF="smoStyle.css" TYPE="text/css" />
<title>Untitled Document</title>
</head>

<body>
<div id="wrapper">
    <div id="header">
        <img src="images/smom_header.jpg" />
    </div>
    <div id="container">
        <div id="side-a">
            
        </div>
        
        <div id="content">
        <h2>text,text,text,text,text,text,text,text,text,text,text,</h2>
        
        <img src="images/bishop_05.jpg" align="right"/>
        
        text,text,text,text,text,text,text,text,text,text,text,<br />
        <hr />
        
    text, text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,
text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,
text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,
text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,
text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,
text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,
text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,
text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,
text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,
text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,
text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,
text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,
text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,
text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,
text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,
text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,
text,text,text,text,text,text,<br /><br />

text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,
text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,
text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,
text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,
text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,
text,text,text,text,text,text,text,text,text,text,text,text,            
        </div>
        
        <div id="side-b">
            
        </div>
    </div>
    <div id="footer">
        FOOTER
    </div>
</div>

</body>
</html>


The colors are awful cause I'm not finished. Any help would be a God send!
User is offlineProfile CardPM
+Quote Post

William_Wilson
RE: Text Indent And Alignment Issue
3 Oct, 2008 - 03:26 PM
Post #2

lost in compilation
Group Icon

Joined: 23 Dec, 2005
Posts: 3,995



Thanked: 16 times
Dream Kudos: 3275
Expert In: Java, C, Javascript

My Contributions
css, the text-indent property indents text on the first line only, and can be set to %, px, em, etc.

it shouldn't show the background, but setting a fixed width instead of % should solve it, I haven't tried this, but I will and post again if i find a better option

This post has been edited by William_Wilson: 3 Oct, 2008 - 03:28 PM
User is offlineProfile CardPM
+Quote Post

William_Wilson
RE: Text Indent And Alignment Issue
3 Oct, 2008 - 03:38 PM
Post #3

lost in compilation
Group Icon

Joined: 23 Dec, 2005
Posts: 3,995



Thanked: 16 times
Dream Kudos: 3275
Expert In: Java, C, Javascript

My Contributions
I see what your problem is now, you need to block up the text that is different, the h2 section, main text, etc and indent them individually. The text-indent applies to the first line and if that effects the width of the column as it does in this case it will resize it.

Make sure the text itself is contained within its own set of tags and apply it that way.
User is offlineProfile CardPM
+Quote Post

Israel
RE: Text Indent And Alignment Issue
3 Oct, 2008 - 08:11 PM
Post #4

D.I.C Addict
Group Icon

Joined: 21 Nov, 2004
Posts: 604


Dream Kudos: 175
My Contributions
Ok, I figured out my alignment issue, I just changed the % to pixels and everything went smooth.

I could do that with text indent like William suggested but I for the spacing (or lack there of) I need to be able to apply something like this to the whole text in that div so I can do it regular text not contained in <p>, <h2>, or those kind of tags. Anything I can just apply to the whole div?

This post has been edited by Israel: 3 Oct, 2008 - 08:30 PM
User is offlineProfile CardPM
+Quote Post

Israel
RE: Text Indent And Alignment Issue
4 Oct, 2008 - 10:01 AM
Post #5

D.I.C Addict
Group Icon

Joined: 21 Nov, 2004
Posts: 604


Dream Kudos: 175
My Contributions
Got it...

padding:5px;

That's what I was going for.
User is offlineProfile CardPM
+Quote Post

Fast ReplyReply to this topicStart new topic
Time is now: 12/3/08 12:07AM
Invision Power Board v2.1.7 © 2008  IPS, Inc.
Licensed to: MediaGroup1

Live Help!

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

DIC Chatroom

Bye Bye Ads

Monthly Drawing

Thumb Drive

Top Contributors

Top 10 Kudos This Month