|
CSS - Need Help With Css Manu And Java Date Display
I have this CSS MENU:
Code: <style type="text/css">
#navcontainer ul
{
padding-left: 0;
margin-left: 0;
background:(X.jpg) repeat-x;
color: #5A505A;
float: left;
width: 100%;
border-top: solid #b6b3b8 1px;
border-bottom: solid #b6b3b8 2px;
font-family: arial, helvetica, sans-serif;
}
#navcontainer ul li { display: inline; }
#navcontainer ul li a
{
padding: 0.3em 2em;
background:(X.jpg) repeat-x;
color: #F8F8F8;
text-decoration: none;
float: left;
border-right: 1px solid #423842;
}
#navcontainer ul li b
{
padding: 0.4em 1em;
background: (X.jpg) repeat-x;
color: #F8F8F8;
text-decoration: none;
float: right;
font-size:0.875em;}
}
#navcontainer ul li a:hover
{
background: (X.jpg) repeat-x;
color: #292229;
}
-->
</style>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="(URL address blocked: See forum rules)" id="current">HOME</a></li>
<li><a href="#">CONTACT US</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">FORMS</a></li>
<li><a href="#">SITE MAP</a></li>
<li><a href="#">FAQ</a></li>
<li><b><script type="text/javascript"><!--
function makeArray() {
for (i = 0; i<makeArray.arguments.length; i++)
this[i + 1] = makeArray.arguments[i];
}
var months = new makeArray('January','February','March','April','May',
'June','July','August','September','October','November','December');
var date = new Date();
var month = date.getMonth() + 1;
var day = date.getDate();
var yy = date.getYear();
var year = (yy < 1000) ? yy + 1900 : yy;
document.write(months[month] + " " + day + " " + year);
//--></script></li></b>
</ul>
</div>
</ul>
</div>
I added the date script to the menu bar but I can't get the date to look like the rest of the font style menu. It looks a little thicker than the rest of the menu. Can anyone help me correct this. Thanks. Similar TutorialsI've been seeing people using ul and li tags to make their menus in css. So I've started trying to do the same, here is an example. But obviously here, the buttons are not displaying inline. All of the styles are within the page code itself. I've got a display: inline style on the li tag, but it's still not working? How can I get this to work or is there any other way to get a ul li menu to display this way? Could someone enlighten me why the page in the following URL functions perfectly in both IE6 and FF and yet, I seem to be totally unable to get the darn thing working locally? I am trying to avoid JavaScript and this looked like a very clean way of hiding and revealing menu items. I don't speak Japanese so I don't understand the text on the page either. http://www.amy.hi-ho.ne.jp/staka/hp/dhtm/s_disp.htm Dear Forum, I am designing a website using HTML and Java for the drop down menus. Although for one page this seemed ok at the begining, now I want to add links to other catagories where I only want to change the main body of the page. Up to now I have had to insert the Java script into every page I want to link to. The problem is A) The pages blink and the menu is lost while the graphics are being loaded, B) If I need to change the menus in the future I have to change all pages. Is there a way I can use CSS to keep the consistency of the Top and sides of the page and only change the body for other pages. I can do this with frames but I prefer not to use them. The test page can be seen at http://test.kipseli.com Thanks Rob I need to make a menu display when the user mousovers an image on the left side of my screen. I am a VERY big newb at this stuff. The hidden menu consists of 5 images stacked on top of each other which in turn are each selectable. It should be hidden, and then appear when mouseover the image at the side. Heres some code, not sure if its enough but just ask and I'll put more. Sorry if its ugly , I've kinda lost myself on this one... I CANNOT use javascript, as a rule. ==== CSS ==== #menu span { display:none; position:absolute; float:left; } #start { margin-left:-40px; position:fixed; float:left; display:block; } #start a:hover span { margin-left:-40px; position:fixed; float:left; display:block; } ===== HTML ===== <div id="start" align> <img src="images/start.gif" alt="Start"/> <div id="menu"> <a href="#"> <span> <img class="imgfix" src="images/ferrari-0-0.jpg" alt="Ferrari" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.6;this.filters.alpha.opacity=60"/> <img class="imgfix" src="images/ferrari-0-1.jpg" alt="Ferrari" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.6;this.filters.alpha.opacity=60"/> <img class="imgfix" src="images/ferrari-0-2.jpg" alt="Ferrari" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.6;this.filters.alpha.opacity=60"/> <img class="imgfix" src="images/ferrari-0-3.jpg" alt="Ferrari" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.6;this.filters.alpha.opacity=60"/> <img class="imgfix" src="images/ferrari-0-4.jpg" alt="Ferrari" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.6;this.filters.alpha.opacity=60"/> </span> </a> </div> </div> Hi! Is is vicious to display a table as "display: block" to force margin-collapsing? Otherwise there's no margin collapsing with other elements. Thanks Hello everyone. I'm going to try this as a general question first. In the event you guys do need to see the page, then I'll put up the info as needed. My issue is this: The site I am making uses a javascript slideshow. I need to have CSS div boxes overlay over it (the header and menu bar). In IE, I am not having any issues. Doesn't matter what I try - no issues at all. Putting the divs after the java (which is also in a css div) in the code, using "z-index" to put it on top, float, etc, doesn't matter - WORKS. What is NOT working is FireFox and all the rest. What's truly interesting is if I use z-index, the header does show up on top....for a few minutes, and then the javascript takes over the top position. What the? Some examples: .header { float: left; width: 716px; height: 150px; background-color: transparent; background-image: url("images/header.jpg"); position: absolute; z-index:100; } #mainimage { position: absolute; } Or: .header { float: left; width: 716px; height: 150px; background-color: transparent; background-image: url("images/header.jpg"); position: absolute; } #mainimage { position: absolute; } With HTML: <div id="mainimage"> <script type="text/javascript"> new fadeshow(fadeimages, 650, 825, 0, 2000, 0) </script> </div> <div class="header"></div> Again, IE - no issues. But I can't seem to find ANY method to get the dang header on the TOP of the java for any other browser. I am very much pulling out my hair. If you can assist: Hi im trying to detect ie or mozilla but i cant get it to work.. could somebody please tell me what is wrong with my code.. thanx in advance !!! Code: Code:
<head> <script language="javascript">
<!-- Begin
browser_version = parseInt(Navigator.appVersion);
browser_type = navigator.appName;
if (browser_type == "Microsoft Internet Explorer" && (browser_version >= 4)) {
document.write("<link REL='stylesheet' HREF="style.css" TYPE='text/css'>") ;
}
else if (browser_type == "Netscape" && (browser_verson >= 4)) {
document.write("<link REL='stylesheet' HREF="stylemozilla.css" Type='text/css'>") ;
}
// --></script>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>---</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
<!--
.Style9 {
font-size: 26px;
color: #85AC1E;
}
.Style13 {color: #85AC1E}
.Style15 {font-size: 19px}
.Style16 {font-size: 22px}
-->
</style>
</head>
Hello Developers, Here's my question: I have integrated pre-generated slideshow scripts into the 2nd of 3 HTML frames making up the content of a personal portfolio page. The ultimate goal is that when a user mouses over the LARGE image on the right, a button overlay would appear (like a PLAY BUTTON). OR a button controller below the image could cause the video to play. Ultimately, the basic idea is to let the user do the following: A) Select a thumbnail; Result: Corresponding Image/Caption appears B) Mouse-over (or hover) over the selected image and have the option to then PLAY the Video within the same frame. (this could be achieved by either a button layover or a controller just below the video) I tried linking to examples, but apparently I can't as a new member Any help, ideas, suggestions would be immensely appreciated. But please note that I am not a programmer -- this is all new to me as I'm trying to get a better handle on the programming language so I can update my own pages in the future. Thanks so much! Matt I'm having problems with a javascript rotating picture overlapping my drop down menu! I've fiddled around the the z-index but cant seem to get the drop down menu to drop ABOVE the picture. Everything is contained inside my <div id="wrapper"> and my layout scheme works like: Banner = top image ("Why won't my drop menu's show up") the image extends all the way down to the menu, and then the navigation is just words that go on top of the menu texture i've made. The only gif im using in the #nav is for the small yellow triangle for the roll over effect on the menu's. I get the white and menu bar on the sides because i just made the background a 40px height by 10px width image the sample and had it repeat in x only and then set background colour to that grey. My images are all inside the .main_view div id. Any help is appreciated! you can see my problem he htmltest2.weebly.com What do i need to do to fix this?! It's the effect where you click on a link or a button and a new bit of content appears, pushing down everything below it. Clicking it again makes that content disappear and all the original text move back up. Google uses it in a number of places, notably at the bottom of any search result. At the very bottom, below the "Goooogle" page number thing, there's a little plus sign to the left of "Add a result". Clicking that makes new content appear. I see it in a lot of places and I love the effect! I don't know if its Ajax or CSS or whatever, so I don't know how to properly search for a tutorial, but could anyone point me in the right direction? I am working on the design for a forum, but the date in the upper left hand corner of each post box is slowly disappearing...here is a screenshot of what is happening. The code for the date is as follows: Code: <h2><span><span class="conr">#7 </span><a href="#msg510" name="msg510">Oct 21, 2006 7:32pm</a></span></h2> .conr is floated to the right. This is punBB if that helps... Any idea why that would be happening? I wan't to print documents (actually invoices) from my PHP web application, but without the url and date and what ever there is on header and footer. As I understand the header and footer 'visibility' is browser settings and can't be changed with code. Is there any way to go around this with CSS or PHP? How do you guys take prints without header and footer data? I'm not sure if this is a PHP issue, if so maybe this thread will be moved to PHP forum.. Hey all I'm having a little trouble with my web site, which I have been attempting to make "css-based" and "tableless." The problem that I am having is that there are quite a few small but frusterating differences between how the page displays in IE and Mozilla Firefox (i tend to beleive that ie, the non-standards browser is wrong). Anyway, to the problem. If you view this site: http://trinity.killagraphix.com/index.php Css: http://trinity.killagraphix.com/theme.css (i didn't want to paste the whole file as it is quite large) In Internet explorer, you get a small margin between the Header image, and the rest of the content. This is not here viewing the same page in Mozilla. Also, in both browsers the menu background image is slightly above the center of the line. I think this is because the image is not as big as the line size, is there a way to make the image (which is a css background property) appear vertically-aligned to the center? Thanks in advance, sorry for the post length I'm working on a new site, and having trouble getting the CSS to work with IE7 (big surprise), it works fine in Firefox (big surprise). You can see the site he http://www.gocubit.com CSS he http://www.gocubit.com/styles.css IE6 stylesheet he http://www.gocubit.com/ie.css The problem is very simple, so let me explain what I have setup, and what is happening. I have 4 backgrounds I want to display, in the following containers: body - this contains a tiling wall texture #outerWrapper - this contains a small non-repeating bg image that puts graffiti in the upper right corner on top of the wall bg #innerWrapper - same as outerWrapper, but puts a graffiti bg in top left #contentWrapper - this div contains the main display area, and displays a vertically repeating paper background that should fill the screen from top to bottom (on top of the wall and two graffiti backgrounds) I've tried my best to get this to display right, but have one of two problems depending on how it is set up. In all cases, BODY and HTML are set to 100% height. SCENARIO #1 (same problem in FF or IE7): I set outerWrapper, innerWrapper, and contentWrapper to min-height: 100%. This doesn't extend the paper background all the way to the bottom on pages that don't fill the screen with content (see the CONTACT page). SCENARIO #2 (works in FF): I set outerWrapper, innerWrapper to height: 100%, and contentWrapper to min-height:100%. This actually appears to work on first glance (and does work in FF). But, if you go to a page with a lot of content (see the SERVICES page) where you need to scroll, what happens is that there is no paper BG in the area that is off screen. The content "below the fold", when scrolled to, has no paper BG. It's setting the height of the div to the screen height, filling in the BG, and any content below that height has no BG (only the wall BG in the body element). Code: html { height: 100%; }
body {
background-color: #8d7c51;
background-image: url(images/bgStucco.jpg);
font-size: 12pt;
margin: 0;
padding: 0;
height: 100%;
}
#outerWrapper {
background-image:url(images/bgStucco_tr.jpg);
background-repeat:no-repeat;
background-position: right top;
width: 100%;
margin: 0;
padding: 0;
min-height: 100%;
}
#innerWrapper {
background-image:url(images/bgStucco_tl.jpg);
background-repeat:no-repeat;
min-height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
Code: <body><div id="outerWrapper"><div id="innerWrapper"><div id="contentWrapper"> CONTENT GOES HERE </div></div></div></body> Any ideas on how to get this to work? I need some assistance getting my site menu to display correctly on FF. It displays fine on IE. You can see an example of the page he http://www.gallery.vividusphoto.com. If viewed in FF, the menu table is touching the logo. In IE, the menu is aligned to the right. If I do an align="right" the "under construction" bar goes up under the logo/menu in FF and the menu is moved to the correct position all while IE is unchanged. Any help is greatly appriciated. Code:
@charset "utf-8";
/* CSS Document */
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
background-color: #333333;
}
.vividus #container {
width: 46em;
margin: 20px auto; /* the auto margins (in conjunction with a width) center the page */
text-align: left; /* this overrides the text-align: center on the body element. */
}
.vividus #mainContent {
padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
background: #333333;
height: 30em;
}
.vividus #headerContent {
width: 46em;
text-align: right;
color: #CCCCCC;
}
.vividus #footerContent {
width: 46em;
padding: 10px 0 0 0;
text-align: left;
color: #CCCCCC;
font: 75% Georgia, "Times New Roman", Times, serif;
}
.vividus #menu {
width: 30em;
border: 0;
margin: 15px 0 5px 0;
text-align: right;
font: 75% Georgia, "Times New Roman", Times, serif;
}
a:link {
color: #CCCCCC;
text-decoration: none;
}
a:visited {
color: #CCCCCC;
text-decoration: none;
}
.login {
background: #000000;
}
.login a:hover {
text-decoration: none;
color: #999999;
}
.newsBanner a:hover {
color:#FFFFFF;
}
.vividus #newsBanner {
background: #666666;
padding: 7px 15px 7px 5px;
font-family: Georgia, "Times New Roman", Times, serif;
color: #CCCCCC;
}
.vividus #realContent {
background: #FFFFFF;
margin: 10px 0 0 0;
height: 30em;
padding: 10px 15px 10px 15px;
}
.vividus #realContentHome {
background: #666666;
margin: 10px 0 0 0;
height: 30em;
padding: 10px 10px 10px 10px;
}
.vividus #bodyHeadline {
color: #000000;
font-family:Georgia, "Times New Roman", Times, serif;
font-size: .8em;
padding: 10px 0 0 0;
}
.vividus #bodyText {
color: #000000;
font-family:Georgia, "Times New Roman", Times, serif;
font-size: .8em;
}
.vividus #loginForm {
padding: 5px 0 5px 0;
border: 1px solid #000000;
}
.vividus #bodyHeader {
font-size: 2em;
font-family: Georgia, "Times New Roman", Times, serif;
}
.floatright {
float: right;
margin: 10px 0 10px 10px;
}
.vividus #imgAbout {
height: 30em;
background: top right no-repeat url(../images/about_img.jpg);
}
.vividus #bodyHeadlineAbout {
color: #000000;
font-family:Georgia, "Times New Roman", Times, serif;
font-size: .8em;
padding: 10px 0 0 0;
width: 35em;
}
.vividus #error {
color: #FF0000;
font-family:Georgia, "Times New Roman", Times, serif;
font-size: .8em;
padding: 10px 0 0 0;
width: 35em;
}
.green {
background:#333333;
margin: 0px 6px 6px 6px;
border:1px solid #3b6e22;
height:24px;
line-height:14px;
color:#FFFFFF;
font-size:12px;
font-family:Georgia, "Times New Roman", Times, serif;
margin-right:10px;
display:inline-block;
text-decoration:none;
}
.login2 {
width: 200px;
font-size: 1.1em;
font-family:Georgia, "Times New Roman", Times, serif;
background-color: #FFFFFF;
color: #102132;
border: 1px solid #284279;
}
Hello all, I feel like such a dumb a$$ for not figuring this out... I have a div with ID head and width 100%; In that div there are 4 elements, 2 images and two header ( h1 and h2 ) elements. The two gifs are positioned absolutely one top:0;left:0; and one top:0;right:0; The parent div is set to min-height & height of 160px; The height of the images. In firefox they display where you would expect them, top right and left corners. In ie 5,5.5, 6 and 7 they just don't display at all. Here is some code: CSS Code: Original - CSS Code #head{ text-align:center; clear:both; width:100%; min-width:100%; max-width:100%; min-height:160px; height:160px; } #img1{ position:absolute;top:0;left:0; } #img2{ position:absolute;top:0;right:0; } #head1{ clear:none; width:100%; min-width:100%; max-width:100%; } #head2{ clear:left; margin:0; width:100%; min-width:100%; max-width:100%; }
#head{
HTML4strict Code: Original - HTML4strict Code <link type="text/css" rel="stylesheet" href="default.css" /> </head> <body> <div id="head"> <img id="img1" src="img1.gif" alt="an animated gif"> <h1 id="head1">h1</h1> <h2 id="head2">h2</h2> <img id="img2" src="img2.gif" alt="an animted gif"> </div> <link type="text/css" rel="stylesheet" href="default.css" /> Edit: Nevermind, I fixed my problem by working through each issue that the W3C validation service gave me, and fixing each one. It works in Internet Explorer now. Thanks for your time anyway. Peace, Pete Zaria. Hi guys, Just a quickie , I was looking at a site I produced in Netscape Navigator 7 and noticed a problem. I have a left hand nav that expands to show a sub Nav on mouse over. When moving your mouse off the menu item onto another one the previous menu closes (unless it's the page your looking at) Simple right? - well I noticed in NN7 that the display:none; I use to close the menu does not seem to work. No error, just doesn't work. Does display:none; not work in NN7 then? Is there a way arround it? Cheers, Daz I have created my first css site. I got it to work on the mac and pc, firefox and ie. So, naturally I moved on and created the inside pages to the site. I made the first inside page, and it worked as well....I really only copy and pasted the code I knew worked. I am using dreamweaver, so I set up templates and made the other pages. All I've done is copy and paste. But the inside pages get messed up and not in a consistent way. If I never changed a thing to the code, why is this happeneing? Is there any known bug/fix to this? Thanks www.rookscommunications.com/inrs/ Hi, i have a section of XML, that displays features of a car. Looks something like this: <features> <boot length="30" max-depth="160" min-depth="30" cover="false"/> <dvd/> <radio/> <fuel type="Unleaded" ron="98"/> </features> Each car has a different list of features. How would i write the code in css, to display "Features" then the list of features, with fuel in bold, starting on a new line on in a box? Many thanks |
|||||||