SitePoint Sponsor

User Tag List

Results 1 to 15 of 15

Threaded View

  1. #1
    SitePoint Addict
    Join Date
    Jun 2004
    Location
    northborough
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Image Floats and General layout help needed.

    Hi there,

    I am working on a site- just getting started. Still fairly new to CSS- just keep hacking away at it. Iam trying to take one element on the page at a time- i am now on images.

    It is a corporate site, so i have the homepage, left column with items like press releases, in the news, and events. I have press releases working okay, now i am trying to work on the In the News section, with images and text that are stacked. I seem to get varying results on IE, FireFox and Opera- and i am not sure what I am doing.

    I am trying to build it simply so that each section has it's own div, but i want the spacing beween each section to the be the same. iam not sure if i am explaing well, and I dont know the best way to show you my work so far. I have it here:

    the site

    Thanks!
    sha
    CSS Code
    Code:
    BODY {
    	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: #c0c0c0 left top; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
    }
    #page {
    	MARGIN: 0px auto;
    	WIDTH: 750px;
    	BACKGROUND-COLOR: #ffffff;
    	padding: 0px;
    }
    #footer {
    	FONT-SIZE: 9px;
    	WIDTH: 750px;
    	COLOR: #666666;
    	LINE-HEIGHT: 14px;
    	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
    	TEXT-ALIGN: center;
    	margin-right: auto;
    	margin-left: auto;
    	background-color: #FFFFFF;
    	padding-top: 10px;
    	padding-bottom: 10px;
    }
    #content {
    	PADDING-RIGHT: 0px;
    	PADDING-LEFT: 0px;
    	PADDING-BOTTOM: 20px;
    	MARGIN: 0px auto;
    	WIDTH: 750px;
    	PADDING-TOP: 0px;
    	background-color: #FFFFFF;
    	border: 8px solid #FFFFFF;
    }
    #maincontent {
    	FLOAT: right;
    	FONT: 12px/17px Georgia, "Times New Roman", Times, serif;
    	VERTICAL-ALIGN: baseline;
    	WIDTH: 530px;
    	COLOR: #666666;
    	TEXT-ALIGN: left;
    	padding-right: 20px;
    	padding-left: 5px;
    	background-color: #FFFFFF;
    }
    div#sidebar {
    	FLOAT: left;
    	FONT: 10px Verdana, Arial, Helvetica, sans-serif;
    	WIDTH: 180px;
    	COLOR: #666666;
    	TEXT-ALIGN: left;
    	padding-left: 5px;
    	padding-right: 5px;
    	background-color: #FFFFFF;
    }
    
    #sidebar H1 {
    	FONT-SIZE: 12px;
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-variant: normal;
    	font-weight: bold;
    	border-bottom-width: 1px;
    	border-bottom-style: dashed;
    	border-bottom-color: #C5B998;
    	line-height: 1.6em;
    	color: #0066CC;
    	letter-spacing: 0.1em;
    	padding-left: 2px;
    }
    
    #sidebar A:link {
    	COLOR: #0066CC;
    	text-decoration: none;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 10px;
    }
    
    #sidebar A:visited {
    	COLOR: #0066CC;
    	text-decoration: none;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 10px;
    }
    
    #sidebar A:active {
    	COLOR: #0066CC;
    	text-decoration: none;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 10px;
    }
    
    #sidebar A:hover {
    	COLOR: #CC0033;
    	text-decoration: underline;
    }
    
    .clear {
    	CLEAR: both;
    	padding-top: 1px;
    	padding-bottom: 1px;
    }
    #logo A {
    	FONT-SIZE: 1px; COLOR: #ffffff; FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-DECORATION: none
    }
    
    div#navcontainer
    {
    background-color: #CC9900;
    border-top: 1px solid #FFFFFF;
    }
    
    div#navcontainer ul
    {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-weight: bold;
    	color: white;
    	text-align: left;
    	margin: 0;
    	padding-bottom: 5px;
    	padding-top: 5px;
    	font-size: 11px;
    	font-variant: small-caps;
    }
    
    div#navcontainer ul li
    {
    display: inline;
    margin-left: -4px;
    }
    
    div#navcontainer ul li a
    {
    padding: 5px 10px 5px 10px;
    color: white;
    text-decoration: none;
    border-right: 1px solid #fff;
    }
    
    div#navcontainer ul li a:hover
    {
    background-color: #16008D;
    color: white;
    }
    
    #active a { border-left: 1px solid #fff; }
    
    #banner {
    	BACKGROUND-IMAGE: url(images/splash_set_f02.jpg); WIDTH: 750px; HEIGHT: 136px
    }
    
    A:link {
    	COLOR: #0066cc
    }
    A:visited {
    	COLOR: #0066cc
    }
    A:active {
    	COLOR: #0066cc
    }
    A:hover {
    	COLOR: #0066cc; TEXT-DECORATION: none
    }
    H1 {
    	FONT: 24px/24px Georgia, "Times New Roman", Times, serif; VERTICAL-ALIGN: baseline; COLOR: #a14117; TEXT-ALIGN: left
    }
    #sidebar UL {
    	PADDING-LEFT: 0px; MARGIN: 0px; LIST-STYLE-TYPE: none
    }
    #sidebar UL LI {
    	PADDING-RIGHT: 0px; PADDING-LEFT: 17px; FONT-SIZE: 11px; BACKGROUND: url(images/0029_doc.png) no-repeat 0px 2px; PADDING-BOTTOM: 8px; COLOR: #000033; PADDING-TOP: 0px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
    }
    #pressrelease {
    	padding: 0px 4px;
    	border: 1px solid #CCCCCC;
    	width: 170px;
    	height: auto;
    	margin-bottom: 20px;
    }
    #pressrelease UL {
    
    	PADDING-LEFT: 0px; MARGIN: 0px; LIST-STYLE-TYPE: none
    }
    #pressrelease UL LI {
    
    	PADDING-RIGHT: 0px; PADDING-LEFT: 17px; FONT-SIZE: 11px; BACKGROUND: url(images/0029_doc.png) no-repeat 0px 2px; PADDING-BOTTOM: 8px; COLOR: #000033; PADDING-TOP: 0px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
    }
    #pressrelease H1 {
    
    	FONT-SIZE: 12px;
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-variant: normal;
    	font-weight: bold;
    	border-bottom-width: 1px;
    	border-bottom-style: dashed;
    	border-bottom-color: #C5B998;
    	line-height: 1.6em;
    	color: #0066CC;
    	letter-spacing: 0.1em;
    	padding-left: 2px;
    }
    #news {
    	width: 170px;
    	padding: 0px 4px;
    	border: 1px solid #CCCCCC;
    	height: 190px;
    	margin-bottom: 20px;
    }
    #news H1 {
    
    
    	FONT-SIZE: 12px;
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-variant: normal;
    	font-weight: bold;
    	border-bottom-width: 1px;
    	border-bottom-style: dashed;
    	border-bottom-color: #C5B998;
    	line-height: 1.6em;
    	color: #CC0000;
    	letter-spacing: 0.1em;
    	padding-left: 2px;
    }
    
    .floatimgleft {
    	BACKGROUND: #ffffff;
    	FLOAT: left;
    	MARGIN: 3px 8px 4px 0px;
    	padding: 3px;
    	border: 1px solid #CCCC99;
    	clear: left;
    }
    
    .floatimgleft:hover   {
    	BACKGROUND: #ffffff;
    	FLOAT: left;
    	MARGIN: 3px 8px 4px 0px;
    	padding: 3px;
    	border: 1px solid #CC6600;
    	clear: both;
    }
    
    #events {
    	width: 170px;
    	padding: 0px 4px;
    	border: 1px solid #CCCCCC;
    	height: auto;
    }
    #events H1 {
    
    	FONT-SIZE: 12px;
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-variant: normal;
    	font-weight: bold;
    	border-bottom-width: 1px;
    	border-bottom-style: dashed;
    	border-bottom-color: #C5B998;
    	line-height: 1.6em;
    	color: #009933;
    	letter-spacing: 0.1em;
    	padding-left: 2px;
    }
    HTML Code

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    </head>
    <link href="screen.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="content">
    
    <div id="logo"><a class="imagelink" title="Home Page" 
    href="http://www.eschergroup.com/"><img 
    src="images/PLA-443_Logo.gif" 
    alt="Welcome to Escher Group." width="750" height="76" 
    border="0" /></a></div>
    <div id="navcontainer">
    <ul id="navlist">
    <li id="active"><a href="#" id="current">About Us</a></li>
    <li><a href="#">In the News</a></li>
    <li><a href="#">Our Customers</a></li>
    <li><a href="#">Products & Services</a></li>
    <li><a href="#">Support</a></li>
    <li><a href="#">Contact</a></li>
    </ul>
    </div>
    <div id="banner"></div>
    <div class="clear"></div>
    
    <div id="maincontent"></div>
    
    <div id="sidebar">
      <DIV id="pressrelease">
        <h1>Press Releases</h1>
        <ul>
          <li><a href="#">Escher Group welcomes Elmar Toime as Consultant</a></li>
          <li><a href="#">Escher Group Announces New IBM Center of Excellence will Feature WebRiposte™ Products</a></li>
          <li><a href="#">Escher Group selected by Postkantoren for Counter Automation Project</a></li>
          <li><a href="#">Escher Group and IBM Win Postal Counter Automation Project in Norway</a></li>
        </ul>
      </div>
    
      <div id="news">
        <h1>In the News</h1>
        <p><IMG src="images/homepage_postaltech0312.gif" alt="Postal Technology" class=floatimgleft /><a href="#">Escher Group featured in
         Postal Technology article (1349Kb)</a></p><br />
        <p><IMG src="images/InsightV4_2_homepage.gif" alt="Postal Technology" width="38" height="52" class=floatimgleft />
    	<a href="#">Read the latest issue of Insight</a> </p>
      </div>
    
    
      <div id="events">
        <h1>Events</h1>
        <p><a href="#"><IMG src="images/event_userconference.gif" alt="User Conference 2005" border="0" class=floatimgleft /></a><a href="#">User Conference 2005. Deatils to come. </a></p>
    
        <p><IMG src="images/event_pe2005.jpg" alt="Post Expo 2005" width="60" height="60" class=floatimgleft /><a href="#">Post Expo 2005 This year’s Post-Expo will be held October 3 – 5 at the Paris Nord exhibition center in Paris, France.</a></p>
    </div>
    
    
    <DIV id=thumbnails>
      <p>&nbsp; </p>
      <p>&nbsp;</p>
      <p>&nbsp;                </p>
    </DIV>
    
    
    </div>
    
    <div class="clear"></div>
    <div id="footer">
    <p>© 2005 Escher Group Limited. All rights reserved. <a href="#">Legal</a></p> 
    <p><a href="#">Home</a> | <a href="#">About Us</a> | <a href="#">In the News</a> | <a href="#">Our Customers</a> | <a href="#">Products & Services</a> | <a href="#">Support</a> | <a href="#">Contact</a> </p>
    </div>
    
    </div></DIV>
    </body></html>
    Last edited by shaparis; May 11, 2005 at 10:33.


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
  •