alanp
03-16-2005, 08:08 AM
Without the use of graphics?
http://www.rackadmins.com/example.jpg
Apparently I'm better in M$ Paint then I am in HTML ;)
http://www.rackadmins.com/example.jpg
Apparently I'm better in M$ Paint then I am in HTML ;)
 | View Full Version : Can this be done in HTML? Corey Bryant 03-16-2005, 08:19 AM Are you speaking about Fieldset around data (http://www.w3schools.com/html/tryit.asp?filename=tryhtml_legend)? X-TechMedia 03-16-2005, 08:21 AM You could try using a fieldset and then maybe using css to style it so the corners are square. <fieldset> <legend>This is the legend</legend> This is the text </fieldset> HTH alanp 03-16-2005, 08:30 AM Yes! Thanks guys, that's what I was looking for! the_pm 03-16-2005, 09:40 AM I'm not sure fieldset gives the desired effect on all browsers, however, or that it can be styled easily. Plus, semantically, fieldset is meant to define a set of fields that are interrelated. It's not meant to be a styling device. This could cause confusion for users with visual impairments. I'm experimenting with a method that should work, but IE of course has to screw things up. Here's what I have so far: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>IE Sucks</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> </head> <body> <p> </p> <div style="border:1px solid #000"> <h1 style="font-size:125% ; margin:-.5em 0 10px 10px"><span style="background:#FFF ; padding:0 5px">My Title</span></h1> <p style="margin:10px">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </body> </html> (I used [ quote ] because that Lorem ipsum can really throw a browser off :) ). The empty paragraph is meant to give the heading some space to jump its negative margin up. IE is a very stupid browser, and it interprets the negative margin to mean it's supposed to send the text completely off the page. Take out the empty paragraph so the heading is flush with the top of the browser window and you'll see what I mean. But I can't get around the arbitrary extra border IE creates. Stupid browser. Did I mention IE is stupid? the_pm 03-16-2005, 12:10 PM A big thanks to Corey Bryant for providing me with the simple, yet brilliant answer. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Title here</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> </head> <body> <div style="border:1px solid #000; margin-top: .5em;"> <h1 style="font-size:125% ; margin:-.5em 0 10px 10px"><span style="background:#FFF ; padding:0 5px">My Title</span></h1> <p style="margin:10px">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </body> </html> Apply the negative margin to the containing <div> as well. DUH! Even IE can't screw that up! So, there's your answer, alanp. That's how you'd create the effect you desire with no graphics and without using semantically questionable markup :) Corey Bryant 03-16-2005, 12:13 PM Anytime - glad that I could help! Acert93 03-16-2005, 12:59 PM pm and cory, thanks for all the great info :) I learn a ton of new stuff every day here. Just wanted to say thanks for helping so many people with stuff. :) the_pm 03-16-2005, 01:18 PM You're quite welcome :) Always glad to help! |