PDA

View Full Version : Is there a vertical <hr>?



enigma2005
04-30-2005, 07:58 AM
Ok I need answer if there is such a thing coz I want to make a web page that has a vertical boundery.

edit by me: I tried to use backgrounds but the problem is it appears in different browsers and window size.

jscheuer1
04-30-2005, 03:47 PM
No. Folks have gotten creative and used, at times, a table containing a single cell containing a transparent image with its width, height and background color set to achieve the desired effect. You can display this inline or as a block element but it will not be as intuitive to use as an <HR> because of the way HTML flows on a page. The code could be something like this:


<table style="display:inline;border-collapse:collapse;border:0"><tr>
<td style="padding:0"><img src="transparent.gif" width="2" height="600" style="background:black">
</td></tr></table>

mwinter
04-30-2005, 05:25 PM
Is there a vertical <hr>?As John said, no there isn't. However, an approach you might try in preference to that rather nasty table thing, is a simple border to the left- or right-hand side of whatever you're separating. For example,


<style type="text/css">
#content {
border-left: 2px solid black;
}
</style>

<!-- ... -->

<div id="content">
<!-- ... -->
</div>If that's not sufficient information, please provide a URL to the page in question.

Mike

enigma2005
05-01-2005, 02:05 AM
Ok I have tried jscheur1's script and copy/pasted it then I saw a vertical black line but I did not saw the effect of mwinter's script. Actually what I want to achieve is something like this http://www.foruma-z.com/ You see the blue boundery there, I want my www.freewebs.com/topicexpress to look like that. Well I only use Microsoft Frontpage aside from adobe photoshop coz they are the only program that I have and I only know .htm. Sorry for behaving like this coz I am still new to this stuffs and I was kinda addicted and curious to a lot of things. :D

Thanks guys and waiting for more response :D

jscheuer1
05-01-2005, 05:34 AM
Actually Mike's idea works well with your setup. Thank you BTW for using absolute url's in your source for images, it makes it so much easier to redesign the page. I am attaching a replacement for the page you provided the link for. The vertical lines are light blue, 2 pixels in width, you will be able to adjust them in this part of the style section code:


table.vr {
border-collapse:collapse;
border-left:2px solid lightblue;
border-right:2px solid lightblue
}

The other entries in the style section were to make things look as I guessed, from your example page, that you wanted them to. I made some changes to the HTML code, as well as more style entries, to make the lines run all the way up and down the page. Some padding and margins were added in the style section to maintain your original look after collapsing the table borders to get the vertical lines to butt up against your menus and other horizontal blue content.

enigma2005
05-01-2005, 08:29 AM
ok I used it but I did not get the desired effect. I pasted these codes:
<table style="table.vr {
border-collapse:collapse;
border-left:2px solid lightblue;
border-right:2px solid lightblue
}"><tr>
<td style="padding:0"><img src="transparent.gif" width="2" height="600" style="background:black">
</td></tr></table> not really sure if I got the whole thing right.

This is the result http://www.freewebs.com/topicexpress/test2.htm Well I only use one table for this page that is 63% width.

jscheuer1
05-01-2005, 08:44 AM
I redid the whole page, it is attached as a .zip file to my previous post. Click on tex.zip up ^^there^^ to download it.

enigma2005
05-01-2005, 10:01 AM
OMG! :eek: This is awesometastic. Two Thumbs Up. Please check this link I upload the tex.htm you gave me: http://www.freewebs.com/topicexpress/tex.htm I will use it one of this day very soon. I have to bring the htm first back at home coz I am in the public paid computer cafe.

Thanks jscheuer1. You made me dancing in happinesss. Yepeee. I will post an announcement there in my About Us! forum and I will mention your name to give you credit. I will just post the link here.

enigma2005
05-02-2005, 03:48 AM
Bump: Ok as I have promised I will give you credits and the link is here: http://www2.phpbb-host.com/phpbb/viewtopic.php?t=83&mforum=topicexpress

Thank You!:-)

jscheuer1
05-02-2005, 03:25 PM
Also may I add that the site is best viewed in 1074x768 screen resolution. Enjoy the updates everyone and come back soonIf you do a search and replace All, of width="63%" to width="636" it will look fine at all resolutions.