When using Foundation: Orbit Slider, the navigation arrows are not taking me to the next slide but going back to the index page each time.
Markup `
<div class="row full-width" id="portfolio">
<div class="orbit-container">
<ul data-orbit class="example-orbit orbit-slides-container">
<li>
<img src="/Users/benhare/Desktop/foundation/portfolio/assets/slider2.jpg" alt="slide 1" />
<div class="orbit-caption">
Caption One.
</div>
</li>
<li class="active">
<img src="/Users/benhare/Desktop/foundation/portfolio/assets/slider2.jpg" />
<div class="orbit-caption">
Caption Two.
</div>
</li>
<li>
<img src="/Users/benhare/Desktop/foundation/portfolio/assets/slider3.jpg" alt="slide 3" />
<div class="orbit-caption">
Caption Three.
</div>
</li>
</ul>
<!-- Navigation Arrows -->
Prev <span></span>
Next <span></span>
<!-- Slide Numbers -->
<div class="orbit-slide-number">
<span>1</span> of <span>3</span>
</div>`
Try the following. Remove the following classes and rows (they are added by the JS automatically):
example-orbit
orbit-slides-container
active
everything after the <\ul>
Add closing tag to the <div class="orbit-container">
So your code will be this:
<div class="row full-width" id="portfolio">
<div class="orbit-container">
<ul data-orbit="">
<li>
<img src="/Users/benhare/Desktop/foundation/portfolio/assets/slider2.jpg" alt="slide 1" />
<div class="orbit-caption">
Caption One.
</div>
</li>
<li>
<img src="/Users/benhare/Desktop/foundation/portfolio/assets/slider2.jpg" />
<div class="orbit-caption">
Caption Two.
</div>
</li>
<li>
<img src="/Users/benhare/Desktop/foundation/portfolio/assets/slider3.jpg" alt="slide 3" />
<div class="orbit-caption">
Caption Three.
</div>
</li>
</ul>
</div>
</div>
It can be also a good idea to put the <div class="orbit-container"> into an additional div with class="large-12 columns", and to use a different image inside the first and second slide. I have no other ideas. It also took me a while to figure out how Orbit correctly works.
Related
I have list that I render with semantic-ui and it needs some margin to the top for the first element. I looked in the CSS code and I see margin-top:0!important and I can override it for the first element with margin-top:10px!important; and then the rendering looks good. Is there a better way to achieve it? My code (without the fix) is
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<ul class="nav nav-tabs">
<li class="nav active">All
</li>
<li class="nav">Company
</li>
<li class="nav">Private
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade in active" id="A">
<div class="ui divided items">
<div class="item">
<div class="ui left floated">
7 July.
<br>3:33
</div>
<div class="image">
<a href="/vi/5022701123010560.html">
<img src="http://lh3.googleusercontent.com/JZkr-b_aWlYrFG1G-EUywZgucJE3JV1wgz4yQGrx-bGaw_va7dymsaTMXhK5t6ZkUdjWLeHlNaiksVNAMp8I1epB-Q=s150" title="Wordpress development company, website developer" alt="Wordpress development company, website developer">
</a>
</div>
<div class="content">
<a class="header" href="/vi/5022701123010560.html">Wordpress development company, website developer</a>
<div class="meta">
<span class="price"></span>
</div>
<div class="description">
<p>Dit Interactive have experts wordpress ...</p>
</div>
<div class="extra">
<div class="ui label">
Services
</div>
<div class="ui label">
For sale
</div>
<div class="ui label">Central NJ</div>
<div class="ui label">New Jersey</div>
<div class="ui right floated primary button">
Buy now
<i class="right chevron icon"></i>
</div>
</div>
</div>
</div>
<div class="item">
<div class="ui left floated">
7 July.
<br>0:54
</div>
<div class="image">
<a href="/vi/5870511561113600.html">
<img src="http://lh3.googleusercontent.com/rsfBseoSy-KPg6P703Dknbpd0t2Ug4n2BY8oKkg2XH5dkufstmZXMWSCsHTU4C0yb7bIaMBpAFxILaW6W3lZsiCt=s150" title="Dentist in Westminster" alt="Dentist in Westminster">
</a>
</div>
<div class="content">
<a class="header" href="/vi/5870511561113600.html">Dentist in Westminster</a>
<div class="meta">
<span class="price"></span>
</div>
<div class="description">
<p>Pari J. Moazed, DDS is a family dentist ...</p>
</div>
<div class="extra">
<div class="ui label">
Services
</div>
<div class="ui label">
For sale
</div>
<div class="ui label">Baltimore</div>
<div class="ui label">Maryland</div>
<div class="ui right floated primary button">
Buy now
<i class="right chevron icon"></i>
</div>
</div>
</div>
</div>
</div>
This "solution" works, but I don't like it
<div {% if loop.index0 == 0 %}style="margin-top:10px!important"{% endif %} class="item">
By the looks of it I would personally just change the margin on the with the simple line:
.container .nav{
margin-top:10px;
}
Does this answer your question? (I know it looks too simple to be true)
I would suggest adding a custom class to <ul class='nav nav-tabs'>
<ul class="nav custom-class nav-tabs">
and adding margin-bottom to it
.custom-class{
margin-bottom:20px;
}
We are adding a custom class to unordered list <ul> so that changes made to it doesn't effect other elements which are using nav class
On your div.tab-content try adding class ui basic segment
I know it is waaay overdue, but I came across this thread when looking for the same issue in Semantic UI React. My solution was to add a divider above the first container:
<Divider hidden></Divider>
At the bottom of this page http://kimcolemanprojects.com/cyanotype-hats.html there is a section with the title "Related Projects".
I can't move this title down from the grid of images above. I think there must be an error in the Html structure, but I can't find it. I have given the element padding and margin but it still will not move.
This is a section of the html code from that page:
<div class="container">
<div id="header">
<h1>KIM COLEMAN PROJECTS</h1>
<div id="nav">
<ul>
<li id="work">
Work
</li>
<li id="about">
About</li></ul>
</div><!--end nav-->
</div><!--end header-->
<div class="main-individual">
<!-- grid of Work -->
<a rel="hats" href="images/hats/velour 2.jpg" class="fancybox" data-title-id="title-5">
<div class="view view-sixth">
<img src="images/hats/small-velour 2.jpg" />
<div class="mask">
<div class="mask-text">
<h2>Velour trilby with Cyanotype ribbon</h2>
<p></p>
</div>
</div>
</div></a>
<div id="title-5" class="hidden">
Velour trilby with Cyanotype ribbon</div>
<a rel="hats" href="images/hats/balaclava.jpg" class="fancybox" data-title-id="title-1">
<div class="view view-sixth">
<img src="images/hats/small-balaclava.jpg" />
<div class="mask">
<div class="mask-text">
<h2>Balaclava with Cyanotype ribbon</h2>
<p></p>
</div>
</div>
</div></a>
<div id="title-1" class="hidden">
Balaclava with Cyanotype ribbon.
</div>
<span class="similar"><h6>Related Projects</h6></span>
<a href="unique.html" >
<div class="view-small view-sixth-small">
<img src="images/related-project-images/uniques.jpg" />
<div class="mask-small">
<div class="mask-text">
<h2>Unique</h2>
</div>
</div>
</div></a>
<a target="blank" href="http://kimcolemanjennyhogarth.co.uk/glare.htm" >
<div class="view-small view-sixth-small">
<img src="images/related-project-images/glare.png" />
<div class="mask-small">
<div class="mask-text">
<h2>Glare</h2>
</div>
</div>
</div></a>
<a target="blank" href="http://kimcolemanjennyhogarth.co.uk/act_natural.htm" >
<div class="view-small view-sixth-small">
<img src="images/related-project-images/act-natural-glare.png" />
<div class="mask-small">
<div class="mask-text">
<h2>Act Natural Glare</h2>
</div>
</div>
</div></a>
</div>
</div>
You could reduce the margin in the .view-small class, e.g. to margin: 20px 2%. Is this what you meant?
Update: Try to set the line-height: 30px; in .similar class. This moves the title down to the small images.
I have a question, basically using the thumbnails is ok, and you can get text beneath the tumbnail but i would like to put like 3 tags next to the thumbnail, something like that and would like to have:
Or those parameters outside of the border, but the border should be very close to the thumbnail ...
The code is following:
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img data-src="holder.js/100%x180" src="untitled.png" alt="Generic placeholder thumbnail">
<ul>
<li>Title</li>
<li>Location</li>
<li>Price</li>
<ul>
</a>
</div>
From the post and responses i get the following in the fiddle, as well as in my solution, i marked it yellow, as you can see the border is somehow on the top now :( :
This is final screen, still broken: :(
The problem is that default bootstrap display property is set to block. Just change it to inline-flex or inline-block and thats it. For example:
<div id="someId" class="col-md-6">
<a href="#" class="thumbnail">
<div class="col-md-6">
<img data-src="holder.js/100%x180" src="untitled.png" alt="Generic placeholder thumbnail">
</div>
<div class="col-md-6">
<ul>
<li>Title</li>
<li>Location</li>
<li>Price</li>
</ul>
</div>
</a>
</div>
Just set id and in css write
#someId .thumbnail{
display: inline-flex;
}
that's quite easy, just divide the region in 2 equal parts and fill in the contents.
http://jsfiddle.net/fatgamer85/D5M7E/3/
<div class="col-md-6">
<a href="#" class="thumbnail">
<div class="col-md-6">
<img data-src="holder.js/100%x180" src="untitled.png" alt="Generic placeholder thumbnail">
</div>
<div class="col-md-6">
<ul>
<li>Title</li>
<li>Location</li>
<li>Price</li>
</ul>
</div>
</a>
</div>
I'm a graphic design student, I am trying to do my portfolio, however not sure how to add a hyperlink to an icon that appears when you hover your mouse over a portfolio item. The item in code reads as div class="hoverIconChain"
<div class="portfolio-item html android">
<a href="portfolio-item-detail-page.html" class="animatedImage3">
<img src="images/portfolio02.jpg" alt="Portfolio 02">
<div class="hoverWrapperBg"></div>
<div class="hoverWrapper">
<div class="hoverIconChain"></div>
<div class="hoverIconHeart"></div>
<div class="hoverBottom">
<div class="hoverBottomText">Real Gamers Network</div>
<div class="hoverBottomLike"> 63 </div>
</div>
</div>
</a>
</div>
Delete the ending a tag from the bottom of your code, and move it after image.
<a href="portfolio-item-detail-page.html" class="animatedImage3">
<img src="images/portfolio02.jpg" alt="Portfolio 02">
</a>
To add a hyperlink to a div, just do it like this.
<a href="http://google.com">
<div class="hoverIconChain"></div>
</a>
I'm just starting a new app. Below is a basic mockup of what I am tasked to do.
I'm new to using HTML5 for my semantic markup so I'd like some feedback/help.
I'd like to understand how/where to use things like <nav> and <section>
<div id="container">
<header>
<div id="appInformation">
<a href="#" alt="Home">
<img src="">
</a>
<span>Selected AppName</span>
</div>
<div>
<span id="time">TIME GOES HERE</span>
</div>
<div>
<a href="#" alt="Additional Information">
<img src=""><!-- This is will be the location of the the 'i'-->
</a>
</div>
<div class="">
<label>UserName</label>
</div>
</header>
<div id="main">
<!-- main content for the selected app here -->
</div>
<footer>
<div id="appVersion">
VERSION # HERE
</div>
<nav>
<ul>
<li>
FAQ
</li>
</ul>
</nav>
<div id="">
<!-- Team logo here-->
</div>
</footer>
Avoid unacessary Div.
Use the Time Tag instead of Div for Time Element.
Avoid Label if you don't have anything to refer too, like an input.
Selected AppName
<time datetime="YYYY-MM-DD">TIME GOES HERE</time><!-- Don't need an id Time since you can target the Time tag -->
<a href="#" alt="Additional Information">
<img src=""><!-- This is will be the location of the the 'i'-->
</a>
<em>UserName</em> <!-- Don't use a label if you got nothing to refer too, like an input for example. -->
</header>
<div id="main">
<!-- main content for the selected app here -->
</div>
<footer>
<div id="appVersion">
VERSION # HERE
</div>
<nav>
<ul>
<li>
FAQ
</li>
</ul>
</nav>
<a href="yourTeamUrl" id="">
<!-- Team logo here-->
</a>
</footer>
In addition to #Simon Arnold's fine answer, I might also suggest that the <nav> usage is incorrect. A single link in a footer can hardly be construed as a "major navigation block". See the first note in green text at http://dev.w3.org/html5/spec/sections.html#the-nav-element