Odd problem- I am trying to make an image hyperlink, with the code below:
<html>
<head>
<title>
Title doesn't matter cause this will be fullscreen
</title>
<!--links with sytlesheet-->
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div id="bg">
<img src="images/zorin background.png" id="bgimage" height="200px">
</div>
<a href="http://www.google.com">
<img class="center" border="0" src="images/thumb1_2.png"> <!-- THIS IMAGE SHOULD BE A LINK -->
</a>
<img class="centerright" src="images/thumb2_2.png">
<img class="centerleft" src="images/thumb5_2.png">
<img class="arrowright" src="images/arrowright.png">
<img class="arrowleft" src="images/arrowleft.png">
</body>
</html>
however, the image is only clickable in a web browser when I remove the ' class="center" ' part, otherwise, in this configuration, it doesn't work. Here is the corresponding css:
/* all of this is just to make the bg image on the homepage resize properly :P */
#bgimage {
max-width: 100%
}
#bg{
max-width: 100%
}
#bgimage {
position:fixed;
_position:absolute; /*target IE6 only */
top:0;
left:0;
width:100%;
height:100%;
z-index: -3;
}
/* end of resizing image stuff */
/* centers main image */
.center {
width: 50%;
/* height: 300px; */
position: absolute;
left: 50%;
top: 50%;
margin-left: -25%;
margin-top: -150px;
z-index: -2;
}
/* deals with right image */
.centerright {
width: 24%;
/* height: 300px; */
position: absolute;
left: 100%;
top: 60%;
margin-left: -12%;
margin-top: -150px;
z-index: -3;
}
/* deals with right arrow*/
.arrowright {
width: 18%;
/* height: 300px; */
position: absolute;
left: 88%;
top: 60%;
margin-left: -12%;
margin-top: -150px;
z-index: -3;
}
/* deals with left image */
.centerleft {
width: 24%;
/* height: 300px; */
position: absolute;
left: 0%;
top: 60%;
margin-left: -12%;
margin-top: -150px;
z-index: -3;
}
/* deals with left arrow*/
.arrowleft {
width: 18%;
/* height: 300px; */
position: absolute;
left: 18%;
top: 60%;
margin-left: -12%;
margin-top: -150px;
z-index: -3;
}
Wound up being a problem with z-index. Even though it was visible on top relative to everything else, for some reason, it would only activate the hyperlink with a positive z-index
Related
I'm making an image slider, and everything works so far but my previous and next buttons are not centering vertically on the main image. I'm trying to make it responsive as well.
I tried everything but I don't know what I'm missing. The absolute position with top: 50% doesn't seem to do the trick. Here's the codepen.
$('#imgDetail li img').click(function(){
$('#unidoor').attr('src',$(this).attr('src'));
});
$('#next').on('click',function(){
var imgSrc = $('#unidoor').attr('src');
var nextSrc = $('ul img[src="'+imgSrc+'"]').closest('li').next().find('img').attr('src');
console.log(nextSrc);
nextSrc ==undefined?$('#unidoor').attr('src',$('ul img:first').attr('src')): $('#unidoor').attr('src',nextSrc);
});
$('#prev').on('click',function(){
var imgSrc = $('#unidoor').attr('src');
var nextSrc = $('ul img[src="'+imgSrc+'"]').closest('li').prev().find('img').attr('src');
console.log(nextSrc);
nextSrc ==undefined?$('#unidoor').attr('src',$('ul img:last').attr('src')): $('#unidoor').attr('src',nextSrc);
});
* {
margin: 0;
padding: 0;
}
body{
margin: 0;
padding:0;
font-size: 100%;
/* line-height: 1.6; */
/* font-family: Arial, Helvetica, sans-serif; */
}
.header{
margin: 0 auto;
width: 100%;
background-color: #333;
padding: 30px 0 0 0;
}
.header h1{
margin: 0;
text-align: center;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
.header ul {
list-style-type: none;
margin: 0;
/* padding: 0; */
overflow: hidden;
padding: 20px 0px 30px 0;
text-align: center;
}
.header li {
display: block;
display: inline-block;
/* border-right: 1px solid #bbb; */
border-right: 1px solid #bbb;
height: 25px;
}
.header li:last-child{
border-right: none;
}
.header li a {
display: block;
color: white;
text-align: center;
text-decoration: none;
padding: 0px 40px;
font-size: 1em;
}
.header li a:hover{
color: #7bbe9a;
/* color: #80b198; */
}
#green-room {
background: #333 !important;
}
#unidoor {
position: relative;
width: 90%;
margin: 0 auto;
display: block;
}
#prev {
position: absolute;
top: 50%;
left: 10%;
transform: translate(-10%, -50%);
}
#next {
position: absolute;
top: 50%;
right: 10%;
transform: translate(-10%, -50%);
}
/* .previous {left: 10%;}
.next {right: 10%;} */
/* .prev-next-button a {
position: absolute;
left: 20%;
top: 20%;
} */
#imgDetail ul {
margin: 0 auto;
display: block;
width: 50%;
}
.thumb {
width: 25%;
height: auto;
margin: 15px 5px 0 5px;
}
#imgDetail li {
display: inline; margin-right: 10px;
}
#imgDetail a {
text-decoration: none;
display: inline-block;
padding: 8px 16px;
}
#imgDetail a:hover {
background-color: #7bbe9a;
color: white;
opacity: 1;
}
.previous {
background-color: #fff;
opacity: 0.5;
color: black;
}
.next {
background-color: #fff;
opacity: 0.5;
color: black;
}
/* .round {
border-radius: 50%;
} */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Daniel Pollack</title>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
</head>
<body id="green-room">
<div class="header">
<div id="title"><h1>Lorem Ipsum 3D Online Portfolio</h1></div>
<nav id="menu">
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div id="imgDetail">
<br>
<img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_1.jpg" alt="" id="unidoor" />
‹
›
<ul>
<li><img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_1.jpg" class="thumb" /></li>
<li><img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_2.jpg" class="thumb" /></li>
<li><img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_3.jpg" class="thumb" /></li>
</ul>
</div>
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
<script>
window.sr = ScrollReveal({reset: true});
sr.reveal('#unidoor');
</script>
</body>
</html>
Hello there you can wrap the <div id="imgDetail"> in an outer div class for instance <div class="slideshow-container"> and then add your CSS which would look like this:
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
You can get the changes on codepen. Happy coding :)
I have a section on a site that I have multiple image blocks. I have two columns with multiple rows. For some reason the margin and width are not being applied to these images. I have the following code in my media query for a viewport of 640px or less. Whenever you drag the corner of the page, the images do not scale in size at all. Also the left images stay in place instead of moving with the margin.
It is under the part called Site Sponsors in a viewport of 640px or less.
What is causing the images to not scale in height and width as well as the margin?
As you can see I have the images width defined in a percentage basis:
.b_250 img {
width: 55%;
height: auto;
}
.b_250 iframe {
width: 55%;
height: auto;
}
As well as the margin defined:
.sponsors {
width: 100%;
margin: 0 2.5%;
}
Does anyone see what I am doing wrong?
<div id="sponsor-left">
<div class="b_250">
<img src="images/Contractor Images/PMC spray foam equipment for sale.jpg">
</div>
<div class="b_250">
<img src="images/Contractor Images/Green Insulation Technology 300x200.jpg">
</div>
<div class="b_250">
<img src="images/Contractor Images/Spray foam rigs for sale a series.jpg">
</div>
</div>
<div id="sponsor-right">
<div class="b_250">
<img src="images/Ad Boxes/300x200.gif" alt="">
</div>
<div class="b_250">
<img src="images/Ad Boxes/300x200.gif" alt="">
</div>
<div class="b_250">
<img src="images/Ad Boxes/300x200.gif" alt="">
</div>
<div class="b_250">
<img src="images/Ad Boxes/300x200.gif" alt="">
</div>
</div>
.container {
width: 100%;
}
.content {
float: none;
text-align: center;
width: 100%;
}
/*----Second to Last Homepage Article---*/
#latestnews {
width: 100%;
text-align: center;
}
#latestnews .latestnews h2{
margin: 10px 5%;
font-size: 1.3em;
width: 90%;
}
#latestnews ul, #latestnews li{
text-align: center;
}
#latestnews li{
margin: 0 auto;
}
.latestnews img{
margin: 0 auto;
text-align: center;
}
#latestnews div.latestnews{
float:none;
width: 100%;
}
#latestnews p {
padding: 20px 10px;
clear: both;
}
#latestnews p.readmore{margin-top:10px; text-align:center;}
.column .sponsors {
width: 100%;
}
.column {
clear: both;
width: 100%;
margin: 0 auto;
}
.column .sponsors .b_250{
border: none;
}
.b_250 img {
width: 55%;
height: auto;
}
.b_250 iframe {
width: 55%;
height: auto;
}
.sponsors {
width: 100%;
margin: 0 2.5%;
}
.sponsors h2{
margin: 10px 5%;
font-size: 1.3em;
width: 90%;
text-align: center;
}
#sponsor-left {
float: left;
width: 45%;
}
#sponsor-right {
float: right;
width: 45%;
}
}
To center the ads, add this(although I prefer to avoid using ID's in selectors):
#sponsor-left a > img { margin: 0 auto; }
At which point you can then increase the width of the images to 100% to fill the width you declared for the left and right columns.
Also as I noted in the comments remove the float: right; and change to display: inline-block;
try display:block max-width:100%; height:auto;
for image to be center
You must use display:block or display:inline-block by default image is display:inline
How to center?
if your image is display:block use margin-left:auto; and margin-right:auto;
and for display:inline-block give text-align:center to image parent element
Note
Be care full your image css does not have float:left or float:right
I can't seem to find a solution for this anywhere.
I have a page with three elements displayed via flex: header, container and footer. The header and footer contain just what they need to, but container must take up all space left in the window. This is achieved via flex properties.
I would like to insert a Slick Carousel and have it contained the same way you can contain an image as a background (but with img tags, for semantics).
You can see example code here:
<html>
<head>
<title>Manuel del Pozo | Interiorismo & Diseño</title>
</head>
<body>
<div class="flex-container">
<header>
<div class="links">
<div class="lang-selector">
EN
/ ES
/ PT
</div>
<div class="social-links">
Fb
Tw
Ig
</div>
<div class="clearfix"></div>
</div>
<div class="logo-header">
<h1>Manuel del Pozo</h1>
<h2>Interiorismo & Diseño</h2>
</div>
<nav>
Home
Estudio
Proyectos
Servicios
About Me
Contacto
</nav>
</header>
<div class="container">
<div class="carousel">
<img src="http://www.manueldelpozoid.com/root/img/portfolio/01.jpg" alt="Portfolio Image 01">
</div>
</div>
<footer>
<div class="philo">
<p>Creamos un espacio hecho a tu medida, adaptándolo a tus gustos y necesidades</p>
</div>
<div class="footer-contact">
manuel#fake.com
<p> | </p>
<p>Tlf.: XXX XXX XXX</p>
</div>
</footer>
</div><!-- end of flex-container -->
</body>
</html>
http://codepen.io/anon/pen/MaRPop?editors=110
It does not have the carousel, just an image to make this easier.
Thanks!
Not exactly sure what you need, so try adding the following CSS to your style.css and see if I'm close.
CSS
/*******************************************************************************
GENERAL
*******************************************************************************/
html,
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
max-width: 100%;
max-height: 100%;
font-family: 'Courier', serif;
}
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/*******************************************************************************
FLEX DISPLAY SETTINGS
*******************************************************************************/
.flex-container {
display: flex;
flex-flow: column wrap;
justify-content: center;
align-content: center;
align-items: center;
width: 100%;
height: 100%;
max-height: 100%;
padding: 20px;
overflow-y: auto;
overflow-x: hidden;
}
.flex-container header {
flex: 0 0 15vh;
position: fixed;
top: 0;
height: 15vh;
width: 100%;
}
.flex-container .container {
flex: 1 0 70vh;
width: 100%;
height: calc(100% - 30vh);
overflow-y: auto;
overflow-x: hidden;
position: absolute;
top: calc(100% - 30vh);
}
.flex-container footer {
flex: 0 0 15vh;
position: fixed;
bottom: 0;
height: 15vh;
width: 100%;
}
Using zer00ne CSS, I put a fixed height for both header and footer and then used a calculation for the container "100vh - (header+footer)". Then asigning 100% height to all elements until the img, which I put with object-fit:contain;
That fixed it for me
i'm creating this base structure :
<ul>
<li>
<a>
blabla
</a>
</li>
</ul>
with css :
ul{
height: 100%;
list-style: none outside none;
margin: 0;
padding: 0;
}
ul li{
height: 25%;
text-align: right;
width: 100%;
}
a{
display: block;
float: right;
height: 75%;
padding-right: 2%;
position: relative;
width: 98%;
padding-top:25%;
}
i can't manage to simply put the a at the bottom...
i thought giving the A a height of 25% and a padding of 75% would work but it takes 75% of the UL and not 75% of the LI.
anyone has an idea how come?
thanks a lot
What exactly are you trying to achieve?
If I am assuming correctly you want an <li> that is 25% the height of its container and the <a> to sit at the bottom-right of the <li>
If that is the case you could use this css
updated RE comment In this case we could use a <span> inside the <a> to position the text and set the <a> to fill the <li>
ul {
height: 100%;
list-style: none outside none;
margin: 0;
padding: 0;
background-color: red;
}
li {
height: 25%;
text-align: right;
width: 100%;
}
a {
display: block;
position: relative;
height: 100%;
width: 100%;
background-color: blue;
}
span {
display: block;
position: absolute;
bottom: 0;
padding: 2%;
width: 96%;
background-color: green;
}
and the html
<ul>
<li><span>blabla</span></li>
</ul>
Fiddle here
Please note that for this to work you need to set html, body { height:100%; } or have a container with an explicit height set. i.e. ul { height: 200px; } or div.container { height: 200px; }
I would also recommend applying the styles via classes.
I'm trying to make a centered, 100% high layout that has NO FIXED width (argh). Everything seems to be ok with the solution below, apart from the img that I need to scale to height: 100%, that doesn't scale inside table-cell (outside of the div everything's ok).
EDIT: I am able to set fixed height like 100px or so, both in css and tag. Why doesn't this work with %?
<div id="center">
<div id="tcontainer">
<div id="tleft">a</div>
<div id="tright"><img id="bgright" src="images/bgright1.jpg" height="100px" /></div>
</div>
</div>
And styles:
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
font-family:arial,sans-serif;
font-size:small;
color:#666;
}
#bgrepeat { /* unnecessary ATM */
width: 100%;
height: 100%;
position: absolute;
z-index: 0;
}
#bgright { /* HERE THE PROBLEM */
height: 100%;
}
img { border: 0; /*float: left;*/ }
#center {
text-align: center;
height: 100%;
}
#tcontainer {
text-align: left; /* POTRZEBNE ? */
background: red;
height: 100%;
display: table;
margin: 0 auto;
}
#tleft {
display: table-cell;
}
#tright {
background: pink;
display: table-cell;
}
OK, so the problem has been baldy formulated. I've had just forgotten to pass "height: 100%" in consecutive children. It didn't have anything to do with display: table nor images.