I've got a logo and a second elements that are contained in divs sitting in the nav that I want to make links. Tried what seems like everything. It looks like the .logo svg div is linking but is running the full width of #topnav and the area with .logo is not clickable. The .nav container about div is not linking at all and I can't seem to get it to right align in the nav.
There are probable a few issues here (apologize for that) but any suggestions at all would be most appreciated.
HTML
<div id="topbar">
<a href="##">
<div class="logo svg">
<object class="logo" type="image/svg+xml" data="img/gf_logo_main.svg">
</object>
</div>
</a>
<a href="###">
<div class="nav container about">
<object class="nav about" type="image/svg+xml" data="img/question mark.svg">
</object>
</div>
</a>
</div>
CSS
#topbar {
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 65px;
padding: 10px;
background: rgba(255, 255, 255, 0.8);
color: #000;
}
.logo svg {
float: left;
width: 50px;
}
.logo {
height: 80%;
}
.logo img {
border: 0;
display: none;
height: 100%;
width: 100%;
}
.nav container about {
position: absolute
right: 0px;
}
.nav link about{
height: 80%;
}
Page is here:
http://www.glitteringfacade.com
You don't need to use <object> tags for SVG any more. Since IE9, you can just inline it as a normal <img> (but be sure to specify its width and height, either as attributes or in CSS).
<img src="img/gf_logo_main.svg">
You can make it a "link" using onclick="window.location = 'http://www.yoururl.com';" in your div tag and giving it the cursor: pointer; CSS style.
Related
I am trying to make a header with a fixed title, horizontally and vertically centred. With a home icon that acts as a link.
The problem is that link is clickable on everything left of the Home icon.
I have tried to replicate the problem in this codepen;
body {
margin: 0;
background-color: #2d2d2d;
}
#header {
margin: 0;
background-color: rgb(171, 228, 250);
height: 10vh;
display: flex;
}
#homeIcon {
position: absolute;
padding-top: 2px;
padding-left: 30vw;
height: 10vh;
}
#headerTitle {
margin: auto;
font-size: 5vh;
color: #2d2d2d;
}
<div id="header">
<a href="">
<img id="homeIcon" src="https://image.flaticon.com/icons/svg/846/846551.svg" alt="homeicon" />
</a>
<h1 id="headerTitle"> title </h1>
</div>
Is there a way to have the link only on the content of the img tag?
In your CSS you are specifying the homeIcon has a padding-left of 30vw. If you change this to margin-left instead, it will no longer be clickable. This is because padding is included inside your element, while margin is outside. See https://www.w3schools.com/css/css_boxmodel.asp.
The css is your problem: you can solve it by changing padding-left: 30vw; to margin-left: 30vw;
This answer may be useful background reading: Difference between margin and padding?
I want to make responsive image gallery. That will display extended image on thumbnail hover. Gallery can't use any JS this is requirement.
But there is 1 little problem. Gallery needs to be responsive.
That means expanded image have to be the same size as the default image that is responsive and resize on smaller devices.
Here is my html code
<div class="container"></div>
<div class="container">
<div id="gallery-photo-container">
<img src="http://imgur.com/60BBDre.jpg">
<div class="gallery-thumbnail-image">
<img src="http://imgur.com/60BBDre.jpg">
<div class="gallery-main-image">
<img src="http://imgur.com/60BBDre.jpg">
</div>
</div>
<div class="gallery-thumbnail-image">
<img src="http://i.imgur.com/C7SFJxy.jpg">
<div class="gallery-main-image">
<img src="http://i.imgur.com/C7SFJxy.jpg">
</div>
</div>
<div class="gallery-thumbnail-image">
<img src="http://i.imgur.com/aa5kiAi.jpg">
<div class="gallery-main-image">
<img src="http://i.imgur.com/aa5kiAi.jpg">
</div>
</div>
<div class="gallery-thumbnail-image">
<img src="http://imgur.com/TWLJOVv.jpg">
<div class="gallery-main-image">
<img src="http://imgur.com/TWLJOVv.jpg">
</div>
</div>
</div>
</div>
Absolute approach
I have almost done it, using absolute position and positioning with top attribute. But on resize expanded image is the size of left container beginning to the right end of the page.
Here is my DEMO1 and CSS.
.gallery-thumbnail-image:hover > .gallery-main-image {
visibility: visible;
opacity: 1;
}
.gallery-thumbnail-image {
display: inline-block;
}
#gallery-photo-container .gallery-thumbnail-image > img {
width: 79px;
}
#gallery-photo-container img {
max-width: 100%;
}
.gallery-main-image {
position: absolute;
visibility: hidden;
top: 18px;
left: 18px;
margin-right: 8px;
}
.container {
width: 50%;
}
#gallery-photo-container {
border: 1px solid black;
padding: 10px;
}
Relative approach
I think it can be done it too, by using relative position and positioning with bottom attribute. But here the problem is that thumbnail image container is resizing to the expanded image size on hover. And the bottom attribute value is screen size dependent.
In this DEMO2 you have to click on a thumbnail because they are jumping. And here is CSS for relative approach.
.gallery-thumbnail-image:hover > .gallery-main-image {
display: block;
opacity: 1;
}
.gallery-thumbnail-image {
display: inline-block;
}
#gallery-photo-container .gallery-thumbnail-image > img {
width: 79px;
}
#gallery-photo-container img {
width: 100%;
}
.gallery-main-image {
position: relative;
display: none;
bottom: 373px;
}
So, could it be done responsive way with one of these two approaches? Or maybe you have another idea. I'm looking forward for your help.
See this update of your plunk.
https://plnkr.co/edit/6EOKiKEQcxDiuIXApPLo?p=preview
the main changes are here:
.gallery-main-image {
position: absolute;
display: none;
top: 10px;
left: 10px;
right: 10px;
}
#gallery-photo-container {
border: 1px solid black;
padding: 10px;
position: relative;
}
Use of an absolute element positioned within relatively positioned element.
You need a margin-right: 8px;, because of the top: 8px; left: 8px; Plunkr:
.gallery-thumbnail-image:hover > .gallery-main-image {
visibility: visible;
opacity: 1;
margin-right: 8px;
}
Slightly off-topic, but... just in case you're interested in simulating an onclick event with CSS, see this SO answer.
Trying to float a box on the bottom of this image slider. Essentially the slider will have a title and caption but I also want to have a box at the bottom of the image which will pull in data using PHP.
Anyway, my problem is trying to get the white box with text to sit on the bottom of the image and stay there. If the user decreases screen size the white box should follow and stay on the bottom.
jsFiddle provided: http://jsfiddle.net/fkpe1py6/1/
<div id="homepage-slider-wrap" class="clr flexslider-container">
<div id="homepage-slider" class="flexslider">
<ul class="slides clr">
<li class="homepage-slider-slide">
<div class="homepage-slide-inner container">
<div class="homepage-slide-content">
<div class="homepage-slide-box">Float this box at the bottom of the image.</div>
</div>
<!-- .homepage-slider-content -->
</div>
<img src="http://wpexplorer-demos.com/elegant/wp-content/uploads/sites/83/2012/08/game.jpg" alt="">
</li>
</ul>
<!-- .slides -->
</div>
<!-- .flexslider -->
</div>
<!-- #homepage-slider" -->
CSS (see jsFiddle for full CSS)
.homepage-slide-box {
float:left;
bottom: 0;
margin-top: 10px;
background: #31c68b;
font-size: 1.333em;
font-weight: 600;
color: #212121;
padding: 10px;
background: #fff;
}
Thanks for your help!
I would change a couple of things:
I would place the img tag inside the .homepage-slide-content class div (this will help the div to know the height of the image).
then add some things to your CSS so that your other slide divs mimic this height.
CSS
.homepage-slider-slide{
display:block;
position:relative;
}
.homepage-slider-slide img{
display:block;
}
.homepage-slide-inner {
position: relative;
height:100%;
width:100%;
}
.homepage-slide-content {
display: block;
position: absolute;
top: 0;
left: 0;
bottom:0;
z-index: 9999;
}
.homepage-slide-box {
position:absolute;
bottom: 0;
background: #31c68b;
font-size: 1.333em;
font-weight: 600;
color: #212121;
padding: 10px;
background: #fff;
width: 350px;
}
JS FIDDLE DEMO
remove this css positioning
.homepage-slide-inner {
position: relative;
}
and add this
.homepage-slider-slide {
position: relative;
}
and change position of top: 50px to .homepage-slide-content {bottom : 0}
jFiddle
Bit of a strange one, I'm trying to overlay a couple of links over an image, and only in IE (all versions) is it displaying them behind the image. Works in Chrome, Firefox, et al.
I've tried giving each element an appropriate z-index but it doesn't actually make any difference.
I swear I've done this a a million times before with issues.
Here's a JSFiddle for it:
http://jsfiddle.net/SY8xp/
<span>Link 1</span>
<span>Link 2</span>
<img src="http://lorempixel.com/212/43" width="212" height="43" alt="" id="logo" />
.logo-link-a span, .logo-link-b span {
display: none;
}
.logo-link-a {
display: block;
position: absolute;
width: 50px;
height: 50px;
margin: 25px 0px 0px 0px;
}
.logo-link-b {
display: block;
position: absolute;
width: 165px;
height: 50px;
margin: 25px 0px 0px 50px;
}
#logo {
margin-top: 30px;
}
A hackish solution is to add a background-color to the <a /> elements. Adding this to your jsfiddle's CSS worked:
.logo-link-a, logo-link-b {
background-color: rgba(255,255,255,0);
}
what's the reason to hide links over an image? you can wrap the image with <a> tag and create the link without much markup, you can also use image replacement that brings good results for the SEO of page also
here some tricks to image replacement: http://css-tricks.com/css-image-replacement/
here a fiddle: http://jsfiddle.net/9V5g8/1/
HTML:
<!-- option 1 -->
<img src="http://www.starbucks.com/static/images/global/logo.png" alt="">
<!-- option 2 -->
<div class="logo">
<a href="http://www.starbucks.com/">
<h1 class="img-replace">
My Logo
</h1>
</a>
</div>
CSS:
h1.img-replace {
width: 85px;
height: 84px;
background: url("http://www.starbucks.com/static/images/global/logo.png") no-repeat 0% 50%;
text-indent: -9999px;
}
Basically, I have some nice navigation button .png's given to me from a friend and a header/banner.jpg. I want to put these .png's on top of the .jpg banner. The problem is that I'm using a css rollover function (for the navigation buttons) that requires me to use position: relative for the divs that contain the individual navigation buttons. Otherwise the rollover function gets hairy in Opera. How would I be able to accomplish this?
Here's some code for the css (for the navigation buttons):
.cssnavabout { background: url(navigation/about_on_over.png) no-repeat; white-space: nowrap; display: block; height: auto; width: auto; float: left; position:absolute; top: 55%; left: 50% }
.cssnavabout a { display: block; color: #000000; width: auto; height: auto; display: block; float: left; color: black; text-decoration: none; }
.cssnavabout img { width: auto; height: auto; display: inline; margin: 0px; border-style:none }
.cssnavabout a:hover img { visibility:hidden }
And the HTML partition (for the navigation buttons):
<div id="csswrapper">
<div class="cssnavabout">
<img src="navigation/about_on.png" width=100 height=50 />
</div>
Heres the CSS for the header/banner:
#header { width: 1024px; height: 109px; position: relative; margin:0px; background-color:#FFFFFF; }
And the HTML for the banner:
<div id="header">
<img src="images/banner_about.jpg" width="100%" height="109" /> </div>
I'm sure this is easily solvable. Sorry, this is my first website.
How do I put an image on top of an image without using absolute positioning?
Like so...
<div style="background: url(image.png) no-repeat">
<img src="image2.png" alt="" />
</div>
Seems to be a case of z-index: http://www.w3schools.com/Css/pr_pos_z-index.asp
But you can give absolute position to the anchor that contains the png button which should do the trick.
#csswrapper a{
position:absolute;
top:20px; //edit
right:20px; //as needed
}