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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 18

Thread: Text formatting

  1. #1
    Regular Coder
    Join Date
    Nov 2002
    Location
    Bristol, UK
    Posts
    932
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Text formatting

    I posted on this a few weeks ago, and I thought I had fixed it, however I haven't it only worked in IE in quirks mode

    It's very simple: I have some text like this:

    Code:
    column one	column two column two column two
    		column two column two column two
    		column two column two column two
    		column two column two column two
    		column two column two column two
    ...that's what I WANT to happen. Instead, this is happening:

    Code:
    column one	column two column two column two
    		column two column two column two
    column two column two column two column two column
    two column two column two column two column two
    I have currently got column one set to float: left. I don't really want to set column two to float: right instead, unless I have to, because that will not degrade very well. I have tried a combination of things, like block/inline, setting width, etc. nothing works yet.

    ...any ideas, anyone?

    Cheers

    ::] krycek [::
    ithium | SOAPI | SDP | PTPScript manual
    "ithium is a non-profit webhost, which is pretty much unique. The mission of ithium is to provide free hosting resources for worthwhile and needy non-profit projects, which otherwise may not be able to obtain such facilities. The money from commercial customers goes to maintain ithium's servers and further development."

  • #2
    New Coder
    Join Date
    Dec 2002
    Location
    Florida
    Posts
    68
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Why not use tables to format this? It would be pretty easy, from the looks of what you want.

    MrDoubtFire

  • #3
    Regular Coder
    Join Date
    Nov 2002
    Location
    Bristol, UK
    Posts
    932
    Thanks
    0
    Thanked 0 Times in 0 Posts
    very true... but I am trying to avoid using tables if possible

    ::] krycek [::
    ithium | SOAPI | SDP | PTPScript manual
    "ithium is a non-profit webhost, which is pretty much unique. The mission of ithium is to provide free hosting resources for worthwhile and needy non-profit projects, which otherwise may not be able to obtain such facilities. The money from commercial customers goes to maintain ithium's servers and further development."

  • #4
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    Set both heights to 100%, or the same value.

  • #5
    New Coder
    Join Date
    Dec 2002
    Location
    Florida
    Posts
    68
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You can get this to work with <div> tags:

    <div id="leftcol" style="position:absolute; display:block;
    background-color:red; width:200px; left:5px; top:5px;">
    <p>Column One</p>
    </div>

    <div id="rightcol" style="position:absolute; display:block;
    background-color:yellow; width:200px; right:5px; top:5px;">
    <p style="align:left;">Column Two Column Two Column Two</p>
    <p style="align:left;">Column Two Column Two Column Two</p>
    </div>


    Not sure about the degradable problems though. But, with a bit of work and positioning and working out sizes you can get it to display next to each other.

    MrDoubtFire

  • #6
    Regular Coder
    Join Date
    Nov 2002
    Location
    Bristol, UK
    Posts
    932
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ...thanks jkd, I never thought about the heights, really - I was just thinking about the widths. I must admit I was a bit sceptical that setting them to 100% would work... but it did! ...only in IE though still doesn;t do it properly in Mozilla.

    I will continue tweaking it and see if I can get it right.

    Just one other thing: if I set a background color, is it possible to make two divs that are next to each other, the same height? Or am I getting my hopes up. I do not think this is possible...?

    ::] krycek [::
    ithium | SOAPI | SDP | PTPScript manual
    "ithium is a non-profit webhost, which is pretty much unique. The mission of ithium is to provide free hosting resources for worthwhile and needy non-profit projects, which otherwise may not be able to obtain such facilities. The money from commercial customers goes to maintain ithium's servers and further development."

  • #7
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    Put them both in the same box, and then set their heights to 100%.

  • #8
    Regular Coder
    Join Date
    Nov 2002
    Location
    Bristol, UK
    Posts
    932
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ...well that's the thing... they ARE in a box... well, a <p> tag, anyway

    Here's the code snippet:

    Code:
    <p>
    	<span class="column">
    		<span class="code2">size</span>
    	</span> 
    	<span class="column_r">
    		An integer which determines the original <span class="code">length</span> of the <span class="code">array</span>. A size can only be specified if elements are not being added to the <span class="code">array</span> upon creation.
    	</span>
    </p>
    <p>
    	<span class="column">
    		<span class="code2">elementN</span>
    	</span> 
    	<span class="column_r">
    		Any JavaScript value.
    	</span>
    </p>
    ...and here are the CSS styles I am using for the elements in that snippet:

    Code:
    p {
    	font-family:		Tahoma, Verdana, Arial, Helvetica, sans-serif;
    	font-size:		12px;
    	text-align:		justify;
    	color:			#000000;
    	margin:			4px 4px 4px 54px;
    	padding:		4px;
    	width:			auto;
    }
    .column {
    	background-color:	#FF0000;
    
    	padding:		0px 10px 0px 0px;
    	width:			150px;
    	height:			100%;
    	float:			left;
    	display:		block;
    }
    .column_r {
    	height:			100%;
    	display:		block;
    }
    .code {
    	font-family:		"Courier New", Courier, mono;
    	color:			#66AA00;
    }
    .code2 {
    	font-family:		"Courier New", Courier, mono;
    	font-style:		italic;
    }
    I have simply pasted that from my current sheet, I know I shouldn't need display: block on the <p> tag but I wanted to make sure, plus I am going to use divs instead of spans but I haven't changed the code yet... hence the block on the spans too.

    There is a red background on the first column so that I can see how big it is

    Like I said, it works in IE but not Mozilla

    ::] krycek [::
    ithium | SOAPI | SDP | PTPScript manual
    "ithium is a non-profit webhost, which is pretty much unique. The mission of ithium is to provide free hosting resources for worthwhile and needy non-profit projects, which otherwise may not be able to obtain such facilities. The money from commercial customers goes to maintain ithium's servers and further development."

  • #9
    Regular Coder
    Join Date
    Nov 2002
    Location
    Bristol, UK
    Posts
    932
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ...this is still causing me grief

    any ideas, anyone?

    ::] krycek [::
    ithium | SOAPI | SDP | PTPScript manual
    "ithium is a non-profit webhost, which is pretty much unique. The mission of ithium is to provide free hosting resources for worthwhile and needy non-profit projects, which otherwise may not be able to obtain such facilities. The money from commercial customers goes to maintain ithium's servers and further development."

  • #10
    New Coder
    Join Date
    Dec 2002
    Location
    Florida
    Posts
    68
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi krycek,

    I took your code and to me, it looks the same in IE6, Mozilla1.2.1, and Netscape 7.0. It displays two red backgrounded blocks on the left (with "size" and "elementN" in the top and bottom blocks respectively). On the right of each block is the spiel in each .column_r span.

    Is this not the right way it's supposed to be displayed, or am I not understanding something? Are you using the latest version of the browsers?

    MrDoubtFire

  • #11
    Regular Coder
    Join Date
    Nov 2002
    Location
    Bristol, UK
    Posts
    932
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Mr DoubtFire, thanks for testing it out. I am using Mozilla 1.2.1 and IE 6 SP1.

    I am not sure if the result you got was what I am after, but this may help:

    It's very simple: I have some text like this:

    Code:
    column one	column two column two column two
    		column two column two column two
    		column two column two column two
    		column two column two column two
    		column two column two column two
    ...that's what I WANT to happen. Instead, this is happening:
    Code:
    column one	column two column two column two
    		column two column two column two
    column two column two column two column two column
    two column two column two column two column two
    i.e. what I mean is, by 'not working' it is wrapping, like it does on Mozilla for me. But in IE it does not wrap underneath the first column.

    Note that screen res will play a part here, because for some reason the lines (if they are going to wrap back) will only wrap after two lines, like in my example above, if that makes sense. So make sure that there are at least 3 lines in the right hand column in order to see if it is bahaving properly or not.

    My second question is, how big is the red area? On my setup, it is only present in the background of the lines that have actual text; i.e. the background does not stretch to the bottom of the column's container, meaning that the column itself cannot be stretching that far.

    I am still wondering about how to get the bakground to stretch all the way down to the bottom of a container, so that two columns will be the same overall height no matter what 'inner' height (i.e. lines of text) they are.

    ...do you follow that? I can post another example if you wish.

    Cheers for the help

    ::] krycek [::
    ithium | SOAPI | SDP | PTPScript manual
    "ithium is a non-profit webhost, which is pretty much unique. The mission of ithium is to provide free hosting resources for worthwhile and needy non-profit projects, which otherwise may not be able to obtain such facilities. The money from commercial customers goes to maintain ithium's servers and further development."

  • #12
    Regular Coder
    Join Date
    Nov 2002
    Location
    Bristol, UK
    Posts
    932
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ...no ideas then?

    ::] krycek [::
    ithium | SOAPI | SDP | PTPScript manual
    "ithium is a non-profit webhost, which is pretty much unique. The mission of ithium is to provide free hosting resources for worthwhile and needy non-profit projects, which otherwise may not be able to obtain such facilities. The money from commercial customers goes to maintain ithium's servers and further development."

  • #13
    Regular Coder
    Join Date
    Nov 2002
    Location
    Bristol, UK
    Posts
    932
    Thanks
    0
    Thanked 0 Times in 0 Posts
    well I guess this is just not possible then

    ::] krycek [::
    ithium | SOAPI | SDP | PTPScript manual
    "ithium is a non-profit webhost, which is pretty much unique. The mission of ithium is to provide free hosting resources for worthwhile and needy non-profit projects, which otherwise may not be able to obtain such facilities. The money from commercial customers goes to maintain ithium's servers and further development."

  • #14
    Regular Coder
    Join Date
    Nov 2002
    Location
    Bristol, UK
    Posts
    932
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well I am not going to give up on this, surely there is an answer somewhere. I have tried everyone's ideas and still nothing.

    Mr Doubtfire, jkd, joh6nn, vladdy, beetle, any ideas???

    ::] krycek [::
    ithium | SOAPI | SDP | PTPScript manual
    "ithium is a non-profit webhost, which is pretty much unique. The mission of ithium is to provide free hosting resources for worthwhile and needy non-profit projects, which otherwise may not be able to obtain such facilities. The money from commercial customers goes to maintain ithium's servers and further development."

  • #15
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've been watching because I've been fighting the same problem, height: 100% ought to work but the browsers refuse to make it that tall if you float it left and if you don't float it they won't let you put other content to the right of it.

    If I manage to figure it out I'll be sure to let you know.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •