Please support our HTML and CSS advertiser: Lunarpages Web Hosting
 |
•
•
Join Date: Oct 2006
Posts: 24
Reputation: 
Rep Power: 3
Solved Threads: 0
Newbie Poster
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.
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.
•
•
Join Date: Oct 2006
Posts: 24
Reputation:
Rep Power: 3
Solved Threads: 0
Newbie Poster
i resolved the first problem myself. thanks. second issue, any ideas?
•
•
Join Date: Jul 2005
Location: india
Posts: 147
Reputation:
Rep Power: 4
Solved Threads: 17
Junior Poster
Re: 2 problems (GAP and HEIGHT) 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
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> Freelance Web Designer & Developer
Http//www.Katarey.com
Http//www.Katarey.com
•
•
Join Date: Oct 2006
Posts: 24
Reputation:
Rep Power: 3
Solved Threads: 0
Newbie Poster
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.
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.
Last edited by vexhawk : Nov 15th, 2006 at 7:22 pm.
•
•
Join Date: Oct 2006
Location: India
Posts: 1,289
Reputation:
Rep Power: 5
Solved Threads: 32
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.
•
•
Join Date: Jul 2005
Location: india
Posts: 147
Reputation:
Rep Power: 4
Solved Threads: 17
Junior Poster
Re: 2 problems (GAP and HEIGHT) 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> Freelance Web Designer & Developer
Http//www.Katarey.com
Http//www.Katarey.com
|
Similar Threads
Other Threads in the HTML and CSS Forum
- Dynamic iframe height (JavaScript / DHTML / AJAX)
- opera problems with hover menu (JavaScript / DHTML / AJAX)
- height: 100% - cannot get this to work (HTML and CSS)
Other Threads in the HTML and CSS Forum
- Previous Thread: Uploading pictures
- Next Thread: Doctype?
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Linear Mode
