Professional Web Applications Themes

Rounded Corners on Div Block - Macromedia Dynamic HTML

Hi Everyone, I am trying to add rounded corners to my div blocks but the alignment seems to be off with every browser that I view it with. Also I am battling to center the links at the top of the page with the shaped nav bar. VIew the page at [url]http://www.hirschgift.com/layout.html[/url] Does anybody have any ideas? [url]http://www.hirschgift.com/layout.html[/url] Below is the CSS: html, body, img, label, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset { margin: 0; padding: 0; border: 0; } body { font-family: Arial, Helvetica, sans-serif; font-size: 100.01%; color: #000000; background-color: #F5F5F5; text-align: center; ...

  1. #1

    Default Rounded Corners on Div Block

    Hi Everyone,

    I am trying to add rounded corners to my div blocks
    but the alignment seems to be off with every browser that I view it with.

    Also I am battling to center the links at the top of the page with the shaped
    nav bar.
    VIew the page at
    [url]http://www.hirschgift.com/layout.html[/url]

    Does anybody have any ideas?


    [url]http://www.hirschgift.com/layout.html[/url]

    Below is the CSS:

    html, body, img, label, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    }

    body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 100.01%;
    color: #000000;
    background-color: #F5F5F5;
    text-align: center;
    }

    #wrapper {
    background-color: #FFFFFF;
    width: 770px;
    margin: 10px auto;
    background-color: #F5F5F5;
    text-align: left;
    }

    #banner {
    height: 75px;
    background-image: url(../images/banner.gif);
    background-repeat: no-repeat;
    border: 1px ridge #4C4C4C;
    }

    #nav {
    background-image: url(../images/nav.gif);
    background-repeat: no-repeat;
    height: 22px;
    }

    #nav ul{
    padding: 0;
    margin: 0;
    }

    #nav ul li{
    display:inline;
    padding: 0;
    margin: 2px;
    }

    #nav ul li a{
    font-size: 80%;
    color: #000;
    background-color: transparent;
    padding: 0 18px 0 18px;
    text-decoration: none;
    text-align: center;
    width: 7em;
    }

    #nav ul li a:hover, #nav ul li a:focus{
    background-color: transparent;
    color:#339900;
    }

    #leftcol{
    margin-top: 20px;
    margin-left: 5px;
    float: left;
    width: 170px;
    border-top: 1px ridge #4C4C4C;
    }

    #leftcol ul{
    padding: 0;
    margin: 0;
    background-color: transparent;
    list-style-type: none;
    font-size: 90%;
    border: 1px ridge #4C4C4C;
    }

    #leftcol ul li{
    padding: 0;
    margin: 0;
    }

    #leftcol ul li a{
    font-size: 90%;
    color: #000;
    background-color: #FFF;
    text-decoration: none;
    padding: 4px 0 6px 4px;
    height: 1%;
    display: block;
    }

    #leftcol ul li a:hover, #leftcol ul li a:focus{
    background-color: #FFF;
    color:#339900;
    }

    #leftcol p{
    font-size: 95%;
    padding: 4px;
    background-color:#8FD720;
    border-left: 1px ridge #4C4C4C;
    border-right: 1px ridge #4C4C4C;
    color: #FFFFFF;
    }

    #content {
    margin-top: 20px;
    margin-left: 200px;
    }

    #content p {
    font-size: 80%;
    margin: 20px;
    }

    #content h1 {
    font-size: 130%;
    color: #003366;
    padding: 0;
    margin-left: 20px;
    }

    #content h2 {
    font-size: 110%;
    padding: 0;
    margin-left: 20px;
    }

    .leftimage {
    float: left;
    margin: 0 10px;
    border:1px ridge #4C4C4C;
    }

    .rightimage {
    float: right;
    margin: 0 10px;
    border: 1px ridge #4C4C4C;
    }

    .container {
    width: 99%;
    float: right;
    background-color: #FFF;
    border: 1px ridge #4C4C4C;
    }

    #tl {
    position:relative;
    top: -3px;
    left: -25px;
    margin: 0px;
    padding: 0px;
    z-index: 100;
    }
    #tr {
    position:relative;
    top: -3px;
    left: 556px;
    margin: 0px;
    padding: 0px;
    z-index: 100;
    }
    #bl {
    position:relative;
    top: 425px;
    left: -25px;
    margin: 0px;
    padding: 0px;
    z-index: 100;
    }
    #br {
    position:relative;
    top: 100px;
    right: -1px;
    margin: 0px;
    padding: 0px;
    z-index: 100;
    }

    .clearit {
    clear: both;
    }

    #footer {
    background-color: #FFF;
    border: 1px ridge #4C4C4C;
    text-align:center;
    color: #000;
    clear: both;
    }

    #footer p {
    font-size: 70%;
    padding: 10px;
    margin: 15px;
    border-top: 1px solid #8FD720;
    border-bottom: 1px solid #8FD720;
    }

    html, body, img, label, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    }

    body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 100.01%;
    color: #000000;
    background-color: #F5F5F5;
    text-align: center;
    }

    #wrapper {
    background-color: #FFFFFF;
    width: 770px;
    margin: 10px auto;
    background-color: #F5F5F5;
    text-align: left;
    }

    #banner {
    height: 75px;
    background-image: url(../images/banner.gif);
    background-repeat: no-repeat;
    border: 1px ridge #4C4C4C;
    }

    #nav {
    background-image: url(../images/nav.gif);
    background-repeat: no-repeat;
    height: 22px;
    }

    #nav ul{
    padding: 0;
    margin: 0;
    }

    #nav ul li{
    display:inline;
    padding: 0;
    margin: 2px;
    }

    #nav ul li a{
    font-size: 80%;
    color: #000;
    background-color: transparent;
    padding: 0 18px 0 18px;
    text-decoration: none;
    text-align: center;
    width: 7em;
    }

    #nav ul li a:hover, #nav ul li a:focus{
    background-color: transparent;
    color:#339900;
    }

    #leftcol{
    margin-top: 20px;
    margin-left: 5px;
    float: left;
    width: 170px;
    border-top: 1px ridge #4C4C4C;
    }

    #leftcol ul{
    padding: 0;
    margin: 0;
    background-color: transparent;
    list-style-type: none;
    font-size: 90%;
    border: 1px ridge #4C4C4C;
    }

    #leftcol ul li{
    padding: 0;
    margin: 0;
    }

    #leftcol ul li a{
    font-size: 90%;
    color: #000;
    background-color: #FFF;
    text-decoration: none;
    padding: 4px 0 6px 4px;
    height: 1%;
    display: block;
    }

    #leftcol ul li a:hover, #leftcol ul li a:focus{
    background-color: #FFF;
    color:#339900;
    }

    #leftcol p{
    font-size: 95%;
    padding: 4px;
    background-color:#8FD720;
    border-left: 1px ridge #4C4C4C;
    border-right: 1px ridge #4C4C4C;
    color: #FFFFFF;
    }

    #content {
    margin-top: 20px;
    margin-left: 200px;
    }

    #content p {
    font-size: 80%;
    margin: 20px;
    }

    #content h1 {
    font-size: 130%;
    color: #003366;
    padding: 0;
    margin-left: 20px;
    }

    #content h2 {
    font-size: 110%;
    padding: 0;
    margin-left: 20px;
    }

    .leftimage {
    float: left;
    margin: 0 10px;
    border:1px ridge #4C4C4C;
    }

    .rightimage {
    float: right;
    margin: 0 10px;
    border: 1px ridge #4C4C4C;
    }

    .container {
    width: 99%;
    float: right;
    background-color: #FFF;
    border: 1px ridge #4C4C4C;
    }

    #tl {
    position:relative;
    top: -3px;
    left: -25px;
    margin: 0px;
    padding: 0px;
    z-index: 100;
    }
    #tr {
    position:relative;
    top: -3px;
    left: 556px;
    margin: 0px;
    padding: 0px;
    z-index: 100;
    }
    #bl {
    position:relative;
    top: 425px;
    left: -25px;
    margin: 0px;
    padding: 0px;
    z-index: 100;
    }
    #br {
    position:relative;
    top: 100px;
    right: -1px;
    margin: 0px;
    padding: 0px;
    z-index: 100;
    }

    .clearit {
    clear: both;
    }

    #footer {
    background-color: #FFF;
    border: 1px ridge #4C4C4C;
    text-align:center;
    color: #000;
    clear: both;
    }

    #footer p {
    font-size: 70%;
    padding: 10px;
    margin: 15px;
    border-top: 1px solid #8FD720;
    border-bottom: 1px solid #8FD720;
    }

    sabafana Guest

  2. #2

    Default Re: Rounded Corners on Div Block

    That's a really ugly way to do it.

    Keep in mind that the following is not a complete example, it is just to give
    you the idea.

    If you have trouble with IE rendering the bottom-aligned background images
    strangely, you need to put a border around the outermost element. I have no
    idea why this works (or doesn't work, to be more precise).

    <html>
    <style>
    .container
    {
    }
    .container div
    {
    background-image: url('border.jpg');
    background-repeat: repeat-x;
    background-position: left top;
    }
    .container div div
    {
    background-position: left bottom;
    }
    .container div div div
    {
    background-repeat: repeat-y;
    background-position: left top;
    }
    .container div div div div
    {
    background-position: right top;
    }
    .container div div div div div
    {
    background-image: url('topleft.jpg');
    background-repeat: no-repeat;
    background-position: left top;
    }
    .container div div div div div div
    {
    background-image: url('topright.jpg');
    background-position: right top;
    }
    <style>
    <div class="container">
    <div><div><div><div>
    <div><div><div><div>
    Content here
    </div></div></div></div>
    </div></div></div></div>
    </div>
    </html>

    VVebbie Guest

  3. #3

    Default Re: Rounded Corners on Div Block

    I don't know what you mean. You can see the corner pics but there positioning are different from IE to Firefox to Opera.

    sabafana Guest

  4. #4

    Default Re: Rounded Corners on Div Block

    The technique described above uses background images to create the borders of
    your container, and uses simple CSS properties to position them. It's really
    alot more elegant than using tables, which in turn is more elegant than what
    you're trying to do. :P

    VVebbie Guest

  5. #5

    Default Re: Rounded Corners on Div Block

    Have a look at this guys solution, called "Nifty Corners"

    [url]http://pro.html.it/articoli/id_599/idcat_31/pag_1/pag.html[/url]

    He uses a combo of CSS and javascript to create rounded corners without using
    graphics...

    elliot@carto Guest

Similar Threads

  1. Rounded corners
    By joombler in forum Macromedia Exchange Dreamweaver Extensions
    Replies: 1
    Last Post: February 12th, 04:01 PM
  2. Rounded Corners On Tables
    By Frog Squad in forum Adobe Dreamweaver & Contribute
    Replies: 1
    Last Post: December 4th, 06:12 PM
  3. CSS Rounded Table Corners
    By Wynnefield in forum Macromedia Dynamic HTML
    Replies: 3
    Last Post: August 20th, 08:38 AM
  4. Rounded corners!
    By Discover@adobeforums.com in forum Adobe Indesign Windows
    Replies: 1
    Last Post: May 19th, 02:24 PM
  5. Rounded corners on layers?
    By GeoMan in forum Macromedia Dreamweaver
    Replies: 1
    Last Post: July 18th, 08:20 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139