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 Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

change the shape of html page - newbie to this forum.

Status
Not open for further replies.
dschomburg

dschomburg

MIS
Aug 2, 2000
325
US
Greetings! I have a question regarding the shape of a web page.

What could I use (free app or script or method) to change the shape of an html document? What I would like to do is have 3 frames. Frames 2 and 3 will change content but frame 1's content will stay the same just the have a different shape then the rest - instead of just having a square html document as frame 1 I would like it to be an odd shape or even a circle - does this make any sense?

Any help would help a heap.
Thanks in advance,
Dave
 
Sort by date Sort by votes
Hi Dave,

shapes for HTML documents and frames are rectangular by default and can't be changed. What you would ususally do, is create circular or oval shapes in a graphics program like Photoshop. Place the shapes in the frame where you want them to be. When you got your frameset ready, make the frameborders disappear by setting the "width" value to zero. This wil give the effect you are looking for.

HTH Dutch
 
Upvote 0 Downvote
I thank you all for your responses and will try them out.

which css tags would be appropriate for the result I'm looking for?


Thanks again,
Dave
 
Upvote 0 Downvote
If you're trying to make the page look round then you can use

<body background=&quot;yourbackground.jpg&quot;>

in your page. Then make a jpg image to suite what you want. This is the easiest to implement but doesn't necessarily lend itself too well to different screen sizes

another option is to use img tags with separate images for the top, bottom, left and right sides op the page
note I changed the body tag for the document slightly as well. The img tag shown below will give a vertical bar at the top of the page.
<body leftmargin=&quot;0&quot; topmargin=&quot;0&quot; rightmargin=&quot;0&quot; bottommargin=&quot;0&quot; marginwidth=&quot;0&quot; marginheight=&quot;0&quot;>

<img style=&quot;left:0px;top:0px;width:100%;height:25px;z-index:1&quot;&quot; src=&quot;celback.gif&quot; alt=&quot;&quot; border=&quot;0&quot;>

to produce a horizontal bar change height to 100%, and repeat-x to repeat-y

You will need to create your graphics 2 for horizontal & 2 for vertical. in the example above the graphic i tried it with was 25px high x 2 pixels wide so image loading is farly fast.

for rounded corners

just make an image to produce the rounding effect you want
change the z-index value to 2 for the left hand corner the position settings will be left:0px; top:0px for the right hand side right:0px; top:0px

hope this helps
regards
Ian It's not a lie if you believe it!

| |
 
Upvote 0 Downvote
Sorry
Ignore the image tag references above use div tags instead

Here is the top image

<div style=&quot;left:0px; height:25px;top:0px;width:100%; z-index:1;background-color:#EAEAEA;background-image:url(top.gif);background-repeat:repeat-x;padding:0px&quot;></div>

<div style=&quot;left:0px; height:100%;top:0px;width:25px; z-index:1;background-color:#EAEAEA;background-image:url(left.gif);background-repeat:repeat-y;padding:0px&quot;></div>

for the rounded corners again use the div tag but
change the z-index value to 2 for the left hand corner the position settings will be left:0px; top:0px for the right hand side right:0px; top:0px
regards
Ian It's not a lie if you believe it!

| |
 
Upvote 0 Downvote
Woops that won't work. I was trying to do with div tags wahat I do all the time with frames and I haven't quite figured it out yet

the table approach is simple though

<html>
<head>
<title>Untitled</title>
</head>
<body leftmargin=&quot;0&quot; topmargin=&quot;0&quot; rightmargin=&quot;0&quot; bottommargin=&quot;0&quot; marginwidth=&quot;0&quot; marginheight=&quot;0&quot;>


<table cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; width=&quot;100%&quot; height=&quot;100%&quot; border=&quot;0&quot;>

<tr height=25px>
<td background=&quot;tlcorner.gif&quot;></td>
<td background=&quot;top.gif&quot;></td>
<td background=&quot;trcorner.gif&quot;></td>
</tr>
<tr>
<td width=&quot;15px&quot; background=&quot;left.gif&quot;></td>
<td>e</td>
<td width=&quot;15px&quot; background=&quot;right.gif&quot;></td>
</tr>
<tr height=25px>
<td background=&quot;blcorner.gif&quot;></td>
<td background=&quot;celback.gif&quot;></td>
<td background=&quot;brcorner.gif&quot;></td>
</tr>
</table>

</body>
</html>
It's not a lie if you believe it!

| |
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

ControlNovice
  • Locked
  • Question
Any plans to add AppSheet programming to this list?
Replies
0
Views
205
ControlNovice
ControlNovice
rosarij
  • Locked
  • Question
Help me fix this document.write javascript code
Replies
1
Views
284
ggriffit
ggriffit
tyutghf
  • Locked
  • Question
Vertical height of homepage ideals
Replies
5
Views
267
cadel
cadel
rk0000
  • Locked
  • Question
Wordpress: Unable to view icons next to “Hide Controls” in admin customize.php
Replies
0
Views
165
rk0000
rk0000
tyutghf
  • Locked
  • Question
Chat to current website visitors together
Replies
1
Views
208
antanasdeg
antanasdeg

Part and Inventory Search

Sponsor

Back
Top