SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru
    Join Date
    Apr 2007
    Posts
    690
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How can I clean this up?

    How do I clean this up?

    Here is my css

    PHP Code:
    #main-content { clear: both; width: 415px; font-weight: bold; margin: 0; padding: 0; position: absolute; top: 230px; left: 380px; overflow: hidden; color: #D13300; font-size: 22px; }
    #main-subcontent { clear: both; width: 415px; font-weight: bold; margin: 0; padding: 0; position: absolute; top: 250px; left: 460px; overflow: hidden; color: #4693CD; font-size: 20px; }
    #main-subinfo { clear: both; width: 415px; margin: 0; padding: 0; position: absolute; top: 310px; left: 390px; overflow: hidden; color: #333333; font-size: 12px; }
    #main-learnmore { clear: both; width: 415px; margin: 0; padding: 0; position: absolute; top: 420px; left: 390px; overflow: hidden; color: #333333; font-size: 12px; }
    #main-contactus { clear: both; width: 415px; margin: 0; padding: 0; position: absolute; top: 420px; left: 490px; overflow: hidden; color: #333333; font-size: 12px; } 
    here is my html:

    PHP Code:
    <div id="main-content">text 1</div>
    <
    div id="main-subcontent">text 2</div>
    <
    div id="main-subinfo">
    <
    img src="images/bullet.gif">&nbsp;1<br>
    <
    img src="images/bullet.gif">&nbsp;2<br>
    <
    img src="images/bullet.gif">&nbsp;3<br>
    <
    img src="images/bullet.gif">&nbsp;4<br>
    <
    img src="images/bullet.gif">&nbsp;5<br>
    </
    div>
    <
    div id="main-learnmore"><a href="#"><img src="images/img.gif" border="0"></a></div>
    <
    div id="main-contactus"><a href="#"><img src="images/img2.gif" border="0"></a></div

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    It's not clear to me how you want this ?, the same without position absolutes
    Code:
    <!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" lang="en">
    <head>
    <title>12345 12345 12345 12345 12345</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<!-- saved from url=(0022)http://www.domain.com/ -->
    	<style type="text/css">
    	*{padding:0;margin:0;}
    	
    	body{font-weight: bold;font-size:12px;color: #333333;}
    	
    	.wrap{width:415px;margin:230px auto 0 auto;overflow: hidden;}
    	
    	#main-content{color:#D13300;font-size:22px;}
    
    	#main-subcontent{color:#4693CD;font-size:20px;}
    
    	#main-subinfo{}
    
    	#main-learnmore{}
    
    	#main-contactus{}
    
    	img{border:none;}
    	</style>
    	<script type="text/javascript">
    
    	</script>
    </head>
    <body>
    
    
    <div class="wrap">
    
    <div id="main-content">text 1</div>
    
    <div id="main-subcontent">text 2</div>
    
    <div id="main-subinfo">
    
    <img src="images/bullet.gif" alt="" />&nbsp;1<br />
    
    <img src="images/bullet.gif" alt="" />&nbsp;2<br />
    
    <img src="images/bullet.gif" alt="" />&nbsp;3<br />
    
    <img src="images/bullet.gif" alt="" />&nbsp;4<br />
    
    <img src="images/bullet.gif" alt="" />&nbsp;5<br />
    
    </div>
    
    <div id="main-learnmore"><a href="##"><img src="images/img.gif" alt="" /></a></div>
    
    <div id="main-contactus"><a href="##"><img src="images/img2.gif" alt="" /></a></div>
    
    </div>
    
    
    </body>
    </html>

  3. #3
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    That can be cleaned up a lot - Though I would need to see your images to be sure.
    What are you trying to display?
    It looks to me like 2 headings and a list so lets start with that

    Code:
    <h1>text 1</h1>
    <h2>text 2</h2>
    <ul class="info">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
    Much cleaner.

    Apply the bullets as background images.
    Position the headings with margin and padding.
    You don't need much of anything in your current CSS.
    It looks like you've used something like Dreamweaver to create that code for you..

    Hope it helps


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
  •