|
CSS - Making Horizontal Nav Bar Work In Ie 6.0
Hi guys, I have been following the little tutorial at
http://www.phoenity.com/newtedge/horizontal_nav/ It works just fine in Firefox, but not in IE. Do you know what changes would be needed to make it work in IE? I have a test up on my site, which is a copy of the code from Phoenity. I just copied his, but here is what I have: HTML Code: <ul class="nav"> <li><strong>Browsers</strong> <ul> <li><a href="http://mozilla.org/">Mozilla</a></li> <li><a href="http://mozilla.org/products/firefox/">Firefox</a></li> <li>..</li> <li..</li> </ul> CSS Code:
/*Nav bar styles*/
ul.nav,
.nav ul{
margin: 0;
padding: 0;
cursor: default;
list-style-type: none;
display: inline;
}
ul.nav{
display: table;
}
ul.block{
width: 100%;
table-layout: fixed;
}
ul.nav>li{
display: table-cell;
position: relative;
padding: 2px 6px;
}
/*
ul.nav>li:hover{
padding-right: 1px;
}*/
ul.nav li>ul{
display: none;
position: absolute;
max-width: 40ex;
margin-left: -6px;
margin-top: 2px;
}
ul.nav li:hover>ul{
display : block;
}
.nav ul li a{
display: block;
padding: 2px 10px;
}
/*Menu styles*/
ul.nav,
.nav ul,
.nav ul li a{
background-color: #fff;
color: #369;
}
ul.nav li:hover,
.nav ul li a:hover{
background-color: #369;
color: #fff;
}
ul.nav li:active,
.nav ul li a:active{
background-color: #036;
color: #fff;
}
ul.nav,
.nav ul{
border: 1px solid #369;
}
.nav a{
text-decoration: none;
}
Similar TutorialsI want to make the drop downs on suckerfish menus appear horizontally rather than vertically. Any ideas how to? PHP Code: <style type="text/css"> #nav, #nav ul { padding: 0; margin: 0; list-style: none; background-color: red; color: #000; } #nav a { display: block; width: 10em; color: #FFF; } #nav li { float: left; width: 10em; background-color: green; } #nav li ul { position: absolute; width: 10em; left: -999em; } #nav li:hover ul { left: auto; } #nav li:hover ul, #nav li.sfhover ul { left: auto; } </style> <ul id="nav"> <li><a href="#">Percoidei</a> <ul> <li><a href="#">Remoras</a></li> <li><a href="#">Tilefishes</a></li> <li><a href="#">Bluefishes</a></li> <li><a href="#">Tigerfishes</a></li> </ul> </li> <li><a href="#">Anabantoidei</a> <ul> <li><a href="#">Climbing perches</a></li> <li><a href="#">Labyrinthfishes</a></li> <li><a href="#">Kissing gouramis</a></li> <li><a href="#">Pike-heads</a></li> <li><a href="#">Giant gouramis</a></li> </ul> </li> <!-- etc. --> </ul> I thought I could change the BLOCK display of the #nav a to INLINE but that doesn't work. We want the dropdowns to appear as 1 2 3 4 5 rather than 1 2 3 4 5 Thanks We are redesigning and I have a CSS menu I like that runs vertically. I need a version that would also work running horizontal, with the drop downs underneath. Is this possible by tweaking my existing code? I got the code I am using from alistapart and I am not really too familiar with it. You can see it here http://www.caribbean-on-line.com/tables.html Thanks - Anthony see he http://www.christiancouriernewspaper.com/blogbase/contactpage.php What I want is for 7 fields (Name-State) on the Left just how they are Then I want the remaining fields (Country- the spam question) on the right I would like to have it so it all fits on one page without having to scroll any ideas/suggestions? the .css file is below Code: /*
----------------------------------------------------------------
GBCF-V3 BLUE STYLE SHEET - MIKE CHERIM HTTP://GREEN-BEAST.COM
----------------------------------------------------------------
To use for testing, this stylesheet must be named default.css
*/
/* === form div and elements ======================================= */
#form-div {
font-family : verdana, helvetica, palatino sans, tahoma, arial, sans-serif;
width : 70%;
margin : auto;
color : #FF8C00 ;
line-height : 1.2em;
}
#form-div p.form-footer {
margin : -35px 2px 20px 13px;
}
#form-div p.form-footer a {
color : #003366;
}
#form-div p.form-footer a:hover, #form-div p.form-footer a:focus, #form-div p.form-footer a:active {
color : #000;
text-decoration : none;
}
#form-div p.form-footer a:focus, #form-div p.form-footer a:active {
background-color : #eee;
}
/* === form div link styles ======================================== */
#form-div a {
color : #FF6600;
}
#form-div a:hover, #form-div a:focus, #form-div a:active {
color : #000;
text-decoration : none;
}
#form-div a:focus, #form-div a:active {
background-color : #eee;
}
/* === success and error message/results box ======================= */
#form-div p.success, #form-div p.error, #form-div p.center {
color : #fff;
/* color : #000; (lite colors option - uncomment to use) */
padding : 1px 4px;
border : 1px solid #000;
background-color : #003366;
/* background-color : #bfccd9; (lite colors option - uncomment to use) */
margin : 10px 3px;
text-align : center;
}
#form-div p.error {
background-color : #bb0000;
/* background-color : #edbaba; (lite colors option - uncomment to use) */
}
#form-div p.error a, #form-div p.success a {
color : #ffff7f;
}
#form-div p.center {
text-align : center;
background-color : #edbaba;
color : #000;
margin-top : -3px;
padding : 0px 4px;
}
#form-div p.error a:hover, #form-div p.error a:focus, #form-div p.error a:active,
#form-div p.success a:hover, #form-div p.success a:focus, #form-div p.success a:active {
color : #eee;
background-color : #bb0000;
}
#form-div p.success a:hover, #form-div p.success a:focus, #form-div p.success a:active {
background-color : #003366;
}
/* === structural form elements ==================================== */
form#gbcf-form { }
fieldset.main-set,
fieldset.req-set,
fieldset.opt-set {
border : 1px solid #eee;
padding : 5px;
}
/* === textural form elements ====================================== */
#form-div legend {
font-weight : bold;
}
#form-div legend span { }
legend.main-legend {
color : #777;
font-size : 100%;
}
legend.req-legend,
legend.opt-legend {
color : #777;
font-size : 60%;
}
legend.main-legend span { }
legend.main-legend { }
legend.req-legend span { }
legend.req-legend {
margin-left : -2px;
}
legend.opt-legend span { }
legend.opt-legend {
margin-left : -2px;
}
label.req-label, label.opt-label {
color : #FF6600;
font-size : 60%;
}
label.opt-label.check {
float : right;
padding : 0;
margin : 1px 4px;
cursor : pointer;
}
label.opt-label.main-label {
margin : 0 2px;
font-weight : bold;
font-size : 75%;
}
label.opt-label.main-label span {
font-weight : normal;
color : #FF6600;
font-sze : 60%;
}
label.opt-label.main-label span.req, label span.req {
font-weight : bold;
color : #c70000;
}
label.req-label.explain {
color : #666;
font-size : .8em;
}
label.req-label.explain:hover {
color : #000;
}
/* === control and interface form elements ========================= */
/*
note: In this section you will see the hover/focus styles for the
inputs. For example: input:hover, input:focus. You will also see
these names applied as classes: input.hover, input,focus, for
example. This is not done by mistake. Those classes are needed for
the JavaScript focus script (files/focus.js) for IE 7 and older.
*/
input.text-long.address, input.text-long.address:hover, input.text-long.address:focus,
input.text-long.address.hover, input.text-long.address.focus {
border-bottom : 0;
margin-bottom : 0;
padding-bottom : 2px;
border-bottom : 1px dotted #bbb;
}
input.text-long.address2, input.text-long.address2:hover, input.text-long.address2:focus,
input.text-long.address2.hover, input.text-long.address2.focus {
border-top : 0;
margin-top : 0;
padding-top : 2px;
border-top : 1px dotted #bbb;
}
input.checkbox {
border : 1px solid #999;
width : .9em;
height :.9em;
padding : 0;
margin : 0;
cursor : pointer;
}
input.checkbox:hover, input.checkbox.hover,
input.checkbox:focus, input.checkbox.focus {
border : 1px solid #666;
}
input.text-short,
input.text-med,
input.text-long,
select.select,
textarea.textarea {
font : 0.6em verdana, helvetica, palatino sans, tahoma, arial, sans-serif;
border : 1px solid #999;
background-color : #fffffe;
cursor : text;
padding : 1px 2px;
}
select.select {
padding : 1px 0;
}
input.text-short {
width : 75px;
}
input.text-med, select.select {
width : 150px;
}
input.text-long {
width : 175px;
}
textarea.textarea {
width : 220px;
height : 100px;
}
select.select, select.select option {
cursor : pointer;
}
input.text-short:focus, input.text-short.focus,
input.text-med:focus, input.text-med.focus,
input.text-long:focus, input.text-long.focus,
select.select:focus, input.select.focus,
textarea.textarea:focus, textarea.textarea.focus {
border : 1px solid #666;
background-color : #ffe;
}
input.button {
font : 0.9em verdana, helvetica, palatino sans, tahoma, arial, sans-serif;
font-weight : bold;
margin-top : 8px;
padding : 1px 10px;
cursor : pointer;
float : right;
clear : both;
color : #003366;
}
input.button:hover, input.button.hover,
input.button:focus, input.button.focus {
color : #333;
}
/* because IE6 sucks - if you have a conditionally served IE6 style sheet add this to it */
* html input.button {
border : 1px solid #666;
}
/* EOF - Created by Mike Cherim @ http://green-beast.com =========== */
thanks ahead of time!!! I found this code online and I'm trying to alter it slightly for what I need. Code: <html>
<head>
<style type="text/css">
body,html {
padding: 0;
margin: 10;
}
#navcontainer ul {
list-style-type: none;
padding: 0;
margin: 0;
text-align: center;
}
#navcontainer ul li {
display: inline;
}
#navcontainer ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #036;
}
#navcontainer ul li a:hover {
color: #fff;
background-color: #acf;
}
</style>
</head>
<body>
<div id="navcontainer">
<ul>
<li><a href="#">Content</a></li>
<li><a href="#">Photographs</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Estate</a></li>
</ul>
</div>
</body>
It gives a nice center-aligned horizontal CSS menu. What I'm wondering is: How do I make it so that the width of each of the blue boxes the links are in are the same width? Say I want them all width: 180px; Where do I put that style so that it applies to all the links? [On a related issue, the style sheet has 4 things related to #navcontainer. How does one know which one of these to put additional styles in?] Thanks Much. j 9 Hi, **UPDATE: Problem Fixed...change the z-index of the parent menu element, thanks mizzory!*** Thank you for viewing this post and your help is greatly appreciated! The navagation menu works great in IE8 and Firefox, however in IE7, the drop-down hides behind the content div. I have tried assigning z-index to the divs, but with no luck. #wrap { margin:auto; width:1000px; background-color: #FFFFFF; background-repeat: repeat-y; min-height:100%; position:relative; } html, body { margin:0; padding:0; height:100%; } #content { min-height: 400px; padding-bottom:50px; /* Height of the footer */ position:relative; } #header { height: 200px; } #footer { position:absolute; bottom:0; width:100%; height:50px; /* Height of the footer */ font-size: 14px; font:Arial, Helvetica, sans-serif, bold; text-align:center; color:#FFFFFF; } /*horizontal menu specifications*/ #menu { background: #FFFFFF; float: left; height:40px; } #menu ul { list-style: none; margin: 0; padding: 0; width: 142.85px; float: left; } #menu a, #menu h2 { font: bold 13px arial, helvetica, sans-serif; display: block; border-width: 1px; border-style: solid; border-color: #FFFFFF; margin: 0; padding: 2px; text-align:center; } /* main menu header: set font colour and background colour */ #menu h2 { color: #FFFFFF; background: #0066CC; text-decoration:none; } /* main menu dropdown: set font colour, background colour, no underline for hyperlink */ #menu a { color: #000000; background: #CCCCCC; border-color: #000000; text-decoration: none; } /* main menu dropdown mouse hovering: set font colour, background colour*/ #menu a:hover { color: #E4001B; background: #FFFFFF; } /*position the pop out menu*/ #menu li { position: relative; } #menu ul ul { position: absolute; z-index: 500; } div#menu ul ul, div#menu ul li:hover ul ul, div#menu ul ul li:hover ul ul { display: none; } div#menu ul li:hover ul, div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul { display: block; } -S Hello, I put together this CSS drop down menu with some help from internet tutorials. I understand the basic code, but drop downs alway confuse me and never seem to work correctly in various browsers. It works great on Firefox on my mac, but once I get it onto a PC IE it goes all wacky. Any help to fix this would be appreciated. Thanks! here is the code Code: #nav {
display: block;
position: relative;
margin: 0;
width: 750px;
padding: 0;
height: 22px;
background: #000000;
float: left;
}
#nav li ul, #nav li ul {
display: block;
margin: 0;
padding: 0;
float: left;
}
#nav a {
text-decoration: none;
margin:0;
}
#nav li { /*float the main list items*/
margin: 0px;
float: left;
display: block;
border-right: 1px solid #c7dedf;
text-align: center;
background: #000000;
padding: 0;
}
#nav li ul {
display: none;
margin-left:0;
}
#nav li.off ul, #nav li.on ul { /*put the subnav below*/
position: absolute;
left: 0;
height: 20px;
margin-left: 0;
padding: .3em 0em 0 0em;
text-align: center;
width: 100%;
float: left;
}
#nav li.on ul {
}
#nav li.on:hover ul, #nav li.over ul { /*for ie*/
background: #808080;
}
#nav li a {
color: #ffffff;
align: center;
font-weight: bold;
font-family: verdana, Arial, san-serif;
font-size: 12px;
display: block;
margin:0;
padding: 4px 8px 3px 8px;
}
#nav li.on a {
color: #ffffff;
}
#nav li.on ul a, #nav li.off ul a {
border: 0;
float: left; /*ie doesn't inherit the float*/
padding: 0;
}
#nav li.on:hover ul a, #nav li.over ul li a { /*for ie - the specificity is necessary*/
background: #808080;
}
#nav li.on ul {
display: block;
background: #808080;
}
#nav li.off:hover ul, #nav li.over ul {
display: block;
background: #808080;
}
#nav li.off a:hover, #nav li.on a:hover {
color: #000000;
background: #808080;
}
#nav li.off ul a, #nav li.on ul a {
display: block;
background: #808080;
color: #ffffff;
font-family: arial, verdana, sans-serif;
font-size: 12px;
font-weight: normal;
width: 99px;
padding: 0px 8px 3px 8px
}
I'm going mad with this, I tested the CSS a:hover function over FF 1.0.7 and IE6, and the style file is simple: PHP Code: h3 { margin:10px; color:#636500; font-family: Arial, Helvetica, sans-serif; font-style: normal; } p { margin:10px; color:#636500; font-family: Arial, Helvetica, sans-serif; font-style: normal; } a { text-decoration: none; } a:hover { color:#636500; } a:visited { color:#cecf9c; } a:link { color:#cecf9c; } searched through the forum but seems nobody has got this problem... I just want the link to change color, I imported the css file to my html and it worked for the first time. I clicked on the link and then use brower's "Back" button to test it again, but the hover feature is not working anymore. I think it may be affected by the a:visited style, but how do I make a:hover work all the time? Thanks for helping. Hi this is my first post. I'm having trouble making a horizontal navbar with a picture background. here is the vertical menu. http://school(dot)timswildwackyemporium(dot)com/NewMouseOver/navtest.html replace (dot)s with period I want to make the buttons next to each other, but with about 10px space in between them. Thanks. I have a horizonatal menu on my webise and the list items that drop down, are all jumbled into a single block of text. How do I create a new line fore each list item? I don't have an external webserver so i'll explain as best I can. I have a left and right section of my webpage each with their own background. The problem is a white gap between to the two backgrounds. I set the margin and padding on everything to 0 and it has no effect. This occurs in IE and FF. PHP Code: <html> <head> <style> body {margin: 0; padding: 0;} .left {float: left; background-image: url('background_left.jpg'); height: 100%; width: 300px; background-repeat: no-repeat; background-attachment: fixed; margin: 0; padding: 0;} .right {background-image: url('background_right.jpg'); background-repeat: repeat-x; height: 100%; margin: 0; padding: 0;} .menu {} .content {} </style> </head> <body> <div class="left"> <div class="menu"> </div> </div> <div class="right"> <div class="content"> </div> </div> </body> </html> I've been grappling with this for a long while now. I pretty much have it working, except for the life of me I cannot get the drop down menus to appear under the corresponding link. position: absolute makes the menus always appear off to the left. Does anyone know what the secret is to this? Code: <div id="nav_wrapper"> <div id="nav_bar"> <div id="nav_content"> <ul id="nav_ul"> <li><a href="/">Home</a></li> <li><a href="/forum/">Forum</a> <div class="nav_subcontent"> <ul> <li><a href="/forum/search.php">Search</a></li> <li><a href="/forum/memberlist.php">Members</a></li> </ul> </div> </li> <li><a href="#">A link without a menu</a></li> </ul> </div> </div> </div> Code:
/* Wrapper */
#nav_wrapper {
clear: both;
}
/* Bar */
#nav_bar {
background: url('images/nav_swish_fade.jpg');
background-repeat: repeat-x;
height: 36px;
}
/* All the buttons within the bar, the middle portion */
#nav_content {
display: inline;
margin: 0 auto;
text-align: center;
background: #fff;
height: 36px;
}
/* Entire unordered list */
#nav_ul {
list-style: none;
position: relative;
}
/* Top level unordered list */
#nav_content ul>li {
display: block;
}
/* Top level unordered list links */
#nav_content ul>li a {
display: block;
float: left;
padding: 9px;
margin-left: 2px;
margin-right: 2px;
}
/* Menus */
.nav_subcontent {
display: none;
position: absolute;
background: #222;
margin-top: 8px;
}
/* Menu link */
#nav_content .nav_subcontent a {
display: block;
padding: 9px 20px 9px 0;
margin-left: -5px;
text-align: left;
min-width: 100px;
}
/* Show menus */
#nav_content ul>li:hover .nav_subcontent {
display: block;
}
I've been working on a site and have a problem with the horiztonal positioning of a div. At http://www.alphaworks.co.uk/problems/nicewag1/ I would like the position of the div with the id "page_footer" to move to the leftmost position. Can someone point out the mistake I'm making? Thanks, Geoff Thanks for taking the time to read my question. I FF v.2 and IE v.7 In FF I don't get a horizontal scroll bar, which is what I want, but in IE I do. I can't figure out why. The horizontal scroll bar happens here [id="ListOfItemTitles"]. HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>For Sale</title>
<link href="Matt.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="Matt.js"></script>
</head>
<body onload="createArray();createArrayDVD()">
<div class="LeftNavMainOut">
<div class="LeftNavMainIn">
<div class="LeftNavContentTitle">
Select category below to view available inventory
</div>
<div class="LeftNavContentHolder">
<div class="LeftNavContent">
<!--<a class="Nav" href="#" onClick="ChangeTitle('CD \'s','CD')">CD's</a>-->
<a class="Nav" href="#" onClick="ChangeTitle('CD \'s','CD')">CD's</a>
</div>
<div class="LeftNavContent">
<a class="Nav" href="#" onClick="ChangeTitle('DVD \'s','DVD')">DVD's</a>
</div>
</div>
</div>
</div>
<div class="ItemListMain">
<div class="ItemListTitle" id="ListOfItemTitles"></div>
<div class="roundtop"><img class="corner" src="TopLeft3.png" alt="" style="display: none" /></div>
<div class="ItemListContent" id="ListOfStuff"></div>
<div class="roundbottom"><img class="corner" src="BottomLeft3.png" alt="" style="display: none" /></div>
</div>
<div>
<iframe src="CD.txt" id="CDIFrame" style="height:0px;width:0px;border:0;overflow:hidden;"></iframe>
<iframe src="DVD.txt" id="DVDIFrame" style="height:0px;width:0px;border:0;overflow:hidden;"></iframe>
</div>
<div class="InfoContainer">
<div class="CoverPicMain"><img id="PicutreID" class="CoverPictures" src="Covers/NoCover.png" /></div>
<div id="InformationID" class="ItemDetails">CD and DVD Information</div>
</div>
</body>
</html>
CSS: Code: html, body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
background-image: url(background.jpg);
background-repeat: no-repeat;
background-position: center center;
background-color: #000000;
}
.LeftNavMainOut {
/*background-color: red;*/
float: left;
display: inline;
/*height: 600px;*/
height: 100%;
width: 170px;
margin-right: 100px;
margin-left: 80px;
padding-left:19px;
background-image: url(LeftNavBorder.png);
background-repeat: repeat-y;
background-position: top left;
}
.LeftNavMainIn {
/*background-color: pink;*/
float: left;
height: 100%;
width: 100%;
background-image: url(LeftNavBorder.png);
background-repeat: repeat-y;
background-position: top right;
}
.LeftNavContentTitle {
text-align: center;
font-size: 20px;
color: white;
width: 150px;
border-bottom: 4px double blue;
margin-top: 10px;
}
.LeftNavContentHolder {
margin-top: 100px;
padding-left: 2px;
}
.LeftNavContent {
background-color: aqua;
width: 140px;
float: left;
border: 2px solid CCCCCC;
text-align: center;
font-size: 20px;
margin-bottom: 10px;
}
.ItemListTitle{
font-size: 25px;
text-align: center;
width: 100%;
height: 25px;
margin-bottom: 5px;
}
.ItemListMain {
/*background-color: #99FF33;*/
margin-top: 100px;
float: left;
width: 180px;
}
.ItemListContent {
background-color: #0033CC;
padding-left: 8px;
padding-right: 8px;
height: 300px;
overflow: auto;
display:block;
}
.InfoContainer {
width: 265px;
float: right;
/*background-color: green;*/
margin-right: 100px;
margin-top: 130px; /*100px like ItemListMain, 25px like ItemListTitle, 5px like ItemListTitle*/
padding: 0px;
overflow: hidden;
}
.CoverPicMain {
/*background-color: gray;*/
width: 150px;
height: 150px;
float: right;
margin-right: 45px;
}
.CoverPictures {
width: 150px;
height: 150px;
}
.ItemDetails {
/*background-color: orange;*/
width: 260px;
height: 146px;
float: right;
margin: auto;
padding: 2px 2px 2px 3px;
overflow: hidden;
color: white;
}
.ItemDetailsArtist {
float: left;
width: 100%;
}
.ItemDetailsTitle {
float: left;
width: 100%;
}
.ItemDetailsType {
float: left;
width: 100%;
}
.ItemDetailsCost {
float: left;
width: 100%;
}
.ItemDetailsWidescreen {
float: left;
width: 100%;
}
.ItemDetailsActors {
float: left;
width: 100%;
}
.ItemDetailsRating {
float: left;
width: 100%;
}
img.corner {
height: 20px;
width: 160px;
border: none;
display: block !important;
}
.roundtop {
background: url('TopRight.png') no-repeat top right;
/*background-color: #0033CC;*/
}
.roundbottom {
background: url('BottomRight.png') no-repeat top right;
/*background-color: #0033CC;*/
}
.Nav {
display: block;
width: 100%;
}
.ListStuff {
display: block;
width: 100%;
border-bottom: 1px solid #CCCCCC;
}
a.Nav:link {
color: #000000;
text-decoration: none;
}
a.Nav:visited {
color: #000000;
text-decoration: none;
}
a.Nav:hover {
color: #000000;
text-decoration: underline;
background-color: #0066FF;
}
a.Nav:active {
color: #000000;
text-decoration: none;
}
a.ListStuff:link {
color: #ffffff;
text-decoration: none;
}
a.ListStuff:visited {
color: #ffffff;
text-decoration: none;
}
a.ListStuff:hover {
color: #ffffff;
text-decoration: underline;
background-color:#0066FF;
}
a.ListStuff:active {
color: #ffffff;
text-decoration: none;
}
JS: Code: var TheCDTitles=new Array();
var TheDVDTitles=new Array();
function ChangeTitle(WhichDesc, FrameName) {
TheCDTitles=''
TheDVDTitles=''
document.getElementById("ListOfItemTitles").innerHTML = "<strong><font color=#ffffff>" + WhichDesc + "</font></strong>";
if (FrameName=='CD') {
for (x in itemsArray)
{
TheCDTitles = TheCDTitles + '<a href="#" class="ListStuff" id="CD" + i + onmouseover="ShowInfoAndPic(' + x + ',' + x + ')">' + itemsArray[x].Artist + '</a>';
}
document.getElementById("ListOfStuff").innerHTML = TheCDTitles;
}
if (FrameName=='DVD') {
for (x in itemsArrayDVD)
{
TheDVDTitles = TheDVDTitles + '<a href="#" class="ListStuff" id="DVD" + i + onmouseover="ShowInfoAndPicDVD(' + x + ',' + x + ')">' + itemsArrayDVD[x].Title + '</a>';
}
document.getElementById("ListOfStuff").innerHTML = TheDVDTitles;
}
}
//*******************CD******************************
var itemsArray=new Array();
var x
function createArray()
{
x=0
var data=getCDContents();
var items=data.split('\n'); //splits the data in retreived from getContents() by line
var stats;
for (var i=0; i<items.length; i++)
{
x++
stats=items[i].split(','); //This is the line that determines what separates values in a line
itemsArray[i]={Artist:stats[0], Title:stats[1], Type:stats[2], Cost:stats[3], Pictu stats[4]}; //This is the line that gives a description to each value in a line. The values in the text file need to be in this order
}
}
function getCDContents()
{
// gets data from the iFrame which is hidden (height= 0px, width=0px) in PictureScan.html
var iFrame=document.getElementById('CDIFrame');
var INdata="";
if (iFrame.contentDocument) INdata=iFrame.contentDocument.defaultView.document.body.innerHTML;
if (iFrame.contentWindow) INdata=iFrame.contentWindow.document.body.innerHTML;
INdata=INdata.replace('<pre>','').replace('</pre>','').replace('<PRE>','').replace('</PRE>','');
return(INdata);
}
function ShowInfoAndPic(PicID,InfoID){
var Test
Test = null
document.getElementById("InformationID").innerHTML = '<div class="ItemDetailsArtist">Artist: ' + itemsArray[InfoID].Artist + '</div>' + '<div class="ItemDetailsTitle">Title: ' + itemsArray[InfoID].Title + '</div>' + '<div class="ItemDetailsType">Type: ' + itemsArray[InfoID].Type + '</div>' + '<div class="ItemDetailsCost">Cost: ' + itemsArray[InfoID].Cost + '</div>';
if (Test == itemsArray[PicID].Picture){
document.getElementById('PicutreID').src = 'Covers/NoCover.png';
}
else {
document.getElementById('PicutreID').src = 'Covers/' + itemsArray[PicID].Picture;
}
}
//*******************DVD******************************
var itemsArrayDVD=new Array();
function createArrayDVD()
{
var dataDVD=getCDContentsDVD();
var itemsDVD=dataDVD.split('\n'); //splits the data in retreived from getContents() by line
var statsDVD;
for (var iDVD=0; iDVD<itemsDVD.length; iDVD++)
{
statsDVD=itemsDVD[iDVD].split(','); //This is the line that determines what separates values in a line
itemsArrayDVD[iDVD]={Title:statsDVD[0], Widescreen:statsDVD[1], Actors:statsDVD[2], Type:statsDVD[3], Rating:statsDVD[4], Cost:statsDVD[5], Pictu statsDVD[6]}; //This is the line that gives a description to each value in a line. The values in the text file need to be in this order
}
}
function getCDContentsDVD()
{
// gets data from the iFrame which is hidden (height= 0px, width=0px) in PictureScan.html
var iFrameDVD=document.getElementById('DVDIFrame');
var INdataDVD="";
if (iFrameDVD.contentDocument) INdataDVD=iFrameDVD.contentDocument.defaultView.document.body.innerHTML;
if (iFrameDVD.contentWindow) INdataDVD=iFrameDVD.contentWindow.document.body.innerHTML;
INdataDVD=INdataDVD.replace('<pre>','').replace('</pre>','').replace('<PRE>','').replace('</PRE>','');
return(INdataDVD);
}
function ShowInfoAndPicDVD(PicIDDVD,InfoIDDVD){
var TestDVD
TestDVD = null
document.getElementById("InformationID").innerHTML = '<div class="ItemDetailsArtist">Title: ' + itemsArrayDVD[InfoIDDVD].Title + '</div>' + '<div class="ItemDetailsWidescreen">Widescreen (x=Yes): ' + itemsArrayDVD[InfoIDDVD].Widescreen + '</div>' + '<div class="ItemDetailsActors">Actors: ' + itemsArrayDVD[InfoIDDVD].Actors + '</div>' + '<div class="ItemDetailsType">Type: ' + itemsArrayDVD[InfoIDDVD].Type + '</div>' + '<div class="ItemDetailsRating">Rating: ' + itemsArrayDVD[InfoIDDVD].Rating + '</div>' + '<div class="ItemDetailsCost">Cost: ' + itemsArrayDVD[InfoIDDVD].Cost + '</div>';
if (TestDVD == itemsArrayDVD[PicIDDVD].Picture){
document.getElementById('PicutreID').src = 'Covers/NoCover.png';
}
else{
document.getElementById('PicutreID').src = 'Covers/' + itemsArrayDVD[PicIDDVD].Picture;
}
}
text doc for the CD iFrame Save this as CD.txt in the local folder Quote: 3 Doors Down,Away From The Sun,Rock,$5.00 3 Doors Down,The Better Life,Rock,$5.00 Adema,Insomniac's Dream,Rock,$5.00 Aerosmith,Get A Grip,Rock,$5.00 AFI,Sing The Sorrow,Rock,$5.00 Alice In Chains,self titled,Rock,$5.00 Alice In Chains,Dirt,Rock,$5.00 Alien Ant Farm,ANThology,Rock,$5.00 Thanks so much. Brad Hi ppl I'm trying to figure out how to do the following list, with CSS Is there any way that the boxes can accomodate themselves based on the width of their container's space? I mean, if the width of the site is reduced, maybe some box from the 1st row will go down, and so... Thanks Sorry if i repeat someone else's question, i've actually stumbled upon lots of solutions for this matter, but, as usual, there just seems to be no "only one" solution, so maybe someone here knows. In the good old days if i wanted to center all kinds of stuff, i'd use <div align="center">all kinds of <stuff></stuff></div>. Now i visit the w3c site and see the beautiful "deprecated" word by the "align" property, so i guess they once again need us to bash our heads against the walls with the most stupid invention in mankind: css. So can someone tell me how to center div's content horizontally? And not just text, i mean images, other tables or other kinds of things. If i assume correctly: If i use text-align - this is meant for text only If i use margin: 0 auto - that would align the div itself and not the content and we would need to know its width So is there any normal solution to this? I've been fighting with this for a good couple of days here so I figure it's time to come ask people who might have a better idea than I do. I've been trying to get this list to display on a horizontal bar. It's not a navigation bar that's an integral part of the site's layout, just an unordered list that I need to have go across a line instead of down. I got the code from a site that does pre made menus because I'm still new to all of this so, you know, blah life story. Ha. My HTML looks like this: Code: <li><a href="#url">2005<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub pos1">
<li><a class="sub2" href="#">August<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="border b1"></div>
<div class="base div1">
<h4>August 2005</h4>
<p>August 29</p>
<p>New school division office will be in Weyburn</p>
<ul>
<li><a href="#url">Section 1</a></li>
<li><a href="#url">Section 2</a></li>
<li><a href="#url">Section 3</a></li>
</ul>
</div>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
and I'm still not really sure what part of the code is the CSS affecting this but I think? it's this: Code: #verticalNav :hover ul.toplevel :hover ul.sub :hover div.base ul {float:left; padding:0; margin:0; list-style:none; width:200px;}
#verticalNav :hover ul.toplevel :hover ul.sub :hover div.base ul li {display:block; float:left; width:150px; height:auto; padding:0; margin:0;}
#verticalNav :hover ul.toplevel :hover ul.sub :hover div.base ul li a {width:190px; padding-left:10px; background:#fff url(vertical-list/dot.gif) no-repeat left center; color:#000; border:0; margin:0; height:auto; line-height:18px;}
#verticalNav :hover ul.toplevel :hover ul.sub :hover div.base ul li a:hover {color:#069;}
Is there a way to over ride this code so I can put the list on a single line? I'm staring at the emoticon bashing its head against a wall and it seems pretty accurate at this point. How do I create a div with a horizontal overflow? I have a div box which is 150px high and 200px wide. I need it to fill up the height and then overflow to the right so I can scroll it horizontally. The div box contains thumbnail images. |
|||||||