I'm using HTML & CSS to try to make a centered image, that when you click it, it gives you the full size version. The image is also scalable so on smaller devices it scales down. Right now I am not worrying about bandwidth of the client. I'm having an issue where the clickable area is outside of the image which makes it look like theres some sort of invisible link.
Here is what I mean.
All areas where I have arrows the user can click - but that doesn't make sense. I just want the image to be clickable. I can get it to work, but I have to use inline block on the a tag, which ruins the scaling depending on the width of the screen.
Here is the HTML for this part.
<a class="image_link" href="/images/guides/wavelist_editing/fullsize/wave3.jpg"><img class="scalable_image popout_image centered" src="/images/guides/wavelist_editing/wave3.jpg"></a>
And the CSS.
.content a:link.image_link { /*Not overqualified - overrides stuff on main.css. gets rid of the underline*/
border-bottom: 0px none transparent;
text-decoration: none;
display:block;
}
.content .popout_image {
display: block;
margin-left: auto;
margin-right: auto;
box-shadow: 8px 8px 10px #555;
margin-bottom: 10px;
max-width: 100%;
min-width: 100px;
}
.content .scalable_image {
min-width: 100px;
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
To verify this information here is the computed values for the link and image respectively in firefox (the first image incorrectly shows inline-block, I took this image in testing, it's actually block - but both values introduce an error, no-scaling or too big for clicking):
I feel like I am missing something really obvious here. I can't google this because "image link" seems to be pretty generic.
You could achieve it like this:
JSFiddle - DEMO
HTML:
<div class="content">
<a class="image_link" href="/images/guides/wavelist_editing/fullsize/wave3.jpg"><img class="scalable_image popout_image centered" src="http://placehold.it/350x150"></a>
<div>
CSS:
.content {
text-align: center; /* add this */
}
.content a:link.image_link {
border-bottom: 0px none transparent;
text-decoration: none;
display: inline-block; /* add this */
}
.content .popout_image {
display: block;
box-shadow: 8px 8px 10px #555;
margin-bottom: 10px;
max-width: 100%;
min-width: 100px;
}
.content .scalable_image {
min-width: 100px;
max-width: 100%;
height: auto;
width: auto\9;
}
How about this?
<a href="#">
<img src="https://www.google.com/images/srpr/logo11w.png" />
</a>
a {display:inline-block;width:80%; height:auto}
img {width:100%}
http://jsfiddle.net/ko2wzah9/
As I understand, you need like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>image link</title>
</head>
<body>
<a href="http://lorempixel.com/700/700" class="image-link">
<img src="http://lorempixel.com/300/300" alt="">
</a>
</body>
</html>
and the css
a{
display: inline-block;
position: static;
}
a img{
position: relative;
z-index: 2;
}
a:before{
content: '';
position: fixed;
background: rgba(031, 031, 031, 0.7);
top:0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
the example
Related
I need to have an half arch like shown below using only css.
Tried using clip path, but the result is not the same.
clip-path: circle(63.5% at 100% 63%);
Maybe something like this?
You should define border-radius value according to your div width.
.arch-div{
position:absolute;
width:40%;
right:0;
height:100%;
background-color:black;
border-top-left-radius:300px;
}
.container{
height:200px;
background-color:darkgreen;
position:relative;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body >
<div class="container">
<div class="arch-div">
</div>
</div>
</body>
</html>
The image shown does not have exactly a quarter circle showing - it looks more like quarter of a sort of oval/ellipse.
There is no need to add an extra element to the main HTML, you can add this 'quarter' using an after pseudo element.
This snippet uses aspect ratio to set the sizes, but you could of course use actual dimensions as required and change the measurements to get exactly the shape you require.
.cutout {
height: 50vh;
aspect-ratio: 16/9;
display: inline-block;
background: teal;
position: relative;
margin: 0;
padding: 0;
overflow: hidden;
}
.cutout::after {
content: '';
display: inline-block;
background-color: white;
border-radius: 50%;
position: absolute;
left: 63%;
top: 0;
height: 200%;
aspect-ratio: 1/1.5;
z-index: 1;
margin: 0;
padding: 0;
}
<div class="cutout"></div>
I'm making a gaming site and I'm having some troubles with text positions. What im trying to achieve is having my navbar text ontop of a custom navbar backgroud
how it looks now
navbar
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-color: black;
height: 100%;
margin:0;
padding:0;
}
.topnav{
position:absolute;
text-align: center;
margin:auto;
width: 50%;
}
.topnav a {
line-height: 200px;
padding: 50px;
display: ;
color: #f2f2f2;
text-align: center;
text-decoration: none;
font-size: 17px;
}
.navbackground {
position:absolute;
top: -50px;
left:0;
right:0;
bottom: 700px;
margin:auto;
width: 50%;
}
.banner {
position:relivent;
top: 10px;
left:0;
right:0;
bottom:0;
margin:auto;
width: 100%;
}
</style>
</head>
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
News
Contact
About
</div>
<img src="nav.png" class="navbackground ">
<img src="wallpaper.JPE" class="banner" >
</body>
</html>
I was considering adding the nav.png as a background image in the topnav class but i couldn't seem to get it to scale if you no how to scale it correctly or have any suggestions please let me know!
ps.. I'm new to CSS, HTML please cut me some slack :)
Even tough z-index property works (it controls how do elements stack on each other), since you have stated you are new to HTML, you should understand that probably the best way to achieve what you need is to correctly order your elements.
You now have:
topnav
link1
link2
link3
topnav background
webpage background
The elements are rendered on the way you write them. So, for example, to get the background to be rendered first, you have to write it first.
webpage background -- this will be rendered first
topnav
link1
link2
link3
topnav background
Also, for the topnav background, you need to place it before the topnav. But if also what you want is for the topnav to be relative to the background, you also will need to nest them:
webpage background
topnav background -- background is the parent of topnav
topnav
link1
link2
link3
That way, the order of rendering is:
Draw webpage background
Draw topnav background
Draw topnav (nothing here, just a placeholder)
Draw links
As you can see, your topnav in this case is kind of useless. You can just apply a background to the topnav and discard the topnav background element:
webpage background
topnav -- here we apply the background using background CSS property
link1
link2
link3
I hope that made it clear. You can achieve the same results without changing your HTML using z-index, but I recommend first to have a clear HTML and semantic.
You have to set z-index (higher one for nav)
More on w3schools.
topnav{
z-index: 1000;
}
You need to add z-index to the parent of Nav.
Setting it as a background image would be the better option, in my opinion.
You can scale the background image using the background-size CSS property which you set to either contain or cover (Depending on how you want it to behave if the aspect ratios of div and png don't match, see https://www.w3schools.com/cssref/css3_pr_background-size.asp).
Rather than scaling the background I'd suggest either scaling the image in an image editor to match the size of your navigation-div or setting the dimensions of the div to match your png.
Same for the background image. You could make it the background-image of the body or a surrounding div.
Here's an example: https://jsfiddle.net/hg5jxn3s/7/
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-color: black;
height: 100%;
margin:0;
padding:0;
background: url(wallpaper.JPE) no-repeat top left;
background-size: cover;
}
.topnav{
background:url(https://i.stack.imgur.com/h54t6.png) no-repeat top left;
background-size: contain;
position:relative;
text-align: center;
margin:0px auto;
width: 900px;
height: 150px;
padding:70px 0px;
}
.topnav a {
line-height: 1em;
padding: 0px 50px;
color: #f2f2f2;
text-align: center;
text-decoration: none;
font-size: 17px;
}
</style>
</head>
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
News
Contact
About
</div>
</body>
</html>
You'll notice that I've changed the width from flexible (50%) to a fixed width. I've done this because the navigation items themselves don't scale in your setup, so at a certain size they'd break into a second row which doesn't work with that background-image that well.
You can see what it would look like if you change the above CSS for topnav to:
.topnav{
background:url(https://i.stack.imgur.com/h54t6.png) no-repeat top left;
background-size: 100% 100%;
position:relative;
text-align: center;
margin:0px auto;
width: 50%;
height: auto;
padding:70px 0px;
}
see https://jsfiddle.net/hg5jxn3s/10/
Are you looking for something like this? ;)
Basicly in your code, give your .topnav{ ... } a position of relative + give it the background image as I did in this fiddle. Then make a new html div with a class="nav" and add the css .topnav .nav{ position: absolute; left: 10%; width: 80%; } and give the .topnav a a style of line-height: 60px; width: 24%; display: inline-block;
I think that were like almost all changed I made.
body {
background-color: black;
height: 100%;
margin: 0;
padding: 0;
}
.topnav {
display: block;
margin: 20px auto;
width: 80%;
height: 60px;
background-image:url(https://i.stack.imgur.com/h54t6.png);
background-repeat: no-repeat;
background-position: center;
background-size:100%;
position: relative;
}
.topnav .nav {
position: absolute;
left: 10%;
width: 80%;
}
.topnav .nav a {
line-height: 60px;
display: inline-block;
color: #f2f2f2;
text-align: center;
text-decoration: none;
font-size: 17px;
width: 24%;
}
.navbackground {
position: absolute;
top: -50px;
left: 0;
right: 0;
bottom: 700px;
margin: auto;
width: 50%;
}
.banner {
position: fixed;
top: 20px;
left: 0;
right: 0;
margin: auto;
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<img src="https://cdna.artstation.com/p/assets/images/images/005/718/562/large/josh-bruce-headerfinal.jpg?1493246411" class="banner">
<div class="topnav">
<div class="nav">
<a class="active" href="#home">Home</a>
News
Contact
About
</div>
</div>
</body>
</html>
I have a nested structure where a div contains ul which in turn contains div. My requirement is to have content of most inner div display beyond the width (boundary) of ul or outer div.
/* Positioning */
#box1 {
position: absolute;
overflow: hidden
}
#box2 {
position: relative
}
#box3 {
position: absolute;
top: 10px
}
/* Styling */
#box1 {
background: red;
padding: 5px;
width: 125px
}
#box2 {
background: blue;
padding: 2px;
width: 125px;
height: 100px
}
#box3 {
background: green;
padding: 2px;
width: 500px;
height: 150px
}
<div id="box1">
<ul id="box2">
<li>
<div id="box3" />
</li>
</ul>
</div>
Refer https://jsfiddle.net/ob641d3s/
Note: This was working on Chrome 47 however it stopped working from Chrome 49 onwards on Mac. This is still working on Chrome + Windows
Remove the overflow: hidden property on the #box1 and it's good :)
Fiddle
Thanks for response everyone,
I was able to find a page that explains the solution very clearly and my problem is resolved following the steps described at following page
https://css-tricks.com/popping-hidden-overflow/
I have a problem with CSS that's only visible in FireFox (cur.ver. 31).
I am trying to make a responsive layout, with a row of images (with links), that are centered, and having the same height and scale with the viewport width. My approach is to create a container with a fixed aspect ratio, and place the images inside (each image inside a separate <a> tag), center them, and scale their heights to the container height. It's working great, except in FireFox.
To achieve this I applied a display: inline-block; height: 100% to <a> tag and height: 100%; width: auto to <img> tags. For some (unknown) reason FF is not calculating the width of the <a> tag correctly (when it contains described above <img> tag) and it collapses horizontally. The result is, that all <a> with 0 width are placed very close to each other (separated only by white spaces), and the images overlap each other. I get the same result with display: block; float: left; on <a> tags.
The CSS
.container-ratio {
width: 100%;
height: 0;
position: relative;
padding-bottom: 10%;
background: #ddd;
}
.container-inner {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #ddf;
text-align: center;
}
.block {
display: inline-block;
height: 100%;
background: #f00;
}
.block img {
height: 100%;
width: auto;
display: block;
}
The HTML
<div class="container-ratio">
<div class="container-inner">
<a class="block">
<img src="http://placehold.it/100x80/42bdc2/FFFFFF&text=No1">
</a>
<a class="block">
<img src="http://placehold.it/150x80/242bdc/FFFFFF&text=No2">
</a>
<a class="block">
<img src="http://placehold.it/200x80/c242bd/FFFFFF&text=No3">
</a>
</div>
</div>
I think this is what your trying to do. Demo
You had no width on .block and auto on .block img.
It needs to be percentages.
.container-ratio {
width: 100%;
height: 0;
position: relative;
padding-bottom: 10%;
background: #ddd;
}
.container-inner {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #ddf;
text-align: center;
}
.block {
display: inline-block;
width:20%;
height: 100%;
background: #f00;
}
.block img {
height: 100%;
width:100%;
display: block;
}
It's been nearly two years since this question was asked, and Firefox still exhibits this behavior.
So, for anyone in the same situation, here's a solution (only tested on Chrome 49.0 and Firefox 45.0.1).
Edit:
Originally, I used inline wrapper divs and two instances of the images, one of which was not displayed and only served as a dummy. It appears this is not necessary, as can be seen here.
All in all, it seems you can't use inline-block that way in Firefox, but all you need to do to get what you want is leave the anchors and images as inline elements. As long as the anchor's parent is a block-level element other than inline-block, and its height is specified, then you'll get the intended result.
If, for some reason, inline-block is really needed, I don't see how to work around this problem.
Note:
Beware of the "font-size: 0;" on the .block class, used to remove spaces between the images. Without this, images are seperated by whitespaces that behave like links. If the images need some space between them, adding some right or left margin as in the fiddle would be a solution.
Also, though the .block class name is no longer appropriate, I left it to stay consistent with the OP.
The modified CSS
.container-ratio {
width: 100%;
height: 0;
position: relative;
padding-bottom: 10%;
background: #ddd;
}
.container-inner {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #ddf;
text-align: center;
}
.block {
font-size: 0;
}
.block img {
height: 100%;
margin-right: 1%;
}
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
}