CSS - Lost - Season 'lost In Css'. Episode 'navigator Footer With 3 Columns'

Please refer to the web site: h*t*t*p://alturl.com/yhba

Please look at the web site mentioned above and pay close attention to the "|" dividing the menu links (About, Events, Teams, Shop).

Problem: This "|" should not appear at the end of the menu (after the "Shop" link). However it seems that it is showing up in the Windows Firefox & Safari but not in Firefox when being run under the Apple operating system.

Please see if it is visible for you and if so, pleassee suggest how I may go about fixing the issue.

HTML:
Code:

<div id="navigation">
<a href="/about" class="navigation-about">About</a>
<a href="/events" class="navigation-events">Events</a>
<a href="/teams" class="navigation-teams">Teams</a>
<a href="/shop" class="navigation-shop last">Shop</a>
</div>

CSS:
Code:

#navigation {
    background:url(../_images/menu_bg.png) repeat-x;
	height:68px;
	width:100%;
	padding:10px 0 10px 0;
	margin:0 0 20px 0;
	}
/*#navigation a { color:#666; padding: 0 10px 0 10px; text-decoration:none; }*/


.navigation-about, .navigation-events, .navigation-teams, .navigation-shop {
    float: left;
    display: block;
    padding: 0 0 0 12px;
    font-size: 105%;
}

#navigation a.last{
background-image: url();
}

#navigation-logo {
	display:block;
	float:left;
	margin:3px 0 0 10px;
	padding-right:25px;
	}

#navigation a, #navigation a:visited {
	display:block;
	text-decoration:none;
	color:#666;
	padding:0 10px 0 10px; 
	background-image:url(../_images/nav_divider.png);
	background-repeat:no-repeat;
	background-position:right;
	font-weight:bold;
	}

Thank you!

I moved internal css to an external file and then linked the page to that file and lost my hand cursor on links. How do i get it back. Right now the arrow cursor remains when links are rolled over. Can be viewed at.

kopertone.com/newsite/index1.html

Also, in fire fox, I want dotted lines under my text links when rolled over, but not image links; how do I remove the dotted lines under my image links? Thanks!

APPEARS TO BE HASLAYOUT ISSUE IMAGE WITHIN ANCHOR NOT CLICKABLE.

Hi Guys looking for a spot of help please.

IE is driving me up the wall.

Ive wrote a jQuery script for scrolling a list horizontally upon user clicking left or right. The list has anchors within it which are blocks which I want to be clickable with an image inside (fine in FF etc) but in IE the image within the anchor loses its ability to be clicked the rest if fine apart from I manually have to set the cursor to pointer to show the user its clickable still.

Just when they click the item image within the anchor it does nothing.

Here is a slim version of the HTML :

Code:

<ul>
<li><a href="/page1.html"><span class="box_wrap"><span class="img"><img src="1.jpg" border="0" height="75" /></span><span>Item 1</span></span></a></li>
		<li><a href="/page2.html"><span class="box_wrap"><span class="img"><img src="2.jpg" border="0" height="75" /></span><span>Item 2</span></span></a></li>
		<li><a href="/page3.html"><span class="box_wrap"><span class="img"><img src="3.jpg" border="0" height="75" /></span><span>Item 3</span></span></a></li>
		<li><a href="/page4.html"><span class="box_wrap"><span class="img"><img src="4.jpg" border="0" height="75" /></span><span>Item 4</span></span></a></li>
		<li><a href="/page5.html"><span class="box_wrap"><span class="img"><img src="5.jpg" border="0" height="75" /></span><span>Item 5</span></span></a></li>
		<li><a href="/page6.html"><span class="box_wrap"><span class="img"><img src="6.jpg" border="0" height="75" /></span><span>Item 6</span></span></a></li>
		<li><a href="/page7.html"><span class="box_wrap"><span class="img"><img src="7.jpg" border="0" height="75" /></span><span>Item 7</span></span></a></li>
		<li><a href="/page8.html"><span class="box_wrap"><span class="img"><img src="8.jpg" border="0" height="75" /></span><span>Item 8</span></span></a></li>
		<li><a href="/page9.html"><span class="box_wrap"><span class="img"><img src="9.jpg" border="0" height="75" /></span><span>Item 9</span></span></a></li>
		<li><a href="/page10.html"><span class="box_wrap"><span class="img"><img src="10.jpg" border="0" height="75" /></span><span>Item 10</span></span></a></li>
		<li><a href="/page11.html"><span class="box_wrap"><span class="img"><img src="11.jpg" border="0" height="75" /></span><span>Item 11</span></span></a></li>
		<li><a href="/page12.html"><span class="box_wrap"><span class="img"><img src="12.jpg" border="0" height="75" /></span><span>Item 12</span></span></a></li>
		<li><a href="/page13.html"><span class="box_wrap"><span class="img"><img src="13.jpg" border="0" height="75" /></span><span>Item 13</span></span></a></li>
		<li><a href="/page14.html"><span class="box_wrap"><span class="img"><img src="14.jpg" border="0" height="75" /></span><span>Item 14</span></span></a></li>
		                  
        </ul>  

CSS Code:

Code:

ul {
  width: 9999px;
  list-style-image:none;
  list-style-position:outside;
  list-style-type:none;
  margin:0;
  padding:0;
  position: absolute;
  top: 0;
}

ul li {

  	display:block;
	list-style:none; 
	margin:0; 
	padding:0; 
	border:0; 
	text-align:center;
	float:left;
	width:118px;
	height:133px;  
}

ul li a{
	display:block;
	border-right:1px solid #e2f5fe;
	outline:none;
	text-decoration:none;
	background:#FFF;
	padding:3px 2px 3px 2px;
	line-height:15px;
}

ul li a:hover{
	background:#e2f5fe;
	color:#fe0084;
}

ul li span.box_wrap { 
	display:block;
	background:#FFF;
	height:127px;
}

ul li span.box_wrap span{
	padding:0px 3px;
	font-size:12px;
} 

ul li span.img { 
	padding:2px 0px 2px 0px;
	display:block;
}

Just when you try to click any of the images within the boxes its not clickable. Really stumped.

Any help or pointers would be greatly appreciated. Thanks in advance!

Hello,

I'm working now on div layout that contains 3 sections (header, body, footer) in one centered wrapper with border (divs with background imgs).

My problem is:

- divs that are in fact borders (id="l_outerborder_b" and id="r_outerborder_b") don't stretch when main container (id="body_content_text") grows.

Here is a html code:

Code:

<!--BEGIN TEMPLATE HEADER -->

<!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>
   	
<link href="template.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="template.js" />
</head>
<body onload="onloadprocedures()">
<div id="main_container">
	<div id="template_header">
		<div id="tl_outerborder"></div>
		<div id="t_outerborder"></div>
		<div id="tr_outerborder"></div>
		<div id="l_outerborder_h"></div>
		<div id="header_content">
			<div id="logo"><img src="img/logo.png" alt="" /></div>
			<div id="slogan"><img src="img/slogan.png" alt="Centrum zdrowia" /></div>
		</div>
		<div id="r_outerborder_h"></div>
	</div>
  
  <!-- END TEMPLATE HEADER -->
  <!-- BEGIN TEMPLATE BODY -->
	  <div id="template_body">
		<div id="l_outerborder_b"></div>
		<div id="body_content">
			<div id="body_content_text">
			  <p>TEST</p>
			</div>
		</div>
		<div id="r_outerborder_b"></div>
		
	  </div>
  <!-- END TEMPLATE BODY -->
  <!-- BEGIN TEMPLATE FOOTER -->
	<div id="template_footer">
		<div style="clear:both"></div>
		<div id="l_outerborder_f"></div>
		<div id="footer_content"></div>
		<div id="l_outerborder_f"></div>
		<div id="bl_outerborder"></div>
		<div id="b_outerborder"></div>
		<div id="br_outerborder"></div>
	</div>
</div>
</body>
</html>
<!-- END TEMPLATE FOOTER -->

and CSS:

Code:

@charset "utf-8";
/* CSS Document */
body {
	background-color:#FFFFFF;
	font-family:Tahoma, Verdana, "Times New Roman", Arial;
	font-size:12px;
}
a:link {text-decoration: none}      /* unvisited link */
a:visited {text-decoration: none}  /* visited link */
a:hover {text-decoration: none}  /* mouse over link */
a:active {text-decoration: none}  /* selected link */
#main_container {
	position:relative;
	margin:auto;
	width:960px;
	height:auto;
}
#template_header {
	float:left;
	position:relative;
	width:960px;
	height:300px;
}
#header_content {
	float:left;
	position:relative;
	width:900px;
	height:270px;
}
#logo {
	width:310px;
	height:130px;
	position:relative;
	float:left;
	top:0px;
	left:0px;
}
#slogan {
	width:580px;
	height:100px;
	position:relative;
	float:left;
	top:0px;
	left:0px;
}
#tl_outerborder {
	float:left;
	position:relative;	
	background-image:url(img/tl_outerborder.png);
	width:30px;
	height:30px;
}
#t_outerborder {
	float:left;
	position:relative;
	background-image:url(img/t_outerborder.png);
	width:900px;
	height:30px;
}
#tr_outerborder {
	float:left;
	position:relative;
	background-image:url(img/tr_outerborder.png);
	width:30px;
	height:30px;
}
#l_outerborder_h {
	float:left;
	position:relative;	
	background-image:url(img/l_outerborder.png);
	background-repeat:repeat-y;
	width:30px;
	height:270px;
}
#r_outerborder_h {
	float:right;
	position:relative;
	background-image:url(img/r_outerborder.png);
	background-repeat:repeat-y;
	width:30px;
	height:270px;
}
#body_content {
	float:left;
	position:relative;
	width:900px;
	
	overflow:hidden;
}
#body_content_text {
	float:left;
	position:relative;
	width:600px;
	
	margin: auto;
	overflow:hidden;
}
#l_outerborder_b {
	float:left;
	position:relative;	
	background-image:url(img/l_outerborder.png);
	background-repeat:repeat-y;
	width:30px;
	height:inherit;
}
#r_outerborder_b {
	float:right;
	position:relative;
	background-image:url(img/r_outerborder.png);
	background-repeat:repeat-y;
	width:30px;
	height:inherit;
}
#l_outerborder_f {
	float:left;
	position:relative;	
	background-image:url(img/l_outerborder.png);
	background-repeat:repeat-y;
	width:30px;
	height:inherit;
}
#r_outerborder_f {
	float:right;
	position:relative;
	background-image:url(img/r_outerborder.png);
	background-repeat:repeat-y;
	width:30px;
	height:inherit;
}
#template_body {
	float:left;
	position:relative;
	width:960px;
	
	overflow:hidden;
}
#bl_outerborder {
	float:left;
	position:relative;	
	background-image:url(img/bl_outerborder.png);
	width:30px;
	height:30px;
	
}
#b_outerborder {
	float:left;
	position:relative;
	background-image:url(img/b_outerborder.png);
	width:900px;
	height:30px;
}
#br_outerborder {
	float:left;
	position:relative;
	background-image:url(img/br_outerborder.png);
	width:30px;
	height:30px;
}

Thanks in advance for info how to stretch those doomed divs

EDIT: Here is layout concept.

URL
hTTp://qsrc.pl/layout.jpg

I have a menu bar made up of <a href> elements that have a hover style of: PHP Code:
#mainMenu a:hover {
    color:#000000;
    background-color: #66c74c;
    padding: 1px 4px 1px 4px;
    margin: 1px 1px 1px 1px;
} 



This will provide a green colored rollover visual as the user moves their mouse over the menu bar.

I just added some JS today that will highlight the clicked (selected) menu so there is visual feedback of the section the user is in. For some reason, after setting the background color of the <a href> and color attributes, the HOVER: no longer functions. Here is the code to do the hilite where I pass the ID of the <a href> menu selection in the variable "menu": PHP Code:
//--- Simplify setup by creating an array of the menus and hilight ID's ---
    var menus = ["menu1","menu2","menu3","menu4","menu5",
                "menu6","menu7","menu8","menu9","menu10"];
    
    function J_hiliteMenu(menu) {
        //--- first make sure all the menu are hidden and unhilited ---
        for(i=0; i < menus.length; i++) {
            if (menus[i] == menu) theIndex = i; // Hold on to the chosen index position
            var obj = document.getElementById(menus[i]);
            if (obj == null) continue;             // if menu is not available skip it
            obj.style.color = "#ffffff";
            obj.style.backgroundColor = "#234fd7";
        }
        //--- hilite the menu we're interested in ---
        var obj = document.getElementById(menu);
        obj.style.color = "#000000";
        obj.style.backgroundColor = "#f8f400";
    } 



Prior to hiliting the menu I un-hilite all the menus (since we may be switching from another). I think this is where the problem is. Maybe I need to redefine the rollover "hover" attribute for all elements during the un-hilite loop? Does anyone know how to set a HOVER: attribute using JavaScript?

Thanks!

I'm trying to redo my layout so it will load fast for my users and the way I am doing it is with divs. Anyways I have it finished but I've run into a problem; my columns are all different widths. I want them to all meet at the footer.

To see what I mean take a look.

http://www.rpgchateau.com/rpgapex/test/test/index.html

The css is url is...

http://www.rpgchateau.com/rpgapex/test/test/test.css

I would rather not replace them with an image to get them to repeat, is there any other way I can do it?

I have found many different ways of doing the 3 column fluid layout on the net...

http://css-discuss.incutio.com/?page=ThreeColumnLayouts

But none of theme seem simple enough to implement 3 fluid columns where each column is a percentage.

I have found a couple, but modifying the css to find my percentage needs loses the effect often times because the css code is long and complicated with many embeded divs.

Isnt there an easy way to have a header at top, 3 columns (20%,60%,20% widths) each stretching the same height and a footer at the end?

I thought that floating would work, but i get mixed and undesired output in IE and FF.

Thanks to all that contribute.

I have stumbled onto two issues with my layout. I have a fixed footer and I have my three columns and the problem I am having is that the content hides behind the fixed footer which is what I want. However when the content is just not enough it gets clipped behind the footer and what I'd like is to have i scroll up to the top of the footer in that situation. How would I do that in my css?

The second issue is that when I have a lot of content it breaks out of the container div or at least it appears that way. I'd like it to push the columns down inside the container as needed.

The css and xhtml arevalid.

Here is the link:

http://www.lonniebruhn.com/sitelab/

Thanks for your help
LB

Hi. I have a page with 3 absolutely positioned columns. I want the footer to set right underneath the main content.

Currently I have a container for the main content and a footer <div> that sits outside of this container. However, certain browsers (NN7 & IE6) are pushing the footer down too far. Anyone know how I can control this?

Here's my css:

#container{
position:relative;
height:100%;
width:780px; }

#footer {
position: relative;
top: 0px;
left: 0px;
clear:both;
}

Hi

i want to have a site with 3 columns a header and a footer where the height of the content and both the columns spreads to fill the page even if there is only a few lines of content.

Also i wanted to have a margin round the page so that the page doesnt fill the screen horizontal.

i cant seem to get it to work correctly

does anyone have an example i can look at?

cheers
Andy

Hello,
im trying to make Fixed width 3 columns (each column have fixed width) layout 100% height with header and footer.

-Well I see alot of examples around the web, but i dont see complete one and im really tired of searching, i made the Fixed width 3 comlumns layout, left and right are absolute position, and center is relative to the header

-the problem is that all columns dont fill the whole height of the browser windows, the footer doesnot work good. so the whole thing is missed up, so please show 100% working example of what i need.

Thanks in Advanced
Samer

Hi there,

I am back with another browser issue with css. When I set the position from the top on the center logo it shows correctly at top: 15px in IE but not in Navigator. To make it ok in Navigator I have to put it at 17px and then its off in IE.
I would love some help as i have a similar problem occuring in another site which I have also been trying to solve.
Here is the link: http://www.paintyourplace.com/emerald/

Here is the CSS:

body{
font-family: verdana, helvetica, arial, sans-serif;
margin: 0px 0px 0px 0px;
padding: 0px;
font-size:12px;
color: black;
background-color: #FFFFFF;
scrollbar-arrow-color:#003366;
scrollbar-face-color:#0C5331;
scrollbar-shadow-color: #9FB304;
scrollbar-highlight-color: #FFFFFF;
scrollbar-track-color: #CCCCCC;

}


#menuList {
margin: 0px;
padding: 0px;
}

#menuList ul {
margin: 0px;
padding: 0px;
}

#menuList li {
display: inline;
list-style: none;
}

a.actuator {
background-color: transparent;
color: #000;
font-size: 12px;
margin: 0px;
padding: 3px 6px;
text-decoration: none;
}

a.actuator:hover {

color: #990000;
}


.menu {
color: #000;
background-color: #EEE;
border: 1px solid #CCC;
position: absolute;
visibility: hidden;
}

.menu li a {
background-color: #EEE;
color: #000;
display: block;
font-size: 12px;
line-height: 1.75em;
margin: 0px;
padding: 0px 10px;
text-decoration: none;
}

.menu li a:hover {
background-color: #0C5331;
color: #EEE;
}

span.key {
text-decoration: underline;
}

#homeMenu { width: 120px; }
#aboutMenu { width: 120px; }
#productsMenu { width: 120px; }
#careersMenu { width: 120px; }
#customerMenu { width: 120px; }
#healthcareMenu { width: 120px; }
#contactMenu { width: 120px; }

a{
color:#990000;
font-weight:normal;
text-decoration:none;
}
a:visited{
color:#005940
}
a:hover{
color:#990000;
text-decoration:underline;
}



#mainMenu {

text-align: center;
color: #000;
margin: 0px;
padding: 0px 0px 2px 20px;
}

DIV.jill_toplogo{
align: left;
}

DIV.jill_leftgreen{
top: 75px;
background-color: #0C5331;
height: 95px;
position:absolute;
width: 50%;
}
DIV.jill_rightblue{
left: 50%;
top: 75px;
background-color: #254E7C;
height: 95px;
position:absolute;
width: 50%;
}

DIV.jill_centered_logo{
position:relative;
text-align: center;
top: 15px;


}
DIV.jill_greyback{
padding-top: 112px;
background-color: #E1E5E0;
position: absolute;
top: 60px;

width: 100%;
text-align: center;
font-size: 12px;


}

DIV.mainBox {
position: absolute;
top: 230px;
font-family: verdana, helvetica, arial, sans-serif;
font-size:12px;
left: 57px;
width: 80%;

}
#bottomText{
padding: 0px;
margin-top: 20px;
margin-bottom: 10px;
margin-right: 20%;
margin-left: 20%;
background: none;
border: none;
border-top: none;
text-align:center;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 10px;
color: #ccc;
}

THANKS!!!!

Hi everyone, I just have this pain with aligning the whole red thing to left of the page browser (cause it just keeps hanging on the center) - you can check my homepage below - you will see the problem - what should I do to move the whole thing to left? Thank you in advance.

I'm having trouble with my website structure... view this page for an example...

css is here...

The Footer (which currently consists just of the validation images) is suppossed to be at the bottom of the page...

It works in IE except there is a little line between the images (it is also part of the link...), and it doesn't work at all in FF...

how do I get rid of the line in IE, and what do I need to add or change in my css to get it to be viewed properly in FF?

Thanks
Bryan

Hi,

I am trying to setup 2 columns in XHTML, and am wondering how I would get the right column to automatically begin after the left column.

PHP Code:
<div id="container">
    <div id="leftcolumn">
        <div id="leftcolumntop">
            aaaa

    
        </div>
        <div id="leftcolumnbottom">
            bbb

    
        </div>
    </div>
    
    <div id="rightcolumn">
        <div id="rightcolumntop">
            ccc

    
        </div>
        <div id="rightcolumnbottom">
            ddd

        
        </div>
    </div>
</div> 





So basically what I'm looking to do is position "rightcolumn" so it begins right after "leftcolumn". I'm not sure how to tho. Right now I'm using absolute positioning, but I'd rather have it all line up automatically rather then having to play with #'s to get it to line up every time.