I want to iterate through all blocks that are placed in a specific region to achieve the following (only within this specific region):
Extract their title to output them like that:
<ul>
<li>Title of Block 1</li>
<li>Title of Block 2</li>
<li>Title of Block 3</li>
</ul>
Display their content like that:
<div>
<div>Content of Block 1</div>
<div>Content of Block 2</div>
<div>Content of Block 3</div>
</div>
Any ideas how I can achieve that?
Related
I am having trouble arranging the text inside a div tag in dreamweaver. I have tag for the main body of my page and I want to place the text freely; wherever I want, but dreamweaver is not allowing me to do so. When I click tab inside the div it does not work. No matter what I do I give a single space between my words. For example I want to arrange my text in the following way:
Please click on items for detail:
Item_one Item_two Item_three Item_four Item_five
Item_six Item_seven Item_eight Item_nine Itme_ten
Thanks
What you are looking for, might look similar to this:
<div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<br />
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
</ul>
</div>
This is the CSS:
ul li {
list-style: none;
display: inline-block;
}
It is not recommended to use a div for every element that you are creating. It is easier to use unordered lists and style them according to what your project requires.
Hope it helps!
The easiest way to achieve this would be to use display: inline-block for every item.
Like this:
<div style="width: 100%">
<div style="display: inline-block">Item_one</div>
<div style="display: inline-block">Item_two</div>
</div>
<div style="width: 100%">
<div style="display: inline-block">Item_four</div>
<div style="display: inline-block">Item_six</div>
</div>
etc. Please do note that it'll only work if there's enough space for the div to display itself in a line; otherwise, you won't see any effect.
Hope this helps.
I'm trying to center a block of text (not each line of text) within a Bootstrap carousel item. If I use a div within a carousel item and specify the classes "container" and "center-block", the block of text shifts right a bit, but isn't centered horizontally. I was hoping to avoid using fixed margins to center the text. Here's an example of what I've tried:
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<div class="container center-block">
<h3>List</h3>
<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>
<p> this is a test of a longer string</p>
</div>
</div>
</div>
</div>
I have created a landing homepage in wordpress (index.php) that uses fullpage.js. This page also has subpage links that lead to outside pages (which are not integrated to the index.php).
When I click to the main links everything is ok, it rolls perfectly (and I love the key and mousescroll implementation). But when I push back from the subpage to go to the original link, or from the menu (see code below), every page is scrambled. It does not continue from the point I clicked the sublink but it regards it as the starting point rendering all above pages useless to navigate.
in my homepage (index.php) my links are created in the following format:
<div class="menu-navigation">
<ul class="menu">
<li class="[wordpress classes] active">Slide 1</li>
<li class="[wordpress classes]">Slide 2</li>
<li class="[wordpress classes]">Slide 3</li>
<li class="[wordpress classes]">Slide 4</li>
<li class="[wordpress classes]">Slide 5</li>
</ul>
</div>
<section id="#slide1" class="section active">
[content]
</section>
<section id="#slide2" class="section">
[content]
</section>
<section id="#slide3" class="section">
[content]
</section>
<section id="#slide4" class="section">
[content]
</section>
<section id="#slide5" class="section">
[content]
</section>
The only difference is that when I jump to a sublink page the menu becomes:
<div class="menu-navigation">
<ul class="menu">
<li class="[wordpress classes]">Slide 1</li>
<li class="[wordpress classes]">Slide 2</li>
<li class="[wordpress classes]">Slide 3</li>
<li class="[wordpress classes]">Slide 4</li>
<li class="[wordpress classes]">Slide 5</li>
</ul>
</div>
As far as I can tell it's because my implementation uses hash, which is lost between back and forth. Is there a way to show the hash on the url?
As detailed in the documentation for the menu option:
Be careful! if you use anchors, they can not have the same value as any ID element on the site (or NAME element for IE).
So, you should avoid using id elements such as #slide1, #slide2... etc.
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
<section id="idone">
<h3>Item 1</h3>
<p>Subsection 1</p>
</section>
<section id="idtwo">
<h3>Item 2</h3>
<p>Subsection 2</p>
</section>
<section id="idthree">
<h3>Item 3</h3>
<p>Subsection 3</p>
</section>
Pretty much, i have some code like shown above, and when i click the link in the sub navigation i want it to jump to the section of text. It does that, but it seems because of a fixed navigation bar i have which is 41px the heading for the section of text is hidden, but i want that shown. If someone could show me how to offset the scrolling that would be great, thanks.
I am using Zurb Foundation 4 and I need my top bar navigation to be centered as .large-12.columns
I tried the following (but it doesn't work)
<div class="row">
<div class="large-12 columns">
<nav class="top-bar">
<ul class="title-area">
...
</ul>
<section class="top-bar-section">
<ul class="left">
<li>Link 1</li>
<li>Link 2</li>
</ul>
<ul class="right">
<li>Link 3</li>
<li>Link 4</li>
</ul>
</section>
</nav>
</div>
</div>
Update:
I created jsFiddle based on Foundation Example
If the browser size is big, the navigation width changes. But I want it to be centered fixed as main content.
As the Foundation 4 docs saying :
http://foundation.zurb.com/docs/components/top-bar.html
If you want your navigation to be set to your grid width, wrap it in
div class="contain-to-grid".
So try using the following :
<div class="contain-to-grid">
<!-- Your nav bar -->
<nav class="top-bar">
<ul class="title-area">
<!-- Title area here... -->
</ul>
<section class="top-bar-section">
<ul class="left">
<!-- Title area here... -->
</ul>
<ul class="right">
<!-- Title area here... -->
</ul>
</section>
</nav>
</div>
Hope this helps !
If I understand correctly what you want, you just need to wrap your nav.top-bar element in a div with class contain-to-grid.
<div class="row">
<div class="contain-to-grid">
<nav class="top-bar">
<ul class="title-area">
...
</ul>
<section class="top-bar-section">
<ul class="left">
<li>Link 1</li>
<li>Link 2</li>
</ul>
<ul class="right">
<li>Link 3</li>
<li>Link 4</li>
</ul>
</section>
</nav>
</div>
</div>
The foundation framework allows nested rowthe first <div class="row"> get the width of the page but you can put another <div class="row">into it which is going a smaller 12-columns-max-width.
You can check the docs related to this feature here : http://foundation.zurb.com/docs/components/grid.html
Are you sure the row you paste in the question is the first one in your HTML code ? If it is, can you paste a link for a demo of your code please?
EDIT
If i understand it rights, it pretty simple to do with CSS :
.top-bar {
max-width: 900px;
margin:auto;
}
<div class="contain-to-grid">
<nav class="top-bar" data-topbar role="navigation">
<div class="row">
<div class="large-12 columns">
<ul class="menu" data-responsive-menu="accordion">
<li>1
</li>
<li>2
</li>
<li>3
</li>
<li>4
</li>
</ul>
</div>
</div>
</nav>