Please help. That's my problem (see the screenshot below):
As you can see the navigation bar is underneath the image. This is my code:
<div class="navwrapper">
<header class="nav">
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
<img class="d-none d-md-block d-none" src="logo.png" alt="">
</div>
<div class="menu">
<ul>
<li>FŐOLDAL</li>
<li>RÓLUNK</li>
<li>RENDELÉS</li>
<li>KAPCSOLAT</li>
</ul>
</div>
</nav>
</header>
<section class="bg">
<section style="text-align:center;vertical-align:middle" class="sec1">
<img class="animated bounceInDown" src="logo.png" alt="">
</section>
</section>
</div>
Related
I’m working on a website for a photographer and I already created a grid gallery with one photo of each session, I wish that after clicking an image a popup gallery would show that would let you slide through other photos of the specific session (not other pictures displayed in the grid gallery) if that makes sense.
There's a part of the html code I used for my gallery.
<section class="portfolio-section">
<header>
<h1>Portfolio</h1>
</header>
<div id="anchor2" class="portfolio-selection">
<div id="container">
<ul class="categories">
<li>ślub</li>
<li>chrzest</li>
<li>świąteczne</li>
<li>plener</li>
<li class="portfolio-more">zobacz więcej</li>
</ul>
</div>
</div>
</section>
<section class="portfolio-gallery">
<div class="portfolio">
<div class="gallery-container">
<div class="gallery-item">
<div class="image">
<img src="https://source.unsplash.com/1600x900/?couple" alt="couple">
</div>
<div class="text">Piotrek i Paulina</div>
</div>
</div>
<div class="gallery-container w-2 h-2">
<div class="gallery-item">
<div class="image">
<img src="https://source.unsplash.com/1600x900/?people" alt="couple">
</div>
<div class="text">Gosia i Tomasz</div>
</div>
</div>
<div class="gallery-container w-3">
<div class="gallery-item">
<div class="image">
<img src="https://source.unsplash.com/1600x900/?kids" alt="couple">
</div>
<div class="text">Gosia i Tomasz</div>
</div>
</div>
<div class="gallery-container">
<div class="gallery-item">
<div class="image">
<img src="https://source.unsplash.com/1600x900/?baby" alt="couple">
</div>
<div class="text">Gosia i Tomasz</div>
</div>
</div>
This question already has answers here:
How to place div side by side
(7 answers)
Closed 1 year ago.
<div class="container-fluid gradient">
<div class="row">
<div class="col-12 justify-content-start text-white">
<div class="footer mt-5">
<img
src="images/Vector Smart Object (Double Click to Edit).png"
class="img-fluid footer-logo"
alt=""
/>
<div class="left">
<ul class="mt-5">
<li>TEAM</li>
<li>COMPETITION</li>
<li>ABOUT US</li>
<li>CONTACT</li>
</ul>
</div>
<div class="right">
<ul>
<li>FAQ</li>
<li>POLICY PRIVACY</li>
<li>COOKIES</li>
</ul>
</div>
</div>
<div class="border-pink"></div>
<h4 class="mt-4 copy">COPYRIGHT</h4>
</div>
</div>
</div>
I want to put the ul next to each other so that they are side by side. I tried using inline-block and float left, but it looks messy.
.left{
position:absolute;
padding-left:200px;
}
<div class="container-fluid gradient">
<div class="row">
<div class="col-12 justify-content-start text-white">
<div class="footer mt-5">
<img
src="images/Vector Smart Object (Double Click to Edit).png"
class="img-fluid footer-logo"
alt=""
/>
<div class="left">
<ul class="mt-5">
<li>TEAM</li>
<li>COMPETITION</li>
<li>ABOUT US</li>
<li>CONTACT</li>
</ul>
</div>
<div class="right">
<ul>
<li>FAQ</li>
<li>POLICY PRIVACY</li>
<li>COOKIES</li>
</ul>
</div>
</div>
<div class="border-pink"></div>
<h4 class="mt-4 copy">COPYRIGHT</h4>
</div>
</div>
</div>
You can do it like this. This is one way.
i pretend to make this first column fixed, but when i add position:fixed, the columns overlap each other, how to fix this?
If its not possible, i want to know a sample that gives me a
side navbar fixed and responsive with bulma
<section class="main-content columns is-fullheight">
<aside class="column is-2 is-narrow-mobile is-fullheight section is-hidden-mobile">
<p class="menu-label is-hidden-touch">Header</p>
<ul class="menu-list">
<li>
CIT
<ul><li>Items</li><li>Items</li>
</ul>
</li>
<li>
Other
<ul>
<li>other</li>
</ul>
</li>
</ul>
</aside>
<div class="container column is-10">
<div class="section">
<div class="card">
<div class="card-header" id="go-first">
<p class="card-header-title">CIT</p>
</div>
<div class="card-content">
<div class="content">
header
</div>
<div class="columns">
<div class="column">
...
</div>
</div>
</div>
</div>
</div>
</div>
</section>
```
As I understood, your sidebar disappears on mobile, right?
Have you tried removing is-hidden-mobile class from aside element?
<section class="main-content columns is-fullheight">
<aside class="column is-2 is-narrow-mobile is-fullheight section">
<p class="menu-label is-hidden-touch">Header</p>
<ul class="menu-list">
<li>
CIT
<ul><li>Items</li><li>Items</li>
</ul>
</li>
<li>
Other
<ul>
<li>other</li>
</ul>
</li>
</ul>
</aside>
<div class="container column is-10">
<div class="section">
<div class="card">
<div class="card-header" id="go-first">
<p class="card-header-title">CIT</p>
</div>
<div class="card-content">
<div class="content">
header
</div>
<div class="columns">
<div class="column">
...
</div>
</div>
</div>
</div>
</div>
</div>
</section>
I am trying to align some elements with bootstrap but I have strange gap between them. May I ask you for some advice ?
here is the final picture of the layout structure.
Here is my code until this moment
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<section class="product-list">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="catalog">
<ul class="catalog-list">
<li>
<a href="#">
<img src="https://s23.postimg.org/mjrt9w557/example.jpg" width="260" height="260" title="someText" alt="someText">
</a>
</li>
</ul>
</div>
<!-- catalog -->
</div>
<div class="col-md-3">
<div class="catalog">
<ul class="catalog-list">
<li>
<a href="#">
<img src="https://s23.postimg.org/mjrt9w557/example.jpg" width="260" height="260" title="someText" alt="someText">
</a>
</li>
</ul>
</div>
<!-- catalog -->
</div>
<div class="col-md-6">
<div class="laptops">
<img src="https://s27.postimg.org/ottosbaw3/example2.jpg" width="548" height="545" title="someText" alt="someText">
</div>
</div>
</div>
<!-- row -->
<div class="row">
<div class="col-md-3">
<ul class="catalog-list">
<li>
<a href="#">
<img src="https://s23.postimg.org/mjrt9w557/example.jpg" width="260" height="260" title="someText" alt="someText">
</a>
</li>
</ul>
</div>
<div class="col-md-3">
<ul class="catalog-list">
<li>
<a href="#">
<img src="https://s23.postimg.org/mjrt9w557/example.jpg" width="260" height="260" title="someText" alt="someText">
</a>
</li>
</ul>
</div>
</div>
<!-- row -->
</div>
<!-- container -->
</section>
<!-- product-list -->
Assuming I understood you correctly, you had too much going on with your html. There is absolutely no need to wrap individual images into lists.
View in full-screen, I did not add small display classes.
.margin{margin-bottom: 25px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<section class="product-list">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row margin">
<div class="col-md-6">
<a href="#">
<img src="https://s23.postimg.org/mjrt9w557/example.jpg" width="260" height="260" title="someText" alt="someText">
</a>
</div>
<div class="col-md-6">
<a href="#">
<img src="https://s23.postimg.org/mjrt9w557/example.jpg" width="260" height="260" title="someText" alt="someText">
</a>
</div>
</div>
<div class="row">
<div class="col-md-6">
<a href="#">
<img src="https://s23.postimg.org/mjrt9w557/example.jpg" width="260" height="260" title="someText" alt="someText">
</a>
</div>
<div class="col-md-6">
<a href="#">
<img src="https://s23.postimg.org/mjrt9w557/example.jpg" width="260" height="260" title="someText" alt="someText">
</a>
</div>
</div>
</div>
<div class="col-md-6">
<div class="laptops">
<img src="https://s27.postimg.org/ottosbaw3/example2.jpg" width="548" height="545" title="someText" alt="someText">
</div>
</div>
</div>
</div>
<!-- container -->
</section>
<!-- product-list -->
If I understood your question correct you are wondering about the gap between the elements. Bootstrap applies padding between columns called gutter. You might have to adjust your gutter padding and margins if you do not want a gap between your columns.
http://getbootstrap.com/css/#grid-options
Use two col-md-6 and inside the first col-md-6 use 4 col-md-6 with specific height and your problem is solved.
This question already has answers here:
Can I have multiple background images using CSS?
(8 answers)
Closed 6 years ago.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="description" content="">
<meta name="author" content="">
<title>Main Website</title>
<link href="css/main.css" rel="stylesheet">
</head>
<body>
<nav>
<div>
<div>
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li>Mens Clothing</li>
<li>Womens Clothng</li>
<li>Boys Clothing</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div>
<div>
<div class="accordion">
<ul>
<li>
<div class="caption">Slide 1</div>
<a href="#">
<img src='Slider_Image1.jpg'/></a>
</li>
<li>
<div class="caption">Slide 2</div>
<a href="#">
<img src='Slider_Image2.jpg'/></a>
</li>
<li>
<div class="caption">Slide 3</div>
<a href="#">
<img src='Slider_Image3.jpg'/></a>
</li>
</ul>
</div>
</div>
<div>
<div class="centre , fade ,">
<div class="thumbnail">
<a href="Nike_Shoes1.html">
<img src="Image1.jpg" alt="">
</div>
</div>
<div class="centre , fade">
<div class="thumbnail">
<a href="Nike_Trainers.html">
<img src="Image2.jpg" alt="">
</div>
</div>
<div class="centre , fade">
<div class="thumbnail">
<img src="Image3.jpg" alt="">
</div>
</div>
<div class="centre , fade">
<div class="thumbnail">
<a href="new.html">
<img src="Mens_Clothing.jpg" alt="Mens Clothing">
</div>
</div>
<div class="centre , fade">
<div class="thumbnail">
<a href="women_clothing.html">
<img src="Womens_Clothing.jpg" alt="Womens Clothing">
</div>
</div>
<div class="centre , fade">
<div class="thumbnail">
<a href="boys_clothing.html">
<img src="Boys_Clothing.jpg" alt="Boys Clothing">
</div>
</div>
<div class="centre , fade">
<div class="thumbnail">
<img src="Converse_clothing.jpg" alt="Converse Clothing">
</div>
</div>
<div class="centre , fade">
<div class="thumbnail">
<img src="Adidas_clothing.jpg" alt="Adidas Clothing">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<!-- Footer -->
<footer>
</footer>
</div>
Here is the code for a website I am developing and I am trying to add images for the background. What I am looking to do is add 2 images on either side of the webpage, I am not sure on how to go about this also while trying to add an image as my background I see a white area the image is not set as the background, any help is appreciated.
Your best bet would be to merge the two images into one image using an image editor and then setting the merged image as your background.
Just open paint glue the 2 images together and use it as background.