I start my website, a onepage. I have a problem with the second section. I start with the title but it appears at the top of the page instead of after the first section..
here is the HTML :
<div class="container-fluid">
<section class="row first-slide">
<div class="title col-sm-12">
<h1 class="presentation">
<span class="nathan">Nathan Cheval</span> <span class="separator">|</span> <span class="avignon">Avignon & Montpellier</span>
</h1>
<hr class="position-hr">
<img class="scroll-icon" src="imgs/mouse.png" alt="Go down" width="32" height="32">
</div>
</section>
<section class="row second-slide">
<div class="title col-sm-12">
<h1>Portfolio</h1>
</div>
</section>
</div>
here is a link to my website : http://nathancheval.fr/dev
Thanks in advance for your help
It's because you have a position: absolute on your first-slide, and there is no position given to the second-slide. Try disabling the position absolute and you'll see the title moves beneath your first slide.
Related
I am working on html through angularjs.
While I am working on the title of the page, it shows me the part of title
What I mean about it is that the image below shows you.
My code for html is below,
<div class="wrapper">
<div class="page-header section-dark" style="background-image: url('./assets/img/Cover1.jpg')">
<div class="content-center">
<div class="container">
<div class="title-brand">
<div class="angular-logo"><img alt="" src="./assets/img/asia-logo.png"></div>
<h1 class="presentation-title"> ASIA-SMS</h1>
<div class="type">pro</div>
<div class="fog-low">
<img src="./assets/img/sections/fog-low.png" alt="">
</div>
<div class="fog-low right">
<img src="./assets/img/sections/fog-low.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
Is there any way to fix it?
Thanks
I'm having trouble style/adding a header above my navbar. I was able to add the header but the alignment is completely off.
I'm trying to have it align with the first navbar button. May I ask how do I create/edit my header such that it'll align with the navbar.
<div class="container" style="background-color: #00a3a3;">
<div class="row">
<div class="col-md-12">
<h2 class="pull-left" style="color: white">THE COMPANY NAME</h2>
</div>
</div>
</div>
http://codepen.io/anon/pen/RrwvNa
I was able to get it to align using this code
<nav class="navbar" style="background-color: #00a3a3;">
<div class="container-fluid col-sm-1">
</div>
<div class="col-sm-7">
<div>
<h2 class="pull-left" style="color: white">THE COMPANY NAME</h2>
</div>
</div>
</nav>
but there seems to be a space between the header and the nav bar.
Here is the solution. Take a look in Codepen
Change your container to container-fluid and use margin-left:8.5% in your h1 header.
<div class="container-fluid" style="background-color: #00a3a3;">
<div class="row">
<div class="col-md-12">
<h2 class="pull-left" style="margin-left:8.5%;color: white">THE COMPANY NAME</h2>
</div>
</div>
</div>
I'm trying to have image next to the headline in one row, both centered in Foundation 5. Example is here.
HTML
<div class="row">
<div class="panel small-12 column">
<div class="row">
<div class="small-5 column text-right">
<img src="http://placehold.it/60x60&text=logo" />
</div>
<div class="small-7 column text-left">
<h1>APP NAME</h1>
</div>
</div>
</div>
</div>
In this example solution isn't ideal because it is not centered exactly especialy on the large screens.
I've also tried something like this:
HTML
<div class="row">
<div class="panel small-12 column text-center">
<img src="http://placehold.it/60x60&text=logo" />
<h1>APP NAME</h1>
</div>
</div>
But it doesn't work: image isn't centered. What is the best way how to do this in Foundation 5?
Since an img is an inline element and h1 is a block element, you should put the image inside the heading. See the JSFiddle demo.
<link href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/css/foundation.min.css" rel="stylesheet"/>
<div class="row">
<div class="panel small-12 column text-center">
<h1><img src="http://placehold.it/60x60&text=logo" alt="" /> APP NAME</h1>
</div>
</div>
Additionally, alt is a required attribute, so I've added one with a blank value.
I've been spinning my wheels on trying to get a div panel element to appear on the top right of the page, on the same line as the h1 element:
<div class="container">
<div class="page-header">
<h1>
<img src="logo.png"> Page title
</h1>
<div class="panel panel-primary">
...content...
</div>
</div>
...
</div>
I'm a bit of an amateur with CSS/HTML, but I've tried the pull-left/right classes along with every permutation of display/position, etc. The outcome is always garbled. Any suggestions?
you have to add pull-left to the h1 too.. to have both of them floated..
also add a .cleafix class to the page-header div
<div class="container">
<div class="page-header clearfix">
<h1 class="pull-left">
<img src="logo.png"> Page title
</h1>
<div class="panel panel-primary pull-right">
...content...
</div>
</div>
...
</div>
I wouldn't use the .page-header for this, it doesn't clear and it's meant for text. Use the grid system so that you can set a size for your panel as they are not a set width and requires a wrapper to have a width. It will layout very cleanly this way.
Just a note: when you use the .pull-right and .pull-left classes on anything in Bootstrap these cover all viewport sizes and the results can look pretty yucky as the viewport gets smaller.
DEMO: http://jsbin.com/sadup/1
<div class="container">
<div class="row">
<div class="col-sm-8">
<img src="http://placehold.it/200x75/444444/FFFFFF&text=logo" class="img-responsive" alt="Logo">
</div>
<!--/.col-sm-8 -->
<div class="col-sm-4">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
<!--/.col-sm-4 -->
</div>
<!--/.row -->
</div>
<!--/.container -->
Hello i would like to know if it is possible to filter a section with a specific class ? here is my code
<section class="portfolio_masonry" >
<div class="row isotope_portfolio_container">
<div class="new col-sm-4 col-md-4">
<div class="portfolio_item">
<a href="images/portfolio/lenses.jpg" class="lightbox">
<img src="images/portfolio/lenses.jpg" alt="Community & Non-Profit" >
<div class="overlay">
<div class="desc">
<h4>Lenses to Their World</h4>
<span class="cross"></span>
</div>
</div>
</a>
</div>
</div>
and the list gose on i need to filter this to not show all images in the start of the section but just specific calss images? thank you in advance
Yes you can using ('.div').filter('.yourclass')