Help! How do I add that curvy design to top?!

liunx

Guest
Hi guys! I was wondering how would I add that 'border' you see at the top that curves into the left? Here are examples of what I mean.<br />
<br />
<!-- w --><a class="postlink" href="http://www.wholenote.com">www.wholenote.com</a><!-- w --><br />
<!-- m --><a class="postlink" href="http://www.ncsa.uiuc.edu">http://www.ncsa.uiuc.edu</a><!-- m --><br />
<br />
Anyways, I am trying to do this with a simple standard set of frames. I have the frames on the left for links and then the body on the right. The frames on the left are static, they dont move, but I want the top border to just be a regular part of the body. How do I make it curve like that?(wait or maybe it would be a better idea just to make it still at top as well.)<br />
<br />
Also, I am using Macromedia Dreamweaver. It leaves a little space between the frames and the body where I can't put or move anything there.<br />
<br />
Help Please.<br />
Thanks.<!--content-->Okay. That was a dumb question. They did it using a an image for the logo. Ok I understand that. How do I fix that space between frames and the body though? I can't do that with that space there.<br />
<br />
Thanks!<!--content-->Replying to your own post, hey? ;) <br />
<br />
Put your page online or send it to me and I will enlighten you.<!--content-->Okay this is a very crude example because of the banners in the way and the horrible image I made 3 seconds ago. But you get the idea. If I were to smooth everything out.<br />
<br />
How would I get rid of that space between the blue thingie and the frame?<br />
<br />
Also, I think I may be going at this the wrong way. I am using an image to do this, Is it supposed to just be background file instead?<br />
<br />
<br />
<!-- w --><a class="postlink" href="http://www.NerdCorp.com/First1.htm">www.NerdCorp.com/First1.htm</a><!-- w --><!--content-->Sorry thats <!-- w --><a class="postlink" href="http://www.NerdCorp.com/first1.htm">www.NerdCorp.com/first1.htm</a><!-- w --><!--content-->You can edit posts! See the middle button of the three in the bottom row.<!--content-->you've got a space in your image on the left, remove that and set the page borders to 0 with css <br />
<br />
<style type="text/css"><br />
body { margin: 0px 0px 0px 0px; }<br />
</style><!--content-->Also, take a look at [this (<!-- m --><a class="postlink" href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.NerdCorp.com%2Ffirst1.htm&charset=%28detect+automatically%29&doctype=HTML+4.01+Frameset&ss=1&outline=1&sp=1&verbose=1">http://validator.w3.org/check?uri=http% ... &verbose=1</a><!-- m -->)] and [this (<!-- m --><a class="postlink" href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.NerdCorp.com%2Ffirstframe1.htm&charset=%28detect+automatically%29&doctype=HTML+4.01+Transitional&ss=1&outline=1&sp=1&verbose=1">http://validator.w3.org/check?uri=http% ... &verbose=1</a><!-- m -->)] and [this (<!-- m --><a class="postlink" href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.NerdCorp.com%2Ffirstframe2.htm&charset=%28detect+automatically%29&doctype=HTML+4.01+Transitional&ss=1&outline=1&sp=1&verbose=1">http://validator.w3.org/check?uri=http% ... &verbose=1</a><!-- m -->)].<br />
<br />
<br />
All very easy to fix. Post again (in this thread) if you need help with that.<!--content-->thanks for showing me that I'm an idiot. lol<br />
<br />
I can see what you're getting at but where exactly do I put that code? Is it before or after or what?<br />
<br />
<br />
<img src=http://www.htmlforums.com/archive/index.php/"Nerd.gif" width="1035" height="119<br />
<br />
?<br />
<br />
<br />
HELP and THANKS<!--content-->Let me show you the way...<br />
<br />
First of all, add the following in your <body> tag of the page wih the graphic on:<br />
<br />
<body leftmargin="0" marginwidth="0"> <br />
<br />
ALSO, you image has a strip of white on the left. You'll have to remove it by simply cropping the image.<br />
<br />
Hope this helps!<!--content-->the css i posted you would place between the head tags :)<!--content-->The <body leftmargin="0" marginwidth="0"> is browser specific code, and should not be used.<br />
<br />
Use CSS instead.<!--content-->My margin code works for Netscape and Internet Explorer.:mad:<!--content-->to fix the space just make cellpadding="0" and cellspacing="0"<!--content-->Well I tried all of them but none work for some reason. And isn't the cell thing for tables???<br />
<br />
The space is still there.<br />
<br />
Any thoughts?...<!--content-->Ah, you can do this by making a template to make the spaces go away.<br />
<br />
What is a template? (Just to enlighten you) It a page you make for your website layout, for example it allows you to always have your menu and basic layout on every page, without having to do it all again. <br />
<br />
A template also allows you to set the exact place where an image should go, so that it won't shop up with spaces in between.<br />
<br />
But if you've never made a template before, I suggest you look on google for a template tutorial or something like that.<br />
<br />
Which program to use? Macromedia Dreamweaver<!--content-->ahem, should have looked at your code, for a start you have div align="center", which i believe is deprecated, use top and left to position a div!, ie:<br />
<br />
<br />
div.1 {left:0px;top:50px;}<br />
<br />
and then call it in with class<br />
<div class="1"><!--content-->Have you removed the strip of white on the side of your image itself? (save it and check it out in a graphic viewer: you can clearly see the strip)<!--content-->Guys sorry to bother you again, but I have spent hours on this and since I am an idiot and a newb, I'm still at a loss.<br />
<br />
I followed your steps and finally got rid of the space between the frame and the image as well as the white space in the image.<br />
<br />
After testing it it looked weird when it moved. So I was thinking just making the entire curvy thing a frame. So I tried making two frames the one at the left, and the one at top. Whereas the one at top contained a background image of the curvy thingie. It seems to be going about right but it doesnt look professional at all and atop that the white in the image is darker than the white area in the browser.<br />
<br />
Am I going about this the right way? Help please.<!--content-->???????<!--content-->giz, using the edit button to correct URLs wouldn't harm of course, since it saves (very little, but anyway) space and bandwidth. But let's also think about your 1000 posts about W3C's validator!!<!--content-->this has nothing to do with themax2000's question!!, please stay on topic!<br />
<br />
i don't think you should use frames for your layout!<br />
i think the more common way to do what you want is with tables and sliced images (basically you start off with a large image of how it will look and then cut it up and place in table cells, programs like illustrator do this well (although the code it produces sometimes needs correcting)<br />
For reference try going to a free-templates site, like this (<!-- m --><a class="postlink" href="http://www.freelayouts.com/templates/display/templates">http://www.freelayouts.com/templates/display/templates</a><!-- m -->) one, Download <!--more-->ing a design which matches your ideas and having a look to see how it was done (or even use it and modify it), i think a lot of people learn by looking at other peoples code, and sure even using some of it!!<br />
Another option is to set your full image as a background image!<!--content-->I was thinking the same thing Leoo, but I am still somewhat of a noob and didn't know if my two cents would amount to much. I was like, "why frames?"<br />
<br />
If you have Photoshop 6 or 7, use ImageReady (comes with PS) to load your image in its entirety and slice it up to fit the table structure. I am not too hip on Dreamweaver. I tried it for a few days and decided it was easier (and less aggravating) to learn to write the code myself. Not to mention more satisfying in the long run.<!--content-->I was thinking of frames because I wanted like a high tech look where there was a solid, static, cool looking border on the left side of the page that curved towards the top. This would contain links and etc...<br />
<br />
The body would of course be where it should but I just wanted that type of unique look.<br />
<br />
Anyways, I pulled it off, but it doesnt look professional at all.. I'm thinking I may just go with a regular old template :(<!--content-->You can get the look you need by using a table, or by using the entire image set as a non-tiling background image. Maybe use CSS to get the placement just right. All frames really are, are a way to have multiple pages displayed in one window. For instance, you might have the your logo/header in one frame at the top, the links in a scrollable window to the left, and the main content in the rest of the window. This would keep the logo and navigation stationary while the content loads each time a link is clicked. But, frames are not an effective method for graphic layout. At least, not for the look you are going for.<!--content-->just create 3 tables, one for the top image, one fore the left with the links then one next to that one for the "main stuff" in the table for main stuff u will make a frame and name it and target all ur links to open in that frame and for the curvy desing u just mke an image that is just like a semicircle for example and u place it, non repeating, in the corner where u want it to go using top left or wherever u want it<br />
for more detailed u can send me a msg on AIM at BoXCaRmember88 or msn at <!-- e --><a href="mailto:p[email protected]">[email protected]</a><!-- e --><br />
hope this helped<!--content-->
 
Back
Top