Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS Headers & Text Wrapping 1

Status
Not open for further replies.
ljwmis

ljwmis

MIS
May 23, 2001
48
GB
I need to show a double header centred at the top of each webpage, for example:

HEADER2
HEADER3​

css code:
h2 { color: #ffffff; background-color: #00008b }
h3 { text-indent: 10px; color: #ffffff; background-color: #008080 }
page code:
<body>
<center>
<h2>Header Text 2</h2>
<h3>Header Text 3</h3>
</center>

The headers are in two different colours (blue and teal)and should look as seemless as possible. However, at the moment I have a thick white line running through the middle of the two headers separting them and I can't get rid of it.

My second problem is with text wrapping. I need to show text as:

text,text,text,text,text,texttext,text,text,text,text,text
text,text,text,text,text,texttext,text,text,text,text,text
​

but its coming out like this:

text,text,text,text,text,texttext,text,text,text,text,text​
text,text,text,text,text,text

CSS Code:
<ul span style=&quot;text-indent: 83px; color:#008080&quot;>
<li>text,text,text,text,text,text</li>
</ul></span>

I realise the <li> indent plus 83px is the text starting position and when the text reaches the end of the page is is breaking and being treat as a <li> indent only (without the 83px). Appreciate any help available.


 
Sort by date Sort by votes
I think I can help you with your first question:

Add LINE-HEIGHT: 0px; to both css-code h2 and h3

Erik
 
Upvote 0 Downvote
STOP !!!

I think this is a better way:

Only add POSITION: relative; TOP: -19px to the css-code h3. I used -19 because that disabled the white line in my browser, but maybe you have to try some other numbers.

The answer in my first post makes the space between the text and header-bottom also zero.

 
Upvote 0 Downvote
Maybe this can solve your second problem:

First: I think <ul span style... is a mistake.

Use this code instead of your code:
<ul style=&quot;LEFT:83px; POSITION:relative; color:#008080&quot;>

And you can also experiment with:
<li style=&quot;LEFT:83px; POSITION:relative; color:#008080&quot;>

Hope this help you,

Erik
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
669
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
549
PeDa
PeDa
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
586
PeDa
PeDa
tyutghf
  • Locked
  • Question
Achieving this grid layout in css
Replies
1
Views
186
tyutghf
tyutghf

Part and Inventory Search

Sponsor

Back
Top