I was wondering if there was a way to make the div, upon resize, extend PAST the vertical screen size?
The div resizes (somewhat) but it will not resize beyond the screen.
My current way of resizing that div (the parchment-coloured box) is:
div.mainBack{
position:absolute;
display:inline-block;
top:50%;
right:5%;
transform:translate(0, -50%);
border-style:outset;
border-color:#B57F00;
border-width:5px;
background-color:#FCDD92; /* PARCHMENT - kind of*/
}
div.mainWrapper{
position:relative;
top:3%;
left:50%;
transform:translate(-50%,0%);
max-width:90%;
}
#imgWrapper{
position:relative;
padding-left:12%;
}
The body for the page I'm talking about is as follows:
<body>
<h1 id="pageHead">The Astantos Armoury</h1>
<p id="subhead">A Simple Introduction to Bladed Weaponry</p>
/* The images have a "href" because I have simple javascript that makes an
image gallery i.e. when you click the image you get a full size version */
<div id="gallery">
<div class="mainWrapper">
<p id="galleryHeading">Image Gallery</p>
</div>
</br>
<div class="mainWrapper" id="imgWrapper">
<img class="gallery"
src="images\sword_thumb.jpg"
href="images\sword.jpg"
data-caption="wallpaper-gallery.net/single/sword-wallpaper/sword-wallpaper-9.html"
alt="dao.jpg">
<img class="gallery"
src="images\dao_thumb.jpg"
href="images\dao.jpg"
data-caption="https://www.aliexpress.com/item/Top-quality-of-Ba-Gua-Dao-Wushu-BroadSwords-with-free-shipping/32439115049.html?spm=2114.40010208.4.111.gVLuZw"
alt="dao.jpg">
<img class="gallery"
src="images\guandao_thumb.jpg"
href="images\guandao.jpg"
data-caption="https://aliexpress.com/item/Damasucs-Steel-Kwan-Dao-Dadao-Guan-Gong-Dao-Master-Dao-Heavy-Duty/32612836207.html?spm=2114.40010208.4.22.j1tTli"
alt="guandao.jpg">
<img class="gallery"
src="images\jian_thumb.jpg"
href="images\jian.jpg"
data-caption="https://au.pinterest.com/pin/325385141814676112/"
alt="jian.jpg">
<img class="gallery"
src="images\spear_thumb.jpg"
href="images\spear.jpg"
data-caption="http://kung-fu-weapons.com/wp-content/uploads/2017/01/sp3-3.jpg"
alt="spear.jpg">
</div>
<div class="mainWrapper" id="homeButton"><p id="welcome">HOME</p></div>
</div>
I've attached images to clarify my point.
Related
I have 4 images on my website, I'm trying to position it so that they all form to make an equal square within my DIV however it's coming out like a vertical line of 4 images. I want it appear like 2 vertical lines of 2 images next to each other making it a square with 4 images. Please advise how I would achieve this.
<div id="main-content" class="group">
<img src="mg.jpg" title="MG" alt="Car" style="max-width:50%;
max-height:50%;">
<img src="4x4.jpg" title="MG" alt="Car" style="max-width:50%;
max-height:50%;">
<img src="audi.jpg" title="MG" alt="Car" style="max-width:50%;
max-height:50%;">
<img src="ford.jpg" title="MG" alt="Car" style="max-width:50%;
max-height:50%;">
</div>
#main-content {
max-width:1000px;
width:66.6667%;
float:right;
min-height:1000px;
height:100%;
color:white;
background-color: #0D3D56;
}
Notes: The reason the width is set to 66.6667% is because there is another div on the same page covering the rest of the width.
I'm making this site with responsive design.
JSFiddle
First I cleaned up a few general errors. For example your img tags should look like
<img src=""/>
with a slash. Then I created css to tell all the images to be half of the div's width and height.
<div id="main-content" class="group">
<img src="mg.jpg" title="MG" alt="MG"/>
<img src="4x4.jpg" title="4x4" alt="4x4"/>
<img src="audi.jpg" title="Audi" alt="Audi"/>
<img src="ford.jpg" title="Ford" alt="Ford"/>
</div>
#main-content {
width:66.67%;
float:right;
min-height:1000px;
height:100%;
color:white;
background-color: #0D3D56;
}
img {
float:left;
width: 50%;
height: 50%;
}
I just edited the inline-style for images.
Use the following:
#main-content {
max-width:1000px;
width:66.6667%;
float:right;
min-height:1000px;
height:100%;
color:white;
background-color: #0D3D56;
}
<div id="main-content" class="group">
<img src="mg.jpg" title="MG" alt="Car" style="width:50%; max-width:50%; max-height:50%;" />
<img src="4x4.jpg" title="MG" alt="Car" style="width:50%; max-width:50%; max-height:50%;" />
<img src="audi.jpg" title="MG" alt="Car" style="width:50%; max-width:50%; max-height:50%;" />
<img src="ford.jpg" title="MG" alt="Car" style="width:50%; max-width:50%; max-height:50%;" />
</div>
Alright easiest solution:
1. Go to getuikit.com and download that thing
2. Link the corresponding CSS, js and jQuery.js (google it, you can download it from jQuery.com)
3. Get an overall div for all 4 images and set its class as "uk-grid"
4. Set the class of each image as "uk-width-medium-1-2", you can change the medium part to small or large based on your liking.
5. ???
6. Profit. You now have a set of image positioning that is responsive and will stack when you are looking at it on a smaller screen.
I am using a SVG image over that image I need to have a div over the image to set a button area over the image. I have placed a div content in my html file but my image file hides the div content. How to make it?
This my html code:
<div class="fancybox" id="nav" href="#inline1"/>
<img src="billing.svg" id="my_image" class="gold1"/>// this is my image over this I need to place the div content
This is my CSS file:
#nav {
line-height:30px;
background-color:#00FF66;
height:400px;
width:200px;
float:left;
padding:9px;
}
.fancybox{
position:relative;
height://height go image
width:// of image
}
.fancybox img{
position:absolute;
height://height go image
width:// of image
z-index:-1;
}
.myDiv{
position:absolute;
width:// width of dive
z-index:1;
left://margin from left
right://margin right
top:margin from top
bottom:margin from bottom
}
<div class="fancybox" id="nav" href="#inline1"/>
<img src="billing.svg" id="my_image" class="gold1"/>
<div class="myDiv"></div>
</div>
<div class="outerBoxContent">
<div class="fancybox" id="nav" href="#inline1"/>
<img src="billing.svg" id="my_image" class="gold1"/>// this is my image over this I need to place the div content
</div>
css
.outerBoxContent{position: relative;}
.outerBoxContent .fancybox{position: absolute;top: 0px;left: 0px;height: 100%;width: 100%:z-index:123}
This is how you can place the content over a div.
I am trying to make a iphone overlay with a scrolling image inside to showcase mobile website designs, but the image isn't scrolling with the overlayed iphone on top is there something I am doing wrong and how do I fix it?
DEMO: http://jsfiddle.net/jonathanl5660/Lao36z20/
<div>
<img src="https://dl.dropboxusercontent.com/u/9833562/iphone.png" width="370px" height="800px" style="position: absolute; ">
</div>
<div style="width:300px;height:700px;overflow:scroll;margin:30px; position: relitive;">
<img src="https://dl.dropboxusercontent.com/u/9833562/mtest.png" width="98%" height="700px" alt="" style="margin-top:150px;margin-left:10px;" /><br />
<br />
</div>
You could structure your html like this:
<div class="iphone">
<div class="container">
<img src="https://dl.dropboxusercontent.com/u/9833562/mtest.png" alt=""/>
</div>
</div>
And then with CSS adjust the look :
.iphone {
width:370px;
height:800px;
background:url('https://dl.dropboxusercontent.com/u/9833562/iphone.png') no-repeat center;
background-size:100%;
}
.container {
position:relative;
top:152px;
width:293px;
margin:auto;
max-height:496px;
overflow:auto;
}
.container img {
width:100%;
}
Check this demo Fiddle
I've forked your example and twaked it a bit. By keeping inner content at constant width we can expand its container vertically and the effect is that like if we only moved scrollbar to the right. Please also note we can setup overflow behavior spearately for x and y axes.
Here's the JSFiddle link:
http://jsfiddle.net/74yh81s4/2/
and the code:
<div class="position: relative">
<img src="https://dl.dropboxusercontent.com/u/9833562/iphone.png" width="370px" height="800px">
</div>
<div style="width:340px; height:472px; overflow-x:hidden; overflow-y:scroll; margin:30px; position: absolute; top: 142px; left: 17px">
<img src="https://dl.dropboxusercontent.com/u/9833562/mtest.png" width="295px" alt="" />
</div>
Best regards
My grid image gallery has four images on each line. The width:25% in the CSS makes the width responsive but I need the height to also be responsive. At the moment I have the height as 180px. Could I set it as a percentage to make it responsive like the width? I've tried but when I set it as a percentage it doesn't work. It only works if I move height:x% to line1 img/line2 img, but then the image becomes squashed.
<div class="line1">
<img src="image1.jpg" alt="image1.jpg" />
<img src="image2.jpg" alt="image2.jpg" />
<img src="image3.jpg" alt="image3.jpg" />
<img src="image4.jpg" alt="image4.jpg" /></div>
<div class="line2">
<img src="image5.jpg" alt="image5.jpg" />
<img src="image6.jpg" alt="image6.jpg" />
<img src="image7.jpg" alt="image7.jpg" />
<img src="image8.jpg" alt="image8.jpg" /></div>
.line1{
overflow:hidden;
height:180px;
}
.line1 img{
width:25%;
}
.line2{
overflow:hidden;
height:180px;
}
.line2 img{
width:25%;
}
Set both .line1{ height: auto;} and .line1{ height: auto; this will keep it responsive.
Check the jsfiddle example.
I'm trying to achieve an effect when one div with png img inside (this img has hole in it) is over another div with img inside that will appear in hole of image over it, but for now it still is over instead of being under img with "window". And I still want to keep div that has to be under img ("iphone-screen") inside div with image with window ("iphone") because of responsive issues (percentage width of inner div is related to width of outer div). How to achieve that? Here's link to my website (go to page "Kontakt"):
CLICK
And here's my HTML markup:
<div id="slide6" class="slide">
<h1 class="big">Kontakt</h1>
<h2 class="call">Zadzwoń: <span class="thick">514 944 555</span></h2>
<h2 class="mail">
Napisz: <span class="thick">biuro#dentmedica.pl</span>
</h2>
<div id="iphone">
<img src="img/iphone.png" alt="" />
<div id="iphone-screen">
<img src="img/iphone-screen.png" alt="" />
</div>
</div>
</div>
And CSS:
#slide6 #iphone{
position:absolute;
bottom:0;
right:0;
width:40%;
z-index:600;
}
#slide6 #iphone > img{
width:100%;
height:auto;
z-index:600;
}
#slide6 #iphone #iphone-screen{
position:absolute;
width:44.1%;
overflow:hidden;
bottom:24%;
left:15%;
z-index:100;
}
#slide6 #iphone #iphone-screen > img{
width:100%;
height:auto;
z-index:100;
}
Thanks for any help!
I guess it's the issue with the div tag iphone-screen..remove it