Anyone know why the first image link wants to expands from the center of the page and not from center of the image when body margin is set to 0px? The second image always expands correctly from the center of the image no matter if set to 0px or not. Setting the margin to just 1px will force the first image to expand correctly.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/highslide/highslide.css" />
<script type="text/javascript" src="/highslide/highslide-with-html.js"></script>
</head>
<body style="margin:0px;">
<a class="highslide" href="/full.png" onclick="return hs.expand(this)"><img src="/thumb.png"></a>
<a class="highslide" href="/full.png" onclick="return hs.expand(this)"><img src="/thumb.png"></a>
</body>
</html>
This was similar but I still can't figure it out.
Highslide: Issues re-shrinking image
As it turns out any image fails when directly next to body margin 0px.
Workaround is to place image or container 1px or more away.
Can't tell you why it's happening, but if it doesn't louse up something else you're trying to do, one workaround is to wrap the thumbnails in a div and put at least a one-pixel margin on that div:
<body style="margin:0px;">
<div style="margin:1px;">
<a class="highslide" href="/full.png" onclick="return hs.expand(this)"><img src="/thumb.png"></a>
<a class="highslide" href="/full.png" onclick="return hs.expand(this)"><img src="/thumb.png"></a>
</div>
</body>
Related
I'm trying to find a way to float certain items left on left-hand pages, and right and right-hand pages. Not sure where to look, since all I can find that seems related is #page :left/:right, but that seems to only apply to the page box and margins, not the page content.
Here's an example of what I want to do; The first float wants to go to the right, if it is on page 1, and the second float wants to go to the left, if it is on page 2, but to the right if it is on page 3.
The big boxes are just meant to demonstrate that there could be a lot (particularly an unknown) of stuff between the floats, and I can't predict which page might contain the float. (Thanks to Christian for making the assumption that I could, to point out the unstated assumption in my question, and I could make this clarifying edit.)
<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8>
<title>float left or right</title>
<link href=favicon-index.ico type=image/x-icon rel="shortcut icon">
<link href=/style.css type=text/css rel=stylesheet>
<style>
div { border: solid black 1px; }
</style>
</head>
<body>
<h1>float left or right</h1>
<div style="page-break-inside: autor;">
<div style="float: right;">
float 1 content
</div>
page 1 content
<div style="height: 8in; width: 1in;"></div>
unknown amount of content between floats
<div style="height: 8in; width: 1in;"></div>
<div style="float: right;">
float content somewhere later
</div>
<div>content winds up on page 2? 3? 4? 5?</div>
</div>
</body>
</html>
But how do I instruct the browser to do that?
N.B. At least in 2001, the "Complete Idiots Guide" series of books used this sort of odd/even dependent float for the sidebars entitled "Learning Links" (and maybe other such sidebars also). So there is precedent for this sort of style requirement, although I'm not trying to reproduce their books in HTML!
Here is the solution to your query
If you change your html structure as given in the code below then apply the following CSS, then your query will be satisfied
.pages div:nth-child(odd) {
text-align: right;
clear: both;
}
<html>
<head>
<meta charset=utf-8>
<title>float left or right</title>
<link href=favicon-index.ico type=image/x-icon rel="shortcut icon">
<link href=/style.css type=text/css rel=stylesheet>
<style>
div {
border: solid black 1px;
}
</style>
</head>
<body>
<h1>float left or right</h1>
<div class="pages">
<div id="page-1">page 1 content</div>
<div id="page-2">page 2 content</div>
<div id="page-3">page 3 content</div>
</div>
</body>
</html>
The structure is not changed much but it's almost similar to the one you provided
I have a row with a certain height (e.g. 600px) and would like fit an img (size 1920x1080) into this row, stretching responsively 100% to the row width but not exceeding the height.
In other words, only 600px of the height of the image should be shown (the rest can be cut off, hidden, etc.), and it should remain responsive to the row width. To illustrate, only the part within the red borders should show:
The problem I am having is that "img-fluid" always fits the image to the smaller height of the container, and thus shrinking the width to keep the aspect ratio. Without img-fluid, or adding a fixed height to the image, the aspect ratio gets lost and the image is "squeezed" into the row-container. My code:
.img-400 {
height: 400px !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<div class="container">
<div class="row img-400">
<div class="col-12">
<img src="https://image.ibb.co/iG8OSb/dogs.jpg" class="img-fluid" />
</div>
</div>
</div>
Note I tried this one: Constraining image height with bootstrap responsive image? but didn't work, it keeps scaling the img out of the container.
the above solution works if the .img-fluid is not manipulated:
.img-400 {
height: 400px;
overflow: hidden;
}
Hi try this one,
.img-400 img{ width: 100% ; }
Hope this helps :)
To achieve your image fitting into a specific height, you can use the open source library bootstrap-spacer via NPM
npm install uniformimages
or you can visit the github page:
https://github.com/chigozieorunta/uniformimages
Here's an example of how this works using the "unim" class (you'd require jQuery for this):
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="uniformimages.css" rel="stylesheet" type="text/css"/>
<script src="uniformimages.js" type="text/javascript"></script>
</head>
<body>
<section>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<a href="product1.html">
<img src="image1.jpg" class="unim" height="100"/>
</a>
</div>
</div>
</div>
</section>
</body>
I have this kind a scenario:
<div id=area>
<div id=box>
</div>
</div>
<div id=footer>
</div>
div "area" is center and it is 700px width and has shadows at right and left.
there is then a div box, which is 500px width and has text and options in it.
And at bottom I have footer where is one line of text.
So, my shadow effect at div "area" stops at same spot as box does. At next page, i have ~2000px amount of text in same box, and there "area" div's shadow is as it should be.
I want to have "area" div whole screen size, and more if there is more text inside of it.
Try something like this :
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="area">
<div id="box">
</div>
</div>
<div id="footer">
</div>
</body>
</html>
CSS
html {height:100%}
body {height:100%;margin: 0;padding: 0;}
#area {height: 100%;background-color: blue}
Want to make image in Div tag to fill the browser screen bigger or smaller, so image is perfect size for any screen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body style="margin:0; height:100vh;">
<div align="center" style="vertical-align:top; border-top: 0px">
<img src="images/Main.jpg" border="0">
</div>
</body>
</html>
Check out this Example.You can use width:100% and height:100% to the image in div tag since you want the image fill up the browser when resizing it (browser).
<img src="http://thumbs.dreamstime.com/z/ice-cream-cone-29168018.jpg" border="0" style="width:100%;height:100%;">
<img src="images/Main.jpg" border="0" style="max-width:100%; max-height:100%;">
I'm creating a web but having trouble with the alignment of divs. Cant fix this problem for a day now.
How do I force align the image(the text image)? It's inside the div.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" charset="utf-8;" content="text/html" />
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<
And force the lower div to stay put when window resized or zoomed in/out.
If you seriously want to use a "text image" as a regular image, why not use it in a style sheet? So right now you have it in a div, so make that div a class or id like and make a style sheet where you have that image as a background image. Then you can use the position tactic to put the image wherever you want.
HTML:
<body>
<div class="textimage">
</div>
</body>
CSS:
.textimage{
width:500px;
height:500px;
background-image: url('..whatever.gif');
background-position: 50px 50px; //the first coordinate moves the image left to right // while the second coordinate moves it up and down
}
Try it
<div style="text-align: center">
<img style="width: 960px;" src="images/about us img.jpg"></img>
<div style="text-align: center">
<img src="images/about-cti.jpg"></img>
<br />ABOUT CTI
</div>
</div>
first issue is don't add specific margin like "margin-right:300px" when you want it to be resized or zoomed in/out.
and second issue is adding "float:right" to the image.
the below changes to the code will solve your problem.
<div style="width: 960px; margin:0 auto;" align="left">
<p>
<span style="float:left">
<br>
ABOUT CTI
</span>
<img src="images/about-cti.jpg"/>
</p>
</div>