6 replies [Last post]
StrongEagle
StrongEagle's picture
Offline
newbie
Singapore
Last seen: 7 years 25 weeks ago
Singapore
Timezone: GMT-5
Joined: 2008-09-24
Posts: 7
Points: 8

Hello, I'm reasonably acquainted with HTML and CSS but unable to solve a problem that I am having in making a modification to a web template from os-templates.com.

You can view this issue here: http://www.herberts.org/test/

Basically, I am trying to add the "C" logo to a div called "header" which contains the business name, tag line, and menu. My intention is to put locate it to the left side of the "header" div by creating a div "LogoImg" and setting it up with a float:left. I also specify a width of 165px.

But what seems to be happening when I look at this page in Firebug, is that the div "LogoImg" becomes the whole width of the header and thus just becomes the first row of multiple rows of divs in the header. I cannot figure out what is causing this behavior.

Code is posted below. I have annotated my additions with comments. Otherwise, the template is stock. For the html, I have only copied in the code for rendering the header, and just enough additional code so you can see that the next section renders the slider. I have included all of the CSS file.

Thanks for your help... this should help with my own forensic abilities as well.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="EN" dir="ltr" xml:lang="EN" xmlns="http://www.w3.org/1999/xhtml">
  <head profile="http://gmpg.org/xfn/11">
    <meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1" />
    <title>PlusBusiness</title>
    <meta content="no" http-equiv="imagetoolbar" />
    <link type="text/css" href="styles/layout.css" rel="stylesheet" />
    <script src="scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="scripts/jquery.jcarousel.pack.js" type="text/javascript"></script>
    <script src="scripts/jquery.jcarousel.setup.js" type="text/javascript"></script>
  </head>
  <body id="top">
    <!-- ####################################################################################################### -->
    <div class="wrapper col1">
      <div id="header">
 
<!--  I added the div and image for the "C" logo as below  -->
 
      	<div id="LogoImg">
      	  <img src="images/greylogo.gif">
      	  </div>
     	<div id="logo">
          <h1><a href="#">Catalyst Business
              Advocates</a></h1>
          <h6>Solutions for Business</h6>
        </div> 
        <div id="topnav">
          <ul>
            <li class="active"><a href="index.html">Home</a></li>
            <li><a href="style-demo.html">Services</a></li>
            <li><a href="full-width.html">Full Width</a></li>
            <li><a href="#">DropDown</a>
              <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
              </ul>
            </li>
            <li class="last"><a href="#">A Long Link Text</a></li>
          </ul>
        </div>
        <br class="clear" />
      </div>
    </div>
    <!-- ####################################################################################################### -->
    <div class="wrapper col2">
      <div id="featured_slide">
        <div id="featured_content">
          <ul>
            <li><img alt="" src="images/demo/1.gif" />
              <div class="floater">
                <h2>About This Template !</h2>
                <p>This is a W3C standards compliant free website template from
                  <a href="http://www.os-templates.com/">OS Templates</a>. This
                  template is distributed using a <a href="http://www.os-templates.com/template-terms">Website

And the CSS code - my additions are under the section titled "Header", about line 96

/*
Template Name: PlusBusiness
File: Layout CSS
Author: OS Templates
Author URI: <a href="http://www.os-templates.com/
Licence:" rel="nofollow">http://www.os-templates.com/
Licence:</a> <a href="http://www.os-templates.com/template-terms">Website Template Licence</a>
*/
 
@import url(navi.css);
@import url(forms.css);
@import url(tables.css);
@import url(featured_slide.css);
 
 
body{
	margin:0;
	padding:0;
	font-size:13px;
	font-family:verdana, Arial, Helvetica, sans-serif;
	color:#333333;
	background-color:#FFFFFF;
	}
 
img{display:block; margin:0; padding:0; border:none;}
.justify{text-align:justify;}
.bold{font-weight:bold;}
.center{text-align:center;}
.right{text-align:right;}
.nostart {list-style-type:none; margin:0; padding:0;}
.clear{clear:both;}
br.clear{clear:both; margin-top:-15px;}
 
a{
	color:#B2C629;
	background-color:#FFFFFF;
	outline:none;
	text-decoration:none;
	}
 
.fl_left{float:left;}
.fl_right{float:right;}
 
.imgl, .imgr{border:1px solid #999999; padding:5px;}
.imgl{float:left; margin:0 8px 8px 0; clear:left;}
.imgr{float:right; margin:0 0 8px 8px; clear:right;}
 
/* ----------------------------------------------Wrapper-------------------------------------*/
 
div.wrapper{
	display:block;
	width:100%;
	margin:0;
	text-align:left;
	}
 
div.wrapper h1, div.wrapper h2, div.wrapper h3, div.wrapper h4, div.wrapper h5, div.wrapper h6{
	margin:0;
	padding:0;
	font-size:20px;
	font-weight:normal;
	line-height:normal;
	font-family:Georgia, "Times New Roman", Times, serif;
	}
 
.col1{color:#CCCCCC; background-color:#000000;}
.col2, .col2 a{color:#FFFFFF; background-color:#ABA30A;}
.col3{color:#777777; background-color:#FFFFFF;}
.col3 a{color:#95AD19; background-color:#FFFFFF;}
.col4{color:#FFFFFF; background-color:#000000;}
.col4 a{color:#95AD19; background-color:#000000;}
.col5, .col5 a{color:#333333; background-color:#95AD19;}
 
/* ----------------------------------------------Generalise-------------------------------------*/
 
#header{
	position:relative;
	margin:0 auto 0;
	display:block;
	width:1200px;  
}
 
#logo, #topbar, #homepage, #breadcrumb, #container, #footer, #copyright{
	position:relative;
	margin:0 auto 0;
	display:block;
	width:960px;  
	}
 
/* ----------------------------------------------Header-------------------------------------*/
 
#header{
	padding:20px 0;
	z-index:1000;
	}
 
/*  I added this div to the template */
 
#logoImg{
	display:block;
	float:left;
	width:165px;
} 
 
#header #logo h1, #header #logo p{
	margin:0;
	padding:0;
	line-height:normal;
	}
 
#header #logo h1{
	font-size:36px;
	text-align:center;
	text-transform:uppercase;
	}
 
#header h1 a{
	color:#ABA30A;
	background-color:#000000;
	}
 
#header #logo h6{
	text-align:center;
	}
 
/* ----------------------------------------------BreadCrumb-------------------------------------*/
 
#breadcrumb{
	padding:20px 0;
	}
 
#breadcrumb ul{
	margin:0;
	padding:0;
	list-style:none;
	}
 
#breadcrumb ul li{display:inline;}
#breadcrumb ul li.current a{text-decoration:underline;}
 
/* ----------------------------------------------Content-------------------------------------*/
 
#container{
	padding:20px 0;
	}
 
#container h1, #container h2, #container h3, #container h4, #container h5, #container h6{
	margin:0 0 15px 0;
	padding:0 0 8px 0;
	border-bottom:1px solid #E7E6E6;
	}
 
/* ----------------------------------------------Homepage Block-------------------------------------*/
 
.homepage{
	display:block;
	width:100%;
	margin:15px 0 0 0;
	padding:0;
	}
 
.homepage ul{
	margin:0;
	padding:0;
	list-style:none;
	}
 
.homepage li{
	display:block;
	float:left;
	width:300px;
	margin:0 30px 0 0;
	padding:0;
	}
 
.homepage li.last{margin-right:0;}
 
.homepage li h2{
	display:block;
	width:100%;
	height:65px;
	margin:0;
	padding:15px 0 8px 0;
	font-weight:normal;
	line-height:normal;
	border-bottom:1px dotted #999999;
	}
 
.homepage li h2 img{
	float:left;
	margin:-15px 8px 0 0;
	padding:5px;
	border:1px solid #999999;
	}
 
.homepage p{
	margin:0 0 25px 0;
	padding:0;
	line-height:1.6em;
	}
 
.homepage p.readmore{
	display:block;
	text-align:right;
	line-height:normal;
	font-weight:bold;
	}
 
.homepage p.readmore a{
	padding:8px 15px 10px;
	color:#FFFFFF;
	background-color:#95AD19;
	}
 
/* ----------------------------------------------Content Block-------------------------------------*/
 
#content{
	display:block;
	float:left;
	width:600px;
	}
 
/* ------Comments-----*/
 
#comments{margin-bottom:40px;}
 
#comments .commentlist {margin:0; padding:0;}
 
#comments .commentlist ul{margin:0; padding:0; list-style:none;}
 
#comments .commentlist li.comment_odd, #comments .commentlist li.comment_even{margin:0 0 10px 0; padding:15px; list-style:none;}
 
#comments .commentlist li.comment_odd{color:#666666; background-color:#F7F7F7;}
#comments .commentlist li.comment_odd a{color:#95AD19; background-color:#F7F7F7;}
 
#comments .commentlist li.comment_even{color:#666666; background-color:#E8E8E8;}
#comments .commentlist li.comment_even a{color:#95AD19; background-color:#E8E8E8;}
 
#comments .commentlist .author .name{font-weight:bold;}
#comments .commentlist .submitdate{font-size:smaller;}
 
#comments .commentlist p{margin:10px 5px 10px 0; padding:0; font-weight: normal;text-transform: none;}
 
#comments .commentlist li .avatar{float:right; border:1px solid #EEEEEE; margin:0 0 0 10px;}
 
/* ----------------------------------------------Column-------------------------------------*/
 
#column{
	display:block;
	float:right;
	width:300px;
	}
 
#column .holder{
	display:block;
	width:300px;
	margin-bottom:20px;
	}
 
#column .holder p{
	line-height:1.6em;
	}
 
#column .holder h2.title{
	display:block;
	width:100%;
	height:65px;
	margin:0;
	padding:15px 0 0 0;
	font-size:20px;
	line-height:normal;
	}
 
#column .holder h2.title img{
	float:left;
	margin:-15px 8px 0 0;
	padding:5px;
	border:1px solid #666666;
	}
 
#column .holder p.readmore{
	display:block;
	width:100%;
	font-weight:bold;
	text-align:right;
	line-height:normal;
	}
 
#column div.imgholder{
	display:block;
	width:290px;
	margin:0 0 10px 0;
	padding:4px;
	color:#666666;
	background-color:#F7F7F7;
	border:1px solid #CCCCCC;
	}
 
/* ----------------------------------------------Footer-------------------------------------*/
 
#footer{
	padding:20px 0;
	}
 
#footer ul{
	margin:0;
	padding:0;
	list-style:none;
	}
 
#footer h2{
	margin:0 0 15px 0;
	padding:0 0 8px 0;
	font-size:18px;
	color:#CCCCCC;
	background-color:#000000;
	border-bottom:1px dotted #CCCCCC;
	}
 
#footer .box{
	display:block;
	float:right;
	width:250px;
	margin:0 0 0 25px;
	padding:0;
	}
 
#footer .box1{
	display:block;
	float:left;
	width:400px;
	line-height:1.6em;
	}
 
#footer .box1 .imgl{border:1px solid #CCCCCC; padding:5px; color:#FFFFFF; background-color:#000000;}
 
#footer .contactdetails li{
	margin:0 0 8px 0;
	}
 
#footer .flickrbox, #footer .flickrbox .wrap{display:block; width:260px;}
#footer .flickrbox .wrap .fix{clear:both;}
#footer .flickrbox .wrap .flickr_badge_image{display:block; float:left; margin:0 10px 10px 0; width:80px; height:80px;}
#footer .flickrbox .wrap #flickr_badge_image3, #footer .flickrbox .wrap #flickr_badge_image6{margin-right:0;}
 
/* ----------------------------------------------Copyright-------------------------------------*/
 
#copyright{
	padding:10px 0;
	}
 
#copyright p{
	margin:0;
	padding:0;
	}

StrongEagle
StrongEagle's picture
Offline
newbie
Singapore
Last seen: 7 years 25 weeks ago
Singapore
Timezone: GMT-5
Joined: 2008-09-24
Posts: 7
Points: 8

I can't figure out how to

I can't figure out how to edit my post, so I reply instead. I ran the code through the w3 validator and it came up with a couple of errors. I post the corrections, below. Note that these corrections did not change the behavior I described.

Added required alt and /.

 <img alt="" src="images/greylogo.gif" />

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 5 years 6 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

Try this, change these

Try this, change these lines:

#logoImg{
	display:block;
	float:left;
	width:165px;
} 

with these lines:

div #logoImg{
	display:block;
	float:left;
	width:165px;
} 

Hope this helps

Check Maximum Webdesign for your online solutions

StrongEagle
StrongEagle's picture
Offline
newbie
Singapore
Last seen: 7 years 25 weeks ago
Singapore
Timezone: GMT-5
Joined: 2008-09-24
Posts: 7
Points: 8

Sorry - made no difference.

Sorry - made no difference.

StrongEagle
StrongEagle's picture
Offline
newbie
Singapore
Last seen: 7 years 25 weeks ago
Singapore
Timezone: GMT-5
Joined: 2008-09-24
Posts: 7
Points: 8

Folks - I apologize... I

Folks - I apologize... I cannot edit my original post, thus I must add here. I read through the posting guidelines and add the following information.

a) I have a hard coded direct link to the image I am using.
b) I deleted all HTML code beginning with

<div class="wrapper col2">

to the end of the document.

c) I deleted all CSS code from the Breadcrumb section onwards.

The result is at the same URL as before: http://www.herberts.org/test/

And the result is the same.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 28 weeks 3 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

#LogoImg img { float:

#LogoImg img {
  float: left;
  }

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

StrongEagle
StrongEagle's picture
Offline
newbie
Singapore
Last seen: 7 years 25 weeks ago
Singapore
Timezone: GMT-5
Joined: 2008-09-24
Posts: 7
Points: 8

Gary, Solution did not work.

Gary, that solution did not work. Sorry - preview in editor looked ok but not in Chrome or FF as the div LogoImg shows that it is 1200 x 162. So while the image is indeed floated left the container is too wide. You can see this at http://www.herberts.org/test/index.html

I also found that at line 23 of the css file, the template author had this line:

img{display:block; margin:0; padding:0; border:none;}

I added "float:left;" to this line and it worked but it has thoroughly messed up the slider. See http://www.herberts.org/test/index2.html

Edit: Slider is not messed up - my bad for commenting out the css file for it.

To be clear then, you solution is a nested nested selector whereby the attributes of "img" are altered only for "LogoImg"? Does that mean that all of the other attributes specified in the line above are inherited as well for "LogoImg"? And if the line above had "float:right;" and I used your solution, it would override the default value?

Thanks much for your help.