I am trying to access Foundation 4 sections by clicking a link on a page. Here's my problem explained in more detail. This is what sections in Foundation look like :
And here's the code for it.
<div class="section-container vertical-tabs" data-section="vertical-tabs">
<section>
<p class="title" data-section-title>Section 1</p>
<div class="content" data-section-content>
<p>Content of section 1.</p>
</div>
</section>
<section>
<p class="title" data-section-title>Section 2</p>
<div class="content" data-section-content>
<p>Content of section 2.</p>
</div>
</section>
<section>
<p class="title" data-section-title>Section 3</p>
<div class="content" data-section-content>
<p>Content of section 3.</p>
</div>
</section>
</div>
When you click on Section 1, it opens the content of section 1. The same thing for section 2 and 3. Now, is there a way to post a link somewhere on a site, for example link to Section 1, 2 and 3. When you click on one of them, it will go on the sections part and will open the right section content based on which linked we clicked on.
http://foundation.zurb.com/docs/components/section.html
Checkout deep linking section for examples of how to get this functionality working.
Here is a quick example;
<div class="section-container auto" data-section data-options="deep_linking: true">
<section>
<p class="title" data-section-title>Section 1</p>
<div class="content" data-slug="section1" data-section-content>
<p>Content of section 1.</p>
</div>
</section>
<section>
<p class="title" data-section-title>Section 2</p>
<div class="content" data-slug="section2" data-section-content>
<p>Content of section 2.</p>
</div>
</section>
</div>
To get the linking to work just add the ID to your URL. eg. http://someurl.com/#section2
Related
<div class="level is-mobile name_logo">
<div class="level-left">
<div class="level-item has-text-centered">
<p class="heading">Example 1</p>
<p class="is-size-5 has-text-weight-bold title">Example 2</p>
</div>
</div>
In this example I use is-mobile class do make force classes inside to display in a row. The problem is this is forcing the <p class="heading"> and <p class="title"> to be displayed in a row to. Not even using <br> tag I am having success to display these two <p> in column. Is there anything I can do?
Are you trying to do something like the Mobile Level example on the Bulma docs? https://bulma.io/documentation/layout/level/#mobile-level
.level-item is set to display:flex, which makes the level items show in rows. In the example provided in the Bulma docs, there's an extra div wrapping the .heading and .title elements. Add that extra div and the text will show on two lines.
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css" rel="stylesheet"/>
<div class="level is-mobile name_logo">
<div class="level-left">
<div class="level-item has-text-centered">
<div>
<p class="heading">Example 1</p>
<p class="is-size-5 has-text-weight-bold title">Example 2</p>
</div>
</div>
</div>
</div>
For example I have three sections:
<section id="about">
<p>I'm the about section</p>
</section>
<section id="education">
<p>I'm the education section</p>
</section>
<section id="work">
<p>I'm the work section</p>
</section>
How can I rearrange these sections after taking position input for each section via HTML from the user?
Please help me with used HTML5 tag main. Is this example used semantically correct?
<main role="main">
<article role="article">
<h1>Heading 1</h1>
<p>Text text text</p>
</article>
<aside role="complementary">
<div class="box"></div>
<div class="box"></div>
</aside>
</main>
Ok thanks, and this examle is correctly?
<div class="main">
<article role="article">
<h1>Heading 1</h1>
<p>Text text text</p>
</article>
<aside role="complementary">
<div class="box"></div>
<div class="box"></div>
</aside>
</div>
The <main> tag specifies the main content of a document.
The content inside the element should be unique to the document. It should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms.
source http://www.w3schools.com/tags/tag_main.asp
In Your example main tag contain aside, its not correct.
I am trying to build an interface with Bootstrap 3 which looks like this:
--------Fieldset-------- -----Fieldset-----
Col 1 Col 2 Some data
Some data Some data Some data
Some data Some data Some data
Some data Some data Some data
------------------------Fieldset------------------------
Some large <textarea>
I am not sure how to go about accomplishing this, though. My concerns are the multiple columns in one fieldset, and the bottom fieldset spanning the length of the two fieldsets above it. I know to make stacked fieldsets all I need to do is nest them, but that then restricts the length of the children fieldsets.
Is what I'm doing even possible? Is it going to get ugly like I feel like it will?
Thanks in advance for any assistance!
I should have provided this anyway - sorry about that. Here's some markup that (should) get you rolling.
HTML
<div class="row">
<div class="col-md-6">
<div class="mycol-1">
<p>Fieldset</p>
<div class="row">
<div class="col-md-6">
<p>Col 1</p>
<p>Some data</p>
<p>Some data</p>
<p>Some data</p>
</div>
<div class="col-md-6">
<p>Col 2</p>
<p>Some data</p>
<p>Some data</p>
<p>Some data</p>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="mycol-2">
<p>Fieldset</p>
<p>Some data</p>
<p>Some data</p>
<p>Some data</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="mycol-3">
<p>Fieldset</p>
<p>Some large textarea</p>
</div>
</div>
</div>
CSS:
.mycol-1 { background-color: red; }
.mycol-2 { background-color: pink; }
.mycol-3 { background-color: orange; }
I only used the css as a way to show the boundires. You will probably want to at least rename the classes (or delete them all together). Hope this helps!
I'm a bit puzzled how I'm supposed to use the HTML5 <header>, <section>, and <footer> tags. Currently, I can't work out whether to use them like this:
<section id="example_section">
<header>
<h1>Example Section</h1>
<p>etc</p>
</header>
<p>Content para 1</p>
<p>Content para 2</p>
<p>Content para 3</p>
<footer>
Wasn't that swell?
</footer>
</section>
Or like this:
<header>
<h1>Example Section</h1>
<p>etc</p>
</header>
<section id="example_section">
<p>Content para 1</p>
<p>Content para 2</p>
<p>Content para 3</p>
</section>
<footer>
Wasn't that swell?
</footer>
Or compromising, like this:
<section id="example_section_wrapper">
<header>
<h1>Example Section</h1>
<p>etc</p>
</header>
<section id="example_section">
<p>Content para 1</p>
<p>Content para 2</p>
<p>Content para 3</p>
</section>
<footer>
Wasn't that swell?
</footer>
</section>
I've included the ID's to show the intended meaning of the sections. I realise that they are unnecessary. Which method is correct?
All are correct in one way another but this is more better then any other
<section id="example_section_wrapper">
<header>
<h1>Example Section</h1>
<p>etc</p>
</header>
<section id="example_section">
<p>Content para 1</p>
<p>Content para 2</p>
<p>Content para 3</p>
</section>
<footer>
Wasn't that swell?
</footer>
</section>
Couple of best practice and tuts links
HTML 5 and CSS 3: The Techniques You’ll Soon Be Using
HTML5 Overview (*best practice block)
Designing for the Future with HTML5+CSS3 : Tutorials and Best Practices
A section can contain a section but a better general container is actuall article. Instead of this:
<section id="example_section_wrapper">
<header>
<h1>Example Section</h1>
<p>etc</p>
</header>
<section id="example_section">
<p>Content para 1</p>
<p>Content para 2</p>
<p>Content para 3</p>
</section>
<footer>
Wasn't that swell?
</footer>
</section>
You might want to use this:
<article>
<header>
<h1>Example Section</h1>
<p>etc</p>
</header>
<section id="example_section">
<p>Content para 1</p>
<p>Content para 2</p>
<p>Content para 3</p>
</section>
<footer>
Wasn't that swell?
</footer>
</article>
Like this it feels natural to have various sections in one article.
The tags themselves are pretty abstract, right now. You can use them in any of the ways described above, but your third option is most-correct.
They can all make sense, but the first one is the most correct, in general.
Assuming the whole snippet represents a real section (content about the same topic) it makes sense for it to have a header and a footer inside of the section itself. Also a section needs a heading (h1-6, at least one. Possibly with a hgroup if more than one) and it's missing from your second and third example.