|
HTML - Rounded Corners Jump Menu
Hello HTML Forum,
I've been looking everywhere for some solution to making a normal jump menu, like the one below: HTML Code: <form name="form1">
<select name="menu1" onChange="MM_jumpMenu('parent',this,0)">
<option value="#">unnamed1</option>
<option value="#">unnamed2</option>
<option value="#">unnamed3</option>
<option value="#">unnamed4</option>
</select>
</form>
- into something more attractive, with rounded corners for example. I've seen enough Nifty Corners Cubes and the sorts. Please help me out with some CSS. I'm stumped! By the way... I might've posted this in the wrong section, but there were more readers here.. I just realised that too... Sorry. Similar TutorialsHi Was wondering if there was a way of doing rounded corners for buttons etc using CSS/HTML. Any ideas? Is there a more effective way for accessibility? I'm new to CSS/HTML so please go slow Thanx Hi I have made a rounded corners box with images, but the bottom line doesn't connect with the two side lines. Thanks for any help: <html><body dir=rtl> <Table CELLPADDING="0" CELLSPACING="0" > <TR> <TD valign=top align=right><IMG SRC="http://www.bkesher.co.il/bkesher/images/tr.png" WIDTH="16" HEIGHT="16"></TD> <TD><img src="http://www.bkesher.co.il/bkesher/images/hline200.png"></TD> <TD align=left valign=top><IMG SRC=" http://www.bkesher.co.il/bkesher/images/tl.png" WIDTH="16" HEIGHT="16"></TD> </TR> <TR style="margin-top:0px;margin-bottom:0px;"> <TD align=center> <IMG SRC="http://www.bkesher.co.il/bkesher/images/vline130.png" border="0" alt="" > </TD> <TD> <TABLE align=center border=2 style="font-size:10pt; border: 2px solid ;border-collapse:collapse;border-color:black"> <TH colspan=2>DDD</TH> <TR><TD width=70%> </TD><TD width=30%></TD></TR> <TR><TD> </TD><TD>AA</TD></TR> <TR><TD>BB </TD><TD>CC</TD></TR> <TR><TD>DD </TD><TD>EE</TD></TR> <TR><TD> FF</TD> <TD>GG</TD></TR> </TABLE> </TD> <TD align=center> <IMG SRC="http://www.bkesher.co.il/bkesher/images/vline130.png" border="0" alt="" > </TD></TR> <TR valign=top style="margin-top:0px;margin-bottom:0px;"> <TD valign=top align=right><IMG SRC=" http://www.bkesher.co.il/bkesher/images/bottr.png" WIDTH="16" HEIGHT="16"></TD> <TD valign=top><img src=" http://www.bkesher.co.il/bkesher/images/hline200.png"></TD> <TD align=left valign=top><IMG SRC=" http://www.bkesher.co.il/bkesher/images/bl.png" WIDTH="16" HEIGHT="16"></TD> </TR> </TABLE> </body></html> Hi, Just wondered if anyone has any opinions on this Rounded corners can be achieved either by using JavaScript on one div or by using a couple of nested html tags and CSS, Forgetting about cross browser issues and support for a minute, which way should be used when considering standards? Scott Hi, I am trying to create a page with a large text box that has rounded corners. What do you suggest is the best way to accomplish this? 1) Using CSS and by: -moz-border-radius-topleft / -webkit-border-top-left-radius -moz-border-radius-topright / -webkit-border-top-right-radius -moz-border-radius-bottomleft / -webkit-border-bottom-left-radius -moz-border-radius-bottomright / -webkit-border-bottom-right-radius 2) Using DIV tags on the top-left, top-right, bottom-left, bottom-right and css to add the image as a background? Best, E Well, I finally applied my layout I've been designing for my site to my forums. ALl was going well until I tried to make rounded corners for the head of my tables. I was attempting this effect with nested divs, but instead of doing like it should (creating rounded corners), it went all over the place. Any help? Link to problem Link to CSS By the way, both the template HTML and CSS validates fine. Hi, I'am newbe to this forum and I serach all arround but didn't find a solution. I created some html in order to create a box with rounded corners with <div>. The problem is that the result is ok in Firefox, but everything is scrambled up in IE. Can somebody help me in order to make this code work in IE and Firefox? Code: <!-- left-side -->
<div>
<div style="width:100%;margin:0px auto;background: url(http://localhost/test_xtypo/plugins/content/xtypo/rounded2/left.gif) repeat-y left top ".$roundtxtbg2.";">
<!-- top + topleft_corner-->
<div style=" width:100%;height:20px;background:url(http://localhost/test_xtypo/plugins/content/xtypo/rounded2/topleft.gif) no-repeat left top;">
<!-- top-right -->
<span style=" display:block;position:relative; height:20px;background:url(http://localhost/test_xtypo/plugins/content/xtypo/rounded2/topright.gif) no-repeat right top;"> </span>
</div>
<div style=" position:relative;background:url(http://localhost/test_xtypo/plugins/content/xtypo/rounded2/right.gif) repeat-y right top; padding:1px 20px 1px 25px; margin:-1px 0 0 0;">
<div style=\" color:".$roundtxtcolor2.";\">***code***</div>
</div>
<div style=" width:100%;height:20px;background:url(http://localhost/test_xtypo/plugins/content/xtypo/rounded2/bottomleft.gif) no-repeat left bottom;">
<span style=" display:block;position:relative;height:20px;background:url(http://localhost/test_xtypo/plugins/content/xtypo/rounded2/bottomright.gif) no-repeat right top;"> </span></div></div>
</div>
Many thanks Hi! Is it possible to tile a .png image in a table cell, and is it possible to make the illusion of rounded corners in a table cell? I want to make a webpage with a bg image, and have semi transparent textbox on top of this layer with rounded corners and have a text layer on top of the text box. I use Google sites, so my table content will be variable depending on the content put inside of the blog etc. I want to make a site that looks like a poster and not a website, without using Flash. Thanx, Knut Nordvik hello , i have been trying to create a sort of image slideshow. the problem is that in firefox it displays correctly with rounded corners , but in chrome the rounded corners ( using css3 ) are being 'hidden' at the back although it is there . here's a demo of my work : http://anisa.me/work/ Any help would be highly appreciated . Hi everyone Can you please help. I need to create a 3 column table, left column, content column and right column. I want the left column to have rounded corners. I am having a tough time doing this. Any help is appreciated Thanks Hi i am trying to put this page in an normal IFRAME: http://www.krishnamedia.org/ebooks/1.1.htm But everytime i open the pages with the jump menu it opens in a new page NOT the iframe, whys it doing that!?? This is the Iframe urls:: http://www.krishnamedia.org/ebooks/widget.htm It's hard to explain, but basically I want to achieve creating a smaller file looking portion of my site, with a larger around and tabs. Basically this: I currenty just have the outer red table, using .gif's to round the corners. I tried copying the code again to place in the middle of the red table code and it doesn't work. Any help to achieve this effect would be great. Here is the code I am using: PHP Code: <table width="450" cellpadding="0" cellspacing="0" border="0" style="background-color: #086591"> <tr> <td width="14"><img src="images/top_left.jpg" width="14" height="14" border="0" alt="..." /></td> <td width="172"></td> <td width="14"><img src="images/top_right.jpg" width="14" height="14" border="0" alt="..." /></td> </tr> <tr> <td></td> CONTENT HERE <td></td> </tr> <tr> <td><img src="images/bottom_left.jpg" width="14" height="14" border="0" alt="..." /></td> <td></td> <td><img src="images/bottom_right.jpg" width="14" height="14" border="0" alt="..." /></td> </tr> </table> Thanks for any help. Hello guys ! Ok, i have this website: www.global-publicity.com and, how you see, i have two jump menus there . Well i wonder how can i do to click on Choose continent and when i click on Europe automatically open in left and right frames two html pages in there BUT open my second menu also (ROMANIA) Hope you understand and sorry for my bad english... I have a table with two cells. The top cell has a jump menu created in Dreamweaver and reads as follows: Code: <form name="form" id="form">
<select name="jumpMenu" id="jumpMenu" onchange="MM_jumpMenu('parent',this,0)">
<option value="#" selected="selected">Choose</option>
<option value="http://www.myURL.com" target="foo">myURL</option>
</select>
</form>
When I choose an option I want the results to appear in the cell below which I've populated with an iframe: Code: <iframe name="foo"></iframe> When I 'change' the jump menu, it takes me to a new page rather than populating the iframe in the target cell. How do I make the change in the jump menu call the URL into the cell below without directing me to a new page? Thanks in advance - sleepydad not sure if i need a js for this but I have a web page using page jump links to navigate a FAQ page. However, I would rather have a drop down menu/form with the links instead of a list of text links. Anybody have a clue? thanks in advance. This is what I have so far as an example... <form name="jump"><select id="select" name="select"> <option value="" selected="selected">Select</option> <option value="#1">Category 1</option> </select></form> <a id="1" name="1"></a> Category 1 First, forgive me i'm a noob! Am attempting to rebuild our sorry website. Am kinda picking the whole html thing up, however, am building in frontpage and expressions because those are the programs i have. page i'm working on is: ygcc.org/testing i embedded a video, but would like to position it to line up w/ everything else. i like how it looks centered, but its not aligned correctly w/ the other objects on the page. also, everything else is "positioned" on the page, whereas the media is "aligned" so, it doesn't stay put if i resize my browser next problem i'm having is jump menu or tree menu. i want a drop boxes, such as are on the page, however, would like it if it was a horizontal menu, not individual boxes like they are. right now, the drop boxes are only drop boxes (for "forms") and do not hyperlink. if i "insert jumpmenu" then, i cannot put them beside each other in a row. if i attempt to put them in a row, they are like steps, not straight across. i d/led a program to help w/ menus, but i don't even understand it. when i attempted what it told me to do, i do not get a menu. i know i need to put javascript in, but apparently do not understand this enough to actually do it. in short i would truly appreciate some help. thanks in advance My jump menu/form has the attribute of target="_blank" but it doesn't seem to work. I'm a first time newb so i don't understand why. I have created a link and use the att _blank and it works fine. Any help would be super cool. Thanks. http://216.172.187.90/~httpmtfd/appr...es_archive.php http://216.172.187.90/~httpmtfd/agenda_archives.php Hello. =) On one of my webpages, I want to link to a specific page in a PDF file. I can't get it to work in Firefox for some reason, and I haven't found the answer online. I used this in Internet Explorer, and it worked just fine: http://www.mysite.com/doc2.pdf#page=6 Is there a way to do the same thing in Firefox? I hope someone can help; thanks in advance! Hello All, I am new to this forum and this seems like a great place for information. I am having a problem with this page that I am working on for a client. The page consists of an iframe below a embedded viddler movie. The problem is that when the page loads, it jumps to the beginning of the iframe. On some browsers it jumps back to the top after it is finished loading, but in the dreaded IE it stays at the page jump. I don't have any code in the page that can be mistaken for a standard page jump. (at least I don't think that I do) Any help would be greatly appreciated. Thanks, -jsproul Here is the code for the page: Code: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>it made a difference</title>
<style type="text/css">
body {
padding: 0px;
margin: 0px;
background-image: url('images/main_bkg.jpg');
background-repeat: repeat-x;
background-color: #ffea99;
}
.content {
background-image: url('images/bkg.jpg');
background-repeat: no-repeat;
background-color: #fbc617;
/**padding-top: 20px;
border-top: 0px;
border-bottom: 0px;
border-left: 3px;
border-right: 3px;
border-style: solid;
border-color: #ffffff;**/
}
#myFrame {
background-color: #ffffff;
padding-left: 10px;
}
.comments {
width: 495px;
height: 19px;
background-color: #ff9900;
font-family: helvetica;
font-weight: bold;
font-size: 14px;
color: #ffffff;
margin: 0px;
padding-right: 0px;
padding-top: 5px;
padding-left: 5px;
text-align: left;
}
</style>
</head>
<body>
<center>
<table width="860px" cellpadding="0" border="0" cellspacing="0">
<tr><td style="background-color: #ff9900; padding: 10px;" align="right"><img src="images/itmade.png" /></td></tr>
<tr>
<td width="860" align="center">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="860" height="486" id="viddler_d50deae6"><param name="movie" value="http://www.viddler.com/simple/d50deae6/" /><param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="true" /><embed src="http://www.viddler.com/simple/d50deae6/" width="860" height="486" type="application/x-shockwave-flash" allowScriptAccess="always" allowFullScreen="true" name="viddler_d50deae6" ></embed></object></td>
</tr> </table>
<table class="content" width="860px" cellpadding="0" border="0" cellspacing="0">
<tr><td width="40px"> </td>
<td align="center" width="250" valign="top" style="padding-top: 30px;"><img src="images/location.png" /><br /><br /><br /><a href="http://www.begousa.com" target="_blank"><img src="images/bego_logo.png" border="0" /></a><br /><br /><img src="images/preat_logo.gif" /><br /><br /><br /><!-- AddThis Button BEGIN -->
<script type="text/javascript">var addthis_pub = "aardvarkri";</script>
<a href="http://www.addthis.com/bookmark.php" onmouseover="return addthis_open(this, '', '[url]', '[TITLE]')" onmouseout="addthis_close()"
onclick="return addthis_sendto()"><img
src="http://s7.addthis.com/static/btn/lg-share-en.gif" width="125"
height="16" border="0" alt="" /></a><script type="text/javascript"
src="http://s7.addthis.com/js/152/addthis_widget.js"></script>
<!-- AddThis Button END --></td>
<td valign="top" align="left" style="padding-top: 20px;">
<div class="comments">Comments:</div>
<iframe src="http://itmadeadifference.wordpress.com/2008/12/15/3/#respond" style="background-color: #ffffff; padding-left: 10px;"
scrolling="yes" width="490px" height="600px" frameborder="0" marginwidth="0" marginheight="0"></iframe>
</td><td width="40px"> </td>
</tr>
</table>
</center>
</body>
</html>`
Hey all. Can anyone help? I want to make a feature of my site that if you follow a broken link or navigate to a page that doesnt exist, you will get one of 3 different 404 pages. My hosting allows for one catch - all error page, but I was wondering if theres a function in html that redirects immediately to aother page. Thanks in advance here's the initial page: http://www.shscorp.ca/content.aspx?f...incentives.htm If you click on "GLOBE Board of Directors" on the left hand menu, it won't jump to the section #board on the index.htm page. Why is that? I already placed the <a name="board"></a> tag on the other page. Any help is great. |
|||||||