Member Avatar for vexhawk

This first issue is actually my main concern:

Please go here for reference:
http://www.omegaboi.com/test/

On the menu, (the blue bar) if you hover over it you can see it turn white, yes? Okay..

Now between the keywords (HOME etc. etc.) you find a " | " dividing them, which is a "border" i wrote in for the css stylesheet. However, AFTER that "|" there is a minature gap, that won't turn white when I hover. I removed the border attribute, but the gap is still there. I dunno how to align it. Hope someone can tell me whats up.


Second issue is, it was just a random thought tonight. But how do you line up two different CSS containers (ie. make them end at the same location on the bottom of a page). I know that the container expands for the amount of data it has, but what if one of your containers don't have enough data to match that of the taller container. I know that w/ firefox you can use the height attribute, but in I.E. this is not the case. I just want to see how people deal with this issue.

  • 3 Contributors
  • 5 Replies
  • 93 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by katarey
Member Avatar for vexhawk

i resolved the first problem myself. thanks. second issue, any ideas?

Member Avatar for katarey

Hi there,

i am not getting your Second issue, please feel free to clearify the quetion


Solution for first is :-

Use this CSS and HTML

<head>
<style type="text/css">
body
	{
		font-family: arial, verdana, helvetica;
		font-size: 80%;
		color: #000000;
	}
#navBar
	{
		margin: 0px;
		background-image: url(grad-blue.gif);
		background-repeat: repeat-x;
		border-top: 1px solid #333399;
		border-bottom: 1px solid #333399;
	}
#navBar a:link, a:visited, a:active
	{
		font-weight: bold;
		color: #ffffff;
		text-decoration: none;
		padding:2px 7px 2px 7px;
		border-right: 1px solid #333399;
	}
#navBar a:Hover
	{
		background: #ffffff;
		color: #0066cc;
		padding:2px 7px 2px 7px;
		border-right: 1px solid #333399;
	}
-->
</style>
</head>
<body>
<div id="navBar"><a href="#">Home</a><a href="#">Catalog</a><a href="#">Shopping Cart</a><a href="#">Order Manager</a><a href="#">File Manager</a></div>
</body>
Member Avatar for vexhawk

thanks!

The second issue was just regarding how you align the base of two containers.

Say you had a container that was float: left; and another was float: right;

but u had more information in the right one than the left one. The base would be uneven, like this:

__________________


______________________________________________
I don't know if that was a good enough visual, but how would you make both bases line up as such:

________________________ _____________________________


I hope this is clear.

Member Avatar for GreenDay2001

check the clear property. set it to none. since http://www.omegaboi.com/test/ is not opening(404 Not Found) so i couldn't see the source of your page.

Member Avatar for katarey

Try this for 2nd prob, it may help you, its working IE, Opera and FireFox

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>---------</title>
<style type="text/css" >
<!--
body
	{
		margin:0px;
		padding:0px;
		background-color:#000000;
		color:#ffffff;
	}
/* Properties that both side lists have in common */
div.link-list 
	{
		width:150px;
		background-color:#262626;
		position:absolute;
		top:0px;
		font-size:80%;
		padding-left:1%;
		padding-right:1%;
		margin-left:0;
		margin-right:0;
		height:250px;
	}
/* we leave some place on the side using the margin-* properties */
#main 
	{
		margin-left:180px;
		background-color:#262626;
		margin-right:180px;
		padding-left:1em;
		padding-right:1em;
		height:250px;
	}
/* and then we put each list on its place */
#list1 
	{
		left:2px;
	}
#list2 
	{
		right:2px;
	}
-->
</style>
</head>
<body>
<div id="main">Content for  id "main" Goes Here</div>
<div class="link-list" id="list1">Content for New Div Tag Goes Here</div>
<div class="link-list" id="list2">Content for  id "list2" Goes Here</div>
</body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.