height: 100%; EDIT New Question: link hover& color?

**mlegg** · 02-11-2011, 07:34 PM

I have a website and I want the height to adjust to 100% on various sized monitors.

http://ahepa215.org/ is the charity website I made.

CSS code

Code:

body {
  margin: auto;
  background-image : url(images/greekkey2.gif);
  background-repeat : repeat;
  max-width : 870px; 
  height: 100%;
}

#mainPicture {
  height : 170px;
  width : 870px;
  background : url(images/banner.gif) no-repeat;
  padding-top: 0;
  margin: 0;
}

#nav1 {
	background: transparent url(images/hmenu.jpg) repeat-x scroll left top;
        height:40px;
	margin:0 auto ;
	width:870px;	
	text-align:center;
}


#nav1 ul {
	display:table;
	margin:0 auto;
	padding:0;
	list-style-type:none;
	position:relative;
	height:40px;
	text-transform:uppercase;
	font-size:13px;
	font-family:Arial,sans-serif;
}


#nav1 ul li {
	display:block;
	float:left;
	margin:0;
	padding:0;
	background:transparent url("images/hmenu.jpg") repeat-x top left;

}


#nav1 ul li a {
	display:block;
	float:left;
	color:#ffffff;
	text-decoration:none;
	padding:0px 20px ;
	line-height:40px;
	font-weight:bold;
}


#nav1 ul li a:hover {
	color:#ffffff;
	background:transparent url("images/hmenu-sel.jpg") repeat-x top left;
}


.contentBox {
  font-family: sans-serif;color:navy;
  clear:both;
}

.innerBox {
  background-color : #ffffff;
  background-image : url(images/content_back.png);
  background-repeat : repeat-y;
  padding-top: 1em;
  padding-left: 1em;
  padding-right: 1em;
  padding-bottom : 1em;
}

#footer {
  background : url(images/footer.png) no-repeat;
  text-align : center;
  font-size : small;
  font-family : sans-serif;
  color : #ED000B;
  padding-top: 5px;
  padding-bottom: 5px;
  clear: both;
}
#footer A {
  color : #ED000B;
}

HTML code:

Code:

<!DOCTYPE HTML>
<html><head>


  
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>AHEPA 215</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
    
  <base href="http://ahepa215.org"></head><body>
<div id="mainPicture"></div>  
            <div id="nav1"> 
              <ul>
                <li id="current" style="border:none">
                  <a href="index.html" shape="rect">Home</a></li>
                <li><a href="brothers.html" shape="rect">Brothers</a></li>
                <li><a href="about.html" shape="rect">About</a></li>
                <li><a href="scholarship.html" shape="rect">Scholarship</a></li>
                <li><a href="join.html" shape="rect">Join</a></li>
                <li><a href="contact.html" shape="rect">Contact</a></li>
                </ul> 
            </div>  
            
<div class="contentBox">
<div class="innerBox">
<div class="contentText">

<p>The Portsmouth Chapter #215 of the Order of AHEPA was founded on March 21, 1929, at which time the first meeting was held. On March 24, 1929 thirty four residents of Portsmouth and Dover were initiated into the Order.</p>

<p>In November of 2004, the Portsmouth Chapter was formally incorporated in the State of New Hampshire. The new corporate name is Portsmouth AHEPA 215, which is non-for-profit corporation under IRS Section 501(c)(10).</p>

<p>The chapters undertakings over the years have ranged from building floats for the annual Greek Indepedence Day parade in Boston to increasing financial support through out the Portsmouth area and the Metropolis of Boston.</p>

<p>The AHEPA 215 started its annual golf outing in 1999 to enable to start funding its Scholarship Fund. This Scholarship Fund provides annual scholarships to Greater Portsmouth graduating High School Seniors whom have met three requirements, excellent grades, community service (at St Nicholas Greek Orthodox Church and within the community) and financial need.</p>

<p>In 2008, through its fund raising efforts the chapter was able to create a new Charitable Endowment Fund, the income from this fund will be used to assist those in need throughout the Greater Portsmouth Area.</p>

<p>The AHEPA 215 has 42 active members and is growing. You do not have to be Greek or an Orthodox Christian to join AHEPA, but you must believe in our mission and the promotion of Hellenism.</p>
</div>
</div>
</div>
</div>
<div id="footer">Copyright &copy AHEPA 215</a> | <a href="mailto:ahepa215@gmail.com.com">E-Mail</a></div>
</body></html>

**mlegg** · 02-12-2011, 05:55 PM

WOW 68 views and 0 replies still.

**coothead** · 02-12-2011, 06:06 PM

Hi there mlegg,

WOW 68 views and 0 replies still.

You should bear in mind that the majority of those views are probably from visitors rather than members.

Also note that it is the weekend and many members who would normally be willing to help you are taking a well deserved rest.

If you take a look at the attachment, though, you may find a possible solution to your problem.

 
 
coothead

**mlegg** · 02-12-2011, 06:59 PM

Thank you very much. I had something similar originally and just couldn't get it right.

**coothead** · 02-12-2011, 07:07 PM

No problem, you're very welcome.

**mlegg** · 02-15-2011, 02:14 AM

Hi, I am back. I didn't want to make a new thread because my question relates to this again. I can't figure out why my hyperlinks won't highlight on a page the way I have it done in the footer. What did I do wrong with my code and how can I fix it? This is a good page to look at because it has a lot of links: http://ahepa215.org/brothers.html

Thanks again in advance. I am so tired.

CSS:

Code:

html,body {
    padding:0;
    margin:0;
    height:100%;
    background-image:url(images/greekkey2.gif);
    background-position:center top;             /* this positioning has been modified */
 }
#container {
    position:relative;
    width:960px;
    min-height:100%;
    margin:auto;
    font-family: sans-serif;color:navy;
    background-color:#fff;
 }
div.one {  
      padding: 15px;  
    } 
.div.one a:link  { 
color : #FF0000;
text-decoration:underline;
}
.div.one a:visited {
color: #FF0000;
text-decoration : underline; 
}

.div.one a:hover  {
color: #FFFFFF;
background-color: #8B0000;
text-decoration: underline;
}

.div.one a:active  {
color : #FF0033; 
background-color: #FFFFFF;
text-decoration: underline;
}
#mainPicture {
  height:170px;
  width:960px;
  background-image:url(images/banner.gif);      
 }

#nav1 {
	background: transparent url(images/hmenu.jpg) repeat-x scroll left top;
        height:40px;
	margin:0 auto ;
	width:960px;	
	text-align:center;
}


#nav1 ul {
	display:table;
	margin:0 auto;
	padding:0;
	list-style-type:none;
	position:relative;
	height:40px;
	text-transform:uppercase;
	font-size:13px;
	font-family:Arial,sans-serif;
}


#nav1 ul li {
	display:block;
	float:left;
	margin:0;
	padding:0;
	background:transparent url("images/hmenu.jpg") repeat-x top left;

}


#nav1 ul li a {
	display:block;
	float:left;
	color:#ffffff;
	text-decoration:none;
	padding:0px 20px ;
	line-height:40px;
	font-weight:bold;
}


#nav1 ul li a:hover {
	color:#ffffff;
	background:transparent url("images/hmenu-sel.jpg") repeat-x top left;
}


#footer {
    position:absolute;
    width:100%;
    left:0;
    bottom:0;
    padding:5px 0;
    font-family:sans-serif;
    font-size:small;
    color:#ed000b;
    text-align:center;
    background-image:url(images/footer.png);
 }
#footer a:link  { 
color : #FF0000;
text-decoration:underline;
}

#footer a:visited {
color: #FF0000;
text-decoration : underline; 
}

#footer a:hover  {
color: #FFFFFF;
background-color: #8B0000;
text-decoration: underline;
}

#footer a:active  {
color : #FF0033; 
background-color: #FFFFFF;
text-decoration: underline;
}

HTML:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title>AHEPA 215</title>

<link rel="stylesheet" type="text/css" href="styles.css">

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6styles.css">
<![endif]-->

</head>
<body>

<div id="container">

<div id="mainPicture"></div> 
 <div id="nav1"> 
              <ul>
                <li id="current" style="border:none">
                  <a href="index.html">Home</a></li>
                <li><a href="brothers.html">Brothers</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="scholarship.html">Scholarship</a></li>
                <li><a href="join.html">Join</a></li>
                <li><a href="contact.html">Contact</a></li>
                </ul> 
            </div>
 <div class="one">    
<TABLE BORDER="0">
<TR>
<TD width="470px"><ul>
  <li><a href="mailto:baisden1@comcast.net">Ronald Baisden</a></li>
  <li><a href="mailto:gbaryiames@gmail.com">George Baryiames</a></li>
  <li> <a href="mailto:jbirmbas@yahoo.com">John Birmbas</a> / <a href="http://www.jumpinjacksjava.com" target="_blank">Jumpin Jack's Java</a></li>
  <li><a href="mailto:n.birmbas@comcast.net">Nick Birmbas</a> / <a href="http://www.jumpinjacksjava.com"target="_blank">Jumpin  Jack's Java</a></li>
  <li><a href="mailto:cbray75@gmail.com">Chris Bray</a></li>
  <li><a href="mailto:adamianos@pol.net">Aristotle Damianos</a></li>	
  <li><a href="mailto:greg@gmfilias.com">Greg Filias</a></li>
  <li><a href="mailto:tomf@buildamerica.us">Thomas Frangos</a> / <a href="http://buildamerica.us/" target="_blank">Build America</a></li>
  <li><a href="mailto:jjack6@verizon.net">John Jack</a></li>
  <li><a href="mailto:mlegg10@comcast.net">Michael Leggett</a></li>
  <li><a href="mailto:LMeaMMCM@msn.com">Larry Meats</a></li>

<TD width="470px"><li><a href="mailto:santorini995@earthlink.net">Nicholas Minichello</a> / Lena's Subs & Seafood</li>
  <li><a href="mailto:Bill.Naumes@unh.edu">William Naumes</a></li>
  <li><a href="mailto:leon_nicholas@hotmail.com">Leon Nicholas</a></li>
  <li><a href="mailto:john.panteleos@keurig.com">John Panteleos</a></li>
  <li><a href="mailto:james.pappaioanou@us.army.mil">James Pappaioanou</a></li>
  <li><a href="mailto:chip.pappas@olivedevelopment.com">Chip Pappas</a></li>
  <li><a href="mailto:boysrus4@comcast.net">Steve Petrovitsis</a></li>
  <li><a href="mailto:jpetroulis@myfairpoint.net">John Petroulis</a></li>
  <li><a href="mailto:js100@comcast.net">John Samonas</a> / <a href="http://samonasgroup.com/" target="_blank">Samonas Realty</a></li>
  <li><a href="mailto:christoss@comcast.net">Chris Sarhanis</a></li>
  <li><a href="mailto:fzotos@aol.com">Foti Zotos</a></li>
  <li><a href="mailto:d.zottos@verizon.net">Dean Zottos</a> / <a href="http://www.cafenostimo.com/" target="_blank">Cafe Nostimo</a></li>
</TD>
</TR>
</TABLE>
</div>
<div align="center" ><img src="images/MarketSquareDay-2.jpg">
<div style="clear:both;">

<div id="footer">Copyright &copy; AHEPA 215 | <a href="mailto:ahepa215@gmail.com.com">E-Mail</a></div>
</div><!--end #container -->
</body>
</html>

**coothead** · 02-15-2011, 03:08 AM

Hi there mlegg,

have you tried adding something like this...

Code:


table a {
    color:#000;
    text-decoration:none;
 }
table a:hover {
    color:#fff;
    background-color:#8B0000;
 }

...to your stylesheet?

coothead

**mlegg** · 02-15-2011, 03:13 AM

ahh.... thank you. I don't know how I missed that.

**coothead** · 02-15-2011, 03:25 AM

Perhaps you will be able to get a few zzzzzzzzzz in now.

Thread: height: 100%; EDIT New Question: link hover& color?

Thread Tools

Search Thread

height: 100%; EDIT New Question: link hover& color?

The Following User Says Thank You to coothead For This Useful Post:

The Following User Says Thank You to coothead For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions