so I've just started making my own personal website, however, I'm running into issues with my navigation bar. Basically I want to be able to click on the titles on my navigation bar and then it will direct me to section pertaining to that title on my page.
To make things more clear. Take for example, this is what I have so far for my navigation bar:
<div class="about"> <a> About </a> </div>
<div class="blog"> <a> Blog </a> </div>
<div class="projects"> <a> Projects   </a> </div>
Now my nav bar should look something along the lines of this:
About Blog Projects
And the rest of my webpage looks likes this
<h1> About me </h1>
<p> Hi im nikki.. </p>
<h2> Blog </h2>
<p> This is my blog.. </p>
<h3> Projects </h3>
<p> First project last year .... </p>
Now what I want to be able to do to is to click on About on my navigation bar and make it take me to the About section on my page? How do I do this?
Thanks :)
Try the below code, add the style to your stylesheet.
<style>
.nav:after {
content:"";
clear:both;
display:block;
}
.nav li {
float: left;
list-style-type: none;
}
</style>
<ul class="nav">
<li>About</li>
<li>Blog</li>
<li>Projects</li>
</ul>
<div id="about">
Lorem Ipsum
</div>
<div id="blog">
Lorem Ipsum
</div>
<div id="projects">
Lorem Ipsum
</div>
Do you need something like this ?
Then easy way of doing it is , using JQuery-UI Tabs.
To know n learn more about it , just read through the documentation, Its easy comparatively doing it with plain css & JS.
reference Link : https://jqueryui.com/tabs/
Related
I am trying to place Bootstrap breadcrumb navigation in a template.
What I would like is a full-width 100% with a background color, and then within that place a col-lg-12 but I can't figure it out.
This image might help:
<div class="container-fluid darkgrey">
<div class="row">
<div class="col-lg-12">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item">Section</a></li>
<li class="breadcrumb-item active" aria-current="page"><?php the_title();?></li>
</ol>
</nav>
</div>
</div>
</div>
I think I might need to "nest" columns but I can't figure it out.
Am I on the right path? Thanks
Read the docs, Luke :-)
Use .container-fluid for a full width container, spanning the entire width of the viewport.
You are using .container-fluid, so you get a fluid, 100% width container. Use .container to get a fixed with container.
Here's a workig JSFiddle.
Also note you have an unbalanced </a> after Section, maybe just a copy-paste error here on SO.
To align the contents to .content width while keeping section background full-page width, you could nest a .container inside your .container-fluid:
.darkgrey {
background-color: #e9ecef;
}
.darkgrey .breadcrumb {
background-color: transparent;
margin-bottom: 0;
padding: .75rem 0;
}
.darkgrey + .container {
padding-top: .75rem;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid darkgrey">
<div class="container">
<div class="row">
<div class="col-12">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href>Home</a></li>
<li class="breadcrumb-item">Section</li>
<li class="breadcrumb-item active" aria-current="page">
Test Post 3
</li>
</ol>
</nav>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
<h2>Test Post 3</h2>
<p> Lorem ipsum dolor sit amet... </p>
</div>
</div>
Important note: .containers can be placed inside .container-fluids but should not be placed inside another .container.
Another note: you probably don't need the CSS (from the screenshot it looks like your theme already handles that part, but I needed it on SO).
I need help figuring out the breakpoint in my zurb foundation code. What the code does it adds both tabs and accordion. Tabs for big screens and accordion view for phones and tablets. However I have yet to figure out how I change the breakpoint(meaning the size where it hides the tab and show the accordion instead).
This is the foundation css file ( to large for stackoverflow )
http://pastebin.com/eSgHmSgK
This is the HTML
<section class="center-menu">
<div class="center-menu-container">
<div class="hide-for-small">
<dl class="tabs" data-tab="">
<dd class="active" id="#panel1dd" >IT</dd>
<dd id="#panel2dd">Telefoni</dd>
<dd id="#panel3dd">IT-Säkerhet</dd>
</dl>
<div class="tabs-content">
<div class="content active" id="panel1">
<p>This is the first panel of the basic tab example. This is the first
panel of the basic tab example.</p>
</div>
<div class="content" id="panel2">
<p>This is the second panel of the basic tab example. This is the
second panel of the basic tab example.</p>
</div>
<div class="content" id="panel3">
<p>This is the third panel of the basic tab example. This is the third
panel of the basic tab example.</p>
</div>
</div>
</div>
<dl class="accordion show-for-small" data-accordion>
<ul class="small-block-grid-1 medium-block-grid-3">
<li>
<dd>
Accordion 1
<div id="panel1c" class="content">
Panel 1. Lorem ipsum dolor
</div>
</dd>
<dd>
Accordion 2
<div id="panel2c" class="content">
Panel 2. Lorem ipsum dolor
</div>
</dd>
<dd>
Accordion 3
<div id="panel3c" class="content">
Panel 3. Lorem ipsum dolor
</div>
</dd>
</li>
</dd>
</li>
</ul>
</dl>
</div>
</section>
Thanks in advanced!
In Foundation 5 the tabs are displayed and the accordions are hidden when when #media only screen and (min-width: 40.063em) is reached in the browser; the .hide-for-small displays the tabs and the .show-for-small rule hides the accordions.
/* Medium Displays: 641px and up */
#media only screen and (min-width: 40.063em) {
.hide-for-small,
... {
display: inherit !important;
}
.show-for-small,
... {
display: none !important;
}
}
Otherwise the .show-for-small rule displays the accordion:
.show-for-small {
display: inherit !important;
}
I want to change the bg-color of .circle.icon if posts-item is hovered. Any idea how to accomplish that, possibly without Javascript?
<div id="scr1" class="large-6 columns timeline">
<div class="line"></div>
<ul class="posts">
<li class="posts-item">
<div class="circle icon"></div>
<h2 class="posts-item-title">
</h2>
<p class="summary"></p>
</li>
</ul>
</div>
Like so.
.posts-item:hover .circle.icon {
background: green;
}
No jQuery - Everyone's happy :)
I am trying to create a css ribbon on this panel of picture. But the ribbon keeps on appearing on the upper right side of the screen.
Here is my HTML Code
<li class="span4">
<div class="thumbnail">
</div>
<img src="img/placeholder-360x200.jpg" alt="product name">
<div class="caption">
<h3>Product name</h3>
<p>
Few attractive words about your product.Few attractive words about your product.
Few attractive words about your product.Few attractive words about your product.
</p>
</div>
<div class="widget-footer">
<p>
Buy now
Read more
</p>
</div>
</div>
The CSS code can be found here.
And a screenshot of what I'm trying to build
try this
http://jsfiddle.net/UBfCE/68/
.ribbon-wrapper{
margin:0 0 0 212px;
position:absolute;
}
Currently working on a site template rebuild in HTML5 and with trying to keep in line with semantic best practices the markup is getting completely bloated with divs for what I would deem non page relevant content. Here's the markup I'm currently working with for a rather large page footer block containing various info panels:
<footer class="container">
<div class="footer-info-panel left">
<div class="contact-details">
<div class="heading">Contact Us</div>
<div class="content"></div>
</div>
<div class="follow-us">
<div class="heading">Follow Us</div>
<div class="content"></div>
</div>
<div class="bookmark">
<div class="heading">Bookmark & Recommend Us</div>
<div class="content"></div>
</div>
</div>
<div class="footer-info-panel right">
<div class="payment-methods">
<div class="heading">Payment Methods</div>
<div class="content"></div>
</div>
<div class="customer-services">
<div class="heading">Customer Services</div>
<div class="content"></div>
</div>
<div class="company-info">
<div class="heading">Company Information</div>
<div class="content"></div>
</div>
</div>
</footer>
So adhering to OOCSS techniques in SASS with minimal stylesheet nesting I can simply define global footer styles as .footer-info-panel .heading { styles here } etc, however should I be using one of the h1-h6 tags, it seems like div overkill yet my interpretation of the the html5 spec would say otherwise as it's not relevant page content?
Straight from the HTML5 spec:
Some site designs have what is sometimes referred to as "fat footers"
— footers that contain a lot of material, including images, links to
other articles, links to pages for sending feedback, special offers...
in some ways, a whole "front page" in the footer.
This fragment shows the bottom of a page on a site with a "fat
footer":
...
<footer>
<nav>
<section>
<h1>Articles</h1>
<p><img src="images/somersaults.jpeg" alt=""> Go to the gym with
our somersaults class! Our teacher Jim takes you through the paces
in this two-part article. <a href="articles/somersaults/1">Part
1</a> · Part 2</p>
<p><img src="images/kindplus.jpeg"> Tired of walking on the edge of
a clif<!-- sic -->? Our guest writer Lara shows you how to bumble
your way through the bars. <a href="articles/kindplus/1">Read
more...</a></p>
<p><img src="images/crisps.jpeg"> The chips are down, now all
that's left is a potato. What can you do with it? Read more...</p>
</section>
<ul>
<li> About us...
<li> Send feedback!
<li> Sitemap
</ul>
</nav>
<p><small>Copyright © 2015 The Snacker —
Terms of Service</small></p>
</footer>
</body>
As Jared you may use the aside or section elements.