I'd like to create a simple set of tabs with HTML / CSS.
Can someone show me how to display different content under each of the tabs?
Thanks so much!
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_topnav
The example that you gave was meant as an navigation menu. It links to different pages. That has the effect that the content of the site changes, if that is what you mean.
If you want real tabs, then you have to use Javascript for that. There are a lot of tutorials on how to do that and also a lot of pre-made tabs, so I won't go into that here.
Related
I have recently begun assisting updating my company's website. We have a few video playlists that I noticed have a ton of extra navigation buttons. I have an attached screenshot with the navigation circled.
I cannot figure out where the extra buttons are coming from, so I am unfortunately not even sure what the best questions are to ask here. The best I can find from digging around in the CSS are that there are references to mejs and aria. For all of my toying around. I have not been able to isolate one set of the buttons to go away and still show standard navigation buttons.
Thank you!
Check CSS Styling for input[type='button'] or button in your CSS.
I'm just starting my programming but I need help.
I built my site from wordpress template. Made a lot of customization on my own but I have trouble by creating BURGER MENU on mobile devices.
I'm not sure how I can rewrite chosen template navigation bar menu to burger. Let me know if anyone could help me.
You could do it a few different ways, but personally, it's easier to place it with javascript and hide it with css...
Usually, you would create an element with javascript and attach it to a location on your page. For the burger itself, you've got the option of using drop-shadows, three divs or the unicode character for it. You can read more about those options here: https://css-tricks.com/three-line-menu-navicon/
Finally, if you want to add animation to your menu items (for opening / closing ) here's something that you can read to understand how it's possible to achieve: https://jonsuh.com/hamburgers/
I have a big old site that I have been growing over the years,
www.vintagewatchstraps.com. Almost all pages validate as HTML5.
Now Google has started grumbling that it isn't mobile friendly. I can add the "meta name=viewport" business, and I understand that I will need to change things like widths to be in % rather than pixels, but the thing that is bothering me most is the navigation.
I have been reading up about making a mobile friendly CSS navigation bar, at Medialoot and Lisa Catalano, but the examples they give have only a few pages. If I displayed my navigation as a vertical list on a small screen as they suggest, my 70+ navigation links would go on forever. All the examples of adapting a site to mobile that I have found just don't cover sites having lots of content and pages.
Any suggestions as to how to deal with this would be gratefully received.
Kind regards - David
Some ideas:
do you actually need all those links in the menu? Try only including the main things people want to see, as people aren't likely to read your entire website on a mobile device anyway.
have two layers of menus: a heading reveals another slide out menu with subcategories
put a search box at the top of your menu
I'm designing a blog in Wordpress using the Thesis Framework and there is an issue that I just can't seem to find a fix to:
Basically everything is fine on the main page, but when I go into any individual post, the side bar is getting pushed off and showing up right down the button of the page (below the comments).
It's pretty obvious that there is some kind of sizing/width issue and I've played around with a lot of the widths in firebug but just can't seem to find where it's going wrong. I can't find a difference between the main page and post pages either.
Any help would be greatly appreciated! A specific solution would be ideal because I've already spent a lot of time tinkering with it to try and address the issue.
Thanks in advance for any help!
I had this problem as well with the thesis framework. I found two reasons where it produced a similar mistake on my blog:
The first reason is that the sidebar + content area is bigger than you container. That would make the sidebar go below the the content. Make sure also that the content of the sidebar is also smaller than the sidebar. I had a Facebook box in the sidebar that was bigger, thus pushed the whole sidebar below the content.
An other reason was a plugin that I had installed. If you have any plugins installed try and see if one of those is interfering with the sidebar layout.
If that doesn't work you can also post a snippet of the code so that I can look at it.
I often have this problem when editing a page in html (text) mode and forget a closing tag, most notably a . If using tables, a missing , or similar will cause this.
So, in brief, make sure all your opening tags have a corresponding close tag.
Make sure the html is syntax-error free. I had the same problem and the culprit was a wrong closing tag (<b/>)
i want to make a css/jquery tabbed for an "Admin panel", so it will all be loaded without the need to refresh.
im going to do it dynamicly but its a small exercise site so i know ill have only 3-4 main "areas" to edit in the panel (the tabs in the top).
the thing is i have other links for each editing area.
is there a way to do it with jquery, without the need of putting all the code in 1 page, in 3-4 divs and make them all invisble except the tabed being choosen(like ive seen in examples)?
in examples i saw all the content in one page, and if adding the top tabs and also the pages of each area(lets say delete, edit etc) its alot of code.
is there a comfortable way of doing it, while being able to make it dynamicly in the future?
edit to answers:
i already made tab from the this tutorial:
http://net.tutsplus.com/html-css-techniques/how-to-create-a-slick-tabbed-content-area/
the thing is, at first in the admin menu i have like 13-14 html pages(before it becomes php) with different operations.
how would you take 13 pieces of code(they have the layout and the admin+admin menu yet the content is changed) that should be in different files, and make them show up in the same tab?
would you have to split each code to only its div, and then load it someway?
from the tutorial above, they used all of the content in one page and used invisible......
how would you load 13 pieces?
Have a look at the jQuery UI Tab Widget:
you can load the tab content statically or dynamically with AJAX
it uses the jQuery CSS framework
it's easy and full of sample code