I have image folders like body,collar,sleeves and cuffs and inside there i have images. Actually I have four images I want stack all these images together in their places.
Below is my html,
<div id="myJershy">
<img src="image/Pngs/collar/White.png" id="grey" style="position: fixed; top: 8px; left: 12px; width: 935px;">
<img class="orange" id="orange" src="image/Pngs/body/White.png" style="position: fixed; left: 10px; top: 8px;">
<img src="image/Pngs/sleeves/White.png" id="gold" style="position: fixed; top: 12px; left: 22px;">
<img class="back" id="black" src="image/Pngs/cuffs/White.png" style="position: fixed; left: 11px; top: 9px;">
</div>
How to make that div images together. Please help me someone.
If you want all images on the very same position and put them "together", you could simply do this:
#myJershy img {
position: absolute;
}
<div id="myJershy">
<img src="image/Pngs/collar/White.png" id="grey">
<img class="orange" id="orange" src="image/Pngs/body/White.png">
<img src="image/Pngs/sleeves/White.png" id="gold">
<img class="back" id="black" src="image/Pngs/cuffs/White.png">
</div>
However, if you want everything to be at different locations, I'd if possible recommend using a tool such as Paint.net, Gimp or Photoshop to put them together there instead. If that is not possible however, you got yourself a challenge as you'll need to use absolute locations like you have tried yourself.
Related
I am trying to build a page that contains 4 images, there is an absolute one and then each one of the other 3 are relative and redirect to another page, The problem is I want to make them in parallel to each other so I used padding left and top to adjust the img in the position I need but the main problem that I can redirect to any page pressing any place of this padding like the screenshot attached.
I really want to make the img only that can re-direct to another page not all this space.
.
I wrote this code
<div>
<img src="./assets/Images/Rectangle 1.png" style="position: absolute;" alt="Main Design" width="100%">
<a href="https://www.w3schools.com">
<img src="./assets/Images/Account.png" style="position: relative; padding-left: 180px; padding-top: 220px;" alt="Accounts Management">
</a>
<a href="https://www.w3schools.com">
<img src="./assets/Images/Bus.png" style="position: relative; padding-left: 150px; padding-top: 220px;" alt="Bus Management">
</a>
<a href="https://www.w3schools.com">
<img src="./assets/Images/Line.png" style="position: relative; padding-left: 150px; padding-top: 220px;" alt="Line Management">
</a>
Any recommendation for how to solve this ?
Did you try using margin properties on the anchor element?
I think you can use margin-(top, left, right, bottom) to get into the right position and probably others properties, in this way the only content in the anchor element will be the image and not the padding spaces.
something like:
<div>
<img src="./assets/Images/Rectangle 1.png" style="position: absolute;" alt="Main Design" width="100%">
<a href="https://www.w3schools.com" style="position: relative; margin-left: 180px; margin-top: 220px;">
<img src="./assets/Images/Account.png" style="position: relative;" alt="Accounts Management">
</a>
<a href="https://www.w3schools.com" style="position: relative; margin-left: 150px; margin-top: 220px;">
<img src="./assets/Images/Bus.png" style="position: relative; " alt="Bus Management">
</a>
<a href="https://www.w3schools.com" style="position: relative; margin-left: 150px; margin-top: 220px;">
<img src="./assets/Images/Line.png" style="position: relative;" alt="Line Management">
</a>
</div>
My code works fine in Chrome, however when I run it in Firefox, there is a problem. My webpage has 2 roman style columns ( each column consists of 2 images, a top and a bottom )that run vertically from the bottom of the header to the top of the footer. But in Firefox they stop about 30px from the top of the footer, leaving a gap.
My code does not include any vender prefixer's, but when I ran my CSS through Autoprefixer.com it did not add any either. Here is the code that seems to be affected.
<!--Roman Columns-->
<div class="content">
<div id="col_topleft">
<img src="imagesC/col_topleft.png" alt="column" height="420" width="60">
</div>
<div id="col_topright">
<img src="imagesC/col_topright.png" alt="column" height="420" width="60">
</div>
<div id="col_bottleft">
<img src="imagesC/col_bottleft.png" alt="column" height="685" width="60">
</div>
<div id="col_bottright">
<img src="imagesC/col_bottright.png" alt="column" height="685" width="60">
</div>
/*Roman Columns*/
#col_topleft {position: absolute;
top: 220px;
left: 25px;
}
#col_topright {position: absolute;
top: 220px;
right: 25px;
}
#col_bottleft {position: absolute;
top: 640px;
left: 25px;
}
#col_bottright {position: absolute;
top: 640px;
right: 25px;
}
This should fix the problem.
First add a div with position:relative than drop your content inside that div
<div style="position:relative;">
<div style="position:absolute"> <!-- your content div -->
</div>
</div>
I have this demo: http://vestigedayz.com/sys/adminexec/Test/
I have put a image on it (right, that folder icon) but i don't want to make it move when I randomly type on the keyboard.
.image{
padding-left:1100px;
position:fixed;
}
<a href="">
<div class="image">
<img src="images/suspect.png" width="160" height="140" alt="">
</div>
</a>
Change right and top to what you want.
position: absolute;
right: 50px;
top: 10px;
Lose the:
padding-left:1100px;
position:fixed;
i want to alignt a image, that is in front of another image, to the right.
In this example the little google image is on the upper left but i want it to be on the upper right:
http://jsfiddle.net/2NYve/
i already tried float: right and align="right" but that doenst work.
As you can see in the example the background is a object with a svg but for this example i simple put a image at this place, i think there should be no different.
<div id="divSvgView" dojoType="dojox.mobile.ScrollableView" style="background-color: #d0d0d0;">
<!--foreground-->
<div style="float:right;width:30px; height:30px;position: absolute; z-index:5000"><img class="mapImage" src="https://www.google.de/images/icons/product/chrome-48.png" /></div>
<!--background-->
<div style="width:100%; position: absolute; z-index:100"><img class="mapImage" src="https://www.google.de/images/srpr/logo4w.png" />
<!--<object type="application/xhtml+xml" id="svgObject" data="" style="width:100%; height:100%;margin:1%;"></object>--></div>
Add (Where 20px is the width of your image)
right: 20px;
to the image. That's the only way as far as I know if you use absolute positioning
http://jsfiddle.net/2NYve/1/
<div style="z-index:10; position: relative; float:right;width:30px; height:30px; z-index:5000">
<a href="javascript:goToLastNodeDiv()"><img class="mapImage" src="https://www.google.de/images/icons/product/chrome-48.png" />
</a></div>
<div style="z-index:1; width:100%; position: absolute; z-index:100">
<img class="mapImage" src="https://www.google.de/images/srpr/logo4w.png" />
</div>
I added to the div with the chromo logo :
z-index:10; position: relative;
And to the other one, with the google logo :
z-index:1
I used the CSS z-index proprety : http://www.w3schools.com/cssref/pr_pos_z-index.asp
Here's the updated jsFiddle : http://jsfiddle.net/2NYve/7/
Set the foreground divs position to 'relative' instead of 'absolute' and add some right margin to place it a little to the right.
<div id="divSvgView" dojoType="dojox.mobile.ScrollableView" style="background-color: #d0d0d0;">
<!--foreground-->
<div style="float:right;width:30px; height:30px;position: relative; z-index:5000;margin-right:10px"><img class="mapImage" src="https://www.google.de/images/icons/product/chrome-48.png" /></div>
<!--background-->
<div style="width:100%; position: absolute; z-index:100"><img class="mapImage" src="https://www.google.de/images/srpr/logo4w.png" />
<!--<object type="application/xhtml+xml" id="svgObject" data="" style="width:100%; height:100%;margin:1%;"></object>--></div>
I'm wondering if something like that would be possible:
<div class="arrow-left" style="z-index:2; position: fixed; height: 100%; width: 100%;"></div>
<div class="meta" style="z-index:1; position: relative;">
<div class="description">description link description</div>
</div>
I want z-index: 3; link to be above arrow-left but description below it. Is this achievable with above HTML structure?
Use position: relative; with z-index
Your question is logically wrong !
just put the (.arrow-left) inside the (.meta) and it will work.
<div class="meta" style="z-index:1; position: relative;">
<div class="arrow-left" style="z-index:2; position: fixed; height: 100%; width: 100%;"></div>
<div class="description">description link description</div>
</div>
Validated use of this method is following
<div class="hold" style="z-index:0; position:relative"><!--Outdiv set relative and z-index to 0 here -->
<div class="arrow-left" style="z-index:2; position: fixed; height: 100%; width: 100%;"></div>
<div class="meta" style="z-index:1; position: relative;">
<div class="description">description link description
</div>
</div>
This way you make a ground 0 for your index by setting your outer div as relative and then give it as your main floor like z-index 0 this way you avoid other faults later on according to z-index