Hello I am making a footer:
<div id="footer">
<ul>
<li id="qualifications">
<h4>Professional qualifications</h4>
<p>Name<br>
Chartered Veterinary Physiotherapist<br>
Chartered Physiotherapist<br>
BSc HONS MCSP<br>
Post Grad Dip (vet phys) ACPAT CAT A
</p>
</li>
<li id="logos">
<h4>head
</h4>
<img src="/" />
</li>
<li id="contact">
<h4>Contact and referal</h4>
<p>Contact</p>
<p><a id="referal">Referal Form</a></p>
</li>
</ul>
</div> <!---footer---->
I want the footer div to be 100% width so I can colour it. I want the ul to be 960px wide and the li elements to lign up next to on another in a inline-block. css:
#footer {
background-color:#666666;
#footer ul {
width:960px;
margin-left: auto ;
margin-right: auto ;
}
#footer li {
width: 320px;
display:inline-block;
}
But the li elements knock the last one underneath the first two and ther's odd spacing at the top.
Any help would be great!
reduce the number lines in professional qualification...
reduce the width of li...
and always use float left to solve the alignment problems
<!--<html>
<head>
<link rel="stylesheet" href="so.css"/>
</head><body>
<div id="header"></div>
<div id="footer">
<ul>
<li id="qualifications">
<h4>Professional qualifications</h4>
<p>Name<br>
Chartered Veterinary Physiotherapist<br>
</p>
</li>
<li id="logos">
<h4>head
</h4>
<img src="/" />
</li>
<li id="contact">
<h4>Contact and referal</h4>
<p>Contact</p>
<p><a id="referal">Referal Form</a></p>
</li>
</ul>
</div></body></html>-->
#header{
height:80%;
width:100%;
}
#footer {
background-color:#666666;
width:100%;
height:20%;
}
#footer ul {
width:960px;
margin-left: auto ;
margin-right: auto ;
height:100%;
}
#footer li {
width: 300px;
display: inline-block;
height: 100%;
float: left;
}
You can use this code
body {
margin: 0;
padding: 0;
}
#footer {
background-color: #666666;
clear: both;
width: 100%;
float: left;
margin: 0;
padding: 30px 0;
}
#footer ul {
width:960px;
margin: 0 auto;
padding: 0;
text-align: left;
}
#footer li {
width: 320px;
display:inline-block;
float: left;
}
<div id="footer">
<ul>
<li id="qualifications">
<h4>Professional qualifications</h4>
<p>Name<br>
Chartered Veterinary Physiotherapist<br>
Chartered Physiotherapist<br>
BSc HONS MCSP<br>
Post Grad Dip (vet phys) ACPAT CAT A
</p>
</li>
<li id="logos">
<h4>head</h4>
<img src="/" />
</li>
<li id="contact">
<h4>Contact and referal</h4>
<p>Contact</p>
<p><a id="referal">Referal Form</a></p>
</li>
</ul>
</div>
Related
Basically I have got a row with 3 columns, and the columns haves an image and text.
In chrome, Android, Fire-Fox, I managed to get each column the height of the parent, and then put the text in the middle if any other column is bigger. But in iPad with iOS 8.3 and 9.3.5, doesn't makes the columns big at 100% of the height.
The codepen is: https://codepen.io/rocketraccoon/pen/PEopPO
And here I leave the Snippet:
body {
background-color: red !important; /* Only for trying to see the visual effect required */
}
.triple-opcion {
padding: 40px;
}
.triple-opcion .opciones .opcion {
background-color: #FFFFFF;
text-align: center;
padding: 40px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
height: 100%;
min-height: 100%;
}
.triple-opcion .opciones .opcion:hover,
.triple-opcion .opciones .opcion:focus,
.triple-opcion .opciones .opcion:active {
text-decoration: none;
}
.triple-opcion .opciones .opcion .t5 {
text-transform: uppercase;
color: #191D22;
margin: auto;
max-width: 100%;
}
.triple-opcion .opciones .opcion img {
width: 64px;
margin-bottom: 15px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="triple-opcion ayuda">
<div class="row opciones opciones-ayuda">
<div class="col-4">
<a href="#>
<div class="opcion">
<img src="http://via.placeholder.com/300" alt="">
<p class="t5">Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500</p>
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="opcion">
<img src="http://via.placeholder.com/300" alt="">
<p class="t5">24 months</p>
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="opcion">
<img src="http://via.placeholder.com/300" alt="">
<p class="t5">48 months</p>
</div>
</a>
</div>
</div>
</div>
Any help you can provide will be helpful.
Here is a solution using a table. I also took the opportunity to optimize your code. You should not be using block elements, eg divs inside anchor tags.
HTML:
<div class="triple-opcion ayuda">
<div class="row opciones opciones-ayuda">
<div class="col-12 col-md-4 opcion">
<a class="inner">
<img src="http://via.placeholder.com/300" alt="Buscador de números">
<span class="t5">Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500
</span>
</a>
</div>
<div class="col-12 col-md-4 opcion">
<a class="inner">
<img src="http://via.placeholder.com/300" alt="Preguntas frecuentes">
<span class="t5">24 months</span>
</a>
</div>
<div class="col-12 col-md-4 opcion">
<a class="inner">
<img src="http://via.placeholder.com/300" alt="Sugerencias">
<span class="t5">48 months</span>
</a>
</div>
</div>
</div>
SCSS:
body {
background-color: red;
}
.triple-opcion {
.opciones {
display:table;
table-layout:fixed;
width:100%;
border-spacing: 40px;
border-collapse: separate;
.opcion {
text-align: center;
padding: 40px;
display: table-cell;
height: 100%;
background:#fff;
vertical-align:middle;
span {
display:block;
}
&:hover,
&:focus,
&:active {
text-decoration: none;
}
img {
width: 64px;
}
.t5 {
text-align: center;
margin: auto;
max-width: 100%;
}
}
}
}
Here is a working pen - https://codepen.io/scooterlord/pen/NXWmQJ
It's too late and I am writing from my couch so I didn't test it on my iPad, but am fairly certain it works.
Edit 2: I just realized what was requested, the initial description of the issue was not very clear. Here is a new codepen with what is requested:
https://codepen.io/scooterlord/pen/eymprK
Here's the normal size and view of the menu
And this is the view after reducing the size
I mean in the second view the dropdowns should be listed downhills. But in the small navbar, it only adds the hamburger button. The others remains the same.
(I cencored the corporative names. The shapes don't mean anything.)
Here are the codes i use for layout.
Layout.cshtml
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" id="menu">
<li>
<img src="~/Content/logo.png" alt="Ana Sayfa" />
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown">Yönetim</a>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu"><a class="dropdown-toggle" data-toggle="dropdown">Dosya Yükleme/Güncelleme</a>
<ul class="dropdown-menu">
<!-- moving the UL to the next line will cause an IE7 problem -->
<li>#Html.ActionLink("Cost Margin Yükleme", "Index", "CostMarginUpload")</li>
<li>#Html.ActionLink("EK5 Tarife Yükleme", "Index", "EK5TariffUpload")</li>
<li>#Html.ActionLink("ETS Sourcing Cost Yükleme", "Index", "ETSSourcingUpload")</li>
<li>#Html.ActionLink("ETS Sourcing Cost Tablosu Güncelleme", "Index", "ETSSourcingCost")</li>
</ul>
</li>
<li>#Html.ActionLink("Kullanıcı İşlemleri", "Index", "Users")</li>
<li class="dropdown dropdown-submenu"><a class="dropdown-toggle" data-toggle="dropdown">Parametresi Güncelleme</a>
<ul class="dropdown-menu">
<!-- moving the UL to the next line will cause an IE7 problem -->
<li>#Html.ActionLink("Bölge Güncelleme", "Index", "Region")</li>
<li>#Html.ActionLink("Bağlantı Tipi Güncelleme", "Index", "ConnectionTypes")</li>
<li>#Html.ActionLink("Tarife Grubu Güncelleme", "Index", "TariffGroup")</li>
<li>#Html.ActionLink("Profil Güncelleme", "Index", "Profile")</li>
<li>#Html.ActionLink("Parametreler Tablosu Güncelleme", "Index", "Parameters")</li>
<li>#Html.ActionLink("Zam Öngörüsü Girişi", "Index", "PriceIncreaseEstimates")</li>
</ul>
</li>
</ul>
</li>
<li>#Html.ActionLink("Müşteri İşlemleri", "Index", "Customers")</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown">Fiyatlandırma İşlemleri</a>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu"><a class="dropdown-toggle" data-toggle="dropdown">Fiyatlandırma</a>
<ul class="dropdown-menu">
<!-- moving the UL to the next line will cause an IE7 problem -->
<li>#Html.ActionLink("Tekli Fiyatlandırma", "Index", "SinglePricing")</li>
<li>#Html.ActionLink("Çoklu Fiyatlandırma", "Index", "MultiPricing")</li>
<li>#Html.ActionLink("İhale İçin Fiyatlandırma", "Index", "TenderPricing")</li>
</ul>
</li>
<li>#Html.ActionLink("Teklif Görüntüleme", "Index", "OfferView")</li>
<li class="dropdown dropdown-submenu"><a class="dropdown-toggle" data-toggle="dropdown">Teklif Performans Bilgileri</a>
<ul class="dropdown-menu">
<!-- moving the UL to the next line will cause an IE7 problem -->
<li>#Html.ActionLink("Teklif Performans Bilgisi Görüntüleme", "Index", "PerformanceView")</li>
<li>#Html.ActionLink("Teklif Performans Bilgisi Sıralama", "Index", "PerformanceRank")</li>
</ul>
</li>
</ul>
</li>
<li style="float:right">
#User.Identity.Name
</li>
</ul>
</div>
</div>
</nav>
Scripts
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/kendo-js")
#Styles.Render("~/bundles/kendo-css")
#Scripts.Render("~/bundles/bootstrap")
#Styles.Render("~/Content/css")
#RenderSection("scripts", required: false)
<script src="Scripts/respond.min.js"></script>
<script>
$(document).ready(function () {
$("#menu").kendoMenu();
$(document.body).css("visibility", "visible");
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function (event) {
event.preventDefault();
event.stopPropagation();
$(this).parent().siblings().removeClass('open');
$(this).parent().toggleClass('open');f
});
});
</script>
Styles
html {
background-color: #eeeeee;
margin: 0px;
padding: 0px;
}
body {
visibility: hidden;
}
#menu h2 {
font-size: 1em;
text-transform: uppercase;
}
#template img {
float: left;
}
#template {
width: 380px;
}
.nav > li {
position: relative;
display: block;
}
.navbar-inverse {
background-color: #eeeeee;
}
.navbar-nav {
float: none;
}
.marginBottom-0 {
margin-bottom: 0;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu > .dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu > a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #cccccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover > a:after {
border-left-color: #555;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
EDIT: you are using the library KendoMenu and it possibly adding class (and CSS) into your menu div.
In order to keep li into display block you can use the following code
.nav > li
{
position: relative !important;
display: block !important;
}
The !important; will lock this CSS property from any future changes.
I've been trying to reference a image in my scss file by passing the code:
background-image: asset-url("bg.jpg", image) no-repeat center center fixed;
I've also tried:
background-image: image-url("bg.jpg") no-repeat center center fixed;
However when I run rails s I get the following error:
ActionController::RoutingError (No route matches [GET] "/assets/images/bg.jpg"):
And yes, I'm certain that my image is on app/assets/images.
How can I manage to solve this problem?
View File (Downloaded from Startup Bootstrap):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Stylish Portfolio Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<%= stylesheet_link_tag "bootstrap", "custom" %>
</head>
<body>
<!-- Side Menu -->
<a id="menu-toggle" href="#" class="btn btn-primary btn-lg toggle"><i class="fa fa-bars"></i></a>
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<a id="menu-close" href="#" class="btn btn-default btn-lg pull-right toggle"><i class="fa fa-times"></i></a>
<li class="sidebar-brand">Start Bootstrap
</li>
<li>Home
</li>
<li>About
</li>
<li>Services
</li>
<li>Portfolio
</li>
<li>Contact
</li>
</ul>
</div>
<!-- /Side Menu -->
<!-- Full Page Image Header Area -->
<div id="top" class="header">
<div class="vert-text">
<h1>Start Bootstrap</h1>
<h3>
<em>We</em> Build Great Templates,
<em>You</em> Make Them Better</h3>
Find Out More
</div>
</div>
<!-- /Full Page Image Header Area -->
<!-- Intro -->
<div id="about" class="intro">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<h2>Subtle Sidebar is the Perfect Template for your Next Portfolio Website Project!</h2>
<p class="lead">This template really has it all. It's up to you to customize it to your liking! It features some fresh photography courtesy of <a target="_blank" href="http://join.deathtothestockphoto.com/">Death to the Stock Photo</a>.</p>
</div>
</div>
</div>
</div>
<!-- /Intro -->
<!-- Services -->
<div id="services" class="services">
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4 text-center">
<h2>Our Services</h2>
<hr>
</div>
</div>
<div class="row">
<div class="col-md-2 col-md-offset-2 text-center">
<div class="service-item">
<i class="service-icon fa fa-rocket"></i>
<h4>Spacecraft Repair</h4>
<p>Did your navigation system shut down in the middle of that asteroid field? We can repair any dings and scrapes to your spacecraft!</p>
</div>
</div>
<div class="col-md-2 text-center">
<div class="service-item">
<i class="service-icon fa fa-magnet"></i>
<h4>Problem Solving</h4>
<p>Need to know how magnets work? Our problem solving solutions team can help you identify problems and conduct exploratory research.</p>
</div>
</div>
<div class="col-md-2 text-center">
<div class="service-item">
<i class="service-icon fa fa-shield"></i>
<h4>Blacksmithing</h4>
<p>Planning a time travel trip to the middle ages? Preserve the space time continuum by blending in with period accurate armor and weapons.</p>
</div>
</div>
<div class="col-md-2 text-center">
<div class="service-item">
<i class="service-icon fa fa-pencil"></i>
<h4>Pencil Sharpening</h4>
<p>We've been voted the best pencil sharpening service for 10 consecutive years. If you have a pencil that feels dull, we'll get it sharp!</p>
</div>
</div>
</div>
</div>
</div>
<!-- /Services -->
<!-- Callout -->
<div class="callout">
<div class="vert-text">
<h1>A Dramatic Text Area</h1>
</div>
</div>
<!-- /Callout -->
<!-- Portfolio -->
<div id="portfolio" class="portfolio">
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4 text-center">
<h2>Our Work</h2>
<hr>
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-2 text-center">
<div class="portfolio-item">
<%= image_tag "portfolio-1.jpg" %>
<h4>Cityscape</h4>
</div>
</div>
<div class="col-md-4 text-center">
<div class="portfolio-item">
<%= image_tag "portfolio-2.jpg" %>
<h4>Is That On Fire?</h4>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-2 text-center">
<div class="portfolio-item">
<%= image_tag "portfolio-3.jpg" %>
<h4>Stop Sign</h4>
</div>
</div>
<div class="col-md-4 text-center">
<div class="portfolio-item">
<%= image_tag "portfolio-4.jpg" %>
<h4>Narrow Focus</h4>
</div>
</div>
</div>
</div>
</div>
<!-- /Portfolio -->
<!-- Call to Action -->
<div class="call-to-action">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<h3>The buttons below are impossible to resist.</h3>
Click Me!
Look at Me!
</div>
</div>
</div>
</div>
<!-- /Call to Action -->
<!-- Map -->
<div id="contact" class="map">
<iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&aq=0&oq=twitter&sll=28.659344,-81.187888&sspn=0.128789,0.264187&ie=UTF8&hq=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&t=m&z=15&iwloc=A&output=embed"></iframe>
<br />
<small>
</small>
</iframe>
</div>
<!-- /Map -->
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<ul class="list-inline">
<li><i class="fa fa-facebook fa-3x"></i>
</li>
<li><i class="fa fa-twitter fa-3x"></i>
</li>
<li><i class="fa fa-dribbble fa-3x"></i>
</li>
</ul>
<div class="top-scroll">
<i class="fa fa-circle-arrow-up scroll fa-4x"></i>
</div>
<hr>
<p>Copyright © Company 2013</p>
</div>
</div>
</div>
</footer>
<!-- /Footer -->
<!-- JavaScript -->
<%= javascript_include_tag "jquery-1.10.2.js" %>
<%= javascript_include_tag "bootstrap.js" %>
<!-- Custom JavaScript for the Side Menu and Smooth Scrolling -->
<script>
$("#menu-close").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
});
</script>
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
});
</script>
<script>
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
</script>
</body>
</html>
CSS File:
html,
body {
height: 100%;
width: 100%;
}
.vert-text {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.vert-text h1 {
padding: 0;
margin: 0;
font-size: 4.5em;
font-weight: 700;
}
/* Side Menu */
#sidebar-wrapper {
margin-right: -250px;
right: 0;
width: 250px;
background: #000;
position: fixed;
height: 100%;
overflow-y: auto;
z-index: 1000;
-webkit-transition: all 0.4s ease 0s;
-moz-transition: all 0.4s ease 0s;
-ms-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
}
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
list-style: none;
margin: 0;
padding: 0;
}
.sidebar-nav li {
line-height: 40px;
text-indent: 20px;
}
.sidebar-nav li a {
color: #999999;
display: block;
text-decoration: none;
}
.sidebar-nav li a:hover {
color: #fff;
background: rgba(255,255,255,0.2);
text-decoration: none;
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 55px;
line-height: 55px;
font-size: 18px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
#menu-toggle {
top: 0;
right: 0;
position: fixed;
z-index: 1;
}
#sidebar-wrapper.active {
right: 250px;
width: 250px;
-webkit-transition: all 0.4s ease 0s;
-moz-transition: all 0.4s ease 0s;
-ms-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
}
.toggle {
margin: 5px 5px 0 0;
}
/* Full Page Image Header Area */
.header {
display: table;
height: 100%;
width: 100%;
position: relative;
background-image: image-url("bg.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* Intro */
.intro {
padding: 50px 0;
}
/* Services */
.services {
background: #7fbbda;
padding: 50px 0;
color: #ffffff;
}
.service-item {
margin-bottom: 15px;
}
i.service-icon {
border: 3px solid #ffffff;
border-radius: 50%;
display: inline-block;
font-size: 56px;
width: 140px;
height: 140px;
line-height: 136px;
vertical-align: middle;
text-align: center;
}
/* Callout */
.callout {
color: #ffffff;
display: table;
height: 400px;
width: 100%;
background-image: image-url("callout.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* Portfolio */
.portfolio {
padding: 50px 0;
}
.portfolio-item {
margin-bottom: 25px;
}
.img-portfolio {
margin: 0 auto;
}
/* Call to Action */
.call-to-action {
color: #ffffff;
background: #0a5175;
padding: 50px 0;
}
.call-to-action .btn {
margin: 10px;
}
/* Map */
.map {
height: 500px;
}
/* Footer */
footer {
padding: 100px 0;
}
.top-scroll {
margin-top: 50px;
}
.top-scroll a {
text-decoration: none;
color: inherit;
}
i.scroll {
color: #333333;
}
i.scroll:hover {
color: #0a5175;
}
/* Responsive */
#media (max-width: 768px) {
.header {
background-image: image-url("bg.jpg") no-repeat center center scroll;
}
.callout {
background-image: image-url("callout.jpg") no-repeat center center scroll;
}
.map {
height: 75%;
}
}
Run bundle exec rake assets:precompile to precompile yours assets. image-url("bg.jpg") literally becomes url(/assets/bg.jpg), which would yield a broken link in your case.
Is it possible to set a checkbox instead of a split button in a split-button-list in jquery-mobile??
It seems to be easy to change it to be another button, but checkbox..
I want my checkbox to appear on a RIGHT side INSTEAD of a split button, not instead of a picture
Thanks for help..
Here is a DEMO FIDDLE
The UL does not use split icon, but instead an absolutely positioned DIV on the right with a checkbox inside. The CSS is used to position everything correctly:
<ul class="has-right-radio" data-role="listview" data-inset="true">
<li data-icon="false">
<a href="#">
<img src="http://view.jquerymobile.com/1.3.0/docs/_assets/img/album-p.jpg" />
<h3>Picture</h3>
<p>List item with thumbnail and right radio</p>
</a>
<div class="right-radio">
<input type="checkbox" name="checkbox-1a" id="checkbox-1a" checked="" />
<label for="checkbox-1a"></label>
</div>
</li>
</ul>
.has-right-radio .ui-link-inherit {
margin-right: 48px !important;
}
.right-radio {
position: absolute;
top: 0px; bottom: 0px; right: 0px;
width: 48px;
border-left: 1px solid rgb(204, 204, 204);
}
.right-radio .ui-checkbox input {
visibility: hidden;
}
.right-radio .ui-checkbox, .right-radio .ui-checkbox label {
position: absolute;
top: 0px; bottom: 0px; right: 0px; left: 0px;
}
.right-radio .ui-checkbox label {
background-image: none;
background-color: transparent;
border: 0;
}
.right-radio .ui-checkbox label .ui-btn-inner {
position: absolute;
top: 50%;
margin-top: -10px;
}
If you do not need the thumbnail, just leave out the IMG tag like the second LI in the fiddle.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<style>
.ui-btn-up-c{border:none;}
.ui-btn-hover-c{border:none;}
.ui-btn-hover-c:visited, .ui-btn-hover-c:hover, .ui-btn-hover-c a.ui-link-inherit { color:none;background:none;border:0px; }
</style>
</head>
<body>
<div data-role="page" id="myPage1">
<ul data-role="listview">
<li>
<div class="ui-grid-b">
<div class="ui-block-a" style="width: 30%;">
<div data-role="fieldcontain">
<img src="http://view.jquerymobile.com/1.3.0/docs/_assets/img/album-p.jpg">
</div>
</div>
<div class="ui-block-b" style="width: 60%;">
<div data-role="fieldcontain">
<h2>Phoenix</h2>
<p>Wolfgang Amadeus Phoenix Wolfgang Amadeus Phoenix Wolfgang Amadeus Phoenix</p>
</div>
</div>
<div class="ui-block-c" style="width: 6%; padding-top: 55px; float: right;">
<div style="float: right;">
<label>
<input name="checkbox-0 " type="checkbox">
</label>
</div>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>
I have made a 3D cube, and when you click on some element on the cube, a div (larger than the cube) is displayed on top of the cube. In this div are some links – the problem is, that the parts of the links that are exactly above the cube, doesn’t work. The parts of the links that are not above the cube (they are further to the right or left) work perfectly fine as links. I am using z-index to position the layers, and I simply can’t figure out what is wrong. If anyone has a suggestion, I would very much appreciate it.
I added my code below - it is very extensive, so I tried to leave out the elements that shouldn't be related to the issue. I don't think that the script should be the issue either, but I added the code related to the elements just in case.
Thanks
HTML:
<ul id="cube">
<li class='face' id="facecubeone"></li>
<li class='face' id="facecubetwo"></li>
<li class='face' id="facecubethree"></li>
<li class='face' id="facecubefour">
<ul class="cube2 low oneleft" id="cubefour1">
<li class='square'></li>
<li class='square'></li>
<li class='square'></li>
<li class='square'></li>
<li class='square'></li>
<li class='square'></li>
</ul>
<ul class="cube2 high twoleft" id="cubefour2">
<li class='square'></li>
<li class='square'></li>
<li class='square'></li>
<li class='square'></li>
<li class='square'></li>
<li class='square'></li>
</ul>
<ul class="cube2 high threeleft activefour active" id="cubefour3">
<li><img id="mig" src="img/cvbillede.jpg" width="100%" height="100%" alt="ABOUT ME"></img></li>
<li class='square'></li>
<li class='square'></li>
<li class='square'></li>
<li class='square'></li>
<li class='square'></li>
</ul>
<ul class="cube2 high fourleft activefour active" id="cubefour4">
<li></li>
<li class='square'></li>
<li class='square'></li>
<li class='square'></li>
<li class='square'></li>
<li class='square'></li>
</ul>
<ul class="cube2 high fiveleft" id="cubefour5">
<li class='square'></li>
<li class='square'></li>
<li class='square'></li>
<li class='square'></li>
<li class='square'></li>
<li class='square'></li>
</ul>
<ul class="cube2 low sixleft" id="cubefour6">
<li class='square'></li>
<li class='square'></li>
<li class='square'></li>
<li class='square'></li>
<li class='square'></li>
<li class='square'></li>
</ul>
<ul class="cube2 low sevenleft" id="cubefour7">
<li class='square'></li>
<li class='square'></li>
<li class='square'></li>
<li class='square'></li>
<li class='square'></li>
<li class='square'></li>
</ul>
<ul class="cube2 high eightleft" id="cubefour8">
<li class='square'></li>
<li class='square'></li>
<li class='square'></li>
<li class='square'></li>
<li class='square'></li>
<li class='square'></li>
</ul>
<ul class="cube2 high nineleft activefour active" id="cubefour9">
<li></li>
<li class='square'></li>
<li class='square'></li>
<li class='square'></li>
<li class='square'></li>
<li class='square'></li>
</ul>
</li>
<li class='face'></li>
<li class='face'></li>
</ul>
<div id="myprojects">
<div class="projects" id="projectme">
<img class="exit" src="img/exit.png" alt="exit"></img>
<div class="projecttext">
<p class="titles">About me</p>
<p class="descriptions" id="">
TEXT
</p>
<div class="links" id="">LINK TO RESUME - only part of it works<br>LINK TO LINKEDIN PROFILE</div>
</div>
<img class="projectimages" id="" src="img/cvbillede.jpg" width="310px" height="310px" alt="pictureofme"></img>
</div>
</div>
CSS:
#cube {
position: fixed;
clear: both;
z-index: 900;
padding: 0;
width: 350px; height: 350px;
list-style: none;
/* centering */
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
-webkit-transform: rotate3d(-10, 30, -4, 47.5deg);
-webkit-transform-style: preserve-3d;
-webkit-animation: ani 8s infinite linear; }
.cube2 {
position: relative;
/*z-index: 901;*/
float: left;
margin: 0px;
padding: 0;
width: 116.63px; height: 116.63px;
list-style: none;}
.face, #face {
box-sizing: border-box;
position: absolute;
top: 50%; left: 50%;
margin: -175px;
width: 350px; height: 350px;
background: black; }
.square {
box-sizing: border-box;
position: absolute;
margin-top: 0px;
margin-left: 0px;
padding: 0em;
width: 116.63px; height: 116.63px;
padding-top: 2.5px;
background-color: black;}
#myprojects {
clear: both;
position: absolute;
z-index: 9990;
width: 700px;
height: 400px;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
display: none;}
.projects {
position: relative;
z-index: 9991;
width: 680px;
height: 380px;
padding: 10px;
display: none;
border: 2px solid black;
background: rgb(68,68,68); /* Old browsers */}
.exit {
width: 20px;
height: 20px;
float: right;}
.projecttext {
clear: both;
position: relative;
z-index: 9992;
margin-top: 0px;
float: left;
height: 350px;
width: 370px;}
.titles {
margin-top: 0px;}
.descriptions {
margin-right: 10px;
height: 220px;
text-align: justify;}
.links a{
position: relative;
line-height: 26px;
z-index: 9999;}
.links a:hover {
}
.projectimages {
margin-top: 43px;
float: right;
width: 310px;}
SCRIPT:
$(function(){
var visible = false;
$('.exit').click(function(){
$('#myprojects').fadeOut(1500);
$('.projects').fadeOut(1500);
$('.square').attr('href', '#');
$(".activenone").addClass('active');
$(".active").removeClass('activenone');
visible = false;
});
$('#cubefour3').click(function(){
if (visible == false) {
$('#myprojects').fadeIn(1500);
$('#projectme').fadeIn(1500);
$('.square').removeAttr("href");
$(".active").addClass('activenone');
$(".activenone").removeClass('active');
visible = true;
}
});
});
So I finally got it working :)
I had applyed a transformation to each of the 6 sides in the cube in other to make it appear like 3d, like e.g. so:
.face:nth-child(6) {
-webkit-transform: rotateX(-90deg) translateZ(175px);
-moz-transform: rotateY(-90deg) translateZ(175px);
-ms-transform: rotateY(-90deg) translateZ(175px);
-o-transform: rotateY(-90deg) translateZ(175px);
transform: rotateY(-90deg) translateZ(175px);
}
The translateZ somehow overruled the div I had placed on top of it, so the links didn't work. (I have no explanation of this though). I then applyed a transformation on the new div, like so:
.projects {
-webkit-transform: translateZ(275px);
-moz-transform: translateZ(275px);
-ms-transform: translateZ(275px);
-o-transform:translateZ(275px);
transform: translateZ(275px);
}
Amazingly it seems to be working now :)