Pioneer Skin
Login  ::  Register
Saturday, May 19, 2012
 
- - - - - - - - Sponsorship Advertisement Area - - - - Thank you to our Sponsors - - - - - - - - -
New Horizons Computer Learning Centers

We are please to introduce the new and improved discussion forum. It should eliminate the issues we've been having with the discusson board in the past. The old forum will still be available in "read only" mode HERE in case anyone wants to review the old topics that were posted.

WGD Forum: Discussion
Subject: Need help with Title & subtitle on webpage
Prev Next
You are not authorized to post a reply.

Author Messages
phillip9User is Offline
Newbie
Newbie
Posts:23


08/04/2008 10:29 AM  

Hi everyone,

I'm having trouble with this website and I believe it is a floating element and the CSS.   I can not create a 2nd, smaller sub-title in the same


 


Link:
      http://www.phtconsulting.com/cshegg/
 
In the CSS it is this line, i believe:
      .left {float:left; }
 
In the HTML it is this line:
     

C S HEGG, LLC 

 
What I want is this:
      C S HEGG, LLC
      Building Your Success

==================================================

CSS

==================================================

 
/* standard elements */
html {min-height: 100%;}

* {
 margin: 0;
 padding: 0;
}

a {color: #963;}
a:hover {color: #C60;}

body {
 background: #CCD8E0 url(img/bg.jpg) repeat-x left bottom;
 color: #444;
 font: normal 62.5% Tahoma,sans-serif;
}

p,code,ul {padding-bottom: 1.2em;}

li {list-style: none;}

h1 {
 font: normal 1.8em Tahoma,sans-serif;
 margin-bottom: 4px;
}

code {
 background: #FFF;
 border: 1px solid #EEE;
 border-left: 6px solid #C1CAD3;
 color: #666;
 display: block;
 font: normal 1em Tahoma,sans-serif;
 line-height: 1.6em;
 margin-bottom: 12px;
 padding: 8px 10px;
 white-space: pre;
}

blockquote {
 background: url(img/quote.gif) no-repeat;
 display: block;
 font-weight: bold;
 padding-left: 28px;
}

h1,h2,h3 {padding-top: 6px;}

/* misc */
.clearer {clear: both;}

.left
{
float:left;

}

.right {float: right;}

/* structure */
.container {
 background: #FFF;
 font-size: 1.2em;
 margin: 0 auto;
 padding: 0 10px 10px;
 width: 780px;
}

/* header */
.top {
 background: url(img/clouds.gif) repeat-x;
 padding: 50px 10px 0;
}

/* title */
.header {
 background: #FFF;
 font-size: 1.2em;
 height: 150px;
 margin: 0 auto;
 padding: 10px 10px 5px;
 width: 780px;
}
.header .left, .header .right {
 background: #A4A4A0;
 color: #FFF;
 height: 150px; 
}
.header .left {
 background: #B3C2C7 url(img/header.jpg) no-repeat;
 font: normal 2.8em "Trebuchet MS",sans-serif;
 line-height: 150px;
 text-align: center; 
 width: 564px;
}
.header .right {
 overflow: auto;
 width: 212px;
}
.header .right p,.header .right h2 {padding: 0 16px;}
.header .right h2 {padding-top: 16px; font: normal 1.6em "Trebuchet MS",sans-serif;}

/* navigation */
.navigation { 
 background: #D9E1E5 url(img/nav.gif);
 border: 1px solid #DFEEF7;
 border-color: #DFEEF7 #CFDEE7;
 height: 41px;
}
.navigation a {
 background: #D9E1E5 url(img/nav.gif);
 border-right: 1px solid #AFBEC7;
 color: #456;
 display: block;
 float: left;
 font: bold 1.1em sans-serif;
 line-height: 41px;
 padding: 0 20px;
 text-decoration: none;
}
.navigation a:hover {background-position: left bottom; color: #234;}

/* main */
.main {
 border-top: 4px solid #FFF;
 background: url(img/bgmain.gif) repeat-y;
}

/* sub navigation */
.sidenav {
 float: right;
 width: 210px;
}
.sidenav h2 {
 color: #5A5A43;
 font-size: 1em;
 line-height: 30px;
 margin: 0;
 padding-left: 12px;
}
.sidenav ul {
 padding: 0;
 border-top: 1px solid #EAEADA;
}
.sidenav li {border-bottom: 1px solid #EAEADA;}
.sidenav li a {
 font-size: 1.1em;
 color: #554;
 display: block;
 padding: 8px 0 8px 5%;
 text-decoration: none;
 width: 95%;
}
.sidenav li a:hover {
 background: #F0F0EB;
 color: #654; 
}

/* content */
.content {
 float: left;
 margin: 10px 0;
 padding: 0 16px;
 width: 531px;
}
.content .descr {
 color: #664;
 font-size: 0.9em;
 margin-bottom: 6px;
}
.content li {
 list-style: url(img/li.gif);
 margin-left: 18px;
}
.content p {font-family: "Lucida Sans Unicode",sans-serif;}

/* footer */
.footer {
 background: url(img/bgfooter.gif) repeat-x;
 color: #FFF;
 font: bold 1em sans-serif;
 line-height: 39px;
 padding: 0 12px;
 text-align: center;
}
.footer a,.footer a:hover {color: #FFF;}



Phill
magikmarcUser is Offline
Newbie
Newbie
Posts:29


08/04/2008 11:18 AM  

Try adding this to your style sheet:

.top .header .left .subtitle {
 clear: both;
 float: none;
 text-align: center;
 font-size: 12px;
 color: #ffffff;
 margin-top: -45px;
 line-height: normal;
}

and put this as your left side of your header:


         C S HEGG, LLC
           

             Building Your Success
           

       

Everything is centered, but it should be a good starting point for you.


Marc Coppins
www.NetMagikPros.com
magikmarcUser is Offline
Newbie
Newbie
Posts:29


08/04/2008 11:26 AM  
< div class="left" > C S HEGG, LLC < div class="subtitle" > Building Your Success < /div > There, like that, but take out the extra spaces on your page when you paste this in.

Marc Coppins
www.NetMagikPros.com
terrydavidsonUser is Offline
Newbie
Newbie
Posts:6


08/06/2008 12:31 PM  

Hey Phill,

Good css question. I took a look at it and came up with 2 things quickly from the included css.

To make it work with 2 lines AND use the same font size/spacing all you need to do is change the line-height in the header.left entry

/* changed line-height: 150px; */
.header .left {
 background: #B3C2C7 url(img/header.jpg) no-repeat;
 font: normal 2.8em "Trebuchet MS",sans-serif;
 line-height: 70px;
 text-align: center;
 width: 564px;
}

It will allow 2 lines with almost perfect spacing and if you want to be right on the money just add a pixel or 2.

I would follow the standard set for the right side and do something like this  .. if it were me:

.header .left {
 background: #B3C2C7 url(img/header.jpg) no-repeat;
 text-align: center;
 width: 564px;
}
.header .left h1,.header .left h2 {padding: 0 16px;}
.header .left h1 {padding-top: 16px; font: normal 2.8em "Trebuchet MS",sans-serif;}
.header .left h2 {padding-top: 16px; font: normal 1.6em "Trebuchet MS",sans-serif;}

...which follows along with the standards used for the header.right entry. Then on the default ,HTML page your code would look like this:

<..div class="left"..>
<..h1>C S HEGG, LLC<../h1>
<..h2>Building Your Success<../h2>
<../div>
(without the double dots - I can't rememebr how to make the code show without actually working! :-))

 

...and once again you can play with the spacing.

Here is the hidden value to using my preferred code example ...
Using tags H1, H2 and H3 are common HTML and Search Engine Optimization would love to be able to use H1, H2 and H3 as content value for any given page. Combine them more for the "Content :area and assign them appropriately throughout all your pages AND focus on the keywords and descriptions for each page to use those words and ... BANG! ... SEO value goes up!

So you can see there are many ways to fix your stylesheet driven "tableless" design to work like you want but always try to remember SEO in the design.

See you ate the next meeting!
Terry D
I want to say that again .... BANG! ... SEO value shoots up!

goldniceUser is Offline
Regular Contributor
Regular Contributor
Posts:182


03/09/2012 2:19 AM  
Welcome To G4P,SWTOR Credits and SWTOR Gold service on 24/7/365.The cheapest Star Wars Credits provided and fastest Buy SWTOR Gold delivery,Just www.g4pswtor.com.
goldniceUser is Offline
Regular Contributor
Regular Contributor
Posts:182


03/09/2012 2:20 AM  
Buy WOW Items at the leading online game store www.g4pwowitems.com.Enjoy lower Price & Instant delivery for your WOW Items.Cheap WOW Items 100% safe guaranteed.
goldniceUser is Offline
Regular Contributor
Regular Contributor
Posts:182


03/09/2012 2:20 AM  
Bienvenue a www.cheapwowgolds.fr,Bienvenue sur le site WOW Gold!Nous fournissons tous les PO WOW & WOW PO.Vous pouvez acheter Gold WOW Ici.
lingzhiUser is Offline
Regular Contributor
Regular Contributor
Posts:82


04/08/2012 10:08 PM  
[Lung]
When weight gain, the lung must be to deliver more oxygen supply required, however, lung weight gain and the corresponding larger, the other under the hypertrophy of abdominal fat also limit pulmonary respiration. Surgical anesthesia, the risk will be relatively increased many. 2 day diet As for the asthma patient is obese, the problem is more serious. [Blood pressure] High blood pressure occurred in the obese body, high blood pressure may lead to brain stroke, kidney degradation and heart and other organs have varying degrees of damage, 2 day diet pills so overweight and patients with high blood pressure necessary for proper weight control plan. [Heart] When a person's weight increases, japan lingzhi 2 day diet the heart must be more hard working supply of nutrition to all organs within the body, 2 days diet the heavier the greater the load on the heart, so the frequency of obese people suffering from heart disease than the average person. [Atherosclerosis sclerosis] Due to excessive blood cholesterol, blood fat accumulation in the arterial wall, make the blood vessels become smaller, or even caused by the rupture of blood vessels, leading to stroke or heart attack. 2 day diet pill Studies have shown that obese people have atherosclerosis probability is very high. [Liver] The liver is the most important one of the tubes in the body, japan lingzhi slimming formula long-term alcohol abuse, and suffering from diabetes, 2 day diet japan lingzhi obesity will cause the formation of fatty liver, and continuing to improve, over time cause liver cell necrosis, two day diet pills can cause cirrhosis of the liver. [Diabetes] Diabetes is almost a patent of all the obese, 2 day diet lingzhi the study pointed out that the diabetes calendar, due to the high-carbohydrate, high-calorie diet-induced diabetes, 70 to 85 percent of body weight to alleviate their condition has improved, japanese 2 day diet so only assistance with the doctors and nutritionists to maintain ideal body weight, in order to put an end to the crisis of death. [Pregnancy and surgery] Obese pregnant women, lingzhi likely to cause production difficulties or to extend the production time, and affect the health of the fetus. Furthermore, severe obesity, its not just pregnancy difficulties, two day diet the maternal and fetal mortality is also high; and excessive hypertrophy of muscle tissue, the surgery more difficult. [Topped the list of malignant tumors] Of which 35% is a result of poor eating habits, lingzhi 2 day diet excessive consumption of high calorie, high fat content of food, etc., causing excessive generation of free radicals, resulting in the cell disease to become cancerous. [Joint] Overweight, japan lingzhi body bone can not withstand the weight and cause joint swelling and inflammation.
[Other]
Obese bulky, and often need to pay a higher strength to complete a certain amount of work, 2day diet japan lingzhi coupled with the slow response action is not flexible and agile, the frequent occurrence of accidents.
xixi001User is Offline
Regular Contributor
Regular Contributor
Posts:98


04/16/2012 4:02 AM  

P57 Hoodia is South Africa butterfly and (Hoodia) edible cactus the efficient components, the only global health, Hoodia P57 Pills safety of natural appetite inhibitors, can allow the brain to produce full abdomen move illusion, and P57 Hoodia Cactus Slimming Capsule reduce the intake of calories and fat. In Britain and the United States of human clinical trials, edible p57 hoodia slimming lose weight than the crowd of people eating placebo every day on average intake reduced the quantity of heat of 10000 calories, hoodia p57 diet pills weight loss obviously and no side effect. For more information please visit http://www.hoodiap57.org

You are not authorized to post a reply.
Forums > Web Design > General Web Design Discussion > Need help with Title & subtitle on webpage



ActiveForums 3.7
Home | Membership | Events | Forum | MyPage | Login
Copyright 2007-2008 by WGD Forum :: Designed by ZapWebDesign.com