Is it possible to do this layout and how would you do it?
The container has a border, just not on top where the tabs are. Here only the selected tab has a top border. The text of the tabs should center, left align would be okay too. But the text of the first tab must not start before the image (there should be the same space on the left).
Currently the html looks like this but can be changed if needed:
<section class="grid-100 grid-parent tabs">
<header>
<ul>
<li class="selected">Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
</ul>
</header>
<article class="tab visible">content</article>
<article class="tab">content</article>
<article class="tab">content</article>
</article>
</section>
This layout is possible, but as mentioned you'll need to post your CSS.
Have a look at Twitter Bootstrap which allows you to placed tabbed content within a responsive framework.
You'll need to add a bit of JS to get this running, you can either do this by adding "bootstrap.min.js" or just add the tab script by itself. Here's a direct link to the tab JS documentation http://getbootstrap.com/2.3.2/javascript.html#tabs
Your structure can be used for any tabbed interface or an accordion. Please provide your css for your tabs. You can use bootstrap tabs as mention in this post. There some other tabbed solution like foundation tabs and jQuery ui tabs. If your looking for a premium responsive tabbed solution, have a look zozo tabs, which has a lot of examples.
http://zozoui.com/tabs
cheers
FariDesign
Related
can you help me understand what bootstrap is? I know people is it for styling pages but can you clarify it to me? A big company like Twitter, Facebook or YouTube can use it?
Bootstrap is a very nice set of "styles" for all elements of any webpage. With it, a developer can focus on what they want to build (i.e. the elements) and very easily apply all the styling (including a lot of the colours, positioning, layout, movement/javascript) by simply adding few lines of code at the start of the webpage and adding a bootstrap class to an element, or wrapping parts of their webpage in a <div>.
Here is an excellent example of a very basic site that is made to look professional very quickly using very simple bootstrap. Click on "full page demo", then view -> view source to see the source code.
You can see some classic bootstrap classes like
<div class="jumbotron text-center">
and
<div class="container-fluid">
Bootstrap is a free and open-source front-end framework developed with css and javascript.
For styling and other change of the html, we make CSS classes and ids. And the main work we do in the css file and js file . But in bootstrap there is already some files which have many built in classes and ids .
After adding bootstrap to a html file we can do many work by only calling those classes and ids .
like ,
<p class="text-center">Center aligned text on all viewport sizes.</p>
only calling the class "text-center" we can align text center . No need to do any other css .
Many big company like Twitter, Facebook or YouTube can use it. On the other hand some make their custom files like bootstrap.
I'm having an functionality issue with a web page that I'm working on.
I'm using <section> tags to define sections that I can jump to from the navigation bar.
When I click the nav link 'HOTEL' it should take me to <section id="hotel">. For some reason, this isn't happening. I am taken to <section id="events".
There do not appear to be any issues with the other section tags, is there anything that jumps out as an obvious problem?
http://robertmegone.com/wedding/
Just add clear:both css to your section hotel
I'm a beginner in HTML/CSS and was using this Bootstrap theme for making my personal website. As you can see, the nav bar has Top, Work, Portfolio and Contact. I want to rename Top as About. For that, I replaced Top by About wherever necessary in index.html but the result isn't what I desire. The website gets messed up with the About being an inactive link. Should I change the CSS files and do the replacement there as well?
Ok so all you need to do is change <article class="container" id="top"> to <article class="container" id="about">
And change Top to About.
Now if there is CSS associated with #top you will need to change that to #about. That is all you should need to do.
I am trying to create a menu using HTML5 ( type toolbar ). It turns out that no browser currently supports the toolbar type. (Thanks Zach for pointing me at this) What would be the best implementation that works for Chrome and Firefox ?
Currently, I am thinking about continuing using the menu element as per HTML5 spec and using CSS to style it as needed and JS to add behaviour.
The following mailing list posting explains the current intent for menus of type toolbar:
Toolbars are nothing more than a with the element name .
There's no magic at all, no special content model, it's all CSS for
styling, you use regular form controls to fill the toolbar.
from http://lists.w3.org/Archives/Public/public-whatwg-archive/2012Dec/0264.html
Hence, I am daring to say, that I can use menu for all browsers, even if a browser does not explicitly support the HTML5 semantic of the menu element, because it will still display it as a block since the user agents, I have checked ( i.e. firefox,chrome,safari,ie) , style menu with display:block.
If you're open to using a bit of jquery, and if i understand your question, then a simple
<div data-role="footer">
<div data-role="navbar">
<ul>
<li>Summary</li>
<li>Favs</li>
<li>Setup</li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
would do the trick.
read more about navbar widgets here: http://demos.jquerymobile.com/1.4.1/navbar/
I would take a look at the bootstrap menu, it works (IMO) much like a toolbar, and it's got a wide support on a lot of browsers.
It's also got glyphicons so you can give your buttons icons beside the labels easily
I want to implement a Dashboard-style navigation in a mobile web application using jQuery Mobile: http://mobile-patterns.com/dashboard-navigation
Are there any useful templates or good approaches to do so? Of course, I could build a grid-based content page, containing the icons and links. But thanks to the popularity of dashboard navigations, I'm looking forward for an easier solution.
Thanks in advance
This article talks about making custom icons for use in jquery mobile. I would follow that for creating my icons, and then refer to jqmobile's navbar documentation for instructions on how to build a 3 x 3 column list:
<div data-role="navbar">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
Then further down in that same article is a, Using 3rd party icon sets section that will explain how to add in your icons. Since you won't want the default box behind your icons, you could add another css class to your container div where you can override jquerymobile's "navbar" class and hide the box:
<div data-role="navbar hidebox">
Note: When I'm working with jquery mobile, I import my own custom stylesheet after the jquerymobile css import. This lets me override classes that jquery mobile injects in to my code. This is where I'd override 'hidebox' class.
Also, this may help with building a 3 x 3 squared grid, since this developer was doing something similar (I know, the developer is using Sencha Touch but the discussions around it may help).