1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Problem with Round Corners – CSS Layout

Discussion in 'CSS' started by robert_neville, Jan 23, 2005.

  1. #1
    I am trying to create round corners in CSS based on the tutorial at “A List Apart” (http://www.alistapart.com/articles/customcorners2/). I made the graphics and coded the CSS & html. Distinction in the graphics and CSS do exist, hence the reason the copy & paste code did not work. The page does not render as expected in Firefox in particular the footer section. I have spent a week reviewing the CSS and have not discovered my misstep. I beg someone on this forum to review my CSS and lead me to a resolving the situation. I am having difficulty understand the padding, margins and relative positioning in CSS. The attachment contains the html, CSS, and some JavaScript code. Please clarify suggestions with examples, links, or other generally useful information.
    SEMrush
     

    Attached Files:

    robert_neville, Jan 23, 2005 IP
    SEMrush
  2. robert_neville

    robert_neville Peon

    Messages:
    19
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I have uploaded a live site at geocities since this a personal endeavor without a web home. You could view the site here; http://www.geocities.com/robert_neville310/aquav1.html.
    I placed border around the footer class and <p> tag to show the incorrect spacing associated with these styles. I was hoping the border would help align the element, but I have not found the logical pattern behind the spacing; changing the padding only makes hard to align the graphics. The padding of the h3 tag (top of the box) seems excessive as well. Let me know if you could lead me in the right direction and determine if a pattern exist. The padding logic will help when changing the graphic sizes. Please clarify suggestions with examples, links, or other generally useful information.
     
    robert_neville, Jan 24, 2005 IP
  3. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    64
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Don't use relative positioning to fix poor styling. It's a simple menu, just stack up all the boxes, remove relative positioning from all elements and use padding and margins to control how far apart all the borders are. It's better to use divs for menu items, not <li>'s.

    J.D.
     
    J.D., Jan 24, 2005 IP
  4. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    64
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Oh, yeah, the corners. Stick a float in each corner:

    <style type="text/css">
    div.corner {border: 1px solid red; width: 25px; line-height: 0; height: 25px;}
    </style>
    ...
    <div id="left">
    <div class="corner" style="float: left;"></div><div class="corner" style="float: right;"></div>
    	<div class="Article"><h3>Main Menu</h3>
    		<div class="ArticleBody">
    			<ul class="treemenu">
    			<li>Top Level Item
      				<ul><li><a href="">List Item 2</a></li></ul>
    			</li>
    			<li>Top Level Item 2
      				<ul><li><a href="">List Item 3</a></li></ul>
    			</li>
    			</ul>
    		</div>
    		<div class="ArticleFooter"><p>&nbsp;</p></div>
    	</div>
    <div class="corner" style="float: left;"></div><div class="corner" style="float: right;"></div>
    </div>
    Code (markup):
    J.D.
     
    J.D., Jan 24, 2005 IP