Jump to content

hybrid kill3r

Members
  • Posts

    136
  • Joined

  • Last visited

Everything posted by hybrid kill3r

  1. Hmm, I never really thought of the screen size issue with this... I will probably end up making a mobile version that will have a different user menu.
  2. So, I am designing a template for my new site. I have a main container that holds everything in the middle that is 960px wide. I tried adding a menu for user login, register, etc, above my banner and it just doesn't look good there. I thought of adding a jQuery menu to the side of the container that's always in the same place, regardless of scroll position. What I want to do is have just a small, rounded square button that the user clicks on. When clicked on, it will then slide out and then dropdown a menu with links for login, registration, etc. I will include screenshots of my design from photoshop. I am basically looking for a menu like this that already exists that I can download. Or, if anyone knows of any good tutorials, that would work too. This is what I want it to look like when it's "closed". Basically the default "onload" toggle. This is what I want it to look like when it's "open". When a user clicks on it.
  3. What I am trying to accomplish is to get the image block to the center of the banner. What's happening is the left edge of the image is what's in the center. How would I get the actual center of the image to the center of the banner? I hope this makes sense... lol. Here is what I am currently getting: This is what I would like... you can ignore the difference in fonts, etc. I just want to know how to actually center the image... lol. This is my css: #profile-banner { background: #000; height: 267px; border-bottom: 1px solid #999; margin: 0px 0px 25px 0px; text-align: center;} #profile-banner h1 { font-size: 36px; font-family: Piximisa; letter-spacing: 5px; padding: 15px; margin: 0px;} #profile-banner p { margin: 0px; padding: 0px; } #profile-banner .logo { top: 125px; background: #333; border: 1px solid #666; width: 250px; height: 250px; position: absolute; margin: 0 auto; padding: 0px;} This is my HTML <div id="profile-banner"> <h1>Some Team Name</h1> <p> Some catchy slogan. </p> <img src="{BLANK-LOGO}" alt="" border="0" class="logo"> </div> Thanks for your time.
  4. Try adding the "padding" attribute to the anchor within your span tag. E.G. span a { padding: 2px; } This will add space around your anchors so you wouldn't notice the change when hovering. You might have to play with the value of the padding attribute until you achieve the results you want.
  5. Ahh yes, your statement about offsetHeight makes total sense. The zIndex, on the other hand, not so much.. lol. What element's zIndex be set to instead of the parentNode? I tried commenting out "this.style.zIndex = 0" in the mouseout function, but that didn't change anything.
  6. So, I've been trying to learn JavaScript, but I'm having a bit of trouble with a code I've been trying to get working. It's a vertical hover menu. Basically, a horizontal navigation menu with submenus that appear when you hover over a link. The main menu appears correctly on page load. I hover over a list item with a submenu in it and the submenu appears. But it's about half way down the page from the main menu. Once I mouse-out, the submenu disappears, but so does the main menu. If I hover away from the main menu item with the submenu in it, the main menu remains until I mouse-out from that. I hope I've explained my problem well enough so that you know what I mean. I can't seem to figure out how to fix this. var menuIds=["navigation"]; function generateMenus(){ for(var i = 0; i < menuIds.length; i++){ var menuLists = document.getElementById(menuIds[i]).getElementsByTagName("ul"); for(var t = 0; t < menuLists.length; t++){ menuLists[t].style.top = menuLists[t].parentNode.offsetHeight + "1px"; menuLists[t].parentNode.onmouseover = function(){ this.style.zIndex = 100; this.getElementsByTagName("ul")[0].style.visibility = "visible"; this.getElementsByTagName("ul")[0].style.zIndex = 0; } menuLists[t].parentNode.onmouseout = function (){ this.style.zIndex = 0; this.getElementsByTagName("ul")[0].style.visibility = "hidden"; this.getElementsByTagName("ul")[0].style.zIndex = 100; } } } } if(window.addEventListener){ window.addEventListener("load", generateMenus, false); } else if(window.attachEvent){ window.attachEvent("onload", generateMenus); } #navigation { background: url(images/navigation_bg.gif) repeat-x; border-top: #666666; border-bottom: #333333; height: 59px; margin: 0px; padding: 0px; text-align: center; line-height: 59px;}#navigation ul { margin: 0; padding: 0; list-style-type: none;}#navigation ul li { position: relative; display: inline-block; float: left;}#navigation ul li a { display: bock; width: 120px; padding: 2px 8px; border: 0px; text-decoration: none; background: url(images/navigation_item_bg.gif) repeat-y left; color: #737373; font-size: 14px; font-weight: bold;}#navigation ul li ul { top: 0; left: 0; border-top: 1px solid #202020; position: absolute; display: block; visibility: hidden; zIndex: 100;}#navigation ul li ul li { display: inline; float: none;}#navigation ul li ul li a { width: 160px; font-weight: bold; text-decoration: none; background: #000; border-width: 0px 1px;}#navigation ul li ul li a:hover { background: #333333;}
  7. Ok, so it's kind of hard for me to explain this, so I'm going to show you as well. I want a heading that has a line through it gonig all the way across to the other side of the div, but I don't want it to go through the heading. Here's what I mean: How would I achieve something like this?
  8. I have a main banner for a template that I am designing. I want the navigation div to overlap the banner by half the height of the navigation bar... basically, the middle of the nav bar would align with the bottom of the banner. Here's an example of what I mean. How do I achieve this?
  9. So, I need a javascript-powered menu that drops down when you hover over a single link. Basically, I need something like in the link below, but without the animation. Anyone know where I can find one? http://www.javascriptkit.com/script/script2/outlinemenu.shtml
  10. So, I have a javascript function that when a user clicks on a link with this attached, it opens a confirmation asking if they want to continue. But instead of using onclick everytime I want to use it, I want to use something like rel="confirm" on the anchor. How would I do this? function confirmAction(hyperlink){ if(confirm(("Are you sure you want to do this? This action CANNOT be undone!!!")){ window.location = hyperlink; } else { return false; }}
  11. I want to be able to submit a form with a javascript anchor. I am using getElementById to submit the form, but how do I pass the arguement through that function? I've tried using single quotes and double quotes around "my-form" to pass it but it doesn't work. <a href="javascript::document.getElementById('my-form').submit();">Submit Form</a>
  12. I know there are probably a couple hundred posts regarding this issue, but I cannot for the life of me figure out how to center my horizontal list. I added a text align with a value of center to my ul tag and the body tag in my css file. I also added a margin of auto to the left and right sides. Does anyone know what is causing this? body { background: #292929; margin: 0px; padding: 0px; font-size: 12px; font-family: Verdana; color: #595951; text-align: center; }#navigation { background: url(images/navigation.png) no-repeat; height: 125px; border: 0px;}#navigation ul { list-style: none; margin: 0px auto; padding: 50px;}#navigation ul li { float: left; display: inline; padding-right: 25px;}#navigation ul li a { font-size: 14px; color: #fff; text-decoration: none;} HTML: <div id="navigation"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Resume</a></li> <li><a href="#">Services</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div>
  13. It's difficult nowadays to find a good htaccess tutorial on the internet. Since W3Schools makes awesome tutorials on basically everything else on web design and development, I think it would be an awesome idea for you guys to add some htaccess tutorials to your knowledge base. I'm sure there would be plenty of people that would use these.
×
×
  • Create New...