|
CSS - Please Help! Urgent! Need To Display Logo And Menu On Each Page By Defaul
Hi,
I'm new using CSS and was just handed the task of creating an external style sheet that will 'brand' the web page of a new service we are using with my company's logo and menu. Our page has a logo on the left, with a menu bar extending to the right of it, then a graphic bannner with the company's slogan below all of it. The requirements are for an external style sheet which will apply this to each page of the services hosted pages. I desperately need an example of how this is done, or CAN it be done with an external style sheet (and what code needs to go into the HTML file to make it work). Any help would be greatly appreciated. I've spent 4 days searching for an example and have come up dry, or what I did find didn't work. This is my last resort and I need to finish the project today. Tillius Similar TutorialsHello, I'm having some problems with with the menu and CSS. I'm trying to retouch some aspects of my website, and the last think I need to do now is the menu. Right now, here is how it looks like: www.lightblu.com You see the menu on the very top, then the logo below it, and then the banner below the logo. My users were "annoyed" by the amount of empty space between the top menu and the banner. Having thought of many possibilities, I encountered a template over at TemplateMonster, which is the exact menu I need. The reason I did not purchase it is that usually TM uses tables rather than pure CSS. And here is the menu I'm talking about: http://www.templatemonster.com/website-templates/18925.html You see the menu? And that's the exact same menu-concept that I'd like to have. Of course the background will be Black just as my website, rather than the greyish one you see at TM. Now here is the problem I'm having. When I'm trying to align the logo with the menu, it just doesn't happen. I have the logo the on top left, which is fine, but then the menu appears below the logo on the right side. And I just cannot figure this thing out. Grrrr.. What am I doing wrong? Thanks a ton guys! I want to place the page title on the left and the pages logo on the right of the page. The logo must be directly accross from the title. Can anyone suggest some CSS and html Below is my feeble attempt HTML: <div id="header"> <p>Report Title <span class="logo"><img src="logo.gif"> </span> </p> </div> CSS: #header p { text-align: left; } #header .logo { text-align: right; } Hi, I was about to put my new website online when I noticed that our CSS drop-down menu no longer works in Internet Explorer. The site is built off some software that we bought (a billing system called AWBS). When I got our template up and running on it, the menu worked fine in IE. Today I did some upgrades to the software, which included changing some of the templates around. I was careful to not disturb much in my template files, however it seems that I have, and I have no idea what. You can see the site at http://www.estyles.com.au/awbs/testpage.php . The menu works fine in FireFox, and previously worked fine in IE before I upgraded. All the CSS for the menu can be found at http://www.estyles.com.au/awbs/temp...es/css/menu.css . The code for the menu is: Code: <ul id="nav">
<li><a href="http://www.estyles.com.au/awbs/index.php">HOME</a>
</li>
<li><a href="#">WEBHOSTING</a>
<ul>
<li><a href="http://www.estyles.com.au/awbs/hostingoverview.php" class="menuitem">Overview</a></li>
<li><a href="http://www.estyles.com.au/awbs/hosting.php?spt=1" class="menuitem">Shared Hosting</a></li>
<li><a href="http://www.estyles.com.au/awbs/hosting.php?pt=r" class="menuitem">Reseller Hosting</a></li>
<li><a href="http://www.estyles.com.au/awbs/specials.php" class="menuitem">Specials</a></li>
</ul>
</li>
<li><a href="#">DOMAINS</a>
<ul>
<li><a href="http://www.estyles.com.au/awbs/check.php" class="menuitem">Register Domain</a></li>
<li><a href="pricing.php" target="_blank" onClick='window.open("http://www.estyles.com.au/awbs/pricing.php","pricing","width=700,height=300,status=yes,scrollbars=1,resizable=1");return false;' class="menuitem">Domain Prices</a></li>
<li><a href="http://www.estyles.com.au/awbs/transcheck.php" class="menuitem">Transfer Domain</a></li>
<li><a href="http://www.estyles.com.au/awbs/whois.php" class="menuitem">Whois Lookup</a></li>
</ul>
</li>
<li><a href="#">SERVICES</a>
<ul>
<li><a href="http://www.estyles.com.au/awbs/webdesign.php" class="menuitem">Web Design</a></li>
</ul>
</li>
<li><a href="#">ACCOUNT</a>
<ul>
<li><a href="http://www.estyles.com.au/awbs/cart.php" class="menuitem">My Cart</a></li>
<li><a href="http://www.estyles.com.au/awbs/welcome.php" class="menuitem">My Account</a></li>
<li><a href="http://www.estyles.com.au/awbs/helpdesk.php?search=open" class="menuitem">Support System</a></li>
<li><a href="http://www.estyles.com.au/awbs/tos.php" class="menuitem">Terms of Service</a></li>
<li><a href="http://www.estyles.com.au/awbs/LogOut.php" class="menuitem">Log Out</a></li>
<li><a href="http://www.estyles.com.au/awbs/admin/adminwelcome.php" class="menuitem" target="_blank">Admin</a></li>
</ul>
</li>
</ul>
The HTML is messy and I have no idea where to start looking for the problem. The header and footer on the page both changed during the upgrade but the main content (everything inside the body tags) did not, so I suspect that the problem does not lie within the main content area. If someone could at least point me in the right direction then I would greatly appreciate it, thanks test link: users.tpg.com.au/tetsuo/CSS_help/index.html Hi guys, Im really new to CSS, and doing a bit of crammed-study on it. I finally found a fix that worked on css list navigation that i could use that'll work in IE but i cant seem to center each menu item to each respective rollover image (the BG gifs). Some help on this would be greatly appreciated, i cant seem to find anything to fix this. I've tried several solutions (which is probably why my css might look like a huge mess). the css file is he users.tpg.com.au/tetsuo/CSS_help/awis.html On button on my website store on CSS but when user turn off "load image automatically" then images don't display. Please show me how to fix it. Thanks a lot. Following sample is from http://www.code-couch.com/jeff/snippets/general/tektips-navigation-example.html is what I am trying to reference to create a template. But how do I how keep the state of Menu on each requested page any help is appreciated. The following menu is saved in a separate jsp file i.e. navs.jsp. I include this navigation jsp file in all of my files. Initially the drop down looks like: Code: . Ask.Jeeves . [+] Google.com . [+] Yahoo.com Now clicking [+] in front of Google.com will look like. Code:
. Ask.Jeeves
. [-] Google.com
. Google.co.ie
. Google.co.ie
. [+] Google.co.nz
. [+] Yahoo.com
Lets's say now if I click on Google.co.ie it takes me to sample.jsp and on this requested page (sample.jsp) how can I show the following menu hierarchy with Google.co.ie bold/underlined/colorchanged showing what menu content I clicked and am viewing the appropriate content i.e. Code:
. Ask.Jeeves
. [-] Google.com
. Google.co.ie
. Google.co.ie
. [+] Google.co.nz
. [+] Yahoo.com
Same way clicking Google.com or Yahoo.com or Ask.Jeeves shows you the following hierarchy on the requested page with higlight/bold/colored the link we just selected. i.e. Code: . Ask.Jeeves . [+] Google.com . [+] Yahoo.com Any time clicking on the menu takes me to some page but on that page I want to show th hierarchy of the menu all the way to which is recently clicked with different color setting. Here is the source for the above: 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" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<meta http-equiv="content-language" content="en"/>
<title>Test Harness</title>
<style type="text/css">
ul li ul {display:none;list-style-type: none;}
#myNav li a:hover {
color: blue;
}
#myNav li a:active {
color: #FF0000;
background: #FFFFFF;
}
#myNav { list-style-image: url(page.GIF); }
</style>
<script type="text/javascript">
<!--
function initNav() {
var navObj = document.getElementById('myNav');
var ulCollection = navObj.getElementsByTagName('li');
for (var loop = 0; loop < ulCollection.length; loop++) {
if(ulCollection[loop].getElementsByTagName('ul').length > 0) {
/* we have an LI that contains a UL */
if (ulCollection[loop].getElementsByTagName('span').length > 0) {
/* there is at least one SPAN tag present */
ulCollection[loop].getElementsByTagName('span')[0].innerHTML = "[<a href=\"javascript://\" onclick=\"this.innerHTML=this.innerHTML=='+'?'-':'+';temp=this.parentNode.parentNode.getElementsByTagName('ul')[0].style;temp.display=temp.display=='block'?'none':'block';\">+</a>] ";
}
}
}
}
window.onload = initNav;
//-->
</script>
</head>
<body>
<ul id="myNav">
<li><a href="http://www.askjeeves.com">Ask.Jeeves</a></li>
<li><span></span><a href="http://www.google.com">Google.com</a>
<ul>
<li><a href="http://www.google.co.uk">Google.co.uk</a></li>
<li><a href="http://www.google.co.ie">Google.co.ie</a></li>
<li><span></span><a href="http://www.google.co.nz">Google.co.nz</a>
<ul>
<li>*3*</li>
<li>*4*</li>
</ul>
</li>
</ul>
</li>
<li><span></span><a href="http://www.yahoo.com">Yahoo.com</a>
<ul>
<li><a href="http://www.yahoo.co.uk">Yahoo.co.uk</a></li>
<li><a href="http://www.yahoo.co.nz">Yahoo.co.nz</a></li>
</ul>
</li>
</ul>
</body>
</html>
Any help is really appreciated thanks. Hola, I'm trying to add a menu I got from CSSplay to my site. It's displaying dot in the upper right of each li space in FF, but it's fine in IE. The original file is fine, of course, Anyone ever had this problem? brizfoto dot com slash test Hey everyone, The page below displays perfectly in both IE6 and Firefox, but in IE7 my navigation disappears and the right navigation in the header is all crunched together. livedifference dot com slash test slash home I'm not really a CSS guru, but I've tried clearing floats via tons of methods and adding random things, but nothing seems to work. Any help would be GREATLY appreciated, I really need to get this up and running. Thanks, Brad Alrite, I have a dropdown menu that is fully CSS driven. The menu works fine except that the dropdown links dont work in Firefox. Once clicked the menu goes to the main heading link for the dropdown menu, instead of the dropdowns item link. However if u right click on the link and say open in new window/tab it works fine. I have attached the files. Thanks a lot Nick I was wondering if anyone knows of any tutorials or resources for creating a menu system using css. The problem I have is that when I change the submenu's which are divs to display, they pop into place. I want to change this aspect and assume there is a javascript solution to make the display slow down, but have not been able to find one on this forum or using google. Perhaps a pointer or two? I'm trying to update my main navigation bar for my site into a something a bit more useful and clean. I've gotten it to work pretty much exactly as I want to in FF and Opera, but of course it's displaying very wrong in IE. I thought I had found the code needed to fix IE, but I've either used it incorrectly, or it's just not the right bit of code. Here's a page with the navbar live: http://www.skullcrow.com/community_upload.php Here's the css being used: Code: /* horizontal drop down navbar - basic formatting */
#centering_wrap {width:100%; position:relative;}
#menu {margin:0 auto;width: 955px;font: bold 11px/16px arial, helvetica, sans-serif;color:#666;} /* Main width and default font properties */
#menu ul {list-style: none;margin: 0;padding: 0;float: left; line-height:42px;} /* Main format for top categories */
#menu ul ul{ position:relative; top:35px; left:5%; width: 90%;} /* child element widths */
#menu ul li{ background-position:bottom left;} /* set nav bg position */
#menu ul li:hover{ background-position:top left;} /* set nav bg position hover position */
/* Positioning popouts (2nd level only) */
#menu li {position: relative;} /* make "ABSOLUTE" work correctly */
#menu ul ul {position: absolute; z-index: 500;} /* prevent menu from "pushing" contents down */
#menu ul ul ul {position: absolute; top: 0; left: 100%;} /* move child elements to the side */
/* Hover behavior */
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;}
/* Additional text formatting */
#menu a {display: block;width: 100%;height: 100%;}
#menu ul ul li {
font: bold 11px/16px arial, helvetica, sans-serif;
border-width: 0px 1px 1px 1px;
border-style: solid;
border-color: #ccc #323E6B #456594 #323E6B ;
margin: 0;
padding: 3px 4px;
background: #2B3344;
}
#menu ul ul a {color: #CCC;text-decoration: none;}
#menu ul ul a:hover {color: #FFF;background:#06F;}
...and here's the html from the menubar (which is contained in a separate php.includes, if that matters at all): Code: <div id="centering_wrap">
<div id="menu">
<ul style="width:195px;">
<li style="background-image:url(../images/nav_com_home.png);"><a href="http://www.skullcrow.com/" alt="Home"> </a>
<ul>
<li><a href="http://www.skullcrow.com/">Storefront</a></li>
<li><a href="http://www.skullcrow.com/community_home.php">Community</a></li>
</ul>
</li>
</ul>
<ul style="width:188px;">
<li style="background-image:url(../images/nav_com_store.png);"><a href="http://www.skullcrow.com/" alt="Store"> </a>
<ul>
<li><a href="http://www.skullcrow.com/">Shirts</a></li>
<li>Hats</li>
<li>Stickers</li>
<li>Misc Stuff</li>
</ul>
</li>
</ul>
<ul style="width:188px;">
<li style="background-image:url(../images/nav_com_community.png);"><a href="http://www.skullcrow.com/community_home.php" alt="Community"> </a>
<ul>
<li><a href="http://www.skullcrow.com/forum">Forum</a></li>
<li><a href="http://www.skullcrow.com/community_upload.php">Upload Photos</a></li>
<li><a href="http://www.skullcrow.com/community_designers.php">Submit Shirt Designs</a></li>
<li><a href="http://www.skullcrow.com/skullcrow_blog">SkullCrow Blog</a></li>
</ul>
</li>
</ul>
<ul style="width:188px;">
<li style="background-image:url(../images/nav_com_help.png);"><a href="http://www.skullcrow.com/help.php" alt="Help"> </a>
<ul>
<li><a href="http://www.skullcrow.com/help.php">Contact Us</a></li>
<li><a href="http://www.skullcrow.com/forum/faq.php">FAQ</a></li>
<li><a href="http://www.skullcrow.com/aboutus.php">About Us</a></li>
</ul>
</li>
</ul>
<ul style="width:196px;">
<li style="background-image:url(../images/nav_com_otherstuff.png);"><a href="#" alt="Other Stuff"> </a></li>
</ul>
</div>
</div>
...and finally, here's the small snippet of code I used up in the header of the main php file that I thought was suppose to fix the display issue but didn't: Code: <!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(css/csshover3.htc);
font-size: 100%;
}
#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;}
#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}
</style>
<![endif]-->
That last bit is contained at the very of the header, and is the very last item before the </head> tag. In addition to the other 'adjustments', it's also suppose to be including the csshover3.htc file that I thought was suppose to fix a lot of display problems. The site I got that file from is he http://www.xs4all.nl/~peterned/csshover.html Whatever help is always very appreciated. I'm still sort of a css newb, although I think I'm starting to understand more, but IE is a bastard and I think most web developers would probably agree. Thanks again. Hi, I have a two column CSS layout - the stylesheet and web page that uses it are attached. I tried to put a menu in the left column (technically div) - of this web page. This is a menu that uses JS mouseover and mouseout to set the style of the children menus to block or none - to show or hide the children or submenu items. onmouseover="document.all.child1.style.display='block' onmouseout="document.all.child1.style.display='none' When you mouseover the menu item, children menu items underneath it are supposed to be displayed, but they're not. Please look at the style sheet - and web page. Any idea why this menu works outside of the CSS two column layout, but not when I place the code inside this layout?????? Thanks Vmusic Hi all! I have just started a not so small project converting my layouts to EM units. I have got so far and have a nav menu based on nested lists. (This code was saved by ie and then formatted cleanly for inclusion here, so please ignore the capitals for tags and lack of quotation marks). Quote: <DIV id=topNav> <UL id=nav> <LI class=long><A class="firstParent selected" href="http://www.wellandpower.net/" alt="Diesel Generator Sets">Generator Home</A></LI> <LI class=long><A href="http://www.wellandpower.net/index.php?wwwreq=www_products">Generator Products</A> <UL> <LI><A href="http://www.wellandpower.net/index.php?wwwreq=www_products">Generator Product Range</A></LI> <LI><A href="http://www.wellandpower.net/gallery/">Generator Image Gallery</A></LI> <LI><A href="http://www.wellandpower.net/perkins_diesel_generator/WP150/index.php?wwwreq=www_certification">Generator Certifications</A></LI> </UL> </LI> <LI class=short><A href="http://www.wellandpower.net/index.php?wwwreq=www_services">Services</A></LI> <LI class=short><A href="http://www.wellandpower.net/index.php?wwwreq=www_about">About Us</A></LI> <LI class=short><A href="http://www.wellandpower.net/index.php?wwwreq=www_contact">Contact Us</A></LI> <LI class=short><A href="http://www.wellandpower.net/perkins_diesel_generator/WP150/index.php?wwwreq=www_support">Support</A> <UL> <LI><A href="http://www.wellandpower.net/index.php?wwwreq=www_support">Generator Support Page</A></LI> <LI><A href="http://www.wellandpower.net/forums/" target=_blank>Diesel Generator Forums</A></LI> <LI><A href="http://www.wellandpower.net/index.php?wwwreq=www_support_spares">Diesel generator Spare Parts</A></LI> <LI><A href="http://www.wellandpower.net/index.php?wwwreq=www_links">DieselGenerator Support Links</A></LI> </UL> </LI> <LI class=short><A href="http://www.wellandpower.net/index.php?wwwreq=www_tracking">Tracking</A></LI> <LI class=right><A href="http://www.wellandpower.net/wpmm-online3/index.php">WPMM Home</A></LI> </UL> </DIV> The nested list works perfectly when then font-size in the browser is set to medium or smaller. When it gets larger, it all seems to get bigger with no problem, except I get the menu "about us" shifting down about 0.3em or so. I tried deleting the "about us" menu, and the same effect happened but with the next menu along. I am 100% stummped where this extra space appears from!? Any ideas greatly appreciated. Quote: #topNav {font-size: 0.8em; background-color:#000066;position:relative;z-index:1000;margin:0;padding:0;height: 1.5em; } #topNav ul {padding:0em;margin:0em;list-style:none;background-color:#000066;} #topNav ul li {display:inline;position:relative;float:left;white-space:nowrap;} #topNav ul li.topNavRBorder {border-right:0.05em solid #ffffff;} #topNav ul li.short {width: 8em; border: 1px solid black;} #topNav ul li.long {width: 11em; border: 1px solid black;} #topNav ul li.right {float: right; width: 8em;} #topNav ul li ul li {width: 18em; z-index: 5000;} #topNav ul li a {z-index: 5000; border-left:0.05em solid #ffffff;padding:.3em 0.5em .3em 0.5em;height: 1.5em;display:block;text-decoration:none;color:#fff;background-color:#000066;white-space: nowrap;} #topNav p{padding:.3em 0.05em .3em 0.05em;height:0.1em;display:block;text-decoration:none;color:#fff;background-color:#000066;white-space: nowrap;} #topNav ul li a.firstParent {border-left:none;} #topNav ul li a.firstChild {border-top:0.05em solid #ffffff;} #topNav ul li a:hover {color:#99ccfb;text-decoration:none;} #topNav ul li ul li a {border-right:0.05em solid #ffffff;border-bottom:0.05em solid #ffffff;} #topNav li ul {position:absolute;display: none;} #topNav li:hover ul, #topNav li.displayBlock ul {display:block;} #topNav ul li a.selected {color:#99ccfb;} Hello All, I am developing my first website and have a problem with the logo and would appreciate some guidance. My logo consists of the website name in large text contained within an anchor tab to take the viewer back to the home page and then joined to the text on its right is a jpeg image which goes accross the rest of the web page. The trouble is if the browser size is reduced the image is placed below the website name. Can someone tell me how I join or fix the jpeg image to the text? Thanks in advance Alano Hi, I need some help inserting a Logo before my site Header. i'm do not know much about CSS as my former designer put this together and am now left in the lurch inserting my company logo. this is the current masthead code #masthead { padding:0; margin:12px 0 24px 0; height: 30px; position: relative; display:block; clear:both } #masthead h2, #branding h2 { float:left; text-transform:capitalize; margin:0; padding:0 } #masthead h2 a, #branding h2 a { color:#fff } #masthead .description, #branding .description { float:left; color:#999; margin: 10px 12px; padding-left:12px; border-left: 1px solid #999; font-size:11px } would appreciate anyone if you could help me with the code to insert a logo before the Title. Thanks! I am a total newbie to CSS + DIV. I have a logo that I am trying to piece together for a fluid page. The middle image is already in place, and I have it set to 100% width. I have one div, called "header." I need to know how to place the other 2 images at the right and left hand sides. They will, of course, be the static images, and the middle will be dynamically sized by the browser. Here is my CSS, so far for this portion: #header { position: absolute; top: 0px; right: 0px; margin: 0px; padding: 10px; background: url(images/CATScreenMiddle.png); width: 100%; height: 265px; font-family: verdana, arial, helvetica, sans-serif; font-size: 25px; Thanks for any help, in advance. Hello, What's wrong with my logo? I have created the logo with no white background but seems like it has , thus my css behind this? default.html Code: <!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> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="css/comersus.css" type="text/css" rel="stylesheet" /> <title>Untitled Document</title> </head> <body> <div id="header_top"> <!--begin of header_top--> <img class="bck_green" src="images/bck_green.jpg" alt=""/> <img class="bck_dark" src="images/bck_dark.jpg" alt=""/> <img class="um_logo" src="images/um_logo.jpg" alt=""/> </div> </body> </html> css Code: #header_top {
width:721px;
height:116px;
}
.um_logo {
position:absolute;
float:left;
z-index:1;
background:url(../images/um_logo.jpg);
width:93;
height:90;
}
.bck_green {
float:left;
background:url(../images/bck_green.jpg) repeat-x;
width:337px;
height:116px;
}
.bck_dark{
float:right;
background:url(../images/bck_dark.jpg) repeat-x;
width:383px;
height:116px;
}
-sorry this is photoshop related , link is not accessible anymore Please look at www clean and creative dot com in any browser on a PC or MAC and you'll see the logo.png show up ... BUT once you jump on a pc and view the site in Internet Explorer, the logo just disappears? Its weird because none of the styling is messed up, just a missing logo.png? Can anyone help me out on this? Hello everyone! I'm a little new to HTML/CSS, I'm in a summer course which is "Intro to Web Design." I've been running into problems lately with my final project design for a site. My TA's aren't exactly helpful at all, I emailed them with this problem and I got no response at all. This is an online course for my school, because I'm three hours away from campus for the summer. So the main problem I have is that there are these two gray spaces, one above the navbar, and one below the navbar. As you can see, the one above is all the way across. The one below is on the outside but it looks like the main content is just pushed up but the outside image (used on repeat-y) isn't. The site is here (hosted on the class server): Code: http://2007.ispace.ci.fsu.edu/~ojs10/cgs2821/final/home.html What I want for a solution is to have the image and the main content flush against the navbar. If you guys have any other suggestions I greatly appreciate it! Other things: Everything is valid for HTML5 and CSS3. I shrank the CSS by using those optimizers also. This problem occurs in every browser. |
|||||||