Horizontal line question? - Wikidot Community

Explore »

Horizontal line question?

Forum » Help / Editing pages » Horizontal line question?

Started by:

(account deleted)
Date: 30 Oct 2007 11:36
Number of posts: 15

RSS: New posts

Unfold All | Fold All | + More Options

Fold

Horizontal line question?

(account deleted) 30 Oct 2007 11:36

Hey there,

I want to be able to insert a line break into my wiki after each heading, to seperate the sections.
I know that the Horizontal Line button exists to do this, but I don't like the way it looks.

So what I tried to do instead was to insert a "horizontal line" gif image instead,
But the problem was that there was a large amount of space after each heading and it looks wrong.

Is there a way to paste the image closer to the heading text?
Or perhaps another way instead to modify the Horizontal Line code, so that it looks more like the line that you see underneath the page title?

Kind regards,

BradLee

Reply | Options

Unfold Horizontal line question? by

(account deleted), 30 Oct 2007 11:36

Fold

Re: Horizontal line question?

Helmuti_pdorf 30 Oct 2007 11:48

Does "space underline 'Enter' " not work ? -Helmut

Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.

Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?

Reply | Options

Unfold Re: Horizontal line question? by

Helmuti_pdorf, 30 Oct 2007 11:48

Fold

Re: Horizontal line question?

(account deleted) 30 Oct 2007 12:10

I am not sure if it works…
Can you give me an example of how to use it?
(Sorry I am fairly new to CSS coding).

If you mean simply using the underline button to underline the text, then no, that wont help.
Because I want the horizontal line to continue across the whole frame/window, not just the underlined text.

This code actually does what I mean, but I don't like the look of it.

------

1. It needs to be darker.
2. It has a slight indent, and I would like it to start from the side of the frame/window at the same position that the text does.

Thanks,

BradLee

Last edited on 30 Oct 2007 12:27 by

(account deleted) + Show more

Options

Unfold Re: Horizontal line question? by

(account deleted), 30 Oct 2007 12:10

Fold

Re: Horizontal line question?

Helmuti_pdorf 30 Oct 2007 12:55

Sorry, I thought you need a LINE BREAK ? ( or more than one)

I do it with following ( NON- CSS !) trick:

@@ @@

- a space alone inserted into 2 "@" in an extra line ( or more lines)
like here 4 times such line break:

done with this 4 lonley line breaks:
@@ @@ 
@@ @@ 
@@ @@ 
@@ @@

or in a text with ONLY: a space + an underline + enter :
( => line break, even in a table cell..): ( following 4 line breaks with such old trick for br:

done with this 4 lonly lines:
 _
 _
 _
 _

If you need only a horizontal line - this is doen with 4 times the - :
( but including a lot of space before and after…)

-Helmut

Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.

Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?

Last edited on 30 Oct 2007 13:03 by Helmuti_pdorf + Show more

Options

Unfold Re: Horizontal line question? by

Helmuti_pdorf, 30 Oct 2007 12:55

Fold

Re: Horizontal line question?

(account deleted) 30 Oct 2007 13:16

Thanks Helmut,

I appreciate your help so far, but that does not do what I need either.

I need the horizontal line to span the whole window.
If you look at any wiki page under the page title is a solid black horizontal line.
I need to be able to insert them into my document to seperate sections.

Anymore ideas?

BradLee

Last edited on 30 Oct 2007 13:20 by

(account deleted) + Show more

Options

Unfold Re: Horizontal line question? by

(account deleted), 30 Oct 2007 13:16

Fold

Re: Horizontal line question?

Helmuti_pdorf 30 Oct 2007 13:49

Sorry, I have to tink about " right padding" with some — style commandos… - Helmut

Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.

Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?

Options

Unfold Re: Horizontal line question? by

Helmuti_pdorf, 30 Oct 2007 13:49

Fold

Re: Horizontal line question?

(account deleted) 30 Oct 2007 15:13

Hi all,

I have managed to do this by modifying the CSS code with the following:

/* HEADINGS */

h1,h2,h3,h4,h5,h6 {
    color: black;
    font-family: Arial, Verdana, Helvetica, Sans-serif;
    /* Code to add horizontal line break after each heading*/
    margin: 0 0 0.5em 0;
    padding-top: 0.5em; /* Firefox bug? */
    border-bottom: 1px solid #666;
}

This could, of course, be modified for only the specific headings you wanted eg. H1 only, by specifying:

/* HEADINGS */

h1,h2,h3,h4,h5,h6 {
    color: black;
    font-family: Arial, Verdana, Helvetica, Sans-serif;
}

/* HEADING 1 SPECIFIC FORMATTING */

h1 {
    margin: 0 0 0.5em 0;
    padding-top: 0.5em; /* Firefox bug? */
    border-bottom: 1px solid #666;
}

Best,

BradLee

Last edited on 30 Oct 2007 15:15 by

(account deleted) + Show more

Reply | Options

Unfold Re: Horizontal line question? by

(account deleted), 30 Oct 2007 15:13

Fold

Re: Horizontal line question?

James Kanjo 29 Jun 2008 02:31

Hey Brad,

I have a solution to your problem, without messing with any CSS sheets or anything!

Just put this code where you want the horizontal line:

[[div style="border-bottom: 1px solid #666;"]]
[[/div]]

To make the line darker, just change the #666 to #555 (or #444 or lower). Likewise, to make the line lighter, just change the #666 to #777 (or #888 or higher).

Cheers ~ James Kanjo

λ James Kanjo
_{Blog | Wikidot Expert | λ and Proud

Web Developer | HTML | CSS | JavaScript}

Reply | Options

Unfold Re: Horizontal line question? by

James Kanjo, 29 Jun 2008 02:31

Fold

Re: Horizontal line question?

Helmuti_pdorf 29 Jun 2008 08:21

That is great!

I take this into the howto - embelish text….

Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.

Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?

Reply | Options

Unfold Re: Horizontal line question? by

Helmuti_pdorf, 29 Jun 2008 08:21

Fold

Re: Horizontal line question?

Timothy Foster 23 Jan 2009 22:16

Compound lines.

[[div style="border-bottom: 2px solid #777; margin-bottom:1px;"]]
[[/div]]
[[div style="border-bottom: 1px solid #777;"]]
[[/div]]

Pretty line

[[div style="border-bottom: 1px dotted #777;"]]
[[/div]]
[[div style="border-bottom: 1px dashed #777;"]]
[[/div]]
[[div style="border-bottom: 1px dotted #777;"]]
[[/div]]

Grayscale line

[[div style="border-bottom: 1px solid #444;"]]
[[/div]]
[[div style="border-bottom: 1px solid #666;"]]
[[/div]]
[[div style="border-bottom: 1px solid #888;"]]
[[/div]]
[[div style="border-bottom: 1px solid #AAA;"]]
[[/div]]
[[div style="border-bottom: 1px solid #CCC;"]]
[[/div]]

Rainbow

[[div style="border-bottom: 1px solid #FF0000;"]]
[[/div]]
[[div style="border-bottom: 1px solid #FFA500;"]]
[[/div]]
[[div style="border-bottom: 1px solid #FFFF00;"]]
[[/div]]
[[div style="border-bottom: 1px solid #00FF00;"]]
[[/div]]
[[div style="border-bottom: 1px solid #0000FF;"]]
[[/div]]
[[div style="border-bottom: 1px solid #A500A5;"]]
[[/div]]

There is a lot you could do with this.

— Blog ~ Life's Handbook ~ Wikidot Design & Development

Options

Unfold Re: Horizontal line question? by

Timothy Foster, 23 Jan 2009 22:16

Fold

Re: Horizontal line question?

James Kanjo 24 Jan 2009 02:15

Wow! Timothy! That's a brilliant extension of my work! Well done!

It has given me an idea too…

λ James Kanjo
_{Blog | Wikidot Expert | λ and Proud

Web Developer | HTML | CSS | JavaScript}

Options

Unfold Re: Horizontal line question? by

James Kanjo, 24 Jan 2009 02:15

Fold

Re: Horizontal line question?

James Kanjo 24 Jan 2009 02:47

I just realised that you practically DID do my idea!

I thought I would make a Gay Pride Flag… but that is exactly the rainbow you have done!

For small pride flag:

[[div style="border-bottom: 5px solid #FF0000; width: 75px;"]]
[[/div]]
[[div style="border-bottom: 5px solid #FFA500; width: 75px;"]]
[[/div]]
[[div style="border-bottom: 5px solid #FFFF00; width: 75px;"]]
[[/div]]
[[div style="border-bottom: 5px solid #00FF00; width: 75px;"]]
[[/div]]
[[div style="border-bottom: 5px solid #0000FF; width: 75px;"]]
[[/div]]
[[div style="border-bottom: 5px solid #A500A5; width: 75px;"]]
[[/div]]

Which gives:

For large pride flag:

[[div style="border-bottom: 10px solid #FF0000; width: 150px;"]]
[[/div]]
[[div style="border-bottom: 10px solid #FFA500; width: 150px;"]]
[[/div]]
[[div style="border-bottom: 10px solid #FFFF00; width: 150px;"]]
[[/div]]
[[div style="border-bottom: 10px solid #00FF00; width: 150px;"]]
[[/div]]
[[div style="border-bottom: 10px solid #0000FF; width: 150px;"]]
[[/div]]
[[div style="border-bottom: 10px solid #A500A5; width: 150px;"]]
[[/div]]

Which gives:

λ James Kanjo
_{Blog | Wikidot Expert | λ and Proud

Web Developer | HTML | CSS | JavaScript}

Options

Unfold Re: Horizontal line question? by

James Kanjo, 24 Jan 2009 02:47

Fold

Rainbow line improvements

James Kanjo 18 Oct 2009 06:49

We can improve the rainbow line code significantly like so:

[[div style="border-top: 1px solid #F00; border-bottom: 1px solid #FA0;"]]
[[/div]][[div style="border-top: 1px solid #FF0; border-bottom: 1px solid #0F0;"]]
[[/div]][[div style="border-top: 1px solid #00F; border-bottom: 1px solid #A0A;"]]
[[/div]]

[[div style="border-top: 5px solid #F00; border-bottom: 5px solid #FA0; width: 75px;"]]
[[/div]][[div style="border-top: 5px solid #FF0; border-bottom: 5px solid #0F0; width: 75px;"]]
[[/div]][[div style="border-top: 5px solid #00F; border-bottom: 5px solid #A0A; width: 75px;"]]
[[/div]]

[[div style="border-top: 10px solid #F00; border-bottom: 10px solid #FA0; width: 150px;"]]
[[/div]][[div style="border-top: 10px solid #FF0; border-bottom: 10px solid #0F0; width: 150px;"]]
[[/div]][[div style="border-top: 10px solid #00F; border-bottom: 10px solid #A0A; width: 150px;"]]
[[/div]]

λ James Kanjo
_{Blog | Wikidot Expert | λ and Proud

Web Developer | HTML | CSS | JavaScript}

Reply | Options

Unfold Rainbow line improvements by

James Kanjo, 18 Oct 2009 06:49

Fold

Re: Horizontal line question?

Brunhilda 24 Jan 2009 14:56

And in order not to repeat all this, you can make a special page with this code and use include template including this page where you need this line…

Vir bonus miser vocari, at esse non potest miser.

Reply | Options

Unfold Re: Horizontal line question? by

Brunhilda, 24 Jan 2009 14:56

Fold

Re: Horizontal line question?

gerdami 24 Jan 2009 18:01

Yes you can.
See this include-rainbow-line

gerdami - Visit Handbook en Français - Rate this howto:import-simple-excel-tables-into-wikidot up!

Reply | Options

Unfold Re: Horizontal line question? by

gerdami, 24 Jan 2009 18:01

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-Share Alike 2.5 License.