Hi I'm having some issue with the position of a slider. It goes outside his holder, somewhere in the right. I'm pretty sure I'm missing something in the CSS but can't remember what exactly.
HTML:
<div class="slider">
<div class="carousel">
<img src="css/images/img1.jpg" alt="" />
<img src="css/images/img1.jpg" alt="" />
<img src="css/images/img1.jpg" alt="" />
</div>
<div class="pagination">
</div>
</div>
CSS:
.slider { position: relative; width: 100%; }
.carousel img { width: 781px; display: block; }
.pagination { position: absolute; bottom: 10px; left: 10px; }
.pagination a { background: url(images/pagination.png) no-repeat 0 bottom; height: 12px; width: 12px; float: left; font-size: 0; line-height: 0; text-indent: -4000px; padding: 0 3px 0 0; }
.pagination a:hover,
.pagination a.selected { background-position: 0 0; }
jQuery:
$(function(){
$(".carousel").carouFredSel({
items: 1,
scroll: {
fx: "fade"
},
auto: 4000,
width:781,
pagination: ".pagination"
});
});
I've found the mistake I was missing overflow:hidden
nice job in finding the mistake. Yes overflow is easily overlooked.
Related
I have absolutely no idea at this point. I have done everything I could to make sure the arrows and the thumbnail images are centered but somehow, it will not budge... I have even tried the but doesn't seem to make an affect. There is an JS file too but I don't think that really matters so I am not posting on here.
.gallery-outer {
overflow: hidden;
width: 830px;
/*left: 18px;
padding: 0 0 0 5px;*/
height: 250px;
margin-left: -50%;
float: left;
}
.gallery-inner {
float: left;
height: 140px;
position: relative;
width: 3390px;
}
.gallery-tmb {
float: left;
margin: 0 10px 0 0;
}
#gallery {
border-left: 1px solid #E9E9E9;
border-right: 1px solid #E9E9E9;
height: 80px;
margin: 15px;
padding: 0;
position: relative;
width: 400px;
}
#arrow-left {
background:#d1d1d1;
cursor: pointer;
height: 82px;
position: absolute;
left: -7px;
top: 0px;
width: 25px;
}
#arrow-left-small {
padding: 10px;
box-shadow: 4px -4px 0 1px black;
position: relative;
display: inline-block;
margin: 40px;
transform: rotate(225deg);
right: 27px;
top:-9px;
}
#arrow-right {
background:#d1d1d1;
cursor: pointer;
height: 82px;
position: absolute;
right: -476px;
top: 0px;
width: 25px;
}
#arrow-right-small {
padding: 10px;
box-shadow: 4px -4px 0 1px black;
position: relative;
display: inline-block;
margin: 40px;
transform: rotate(45deg);
right: 49px;
top:-9px;
}
<div id="gallery">
<div id="arrow-left">
<div id="arrow-left-small">
</div>
</div>
<div class="gallery-outer">
<div class="gallery-inner">
<div class="gallery-tmb">
<img src="images/executive1.png" alt="Executive1" height="auto" width="250"/>
</div>
<div class="gallery-tmb">
<img src="images/executive2.png" alt="Executive2" height="auto" width="250"/>
</div>
<div class="gallery-tmb">
<img src="images/executive3.png" alt="Executive3" height="auto" width="250"/>
</div>
<div class="gallery-tmb">
<img src="images/executive4.png" alt="Executive4" height="auto" width="250"/>
</div>
<div class="gallery-tmb">
<img src="images/executive5.png" alt="Executive5" height="auto" width="250"/>
</div>
<div class="gallery-tmb">
<img src="images/executive6.png" alt="Executive6" height="auto" width="250"/>
</div>
<div class="gallery-tmb">
<img src="images/executive7.png" alt="Executive7" height="auto" width="250"/>
</div>
</div>
</div>
<div id="arrow-right">
<div id="arrow-right-small">
</div>
</div>
</div>
(function ($) {
$.fn.thumbGallery = function (settings) {
var $this = $(this);
return this.each(function () {
settings = jQuery.extend({
speed: 800,
leftArrow: $this.find('#arrow-left'),
rightArrow: $this.find('#arrow-right'),
galleryContainer: $this.find('.gallery-inner'),
visibleImagesSize: 4
}, settings);
var imgElements = settings.galleryContainer.find('img').length;
var size = settings.visibleImagesSize;
settings.leftArrow.hide();
if (imgElements > settings.visibleImagesSize) {
settings.rightArrow.show();
} else {
settings.rightArrow.hide();
}
function animateLeft() {
var el = settings.galleryContainer.children(":last");
settings.galleryContainer.animate({
left: '+=' + el.outerWidth(true) + 'px'
},
settings.speed);
}
function animateRight() {
var el = settings.galleryContainer.children(":first");
settings.galleryContainer.animate({
left: '-=' + el.outerWidth(true) + 'px'
},
settings.speed);
}
function checkArrows() {
if (size === settings.visibleImagesSize) {
settings.leftArrow.hide();
} else {
settings.leftArrow.show();
}
if (size === imgElements) {
settings.rightArrow.hide();
} else {
settings.rightArrow.show();
}
}
settings.leftArrow.click(function () {
animateLeft();
size--;
checkArrows();
});
settings.rightArrow.click(function () {
animateRight();
size++;
checkArrows();
});
});
};
})(jQuery);
$(document).ready(function () {
$('#gallery').thumbGallery();
});
Solution with use of flexbox.
.gallery-outer {
overflow: hidden;
width: 830px;
/*left: 18px;
padding: 0 0 0 5px;*/
height: 250px;
}
.gallery-inner {
float: left;
height: 100%;
position: relative;
width: 3390px;
}
.gallery-tmb {
float: left;
margin: 0 10px 0 0;
}
#gallery {
border-left: 1px solid #E9E9E9;
border-right: 1px solid #E9E9E9;
display: flex;
justify-content: space-between;
margin: 15px;
padding: 0;
position: relative;
width: 800px;
}
#arrow-left {
background:#d1d1d1;
cursor: pointer;
height: 82px;
width: 25px;
align-self: center;
}
#arrow-left-small {
padding: 10px;
box-shadow: 4px -4px 0 1px black;
position: relative;
display: inline-block;
margin: 40px;
transform: rotate(225deg);
right: 27px;
top:-9px;
}
#arrow-right {
background:#d1d1d1;
cursor: pointer;
height: 82px;
width: 25px;
align-self: center;
}
#arrow-right-small {
padding: 10px;
box-shadow: 4px -4px 0 1px black;
position: relative;
display: inline-block;
margin: 40px;
transform: rotate(45deg);
right: 49px;
top:-9px;
}
Flexbox solution
I just built you an example with all the basics.
I don't recommend float abuse, only use it when really needed.
// HOPE IT HELPS
.gallery{
max-width: 600px;
margin: 0 auto;
text-align: center; /* this will center all the inline and inline-block content */
background: purple;
}
.arrow-left,.arrow-right{
width: 100px;
height: 100px;
display: inline-block;
vertical-align: middle;
background: blue;
color: white;
font-size: 5rem; /* just to make arrows show */
}
/* this is just to make the arrows show :p */
.arrow-left:before{
content: '←';
}
.arrow-right:after{
content: '→';
}
/* i'm just between the arrows and also inline (inline-block)*/
.gallery ul{
vertical-align: middle;
background: green;
margin: 0;
padding: 0;
display: inline-block;
}
/* where the images will go (you can use divs instead of ul, li) */
.gallery li {
display: inline-block;
}
img {
background: red;
width: 100px;
height:100px;
}
<div class="gallery">
<div class="arrow-left"></div>
<ul>
<li><img src="#" width=100 height=100 /></li>
<li><img src="#" width=100 height=100 /></li>
<li><img src="#" width=100 height=100 /></li>
</ul>
<div class="arrow-right">
</div>
</div>
You can use a bootstrap template like this:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.thumbnail{
height: 200px;
}
</style>
<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">
</head>
<body>
<div class="container-fulid">
<div class="row">
<div class="col-md-2 text-right">
<span class="glyphicon glyphicon-chevron-left" style="margin-top:20%"></span>
</div>
<div class="col-md-2">
<div class="thumbnail">
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
</div>
</div>
<div class="col-md-2 text-left">
<span class="glyphicon glyphicon-chevron-right" style="margin-top:20%"></span>
</div>
</div>
</div>
</div>
</body>
</html>
Images after "my art" part are not showing. Cursor is changing when you slide under the MY ART. So images are probably there, but not showing. The problem might be in css, but i cant find it.
https://codepen.io/anon/pen/oWKKVj
Im new in HTML, CSS and Java. I took this part from free galleries. https://codepen.io/wunnle/pen/ZLomgG
Please don't yell at me if i made smth stupid. Im trying to make a website for my classes.
<p> help </p>
You can use this code:
$(function() {
$(".img-w").each(function() {
$(this).wrap("<div class='img-c'></div>")
let imgSrc = $(this).find("img").attr("src");
$(this).css('background-image', 'url(' + imgSrc + ')');
})
$(".img-c").click(function() {
let w = $(this).outerWidth()
let h = $(this).outerHeight()
let x = $(this).offset().left
let y = $(this).offset().top
$(".active").not($(this)).remove()
let copy = $(this).clone();
copy.insertAfter($(this)).height(h).width(w).delay(500).addClass("active")
$(".active").css('top', y - 8);
$(".active").css('left', x - 8);
setTimeout(function() {
copy.addClass("positioned")
}, 0)
})
})
$(document).on("click", ".img-c.active", function() {
let copy = $(this)
copy.removeClass("positioned active").addClass("postactive")
setTimeout(function() {
copy.remove();
}, 500)
})
html,
body {
margin: 0;
padding: 0;
}
.all {
width: 100%;
}
.center {
transform: translate(-50%);
position: absolute;
top: 100px;
left: 50%;
}
.paint {
padding-top: 55%;
font-family: 'Quicksand';
font-size: 30px;
}
.menu {
background-color: transparent;
width: 100%;
}
.menu a {
float: right;
display: block;
color: black;
font-family: 'Quicksand', sans-serif;
text-align: center;
text-decoration: none;
font-size: 17px;
padding-right: 50px;
padding-left: 50px;
padding-bottom: 10px;
padding-top: 10px;
}
.menu a:hover {
background-color: #ddd;
color: black;
}
.menu .icon {
display: none;
}
#-ms-viewport{
width: device-width;
}
#media screen and (max-width: 600px) {
.menu a:not(:last-child) {
display: none;
}
.menu a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.menu.responsive {
position: relative;
}
.menu.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.menu.responsive a {
float: none;
display: block;
text-align: middle;
}
}
body {
padding: 30px 0;
position: relative;
}
.gallery {
width: 600px;
margin: auto;
border-radius: 3px;
overflow: hidden;
//position: relative;
}
.img-c {
width: 200px;
height: 200px;
float: left;
position: relative;
overflow: hidden;
}
.img-w {
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
cursor: pointer;
transition: transform ease-in-out 300ms;
}
.img-w img {
display: none;
}
.img-c {
transition: width ease 400ms, height ease 350ms, left cubic-bezier(0.4, 0, 0.2, 1) 420ms, top cubic-bezier(0.4, 0, 0.2, 1) 420ms;
}
.img-c:hover .img-w {
transform: scale(1.08);
transition: transform cubic-bezier(0.4, 0, 0.2, 1) 450ms;
}
.img-c.active {
width: 100% !important;
height: 100% !important;
position: absolute;
z-index: 2;
//transform: translateX(-50%);
}
.img-c.postactive {
position: absolute;
z-index: 2;
pointer-events: none;
}
.img-c.active.positioned {
left: 0 !important;
top: 0 !important;
transition-delay: 50ms;
}
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Quicksand:400,500" rel="stylesheet">
<title>Kinga Błaszczyk</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="all">
<div class="menu" id="myMenu">
Contact
About
My Art
☰
</div>
<div class="center">
<img src="https://s-media-cache-ak0.pinimg.com/736x/15/3c/38/153c381fbb537893047153bad1819568.jpg">
</div>
<br>
<div class="paint" style="text-align: center;">
<p>MY ART </p>
</div>
<div class="gallery">
<div class="img-w">
<img src="https://images.unsplash.com/photo-1485766410122-1b403edb53db?dpr=1&auto=format&fit=crop&w=1500&h=846&q=80&cs=tinysrgb&crop=" alt="" /></div>
<div class="img-w"><img src="https://images.unsplash.com/photo-1485793997698-baba81bf21ab?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=" alt="" /></div>
<div class="img-w"><img src="https://images.unsplash.com/photo-1485871800663-71856dc09ec4?dpr=1&auto=format&fit=crop&w=1500&h=2250&q=80&cs=tinysrgb&crop=" alt="" /></div>
<div class="img-w"><img src="https://images.unsplash.com/photo-1485871882310-4ecdab8a6f94?dpr=1&auto=format&fit=crop&w=1500&h=2250&q=80&cs=tinysrgb&crop=" alt="" /></div>
<div class="img-w"><img src="https://images.unsplash.com/photo-1485872304698-0537e003288d?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=" alt="" /></div>
<div class="img-w"><img src="https://images.unsplash.com/photo-1485872325464-50f17b82075a?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=" alt="" /></div>
<div class="img-w"><img src="https://images.unsplash.com/photo-1470171119584-533105644520?dpr=1&auto=format&fit=crop&w=1500&h=886&q=80&cs=tinysrgb&crop=" alt="" /></div>
<div class="img-w"><img src="https://images.unsplash.com/photo-1485881787686-9314a2bc8f9b?dpr=1&auto=format&fit=crop&w=1500&h=969&q=80&cs=tinysrgb&crop=" alt="" /></div>
<div class="img-w"><img src="https://images.unsplash.com/photo-1485889397316-8393dd065127?dpr=1&auto=format&fit=crop&w=1500&h=843&q=80&cs=tinysrgb&crop=" alt="" /></div>
</div> </div>
</body>
</html>
Because it cant find the image you're assigning.
<img src="https://placeimg.com/640/480/tech"/>
placeimg is a generated image.
I made some edits to your codepen and forked it.
You also didnt include jquery.
https://codepen.io/anon/pen/awooQB
In your codepen example you have the following
<div class="gallery">
<div class="img-w"><img src="1.jpg" alt="image" /></div>
<div class="img-w"><img src="2.jpg" alt="image" /></div>
<div class="img-w"><img src="3.jpg" alt="image" /></div>
<div class="img-w"><img src="4.jpg" alt="image" /></div>
<div class="img-w"><img src="5.jpg" alt="image" /></div>
<div class="img-w"><img src="6.jpg" alt="image" /></div>
<div class="img-w"><img src="7.jpg" alt="image" /></div>
<div class="img-w"><img src="sunset.jpg" alt="image" /></div>
<div class="img-w"><img src="10.jpg" alt="image" /></div>
</div>
For the images to show in your webpage, the files must be saved in the same location as the html file. So, make sure the images 1.jpg, 2.jpg etc are in the same folder as your html file and they should display as you want them to.
Additionally, using relative paths (i.e. that refer to a file relative to the html by only providing a partial path) like this will mean that your images will never show up on codepen as it has no access to the images.
To make images show up on codepen you need to publish them to the internet somehow (beyond the scope of this question) and use the full URL to the published image (it should start with http:// or https://)
On looking at the CSS though you also have
.img-w img {
display: none;
}
Removing the display:none means the images are displayed, however, i think you want to get the JQuery to work so you should add references to JQuery to your HTML file and then the images will be displayed as per the example below:
Snippet:
$(function() {
$(".img-w").each(function() {
$(this).wrap("<div class='img-c'></div>")
let imgSrc = $(this).find("img").attr("src");
$(this).css('background-image', 'url(' + imgSrc + ')');
})
$(".img-c").click(function() {
let w = $(this).outerWidth()
let h = $(this).outerHeight()
let x = $(this).offset().left
let y = $(this).offset().top
$(".active").not($(this)).remove()
let copy = $(this).clone();
copy.insertAfter($(this)).height(h).width(w).delay(500).addClass("active")
$(".active").css('top', y - 8);
$(".active").css('left', x - 8);
setTimeout(function() {
copy.addClass("positioned")
}, 0)
})
})
$(document).on("click", ".img-c.active", function() {
let copy = $(this)
copy.removeClass("positioned active").addClass("postactive")
setTimeout(function() {
copy.remove();
}, 500)
})
html,
body {
margin: 0;
padding: 0;
}
.all {
width: 100%;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.paint {
padding-top: 55%;
font-family: 'Quicksand';
font-size: 30px;
}
.gallery {
width: 100%;
margin: auto;
border-radius: 3px;
overflow: hidden;
//position: relative;
}
.img-c {
width: 200px;
height: 200px;
float: left;
position: relative;
overflow: hidden;
}
.img-w {
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
cursor: pointer;
transition: transform ease-in-out 300ms;
}
.img-w img {
display: none;
}
.img-c {
transition: width ease 400ms, height ease 350ms, left cubic-bezier(0.4, 0, 0.2, 1) 420ms, top cubic-bezier(0.4, 0, 0.2, 1) 420ms;
}
.img-c:hover .img-w {
transform: scale(1.08);
transition: transform cubic-bezier(0.4, 0, 0.2, 1) 450ms;
}
.img-c.active {
width: 100% !important;
height: 100% !important;
position: absolute;
z-index: 2;
//transform: translateX(-50%);
}
.img-c.postactive {
position: absolute;
z-index: 2;
pointer-events: none;
}
.img-c.active.positioned {
left: 0 !important;
top: 0 !important;
transition-delay: 50ms;
}
.menu {
background-color: transparent;
width: 100%;
}
.menu a {
float: right;
display: block;
color: black;
font-family: 'Quicksand', sans-serif;
text-align: center;
text-decoration: none;
font-size: 17px;
padding-right: 50px;
padding-left: 50px;
padding-bottom: 10px;
padding-top: 10px;
}
.menu a:hover {
background-color: #ddd;
color: black;
}
.menu .icon {
display: none;
}
#-ms-viewport{
width: device-width;
}
#media screen and (max-width: 600px) {
.menu a:not(:last-child) {
display: none;
}
.menu a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.menu.responsive {
position: relative;
}
.menu.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.menu.responsive a {
float: none;
display: block;
text-align: middle;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Quicksand:400,500" rel="stylesheet">
<title>Kinga Błaszczyk</title>
</head>
<body>
<div class="all">
<div class="menu" id="myMenu">
Contact
About
My Art
☰
</div>
<div class="center">
<img src="painter.png">
</div>
<div class="paint">
<center>
<p>MY ART </p>
</center>
</div>
<div class="gallery">
<div class="img-w"><img src="http://website-design-studio.net/finallinkB/wp-content/themes/suffusion/images/1.jpg" alt="image" /></div>
<div class="img-w"><img src="http://website-design-studio.net/finallinkB/wp-content/themes/suffusion/images/1.jpg" alt="image" /></div>
<div class="img-w"><img src="http://website-design-studio.net/finallinkB/wp-content/themes/suffusion/images/1.jpg" alt="image" /></div>
<div class="img-w"><img src="4.jpg" alt="image" /></div>
<div class="img-w"><img src="5.jpg" alt="image" /></div>
<div class="img-w"><img src="6.jpg" alt="image" /></div>
<div class="img-w"><img src="7.jpg" alt="image" /></div>
<div class="img-w"><img src="sunset.jpg" alt="image" /></div>
<div class="img-w"><img src="10.jpg" alt="image" /></div>
</div>
</div>
</body>
</html>
The answer to this question linking jquery in html shows you how to add JQuery to your HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
Please note these are old files and should be replaced with the current versions of JQuery.
I've created a left navigation bar using buttons. I'm trying to reduce the hyperlink area to just the background image. Also, another issue I'm having is the elements overlaying the background image are taking precedence over the hyperlink, so the button is not actually clickable. Page for reference
http://www.auburn.edu/administration/facilities/home-page/index.html
Hyperlink area
Here's the background image area
.img-responsive {
display: block;
padding: 0;
margin: 0;
}
.background:hover .head {
color: #d76e08;
}
.overlay {
position: absolute;
z-index: 1;
top: 0;
left: 0;
color: white;
}
.icon {
padding-top: 15px;
padding-left: 40px;
}
.head {
margin-top: -75px;
padding-left: 120px;
}
.content {
margin-top: -5px;
padding-left: 120px;
padding-right: 35px;
}
<div class="row">
<div class="col-sm-12">
<div class="background">
<a href="../Collin/misc/issues/index.html">
<img alt="background" class="img-responsive" src="buttons/images/button.png" />
</a>
<div class="overlay">
<div class="icon">
<img alt="test" class="img-responsive" src="buttons/images/info-icon.png" />
</div>
<p class="head">Ask Facilities</p>
<p class="content">Here will be text about the button. .</p>
</div>
</div>
</div>
</div>
I'm trying to reduce the hyperlink area to just the background image.
Your markup is incredibly complex for what you are displaying.
You could have something like:
<ul>
<li>
<a>
<h2></h2>
<p></p>
</a>
</li>
<li>
<a>
<h2></h2>
<p></p>
</a>
</li>
</ul>
and add the image and the gradient using CSS.
I would use a single link tag for your button and leverage CSS gradients for the background:
* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
.button {
background-image: linear-gradient(to bottom, #3D85C6, #07355F 50%, #07355F);
background-size: 100% 200%;
border-radius: 4px;
color: #fff;
display: block;
padding: 10px;
text-decoration: none;
transition: all 150ms ease-in-out;
}
.button:hover,
.button:focus,
.button:active {
background-position: 0 50%;
}
.button-icon {
float: left;
margin-right: 15px;
}
.button-content {
overflow: hidden;
}
.button-title {
font-size: 18px;
font-weight: bold;
}
.button-description {
font-size: 16px;
}
<a class="button" href="../Collin/misc/issues/index.html">
<div class="button-icon">
<img src="http://satyr.io/72/white?brand=github" alt=""/>
</div>
<div class="button-content">
<p class="button-title">Ask Facilities</p>
<p class="button-description">Here will be text about the button…</p>
</div>
</a>
Also here http://jsbin.com/rikisemawe/edit?html,css,output
The elements in OP were stacked in the markup, there were no nested components of the button. That would explain the unusual position coords and large padding.
Instead of <img>, background-image is used. Changed some of the tags to a real <button>, <h4> instead of <p>, etc.
SNIPPET
.button {
position: relative;
min-width: 350px;
max-width: 100%;
min-height: 95px;
height: auto;
padding: 5px 10px;
border: 0 none transparent;
border-radius: 6px;
background: url(http://www.auburn.edu/administration/facilities/home-page/buttons/images/button.png)no-repeat;
background-size: cover;
}
.background:hover .head {
color: #d76e08;
}
.text {
padding: 0 5px;
position: absolute;
left: 85px;
top: 5px;
text-align: left;
color: #def;
text-decoration: none;
}
.button:hover,
.text:hover {
text-decoration: none;
color: #def;
}
.button:hover .head {
color: gold;
}
.icon {
width: 75px;
height: 75px;
position: absolute;
top: calc(50% - 37.5px);
background: url(http://www.auburn.edu/administration/facilities/home-page/buttons/images/service-icon.png)no-repeat;
}
<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/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-sm-12">
<button class="button">
<div class="icon"></div>
<a class='text'>
<h4 class="head">Ask Facilities</h4>
<p class="content">Here will be text about the button.</p>
</a>
</button>
</div>
</div>
So I want to add a new part of a website. well its hard to explain... So look at this.
CSS:
.menu-side{
background: #333;
border-right: 1px solid #000;
color: #fff;
position: fixed;
top: 0;
left: -231px;
width: 210px;
height: 100%;
padding: 10px;
}
.menu-side-open{
left:0px;
}
.menu{
overflow-x: hidden;
position: relative;
left: 0px;
}
.menu-open {
left:231px;
}
.menu, .menu-side{
transition: 900ms;
}
.bar {
height: 7px;
width: 25px;
background-color: black;
margin: 2px;
border-radius: 20px;
}
.listing{
text-align: center;
}
.list {
padding: 2px;
color: white;
text-decoration: none;
width: 233px;
}
.list img{
position: absolute;
}
.box:hover {
background-color: gray;
}
body {
background-image: url('download.jpeg')
}
Html:
<header>
<a href="#" class="menu-toggle">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</a>
<nav class="menu-side">
<div class="listing">
<div class="box"><a class="list" href="/"><h1>Home</h1></a> </div>
<div class="box"><a class="list" href="/Photos/"><h1>Photos</h1></a></div>
<div class="box"><a class="list" href="/Store/"><img src='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxQHEgkUBwgWFgkVFxcbGRgYGSMWHBAeGiQYIiUWHyQfHyosJCYxJxwXIzQtKywsLjEuGCs/OjMsOSg3OjcBCgoKDg0OGxAQGy8kHSQ3LDI3LysvLiwsLi0uNyw0NS83NCw0NCwrNTIsLSwsLDQ0LDQtNCwsLC8yLDctLCwsN//AABEIAEEAQAMBEQACEQEDEQH/xAAcAAEBAQACAwEAAAAAAAAAAAAABwYBCAIDBQT/xAA2EAABAwIBCQQIBwAAAAAAAAABAAIDBBEFBgcSEyExQWFiFEJRsSIjMkORocHRJDVxdIGz4f/EABsBAQACAwEBAAAAAAAAAAAAAAAFBgEDBAcC/8QALhEAAQMDAgUDAwQDAAAAAAAAAAECAwQFERIhIjFBUWFxscFCoeFSgdHwEyMy/9oADAMBAAIRAxEAPwD1VebauweGR9RJFKxnCNzi4Dxs5gvb4qLnpFRNTS6W29xvckMm3ZV9jMArgLKeQK+QeQKGSnZvsttLV02MS+lujkPHpd9CpKkqvoeVK9WbGZ4E9U+UKWpMqQQBAEBLc4eQ2r1lTgsXo75Ixw62/UKNqqX62Fus15ziCdfRfhSaAqOLWarJTJft7opMWvHh+k0C+wzk7mN+66qelV65dyIW53ZtO3RFu/28qfgxbDCJMQkw+kcMOjkLdLeGW2Wv+q1TRYcqtTZDso6tHRxtlcn+RyZx3N1m+y21urpsYl9Zujee90nmuykqs8Dyv3qzaczwJt1T5KQpIqgQBACL79yAlecPIfVaypweL1e+SMcOofZRtVS442Fvs15ziCZd+i/Blcmsa1NTh7sarXmjh0tEG7tXcHd/q1wTq57UeuyHdcKBrYJHQM43YyaOso5co4o3x1nZ8OcbQwjSOs0jbWSaPieJ2bV0va6VvAuG+5EwzQ0U3+1qvkTmv6fCeiGHqYHUj3tmaRI0kfDiFEOarVwpcI5GyNRzeSlNzfZbdo1dPjEvrtzHnv8ASefmpOkqs8DypXqzaMzwJt1Tt5KMpEqoQBAcEXvcbEBKs4eQ/Z9ZU4PF6re9g7vUFGVVLjjaXCzXjViCZd+i/BlMNyhkibSRsIbURnRin0rGFryLtcLWc3jt8F8xVOERvX7HZV2tr5HyKvAu6p1ynZTU5R4ZFXtl1dbpmnY2ONsY03Svdtu4+J2m3ALfUQI5M55e5FWyvdE9G6dnrlVXZERO398GHqqKWhfIyqgc2dli4cWczbdwUW6NzVwpbop45Wo5ioqL9ymZvst+1aumxiT8RuY8+86Tz81JUlVq4Hcyp3qzaMzwJt1Tt59CiKQKsEAQHBGlcOGxAi4JPnDyH7IZKjCIrwHa9g7nUOSjKqmxxNLjZrxrRIJl36L38GTwbG6inYymw2pbHG9/tWDS0usPa4Baoah6Joam69SQrbdTvetRLnDU5J4PfXYuKaJ1PQXL3gdoledN8zh3AT3Ad3iszTI1unm5ea/BrpKJ0kqTO4WNzoanL1X1Pitda1jt8lwk6dmFZTyUIAgCA4c3SBDhcH5oZRcboSTOHkP2IyVGExXpTtewdzqHJRlTTaeNhcrPeElRIJl36L38E+by3KPUsp5Ar5MnZtWU8mCAIAgCA4c0PBDhdp+aGUVUXKEhzhZEHDTJUYTHejO17B7rqHLyUXVU2nibyLpZrwkyJDMvF0Xv+TAgrgLIdnVYzyYIAgCAIAgOHNDwQ8Xad4PFDKKqLlCDZycMiwGubFRbI5YxIG8GkueC0cvRv/KiKqn0LlvIvVmua1EeiX/pNs9/yXpS5RAgCAIAgCAICDZ+fzHD/wBuz+yVc05N2rl+/wDB/9k='><h1>Store</h1></a></div>
</div>
</nav>
</header>
Sorry about the long img src, well ive looked aroung and i found one thing but it didnt work for me. But what i am trying to accomplish is the image in the top right corner. so it would be like an actual banner. I did the position: absolute; but Is there something else? Should i Move the img tag?
So I am trying to make a footer for a webpage.
Here is what I have:
What I want is (I did my best to demonstrate it):
(The images seem to be too small because it is too long. If you don't mind, zoom in your browser.)
Then here comes my HTML structure:
<div id="footer">
<table id="info">
<tr>
<td colspan="3">You're here:
<div id="where"></div></td>
</tr>
<tr>
<th>
<div id="additional-links">
<ul class="nobullet">
<li>Intro</li>
<li>Hiring</li>
<li>Collab</li>
<li>Credits</li>
<div id="shared">
<span style="color: #fff;">|</span>
<img src="fl.jpg" alt="facebook">
<img src="tl.jpg" alt="twitter">
<img src="tml.png" alt="tumblr">
<span style="color: #fff;">|</span>
</div>
</ul>
</div>
</th>
</tr>
<tr>
<td colspan="3">©2013
</td>
</tr>
</table>
</div>
Then the corresponding CSS:
div {
padding: 0;
margin: 0;
text-align: center;
}
#footer {
width: 100%;
height: 15%;
background-color: #dcd9ca;
}
#info {
text-align: center;
width: 100%;
min-height: 100%;
}
.nobullet li {
display: inline;
}
.nobullet li a {
text-decoration: none;
color: brown;
}
#shared {
float: right;
position: relative;
}
#shared img{
width: 24px;
height: 24px;
vertical-align: middle;
}
So my question is: how do I make the changes?
I hope I have made myself clear.
I agree with the comment made by #vishalkin that you should not use the table structure.
Even if you did, you have an issue that make yours HTML invalid. The #shared div cannot be a parent of an ul. You need to wrap this in a li.
Here is my solution on jsfiddle.net.
Here is the HTML:
<div id="footer">
<p>You're here:</p>
<div id="footerLinks">
<ul id="links">
<li>Intro</li>
<li>Hiring</li>
<li>Collab</li>
<li>Credits</li>
</ul>
<ul id="shared">
<li>| <img src="" alt="facebook"/></li>
<li><img src="" alt="twitter"/></li>
<li><img src="" alt="tumblr"/> |</li>
</ul>
</div>
<p>©2013</p>
</div>
Here is the CSS:
body { background: #060; width: 1024px; }
div { padding: 0; margin: 0; text-align: center; }
#footer { width: 100%; text-align: center; background-color: #dcd9ca; position: relative; }
#footer ul,
#footer li { margin: 0px; padding: 0px; }
#footerLinks { position: relative; }
#links { list-style: none; display: inline; width: auto; }
#links li { display: inline-block; *display: inline; *zoom: 1; /* IE7 fix */ }
#links li > a { display: block; width: 150px; text-decoration: none; color: brown; text-align: center; font-weight: bold; }
#shared { position: absolute; top: 0px; right: 75px; /* your margin from the right */ list-style: none; color: #fff;}
#shared li { display: inline-block; *display: inline; *zoom: 1; /* IE7 fix */ }
#shared img { border: 0px; width: 24px; height: 24px; vertical-align: middle; }
I threw in some extras for you:
Border 0 on your social media images. Some browsers will show a giant blue border when images are inside links
Made your footer links block, so that they are more accessible, rather than only taking up the text area
In my jsfiddle, I put a width on the body, and a color, only to demonstrate the padding on the right of your social media links.
To solve both issues, you can make the shared div absolutely positioned.
<div id="additional-links">
<div id="shared">
<span style="color: #fff;">|</span>
<img src="fl.jpg" alt="facebook">
<img src="tl.jpg" alt="twitter">
<img src="tml.png" alt="tumblr">
<span style="color: #fff;">|</span>
</div>
<ul class="nobullet">
<li>Intro</li>
<li>Hiring</li>
<li>Collab</li>
<li>Credits</li>
</ul>
</div>
You can adjust how far from the right the shared links are by changing the 150px setting below.
#additional-links {
position: relative;
}
#shared {
position: absolute;
right: 150px;
}
Hope that helps.