I am making a basketball website for my sports club. I am attempting to make a photo carousel that slides with an information section next to it. This is the following code I have made, but I don't know how to style it (with CSS) so that it looks like what it is supposed.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="slider-area">
<div class="main cf">
<div class="owl-carousel eql-height owl-theme" id="sync1" style="opacity: 1; display: block; height: 369px;">
<div class="owl-wrapper-outer">
<div class="owl-wrapper" style="width: 7480px; left: 0px; display: block; transition: all 800ms ease; transform: translate3d(-1496px, 0px, 0px);">
<div class="owl-item" style="width: 748px;">
<div class="item">
<div class="slider-caption">
<h3>Werribee referees add to the trophy case</h3>
<p><span>Werribee Basketball’s referees have taken out three major awards at the Technical Officials Commission’s (formerly VBRA) annual awards in May.</span></p><a class="Read-more" href="http://werribeebasketball.com/werribee-referees-add-to-the-trophy-case/"
title="Read More">Read More</a>
</div>
<div class="slider-img" style="background-image:url('http://werribeebasketball.com/wp-content/uploads/2018/05/1.jpg')">
</div>
</div>
</div>
<div class="owl-item" style="width: 748px;">
<div class="item">
<div class="slider-caption">
<h3>Franky’s A1 Car Sales our new sponsor</h3>
<p>Werribee Basketball is pleased to announced our latest sponsor to sign on in support of the club, Franky’s A1 Car Sales.</p><a class="Read-more" href="http://werribeebasketball.com/frankys-a1-car-sales-our-new-sponsor/" title="Read More">Read More</a>
</div>
<div class="slider-img" style="background-image:url('http://werribeebasketball.com/wp-content/uploads/2018/05/frankys-digital-2.jpg')">
</div>
</div>
</div>
<div class="owl-item" style="width: 748px;">
<div class="item">
<div class="slider-caption">
<h3>Werribee Basketball’s Gala Dinner in July</h3>
<p>You’re invited to Werribee Basketball’s night of nights!</p><a class="Read-more" href="http://werribeebasketball.com/werribee-basketballs-gala-dinner-in-july/" title="Read More">Read More</a>
</div>
<div class="slider-img" style="background-image:url('http://werribeebasketball.com/wp-content/uploads/2018/05/Gala-Dinner_WEB.jpg')">
</div>
</div>
</div>
<div class="owl-item" style="width: 748px;">
<div class="item">
<div class="slider-caption">
<h3>Potter has the magic touch</h3>
<p><span>You may notice Werribee Basketball’s Player and Coach Development Manager Reece Potter walking around Eagle Stadium with a big smile on his face this week – and it’s with good reason!</span></p><a class="Read-more" href="http://werribeebasketball.com/potter-has-the-magic-touch/"
title="Read More">Read More</a>
</div>
<div class="slider-img" style="background-image:url('http://werribeebasketball.com/wp-content/uploads/2018/05/Web.jpg')">
</div>
</div>
</div>
<div class="owl-item" style="width: 748px;">
<div class="item">
<div class="slider-caption">
<h3>Court announcer wanted!</h3>
<p>Werribee Basketball is looking for a court announcer for our Big V home games at Eagle Stadium.</p><a class="Read-more" href="http://werribeebasketball.com/court-announcer-wanted/" title="Read More">Read More</a>
</div>
<div class="slider-img" style="background-image:url('http://werribeebasketball.com/wp-content/uploads/2018/04/Court-announcer.jpg')">
</div>
</div>
</div>
</div>
</div>
<div class="owl-controls">
<div class="owl-buttons">
<div class="owl-prev">
<i class="fa fa-chevron-left"></i>
</div>
<div class="owl-next">
<i class="fa fa-chevron-right"></i>
</div>
</div>
</div>
</div>
<div class="owl-carousel eql-height owl-theme" id="sync2" style="opacity: 1; display: block; height: 369px;">
<div class="owl-wrapper-outer">
<div class="owl-wrapper" style="width: 2490px; left: 0px; display: block; transition: all 800ms ease; transform: translate3d(-498px, 0px, 0px);">
<div class="owl-item" style="width: 249px;">
<div class="item">
Werribee referees add to th...
</div>
</div>
<div class="owl-item" style="width: 249px;">
<div class="item">
Franky’s A1 Car Sales...
</div>
</div>
<div class="owl-item synced" style="width: 249px;">
<div class="item">
Werribee Basketball’s...
</div>
</div>
<div class="owl-item" style="width: 249px;">
<div class="item">
Potter has the magic touch
</div>
</div>
<div class="owl-item" style="width: 249px;">
<div class="item">
Court announcer wanted!
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
This is what it is supposed to look like, or an approximation of what it should look like.
Use bootstrap Carousel for your basket ball website
Click Here
Here is the code for it :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Carousel Example</h2>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://blog.keycdn.com/blog/wp-content/uploads/2015/10/jpg-to-webp-1.jpg" alt="Los Angeles" style="width:100%;">
<div class="carousel-caption">
<h3>Los Angeles</h3>
<p>LA is always so much fun!</p>
</div>
</div>
<div class="item">
<img src="https://www.enterprise.ca/content/dam/ecom/general/Homepage/inspiration-banff-ca.jpg.wrend.1280.720.jpg" alt="Chicago" style="width:100%;">
<div class="carousel-caption">
<h3>Chicago</h3>
<p>Thank you, Chicago!</p>
</div>
</div>
<div class="item">
<img src="http://www.personal.psu.edu/ivs5030/plant.jpg" alt="New York" style="width:100%;">
<div class="carousel-caption">
<h3>New York</h3>
<p>We love the Big Apple!</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>
Related
I have a strange problem with my css grid. I have a 2 columns grid:
.main-container {
top: 0;
display: grid;
background-image: url('https://www.arvanjobs.com/wp-content/themes/twentytwentyone-child/img/wal.png');
background-attachment: fixed;
grid-template-columns: 50% 50%;
box-sizing: border-box;
font-size: 1.5rem;
z-index: -1;
}
#media all and (max-width: 890px) {
.main-container {
grid-auto-flow: row dense;
grid-auto-columns: 1fr;
}
.main-container div {
grid-column: 1 / span 3;
}
}
<div class="main-container">
<div class="item1 cnt">
<video id="vid" src="https://www.arvanjobs.com/wp-content/themes/twentytwentyone-child/img/coffee1.mp4" width="1920" height="1080" autoplay loop muted type="video/mp4"> </video>
</div>
<div class="item2 cnt">
<p style="font-size:50px; color:white;"> Join Us! </P>
<button type="button" class="btn btn-outline-warning" style="font-family:forum; font-weight:bold; background-color:#1f1f1f; border-radius: 25px; color:#edbd87; font-size:40px; border: 2px solid #edbd87;" onclick="location.href='http://arvanjobs.com/candidates'">SEND YOUR CV</button>
</div>
<div class="item3 cnt">
<img src="https://www.arvanjobs.com/wp-content/themes/twentytwentyone-child/img/LOGO.png" />
</div>
<div class="item4 cnt">
</div>
<div class="item5 cnt">
<h4>WHO WE ARE?</h4>
<p>
ArvanJobs is above all peace of mind. It is a new way of working, of traveling, of training, of advancing in your career. Whether you are a company looking for workers or you are looking for a new job opportunity, ArvanJobs will always be by your side,
selecting the best workers and the best companies that will boost your career.
</p>
</div>
<div class="item6 cnt">
<h4>WHY WORK WITH US?</h4>
<p>
For our personal treatment, our advice, and above all for our experience working in hotels in numerous countries. Because we know how difficult it is to take that step of daring to work in a foreign country. Because we know how hard it is to find the
right staff.
</p>
</div>
<div class="item7 cnt">
</div>
<div class="item8 cnt">
<img src="https://www.arvanjobs.com/wp-content/themes/twentytwentyone-child/img/arvan3.jpg">
</div>
<div class="item9 cnt">
<h4>HOW WE WORK?</h4>
<p>
All candidates are interviewed by staff who have worked in hotels, not offices. The same happens with our clients who have to satisfy a series of criteria and guarantees for the worker to work with us.</p>
</div>
<div class="item13 cnt">
<div class="item13-1">
<p>APPLY NOW TO GET STARTED</p>
</div>
<div class="item13-2">
<button type="button" class="btn btn-outline-warning" style="font-family:forum; font-weight:bold; background-color:#967b5d; border-radius: 25px; color:#edbd87; font-size:40px; border: 2px solid #edbd87;" onclick="location.href='http://arvanjobs.com/candidates'">APPLY NOW</button>
</div>
</div>
<div class="item10 cnt">
<div class="container" style="width:100vw; max-width: max-content; padding-left: 0px; padding-right: 0px;">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
-->
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://www.arvanjobs.com/wp-content/themes/twentytwentyone-child/img/0.png" alt="Reception" style="width:100vw;">
<div class="carousel-caption">
<h3 style="color:white;">Chefs</h3>
<p>LA is always so much fun!</p>
</div>
</div>
<div class="item">
<img src="https://www.arvanjobs.com/wp-content/themes/twentytwentyone-child/img/1.png" alt="housekeeping" style="width:100vw;">
<div class="carousel-caption">
<h3 style="color:white;">Waiters</h3>
<p>Thank you, Chicago!</p>
</div>
</div>
<div class="item">
<img src="https://www.arvanjobs.com/wp-content/themes/twentytwentyone-child/img/2.png" alt="chefs" style="width:100vw;">
<div class="carousel-caption">
<h3 style="color:white;">Housekeeping</h3>
<p>We love the Big Apple!</p>
</div>
</div>
<div class="item">
<img src="https://www.arvanjobs.com/wp-content/themes/twentytwentyone-child/img/3.png" alt="awijr" style="width:100vw;">
<div class="carousel-caption">
<h3 style="color:white;">Reception</h3>
<p>We love the Big Apple!</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<div class="item11 cnt">
<img src="https://www.arvanjobs.com/wp-content/themes/twentytwentyone-child/img/arvan2.jpg" />
</div>
<div class="item12 cnt">
<img src="https://www.arvanjobs.com/wp-content/themes/twentytwentyone-child/img/arvan2-1.png" />
</div>
I encounter this when reaching the 400~ px. mark (I have no css for this range of width):
Its like the .main-container its getting a responsive, and some items from inside it, getting other different responsive. I don't understand, and my CSS is very long to post all of it here. You can see this mess at https://arvanjobs.com
It's much easier to add in complexity with media queries than remove it.
So have your mobile styles in your regular CSS, and then add in what you want to happen on larger screen widths.
* {
max-width: 100%;
}
.main-container {
top: 0;
display: grid;
background-image: url('https://www.arvanjobs.com/wp-content/themes/twentytwentyone-child/img/wal.png');
background-attachment: fixed;
grid-auto-flow: row dense;
grid-auto-columns: 1fr;
box-sizing: border-box;
font-size: 1.5rem;
z-index: -1;
}
#media all and (min-width: 890px) {
.main-container {
grid-template-columns: 50% 50%;
}
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div class="main-container">
<div class="item1 cnt">
<video id="vid" src="https://www.arvanjobs.com/wp-content/themes/twentytwentyone-child/img/coffee1.mp4" autoplay loop muted type="video/mp4"> </video>
</div>
<div class="item2 cnt">
<p style="font-size:50px; color:white;"> Join Us! </P>
<button type="button" class="btn btn-outline-warning" style="font-family:forum; font-weight:bold; background-color:#1f1f1f; border-radius: 25px; color:#edbd87; font-size:40px; border: 2px solid #edbd87;" onclick="location.href='http://arvanjobs.com/candidates'">SEND YOUR CV</button>
</div>
<div class="item3 cnt">
<img src="https://www.arvanjobs.com/wp-content/themes/twentytwentyone-child/img/LOGO.png" />
</div>
<div class="item4 cnt">
</div>
<div class="item5 cnt">
<h4>WHO WE ARE?</h4>
<p>
ArvanJobs is above all peace of mind. It is a new way of working, of traveling, of training, of advancing in your career. Whether you are a company looking for workers or you are looking for a new job opportunity, ArvanJobs will always be by your side,
selecting the best workers and the best companies that will boost your career.
</p>
</div>
<div class="item6 cnt">
<h4>WHY WORK WITH US?</h4>
<p>
For our personal treatment, our advice, and above all for our experience working in hotels in numerous countries. Because we know how difficult it is to take that step of daring to work in a foreign country. Because we know how hard it is to find the
right staff.
</p>
</div>
<div class="item7 cnt">
</div>
<div class="item8 cnt">
<img src="https://www.arvanjobs.com/wp-content/themes/twentytwentyone-child/img/arvan3.jpg">
</div>
<div class="item9 cnt">
<h4>HOW WE WORK?</h4>
<p>
All candidates are interviewed by staff who have worked in hotels, not offices. The same happens with our clients who have to satisfy a series of criteria and guarantees for the worker to work with us.</p>
</div>
<div class="item13 cnt">
<div class="item13-1">
<p>APPLY NOW TO GET STARTED</p>
</div>
<div class="item13-2">
<button type="button" class="btn btn-outline-warning" style="font-family:forum; font-weight:bold; background-color:#967b5d; border-radius: 25px; color:#edbd87; font-size:40px; border: 2px solid #edbd87;" onclick="location.href='http://arvanjobs.com/candidates'">APPLY NOW</button>
</div>
</div>
<div class="item10 cnt">
<div class="container" style="max-width: max-content; padding-left: 0px; padding-right: 0px;">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
-->
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://www.arvanjobs.com/wp-content/themes/twentytwentyone-child/img/0.png" alt="Reception">
<div class="carousel-caption">
<h3 style="color:white;">Chefs</h3>
<p>LA is always so much fun!</p>
</div>
</div>
<div class="item">
<img src="https://www.arvanjobs.com/wp-content/themes/twentytwentyone-child/img/1.png" alt="housekeeping">
<div class="carousel-caption">
<h3 style="color:white;">Waiters</h3>
<p>Thank you, Chicago!</p>
</div>
</div>
<div class="item">
<img src="https://www.arvanjobs.com/wp-content/themes/twentytwentyone-child/img/2.png" alt="chefs">
<div class="carousel-caption">
<h3 style="color:white;">Housekeeping</h3>
<p>We love the Big Apple!</p>
</div>
</div>
<div class="item">
<img src="https://www.arvanjobs.com/wp-content/themes/twentytwentyone-child/img/3.png" alt="awijr">
<div class="carousel-caption">
<h3 style="color:white;">Reception</h3>
<p>We love the Big Apple!</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<div class="item11 cnt">
<img src="https://www.arvanjobs.com/wp-content/themes/twentytwentyone-child/img/arvan2.jpg" />
</div>
<div class="item12 cnt">
<img src="https://www.arvanjobs.com/wp-content/themes/twentytwentyone-child/img/arvan2-1.png" />
</div>
</body>
I have some ads I want placing side by side and making all the same size but, whilst float: left works to get them to float left, display: inline-block, which should stack them in a grid side by side, and max-width doesn't.
Tried Css
#media (min-width: 768px){.box-
layout {max-width: 100%; float:
left; display: inline-block;}}
This, as mentioned, floats left but doesn't place side by side or make all the ads the same size. It also throws up a css lint obstruction that float and display can not be used together.
https://adsler.co.uk/find-an-event/
HTML:
<div class="line-layout"
style="display: none;">
<li class="event_listing post-6985
type-event_listing status-expired
hentry" style="visibility:
visible;" data-latitude="" data-
longitude="">
<div class="event-
info-row-listing">
<a href="https://adsler.co.uk/
event/new-cross-and-deptford-free-
film-festival/">
<div class="row"><div class="col-
md-1">
<div class="organizer-logo">
<img alt="Deptford Film Festival"
src="https://adsler.co.uk/wp-
content/uploads/event-manager-
uploads/event_banner/2019/05/2
456d41f16399aed538d25b1cd32ad1
4.jpg">
</div>
</div><div class="col-md-4">
<div class="event-title">
<h4>New Cross and
Deptford Free Film Festival</h4>
<div class="boxes-view-
listing-
registered-code">
</div>
<div class="event-
organizer-
name">
<normal>Deptford Film Festival
<normal></normal>
</normal>
</div>
</div>
<div class="col-md-2">
<div class="date"
<date>2019-05-26</date>
</div>
</div>
<div class="col-md-3">
<div class="event-
location"><i class="glyphicon
glyphicon-map-
marker"></i> London </div>
</div>
<div class="col-md-2">
<div class="event-
ticket">#free</div>
</div>
<div class="col-md-3">
</div>
</div>
</a>
</div>
</li>
</div>
<!-- Box Layout -->
<a class="event_listing post-6985
type-event_listing status-expired
hentry" href="https://adsler.co.uk
/event/new-cross-and-deptford-free-
film-festival/">
<div class="box-layout">
<div class="event-img"><img
alt="Deptford Film Festival"
src="https://adsler.co.uk/wp-
content/uploads/event-manager-
uploads/event_banner/2019/05/2
456d41f16399aed538d25b1cd32
ad14.jpg"></div>
<div class="boxes-view-box-
registered-code">
</div>
<div class="event-title">
New Cross and Deptford Free Film
Festival
</div>
<div class="event-start-
date">2019- 05-26
</div>
<div class="event-location">
<i class="glyphicon glyphicon-
map-
marker"></i> London </div>
<div class="box-footer">
<div class="event-
ticket">#free</div>
</div>
</div>
</a>
your html and css are quite chaotic.
I made an example how it should be and how it works.
Ps. don't pay attention to
max-width:800px;
thats just for demo purposes.
https://codepen.io/anon/pen/QXWLrg
Hope it helps you out!
I have the following issue:
FULL CODE: jsfiddle
HTML part:
<div class="gc-tabs">
<!-- importar icones em cada aba -->
<ul id="home-tabs-menu" class="nav nav-tabs">
<li class="most-read active">
<a href="#mais-vistas">
<img class="center-block" src="http://guiadacozinha.app/wp-content/themes/gc/assets/images/svg/most-read.svg" />
Mais Vistas
</a>
</li>
<li class="best-rated">
<a href="#melhor-avaliadas"><img class="center-block" src="http://guiadacozinha.app/wp-content/themes/gc/assets/images/svg/best-rated.svg" />
Melhor avaliadas
</a>
</li>
<li class="most-commented">
<a href="#mais-comentadas">
<img class="center-block" src="http://guiadacozinha.app/wp-content/themes/gc/assets/images/svg/most-commented.svg" />
Mais comentadas
</a>
</li>
</ul>
<div class="tab-content">
<div id="mais-vistas" class="tab-pane fade in active">
<a href="#" class="recipe-card">
<div class="recipe-img">
<img src="http://guiadacozinha.app/wp-content/themes/gc/assets/images/img-teste.png" />
</div>
<div class="recipe-desc">
<h3 class="recipe-title">Petit gâteau de caneca</h3>
<div>rating</div>
<span>Fácil</span>
<span>45min</span>
</div>
</a>
<a href="#" class="recipe-card">
<div class="recipe-img">
<img src="http://guiadacozinha.app/wp-content/themes/gc/assets/images/img-teste.png" />
</div>
<div class="recipe-desc">
<h3 class="recipe-title">Petit gâteau de caneca</h3>
<div>rating</div>
<span>Fácil</span>
<span>45min</span>
</div>
</a>
<a href="#" class="recipe-card">
<div class="recipe-img">
<img src="http://guiadacozinha.app/wp-content/themes/gc/assets/images/img-teste.png" />
</div>
<div class="recipe-desc">
<h3 class="recipe-title">Petit gâteau de caneca</h3>
<div>rating</div>
<span>Fácil</span>
<span>45min</span>
</div>
</a>
</div>
<div id="melhor-avaliadas" class="tab-pane fade">
<h3>Melhor avaliada #1</h3>
<img src="http://guiadacozinha.app/wp-content/themes/gc/assets/images/img-teste.png" />
</div>
<div id="mais-comentadas" class="tab-pane fade">
<h3>Mais comentada #1</h3>
<img src="http://guiadacozinha.app/wp-content/themes/gc/assets/images/img-teste.png" />
</div>
</div>
</div>
FULL CODE: https://jsfiddle.net/Lqp1g1ge/
I need the 3 navigation icons to be centered and occupy all the space like that:
Can you help me, please?
Simplest fix, set the CSS like so. Please note I have added my own images since the images provided don't work.
CSS3:
ul#home-tabs-menu{
display:flex;
}
ul#home-tabs-menu li{
display:flex;
align-items:center;
flex-grow:1;
height:100%;
}
ul#home-tabs-menu li>a{
text-align:center;
width:100%;
}
JSFiddle Demo
I am trying to parse some data and images from controller to show on view. I implemented a foreach loop to show some images in slideshow. But whenever I run the code only the first image appears inside the body, and other images and information goes below the footer. I am not getting what mistake I made in this code.
My code is-
<div class="row wrapper border-bottom white-bg page-heading">
<div class="col-lg-10">
<h2>#ViewBag.Title</h2>
<ol class="breadcrumb">
<li class="active">
Back
</li>
</ol>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Search</title>
</head>
<body>
<div>
#foreach (var item in ViewBag.Cities) {
<div class="col-lg-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>#item.Name</h5>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-wrench"></i>
</a>
</div>
</div>
<div class="ibox-content">
<p>#item.Shorttext</p>
</div>
</div>
</div>
foreach (var image in item.Images) {
<div class="col-lg-5">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>Animation without caption</h5>
</div>
<div class="ibox-content">
<div class="carousel slide" id="carousel1">
<div class="carousel-inner">
<div class="item active">
<img alt="image" class="img-responsive" src="#image" style="height:400px;width:600px">
</div>
</div>
<a data-slide="prev" href="#carousel1" class="left carousel-control">
<span class="icon-prev"></span>
</a>
<a data-slide="next" href="#carousel1" class="right carousel-control">
<span class="icon-next"></span>
</a>
</div>
</div>
</div>
</div>
} }
</div>
</body>
</html>
My view is looking like this.
Hope it will solve your issue.
<div class="col-lg-10">
<h2>#ViewBag.Title</h2>
<ol class="breadcrumb">
<li class="active">
Back
</li>
</ol>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Search</title>
</head>
<body>
<div>
#foreach (var item in ViewBag.Cities) {
<div class="col-lg-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>#item.Name</h5>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-wrench"></i>
</a>
</div>
</div>
<div class="ibox-content">
<p>#item.Shorttext</p>
</div>
</div>
</div>
}
foreach (var image in item.Images) {
<div class="col-lg-5">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>Animation without caption</h5>
</div>
<div class="ibox-content">
<div class="carousel slide" id="carousel1">
<div class="carousel-inner">
<div class="item active">
<img alt="image" class="img-responsive" src="#image" style="height:400px;width:600px">
</div>
</div>
<a data-slide="prev" href="#carousel1" class="left carousel-control">
<span class="icon-prev"></span>
</a>
<a data-slide="next" href="#carousel1" class="right carousel-control">
<span class="icon-next"></span>
</a>
</div>
</div>
</div>
</div>
}
</div>
</body>
</html>
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.