Please login or register.

Login with username, password and session length
Advanced search  

Author Topic: Artificial Intelligence template  (Read 5062 times)

agaleak

  • Newbie
  • *
  • Karma: 0
  • Posts: 4
Artificial Intelligence template
« on: January 10, 2008, 01:19:23 PM »

Hi,

I have downloaded the free Artificial Intelligence css template and need to change the layout of my second page so that there is only one box on the right hand side for content.

I initially removed one of the boxes to resize, but when i preview it in Firefox, it is pushed way below the banner.  IE6 shows the box just below the banner (this is where I want it - resized obviously).

Can anybody help?  Please let me know if you need me to paste the CSS and HTML into this post.
Logged

Patric Ahlqvist

  • Nobodys perfect, but Im pretty effing close
  • ULTIMATE member
  • ******
  • Karma: 65
  • Posts: 4867
  • I'm a self-made man and worships my creator.
    • p-ahlqvist.com
Re: Artificial Intelligence template
« Reply #1 on: January 10, 2008, 01:46:31 PM »

Hi and welcome to snewscms.com agaleak (sounds dangerous with AGA that is leaking ;) big risk of explosion, ain't it ?)

Please do as you suggest, post code, and preferably a link to your site (if online), this will help anyone feeling they wanna aid you in this matter.
Logged
"It's only dead fish that goes with the flow... "
Updated

agaleak

  • Newbie
  • *
  • Karma: 0
  • Posts: 4
Re: Artificial Intelligence template
« Reply #2 on: January 10, 2008, 02:15:38 PM »

Many thanks for the welcome Patric Ahlqvist.  Never saw my name as aga leak before. Most ammusing. It's A Galea-Kay in reality.

Anyway, here is the HTML and CSS: I have coloured the sections; #right and .rightcol which are failing. 


Quote
HTML
<!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>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
   <meta http-equiv="Content-Language" content="English" />
   <meta name="Author" content="Luka Cvrk (luka@solucija.com)" />
   <meta name="Robots" content="index,follow" />
   <meta name="Description" content="Artificial Intelligence" />
   <meta name="Keywords" content="artificial, intelligence" />
   <link rel="stylesheet" type="text/css" href="css/style2.css" />
   <title></title>

</head>
<body>
   <div id="main">
      <div id="logo">
         <h1>Towcester <span class="blue">Medical Centre</span></h1>
      </div>
      <ul id="menu">
         <li><span class="key">H</span>ome</li><li class="active"><a href="#" accesskey="p">The <span class="key">P</span>ractice</a></li>
         <li><a href="page2.html" accesskey="o">How t<span class="key">o</span></a></li><li><a href="page3.html" accesskey="s"><span class="key">S</span>ervices</a></li><li><a href="page3.html" accesskey="y">Health<span class="key">y</span> Living</a></li><li><a href="page3.html" accesskey="l"><span class="key">L</span>inks</a></li>
      </ul>
      
      <div id="intro_left">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy</p>
      </div>
      
      <div id="intro_right">
         <h1>The Practice</h1>
         <!--<p class="white">holding page</p>-->
      </div>
      <ul id="menu_left">
         <li><a href="#">The team</a></li>
         <li><a href="#">The buildings</a></li>
         <li><a href="#">Opening times</a></li>
         <li><a href="#">Practice area</a></li>
         <li><a href="#">PCT</a></li>
         <li><a href="#">Statistics</a></li>
         <li><a href="#">Patient charter</a></li>
      </ul>
      
      <div id="left">
         <div class="box">
            <h2>Need help or advice?</h2>
            <p><b><a href="#">Stop smoking</a> &middot; Lorem Ipsum</b><br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna.</p>
            <p><b><a href="#">Travel clinic</a> &middot; Lorem Ipsum</b><br />
              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna.</p>
         </div>
         <div class="note">
            <p>Click here<br /> to find out<br /> how you can <a href="#" title="New patients">register with the practice</a></p>
         </div>
      </div>
      
      <div id="right">
         <div class="rightcol">
            <p><img src="images/image.gif" alt="Image" class="image" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore.
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam </p>
         </div>


         <div class="special">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>   
         </div>
      </div>
   
      <div id="footer">
         <p>&copy; Copyright <a href="#">Artificial Intelligence</a> 2006 &middot; Design: <a href="http://www.solucija.com/" title="Information Architecture and Web Design">Luka Cvrk</a> &middot; <a href="http://validator.w3.org/check?uri=referer" title="Validate">XHTML</a> and <a href="http://jigsaw.w3.org/css-validator/check/referer" title="Validate">CSS</a> valid</p>
      </div>
   </div>
</body>
</html>


CSS

body {
   margin: 0;
   padding: 0;
   background: #fff url(../images/bg.gif) repeat-x;
   font: normal .7em Tahoma, Verdana, Arial, Helvetica, Sans-Serif;
   line-height: 1.6em;
   color: #333;
}

/* LINKS AND HEADINGS STYLING */

a { color: #546F92; background: inherit; }
a:hover { color: #808080; background: inherit; }
h1  { font: bold 2em "Trebuchet MS", Helvetica, Sans-Serif; margin: 0; color: #fff; background-color:transparent; }
h2  { font: bold 1.4em "Trebuchet MS", Helvetica, Sans-Serif; }
h3 { clear: both; font-size: 1.1em; color: #000; background: #fff url(../images/h3bg.gif) no-repeat center left; padding: 0 14px; margin: 0;}
.blue { color: #546F92; background: inherit; }
.image { float: left; border: 2px solid #e2e2e2; padding: 3px; margin: 0 15px 10px 0; }

/* CONTENT WRAPPER */

#main {
   width: 900px;
   margin: 25px auto 0 auto;
}

/* TOP LEFT LOGO */

#logo {
   float: left;
   padding: 10px 0 10px 10px;
}
   #logo h1 { color: #000; background: #fff; }

/* TOP RIGHT HORIZONTAL MENU */
   
#menu {
   float: right;
   background: #fff url(../images/barul.gif) no-repeat bottom right;
   color: #808080;
   padding: 18px 1px 11px 0;
   margin: 0;
}
   #menu li {
      padding: 14px 18px 14px 18px;
      color: #444;
      background: #fff url(../images/bar.gif) no-repeat bottom left;
      display: inline;
   }
   #menu li.active {
      background: #fff url(../images/baractive.gif) no-repeat bottom left;
      color: #8D9CAF;
      font-weight: bold;
      padding: 14px 18px 14px 18px;
      margin: 0 1px 0 0;
   }
   #menu li a {
      background: #f8f8f8;
      color: #808080;
      text-decoration: none;
   }    
   #menu li a:hover {
      color: #000;
      background: #f8f8f8;
   }    
   .key { text-decoration: underline; } /* ACCESKEY UNDERLINED LETTER */

/* LEFT INTRO SIDE */   

#intro_left {
   clear: left;
   float: left;
   width: 250px;
   background: #8D9CAF url(../images/leftintrobg.gif) repeat-x;
   color: #E5EAF2;
   margin: 0 0 1px 0;
}
   #intro_left a { color: #fff; background: inherit; }
   #intro_left p { padding: 14px 15px; margin: 0; }

   /* LEFT VERTICAL MENU */
   
   #menu_left {
      clear: left;
      float: left; 
      margin: 0 0 6px 0;
      padding: 0 0 1px 0;
      border-bottom: 2px solid #e2e2e2;
   }
      #menu_left li { list-style: none; }
      #menu_left li a {
         display: block;
         color: #3F5B7F;
         background: #C2CEDE url(../images/arrow.gif) no-repeat center left;
         width: 204px;
         padding: 7px 23px 7px 23px;
         margin: 0 0 1px 0;
         font-weight: bold;
         text-decoration: none;
      }   
      #menu_left li a:hover { background: #9EB1C9 url(../images/arrow.gif) no-repeat center left; color: #fff;  }

/* RIGHT INTRO SIDE */
   
#intro_right {
   float: right;
   width: 340px;
   padding: 25px 280px 0 20px;
   background: #BCCEDA url(../images/intro.jpg) no-repeat;
   color: #547592;
   margin: 0 0 6px 0;
   height: 174px;
   border: 2px solid #e2e2e2;
}
   #intro_right h1 { margin: 0 0 20px 0; }
   #intro_right .white { color: #FFF; background-color:transparent; }
   
/* LEFT SIDE */
   
#left {
   clear: left;
   float: left;
   width: 250px;
}
   .box {
      padding: 4px 15px;
      border: 1px solid #ccc;
      margin: 0 0 10px 0;
   }
   .note {
      padding: 15px 15px 20px 100px;
      border: 1px solid #CFCB66;
      margin: 0 0 5px 0;
      background: #FFFFAD url(../images/package.gif) no-repeat;
      color: #585616;
   }

/* RIGHT SIDE */
#right {
   clear: right;
   float: right;
   width: 643px;
}

   .leftcol {  /*I have removed this column for my second page*/
      clear: both;
      float: right;
      padding: 12px 15px;
      width: 285px;
      border:#ccc 1px solid;
      text-align: justify;
      margin: 0 0 10px 0;
   }
   .rightcol {
      float: right;
      padding: 10px 15px;
      width: 612px;
      border:#ccc 1px solid;
      margin: 0 0 10px 0;
      }

   .special {
      clear: both;
      margin:0px 0 20px 0;   
      padding: 5px 20px;
      border: 1px solid #ccc;
      background: #eee;
      color: #444;
   }

/* FOOTER */

#footer { clear: both; padding: 5px; border-top: 1px solid #ccc; }
« Last Edit: January 10, 2008, 02:40:42 PM by Keyrocks »
Logged

agaleak

  • Newbie
  • *
  • Karma: 0
  • Posts: 4
Re: Artificial Intelligence template
« Reply #3 on: January 10, 2008, 08:24:59 PM »

The problem happens when I add more items to the left menu navigation.  In Firefox, it pushes the right column boxes down in line with the bottom of the left navigation.

Can anyone help?
Logged

ens

  • Sr. Member
  • ****
  • Karma: 12
  • Posts: 279
    • http://www.meatysite.info
Re: Artificial Intelligence template
« Reply #4 on: January 11, 2008, 01:25:51 AM »

Try adjusting your widths.. after a quick look, it's either that or the clearing and floating. It might also be the content you have within the divisions. It's hard to tell without you giving a URL to your site.... hint hint.
Logged