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
Related
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.
My navigation is fixed on the top of page. When I scroll down and don't hover over the div element, everything looks all right. However, when try to select some link from my navigation I only select a div element from content under my navigation. The problem is in the div element under it because every time I had selected div element, it crushed my fixed navigation. Please help me if you understand the problem.
My html code is
<html !DOCTYPE>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
<head>
</head>
<body>
<div id="navbg">
<nav>
<ul>
<li><center><img src="uploads/nav/pocetna.png"><p>Početna</p></center></li>
<li><a class="select" href="#"><center><img src="uploads/nav/trgovina.png"><p>Trgovina</p></center></a></li>
<li><center><img src="uploads/nav/info.png"><p>O nama</p></center></li>
<li><center><img src="uploads/nav/mail.png"><p>Kontakt</p></center></li>
</ul>
</nav>
</div>
<header>
<img id="logo" src="images/logo4.png">
</header>
<div id="clear"></div>
<section>
<h1>Trgovina</h1>
<div class="okvir">
<a href="#">
<img class="slika"src="uploads/4.jpg">
<div class="tekst">Arc de Triomphe</div>
</a>
</div>
<div class="okvir">
<img class="slika"src="uploads/1.jpg">
<div class="tekst">Arc de Triomphe</div>
</div>
<div class="okvir">
<a href="#">
<img class="slika"src="uploads/2.jpg">
<div class="tekst">Arc de Triomphe</div>
</a>
</div>
<div class="okvir">
<a href="#">
<img class="slika"src="uploads/3.jpg">
<div class="tekst">Arc de Triomphe</div>
</a>
</div>
<div class="okvir">
<a href="#">
<img class="slika"src="uploads/4.jpg">
<div class="tekst">Arc de Triomphe</div>
</a>
</div>
<div class="okvir">
<img class="slika"src="uploads/1.jpg">
<div class="tekst">Arc de Triomphe</div>
</div>
<div class="okvir">
<img class="slika"src="uploads/1.jpg">
<div class="tekst">Arc de Triomphe</div>
</div>
<div class="okvir">
<a href="#">
<img class="slika"src="uploads/2.jpg">
<div class="tekst">Arc de Triomphe</div>
</a>
</div>
<div class="okvir">
<a href="#">
<img class="slika"src="uploads/3.jpg">
<div class="tekst">Arc de Triomphe</div>
</a>
</div>
<div class="okvir">
<a href="#">
<img class="slika"src="uploads/4.jpg">
<div class="tekst">Arc de Triomphe</div>
</a>
</div>
<div class="okvir">
<img class="slika"src="uploads/1.jpg">
<div class="tekst">Arc de Triomphe</div>
</div>
<div class="okvir">
<img class="slika"src="uploads/1.jpg">
<div class="tekst">Arc de Triomphe</div>
</div>
<div class="okvir">
<a href="#">
<img class="slika"src="uploads/2.jpg">
<div class="tekst">Arc de Triomphe</div>
</a>
</div>
<div class="okvir">
<a href="#">
<img class="slika"src="uploads/3.jpg">
<div class="tekst">Arc de Triomphe</div>
</a>
</div>
<div class="okvir">
<a href="#">
<img class="slika"src="uploads/4.jpg">
<div class="tekst">Arc de Triomphe</div>
</a>
</div>
<div class="okvir">
<img class="slika"src="uploads/1.jpg">
<div class="tekst">Arc de Triomphe</div>
</div>
<div id="clear"></div>
</section>
</body>
</html>
and this is my css:
#font-face {font-family: 'Roboto';font-style: normal;font-weight: normal;src: local('Roboto Regular'), local('Roboto-Regular'), url(../fonts/roboto-normal.woff) format('woff');}
#font-face {font-family: 'Roboto';font-style: normal;font-weight: bold;src: local('Roboto Bold'), local('Roboto-Bold'), url(../fonts/roboto-bold.woff) format('woff');}
#font-face {font-family: 'Roboto';font-style: italic;font-weight: normal;src: local('Roboto Italic'), local('Roboto-Italic'), url(../fonts/roboto-italic.woff) format('woff');}
#font-face {font-family: 'Roboto';font-style: italic;font-weight: bold;src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(../fonts/roboto-bold-italic.woff) format('woff');}
body{margin:0;padding:0;background:#eee url(../images/bg.png);font-family:Roboto;font-size:14px;font-style:normal;font-weight:normal;color:#777;}
#navbg{width:100%;height:20px;position:fixed;background:#333;}
nav{height:50px;float:right;margin:20px 40px 0px 0px;padding:0px 12px;background:#333;border-radius:0px 0px 10px 10px;}
nav ul, nav li{margin:-10px 0px 0px;padding:0;list-style:none;}
nav ul li{float:left;}
nav ul a{display:block;padding:8px 18px;text-decoration:none;color:#ddd;transition:all 0.3s;}
nav ul a:hover{color:#fff;background:rgba(255,255,255,0.1);}
nav ul a p{margin:4px 0px 0px;text-align:center;}
nav ul a img {width:30px;height:30px;}
.select{color:#a3d45b;background:rgba(0,0,0,0.1);}
header{padding:30px 40px 10px;background:url(../images/headBg.png);border-bottom:4px solid #669b3c;}
#logo{display:block;margin-right:40px;width:230px;}
section{margin:40px;}
h1{font-size:24px;font-weight:100;text-shadow:0px 1px #FFF;}
/* HERE IS PROBLEM */
.okvir{float:left;width:20%;height:19vw;overflow:hidden;}
.okvir a{display:block;margin:0;padding:0;font-size:20px;text-align:center;text-decoration:none;color:#fff;}
.slika {position:static;width:100%;height:19vw;}
.tekst {position:relative;width:80%;height:17vw;margin:-19vw 0 0;padding:8vw 10% 1vw;background:rgba(0,0,0,0.9);transition:all 1s;opacity:0;}
.okvir:hover .tekst {opacity:1;}
#clear{clear:both;}
That looks something like this http://jsfiddle.net/0c5ejr82/
I fixed it! Look: Fiddle
I added:
#navbg {
z-index: 100;
}
I am using angularjs to render my html and using bootstrap 3 to style it. The tabs render correctly, but the images within each tab do not display in a grid, rather, they are outputted one by one in a single column. What am I doing wrong?
<div class="col-sm-12">
<!--Nav Tabs-->
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="{{'#' + retailProducts[0].Category}}"
role="tab" data-toggle="tab">
{{retailProducts[0].Category}}
</a></li>
<li ng-repeat="pro in retailProductsMinusFirst">
<a href="{{'#' + pro.Category}}" role="tab" data-toggle="tab">
{{pro.Category}}
</a>
</li>
</ul>
<!--Tab Panes-->
<div class="tab-content">
<div class="tab-pane active" id="{{retailProducts[0].Category}}">
<div class="row">
<div class="col-sm-2">
<a ng-repeat="pro in retailProducts[0].Products" href="#"
class="thumbnail">
<img src="{{pro.Product.PrimaryPhotoUrl + '?height=100'}}"
alt="Product Photo" />
</a>
</div>
</div>
</div>
<div ng-repeat="pro in retailProductsMinusFirst" class="tab-pane"
id="{{pro.Category}}">
<div class="row">
<div class="col-sm-2">
<a ng-repeat="img in pro.Products" href="#" class="thumbnail">
<img src="{{img.Product.PrimaryPhotoUrl + '?height=100'}}"
alt="Product Photo" />
</a>
</div>
</div>
</div>
</div>
</div>
You're repeating the anchors. You need to repeat the column divs. Something like this:
<div ng-repeat="pro in retailProducts[0].Products" class="col-sm-2">
<a href="#" class="thumbnail">
<img src="{{pro.Product.PrimaryPhotoUrl + '?height=100'}}"
alt="Product Photo" />
</a>
</div>
I am using the plugin Glide.js on my frontpage, and I have build it up almost like shown on the plugin page. This also means that I wish my slider images to have 100% width, but at the same time I want them to be cropped/cut off at the bottom at the window. Precisely like it is don on the plugin page.
My html code looks like this:
<header class='header'>
<div class='header-wrapper'>
<img class='header-logo' src='/assets/glide-logo-cfe0cb95a81b55ff1e872b0c578c527d.png'>
<nav class='header_nav'>
<ul class='header_nav-wrapper'>
<li class='header_nav-item'>
<a class='header_nav-item-a' href='#' id='aboutOpen'>About us</a>
</li>
<li class='header_nav-item'>
<a class='header_nav-item-a' href='#'>Create account</a>
</li>
<li class='header_nav-item'>
<form>
<button class='header_nav-item-a header_nav-item-a--btn header_nav-item-a--donate' src='https://www.paypalobjects.com/en_US/i/btn/'>Login</button>
</form>
</li>
</ul>
</nav>
</img>
</div>
</header>
<div class='slider'>
<div class='slides'>
<div class='slide content_article content_article--fast'>
<center>
<img class='slider-img' src='/assets/bg-fast-219ed63d5978022b88ba2389b4f673b6.jpg'>
<div class='content_article-wrapper'>
<h1 class='content_article-h'>Title 1</h1>
<p class='content_article-p'>
Sub title 1
</p>
<div class='content_article-btns'>
<a class='content_article-btn header_nav-item-a header_nav-item-a--btn' href='#'>
<span class='entypo-download'></span>
Read more 1
</a>
<a class='content_article-btn header_nav-item-a header_nav-item-a--btn' href='#'>See examples 1</a>
</div>
<img class='content_article-img box-shadow animated fadeOutDownBig' src='/assets/fast-img-3d905c8a57b66ef354467a9a0a07d168.png'>
</div>
</center>
</div>
<div class='slide content_article content_article--simple'>
<center>
<img class='slider-img' src='/assets/bg-responsive-07aefbc31666790f38a6e3e3b46f67a8.jpg'>
<div class='content_article-wrapper'>
<h1 class='content_article-h'>Title 2</h1>
<p class='content_article-p'>
Sub title 2
</p>
<div class='content_article-btns'>
<a class='content_article-btn header_nav-item-a header_nav-item-a--btn' href='#'>
<span class='entypo-download'></span>
Read more 2
</a>
<a class='content_article-btn header_nav-item-a header_nav-item-a--btn' href='#'>See examples 2</a>
</div>
<img class='content_article-img box-shadow animated fadeOutDownBig' src='/assets/responsive-img-662aaea9b8453dc6eac46064fdcc7a56.png'>
</div>
</center>
</div>
<div class='slide content_article content_article--responsive'>
<center>
<img class='slider-img' src='/assets/bg-simple-2d45eb663c4c69d72f66c19eb0cce285.jpg'>
<div class='content_article-wrapper'>
<h1 class='content_article-h'>Title 3</h1>
<p class='content_article-p'>
Sub title 3
</p>
<div class='content_article-btns'>
<a class='content_article-btn header_nav-item-a header_nav-item-a--btn' href='#'>
<span class='entypo-download'></span>
Read more 3
</a>
<a class='content_article-btn header_nav-item-a header_nav-item-a--btn' href='#'>See examples 3</a>
</div>
<img class='content_article-img box-shadow animated fadeOutDownBig' src='/assets/simple-img-af275d5091063498174655c95fa41079.png'>
</div>
</center>
</div>
</div>
</div>
My css is very simple, but only handles the 100% width stretch:
.slider-img {
width: 100%;
}
So how do I cut off my slider images so they fit the height of the screen?
Here is the CSS
.crop{
float:left;
margin:.5em 10px .5em 0;
overflow:hidden; /* this is important */
border:1px solid #ccc;
}
/* input values to crop the image */
.crop img{
margin:-20px -15px -40px -55px;
}