I want to make all the images aligned properly if anyone can help it will be greatly appreciated all the images are 100% the same size so its not that problem
.box {
float: left;
width: 20%;
padding-bottom: 20%;
}
.top-left {
position:absolute;
top: 10px; left: 10px;
width: 50%;
overflow: hidden;
}
.top-right {
position:absolute;
top: 10px; right: 10px;
width: 50%;
overflow: hidden;
}
.bottom-left {
position:absolute;
bottom: 10px; left: 10px;
width: 50%;
overflow: hidden;
}
.bottom-right {
position:absolute;
bottom: 10px; right: 10px;
width: 50%;
}
#media only screen and (max-width : 480px) {
.box {
width: 100%;
}
.box a{
position: relative;
}
.top-left, .top-right, .bottom-left, .bottom-right {
width:100%;
}
}
<!Doctype html>
<html>
<head>
<title>DelUZens</title>
<link rel="stylesheet" href="main.css" media="screen" title="no title" charset="utf-8">
<link href="main.css" rel="stlesheet" type="text/css">
<style>
.wrap {
overflow:hidden;
}
</style>
</head>
<body bgcolor="black">
<div class="section-links">
<div class="wrap">
<div class="box">
<a href="teams.html" class="top-left">
<img style="width: 100%;" style="height: 100%" src="icon1.jpg" alt="">
</a>
</div>
<div class="box">
<a href="store.html" class="top-right">
<img style="width: 100%;" style="height: 100%" src="icon2.jpg" alt="">
</a>
</div>
<div class="box">
<a href="sponsors.html" class="bottom-left">
<img style="width: 100%;" style="height: 100%" src="icon4.jpg" alt="">
</a>
</div>
<div class="box">
<a href="aboutus.html" class="bottom-right">
<img style="width: 100%;" style="height: 100%" src="icon3.jpg" alt="">
</a>
</div>
</div>
</div>
</body>
</html>
So if you can see at the top the pointy end isn't exactly touching the other one same with the two sides
Kind Regards
CreepyC
Greatly Appreciated
You're setting the height and width of the <a> elements to 50% but then you're positioning them 10px from each edge, which means they overlap.
You can use CSS calc() to size the images to 10 pixels less than 50% to compensate:
width: calc(50% - 10px);
(note the spaces are important, don't leave them out).
calc() is relatively new, so check http://caniuse.com/#feat=calc for browser support if it's a concern.
I believe the best way is using bootstrap grid system with rows
http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
If you have two pictures in each row you put a class col-6 in each( they columns have to add to 12) and it also has responsiveness with other class names.
or using css with flex
http://www.w3schools.com/cssref/css3_pr_flex.asp
Also here is a fun-page with a game to better understand flex and its features
http://flexboxfroggy.com/
if you want all image 100% height and width of the screen then use 100vh.
ex : -
.class{ height:100vh; width:100%; margin:0; padding:0; }
if you want starch free images in your website fix height / width ( on your requirement ) using px / % ..
ex : -
.class{ height:200px; width:auto; margin:0; padding:0; }
i fixed height , same for if you want fixed width.
Related
I have two pictures that have 512px in height and 512px in width. Whatsoever the plus symbol is bigger than the shutdown button.
HTML:
<div class="logout">
<a href="someLink">
<img name="logout" alt="logout" src="red_shutdown.png">
</a>
</div>
<div class="plus-symbol">
<img name="plus" alt="create-post" src="plus-symbol.png">
</div>
CSS:
div.logout {
position: fixed;
bottom: 10%;
right: 1.32%;
border: 0;
}
div.plus-symbol {
position: fixed;
bottom: 10%;
right: 1.32%;
border: 0;
}
You can just make the parent tag of 512*512. then just make the image to be
width:100%; height:100%;
Also check from inspect if the images are overflowing or not if yes then overflow:hidden
If this variant doens't work, tell me please.
<style>
img {
width: 512px !important;
height: 512px !important;
}
</style>
And you can also put a class to the
Just like that:
<div class="logout">
<a href="someLink">
<img name="logout" class="img_icon" alt="logout" src="red_shutdown.png">
</a>
</div>
<div class="plus-symbol">
<img name="plus" class="img_icon" alt="create-post" src="plus-symbol.png">
</div>
<style>
.img_icon {
width: 512px !important;
height: 512px !important;
}
</style>
Good Day, I am trying to align three images in one css box. My goal is to place the logo and button in the right (top and bottom) and two pictures to the left but they are overlapping each other. Also, the reason that I won't compile all of them into one image is that I am planning to use bootstrap to make this intro page responsive. CSS such as position and align does not seem to make it work, any help would be truly appreciated.
div.intro_box {
width: 1000px;
height: 650px;
border: 8px;
border-style: solid;
border-color: #00008B;
background-color: #9e9e9e;
padding: 25px;
margin: auto;
position:relative;
}
.intro_box img {
position: absolute;
}
.adjust_center {
text-align: center;
}
<html>
<head>
<title>Pokemon TCG Western Visayas PH</title>
<link rel="stylesheet" href="intro_page.css">
</head>
<body>
<div class="intro_box">
<div>
<img src="images/l_tcg.png" alt="Empoleon"/>
</div>
<div>
<img src="images/button_enter.png" alt="Empoleon"/>
</div>
<div id="pkmn">
<img src="images/p_empoleon.png" alt="Empoleon"/>
<img src="images/p_gardevoir.png" alt="Gardevoir"/>
</div>
</div>
</body>
</html>
]2
Use css grid. For more detail, I usually look at this page.
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
width: 100%;
min-height: 300px;
}
.leftTop {
grid-column: 1 / 2;
grid-row: 1 / 2;
background: red;
}
.leftBottom {
grid-column: 1 / 2;
grid-row: 2 / 3;
background: green;
}
.right {
grid-column: 2 / 3;
grid-row: 1 / 3;
background: purple;
}
<div class="grid">
<div class="leftTop">
</div>
<div class="leftBottom">
</div>
<div class="right">
</div>
</div>
If you use bootstrap grid (since you said you were already going to use bootstrap for a responsive design). You could do something like this. The code snippet is best viewed full screen mode .
Padding and column widths will need to be adjusted to make it appear exactly the way you want and to make it look better on mobile devices, but this gives it the basic structure.
For more info about bootstrap grids have a look at the Bootstrap Documentation (grid systems)
<html>
<head>
<title>Pokemon TCG Western Visayas PH</title>
<link rel="stylesheet" href="intro_page.css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 text-center">
<div class="row">
<div class="col-md-12">
<!-- Logo Image -->
<img src="http://via.placeholder.com/350x150" alt="Empoleon" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<!-- Button Image -->
<img src="http://via.placeholder.com/350x150" alt="Empoleon" />
</div>
</div>
</div>
<div class="col-md-6 text-center">
<div class="row">
<div class="col-md-6">
<!-- Main Image 1 -->
<img src="http://via.placeholder.com/150x350" alt="Empoleon" />
</div>
<div class="col-md-6">
<!-- Main Image 2 -->
<img src="http://via.placeholder.com/150x350" alt="Gardevoir" />
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You say that position and align don't work, but your example doesn't show an attempt to use them. You should be able to style your display elements with position and place them as you wish (for the button and logo which are in divisions of their own, do that on the 'div' elements, as in the example here, not on 'img').
NOTE1: I reduced the container 'div' to make the example displayable here in StackOverflow.
NOTE2: my sample simply scatters the elements to the places you say you want them to be, it doesn't take into account their sizes, so they may still overlap. You will need to play with the sizes and use conditional styling to make your design respond correctly to window size changes (and work both on desktop and mobile).
div.intro_box {
width: 500px;
height: 325px;
border: 8px;
border-style: solid;
border-color: #00008B;
background-color: #9e9e9e;
padding: 25px;
margin: auto;
position:relative;
}
.adjust_center {
text-align: center;
}
#pkmn { position: absolute ; left: 0 ; top : 0 ; }
#button { position: absolute; right: 0 ; top : 0 ; }
#logo { position: absolute; right: 0 ; bottom: 0 ; }
/* you will need additional styles either here or inline to place
the two images within the #pkmn div element, I'm not adding this here */
}
<html>
<head>
<title>Pokemon TCG Western Visayas PH</title>
<link rel="stylesheet" href="intro_page.css">
</head>
<body>
<div class="intro_box">
<div id="logo">
<img src="images/l_tcg.png" alt="Logo"/>
</div>
<div id="button">
<img src="images/button_enter.png" alt="Button"/>
</div>
<div id="pkmn">
<img src="images/p_empoleon.png" alt="Empoleon"/>
<img src="images/p_gardevoir.png" alt="Gardevoir"/>
</div>
</div>
</body>
</html>
You can achieve this without grid system..
<!doctype html>
<html lang="en">
<head>
<style>
body{
margin:0px;
padding:0px;
}
.wrapper{
border:2px solid green;
width:99%;
height:500px;
position:relative;
display:flex;
}
.wrapper .leftWrapper{
width:50%;
display:inline-block;
}
.wrapper .leftWrapper .img1{
position:relative;
top:20px;
}
.wrapper .leftWrapper .img1 img{
width:60%;
}
.wrapper .leftWrapper .img2{
position:absolute;
top:50px;
left:30px;
}
.wrapper .leftWrapper .img2 img{
width:40%;
}
.wrapper .rightWrapper{
width:20%;
display:inline-block;
}
.wrapper .rightWrapper .logo{
position:absolute;
top:0;
right:0;
text-align:right;
}
.wrapper .rightWrapper .logo a img{
width:20%;
height:50px;
border:1px solid #000;
}
.wrapper .rightWrapper .btn{
position:absolute;
bottom:0;
right:0;
text-align:right;
}
.wrapper .rightWrapper .btn a img{
width:20%;
min-width:100px;
height:100px;
border:1px solid #000;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="leftWrapper">
<div class="img1"><img src="images/abstract.jpg" title="img1" alt="img1"/></div>
<div class="img2"><img src="images/ball.png" title="img2" alt="img2"/></div>
</div>
<div class="rightWrapper">
<div class="logo">
<img src="images/defaultlogo.jpg" title="logo" alt="logo"/>
</div>
<div class="btn">
<img src="images/btn.jpg" title="btn" alt="btn"/>
</div>
</div>
</div>
</body>
</html>
This is what I am trying to achieve:
An image positioned in between two separate div tag like facebook profile page:
I searched here but the solutions did not help much. It got positioned as I wanted but since it is bootstrap and it should responsive, when the screen size decreases the image position gets changed, which I do not want.
Here is the code(which might not be proper as I was just testing) -
HTML -
<div class="container">
<div class="jumbotron jumbo" id="custjumbo">
<h1>This is a jumbotron... </h1>
<h2>Let's see what can we make of it..</h2>
<br>
<img src="images/tiger.jpg" class="img-thumbnail" alt="Tiger"
width="304" height="236">
</div>
</div>
The CSS -
.container {
background-color: cadetblue;
}
.jumbo {
margin-top:20px;
position: relative;
}
.img-thumbnail {
position: absolute;
bottom: -60px;
right: 200px;
}
img {
display: block;
width: 200px;
height: 200px;
background: green;
}
This is what I got after:
You could try to change the img-thumbnail to position: relative and use 'bottom: -60px' instead of positioning absolute, that can reposition the image without the use of absolute positioning
check it
.container {
background-color: cadetblue;
width:100%;
}
.jumbo {
margin-top:20px;
position: relative;
}
.img-thumbnail {
position: absolute;
bottom: -90px;
left:15%;
}
img {
display: block;
width: 200px;
height: 200px;
background: green;
}
.bottom-div {
height:200px;
background-color:red;}
<head>
<meta name="viewport" content="width=device-width, initial-sclae=1">
</head>
<div class="container">
<div class="jumbotron jumbo" id="custjumbo">
<h1>This is a jumbotron... </h1>
<h2>Let's see what can we make of it..</h2>
<br>
<img src="images/tiger.jpg" class="img-thumbnail" alt="Tiger"
width="304" height="236">
</div>
<div class="bottom-div"></div>
</div>
I am trying to get the picture in the 2nd div to overflow the parent div. I have played around with different position attributes and overflow:visible, but none seem to solve my issue.
How can I solve this?
Thanks
EDIT: Okay scrap that first code - here is the actual code:
I want to get the slider to stretch across and overflow the sp_block
EDIT 2: I must not edit the first 4 divs by the way.
<div id="sp_header">
<div id="sp_block_16" class="sp_block_section_last">
<div>
<div class="sp_block">
<!--
must have
-->
<link type="text/css" rel="stylesheet" href="http://www.dedicatedrejects.com/icsa/test/slider/allinone_contentSlider.css"></link>
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Cabin"></link>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.dedicatedrejects.com/icsa/test/slider/js/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript" src="http://www.dedicatedrejects.com/icsa/test/slider/js/allinone_contentSlider.js"></script>
<!--
must have
-->
<script></script>
<div style="position:relative; width:1562px; height:351px; overflow:visible;">
<div style="width:1562px; height:351px; position:absolute; overflow:visible; margin: 0 auto;">
<div class="allinone_contentSlider imposing" style="width: 1562px; height: 351px;">
<div id="allinone_contentSlider_imposing" style="position:relative overflow:visible;"></div>
<div class="bottomNavRight" style="display: block; bottom: -35px; top: auto; left: 813px;"></div>
<div class="bottomNav" style="display: block; bottom: -35px; top: auto; width: 46px; left: 758px;"></div>
<div class="bottomNavLeft" style="display: block; bottom: -35px; top: auto; left: 758px;"></div>
<div class="bannerControls" style="margin-top: 105px;"></div>
<div class="contentHolderVisibleWrapper" style="width: 1562px; height: 351px;">
<div class="contentHolder ui-draggable" style="cursor: url("skins/hand.cur"), url("skins/hand.cur"), move; … top: 0px; position: absolute; width: 3124px; height: 351px;">
<div id="contentHolderUnit_0" class="contentHolderUnit" rel="0" style="width: 1562px; height: 351px;">
<img src="https://robertsspaceindustries.com/media/6kahqz455yu40r/post_section_header/StarCitizenDev-2014-04-11-14-10-32-75.jpg" style="position:absolute;"></img>
<img src="http://i.imgur.com/vcifs31.png" style="position:absolute; z-index:10;"></img>
</div>
<div id="allinone_contentSlider_photoText0" class="allinone_contentSlider_texts" style="z-index: 11; width: 1562px; left: 0px; top: 0px; display: none;"></div>
<div id="contentHolderUnit_1" class="contentHolderUnit" rel="1" style="width: 1562px; height: 351px;"></div>
<div id="allinone_contentSlider_photoText1" class="allinone_contentSlider_texts" style="z-index: 11; width: 1562px; left: 1562px; top: 0px; display: none;"></div>
</div>
</div>
<div class="playOver" style="left: 744px; top: 139px; display: none;"></div>
<canvas class="mycanvas" width="36" height="36"></canvas>
</div>
</div>
</div>
</div>
</div>
</div>
As it is, the image will appear outside the parent div, for no overflow has been specified. If you want it to hide inside the parent div, just add to the div:
{
overflow: hidden;
}
http://jsfiddle.net/Cn3n3/2/
The inline width and height attributes (within the <img> tag) shouldn't have the px unit in them. Only specify the number of pixels without a unit. You shouldn't need to specify overflow, since the defaults will suit your needs in this case.
See example: http://jsfiddle.net/orvn/ansBc/1/
<div id="container">
<img src="http://foo.com/image.jpg" width="500">
</div>
#container { width: 300px; }
#container > img { display: block; }
Additionally, you don't need to wrap the image in a div here, you can apply display: block; to have it behave the way a div would.
Not sure what you're trying to achieve but the parent div needs the overflow tag.
HTML
<div class="parent">
<div class="child">image</div>
</div>
CSS
.parent {
width:700px;
height:200px;
overflow:visible;
background-color:green;
}
.child {
width:1000px;
height:100px;
background-color:red;
}
Here is a demo jsfiddel
I made the parent div background height longer so you can see the overflow. You can also replace the background color with an image. Replace the class (parent & Child) and write this inline but I advise against that.
I have a fixed positioned div at the bottom of my web (oriented just for mobiles). Inside I have 5 links, and I would like these links to be perfect squares always but I want to avoid to use any fixed size so I'm trying always to use "%". These squares needs to be always distribute using the full width of the container.
html so simple:
<div class="container">
<a href="#" class="facebook">
</a>
<a href="#" class="info">
</a>
<a href="#" class="contacto">
</a>
<a href="#" class="telefono">
</a>
<a href="#" class="galeria">
</a>
</div>
and my css's so far:
.container {
width:90%;
height:20%;
position:fixed;
bottom:5%;
left:5%;
overflow:hidden;
}
.container a {
width: 18.4%;
margin-right: 2%;
height:100%;
background-color: blue;
float:left;
}
.container a:last-child {margin-right: 0;}
Here you have the jsfiddle: http://jsfiddle.net/7jJsf/3/
So, could it be possible to make the links perfect squares whatever width or height the browser have?
or, if maybe my aproach is not good enough, any other way to make it?
note: I think I could do it probably using a square img inside every link but I would love to avoid the use of innecesary images.
thanks in advance and excuse my english, hope the question is clear enough.
I have already answered this issue here.
This solution uses a dummy div and position: absolute; to make responsive elements that keep their aspect ratio. This is a CSS solution.
To adapt it to your situation, you can do this :
FIDDLE
HTML :
<div class="container">
<div class="wrap">
<div class="dummy"></div>
</div>
<div class="wrap">
<div class="dummy"></div>
</div>
<div class="wrap">
<div class="dummy"></div>
</div>
<div class="wrap">
<div class="dummy"></div>
</div>
<div class="wrap">
<div class="dummy"></div>
</div>
</div>
CSS :
.container {
width:90%;
position:fixed;
bottom:5%;
left:5%;
}
.container .wrap {
float:left;
position: relative;
width: 30%;
margin-right:1%;
width: 18.4%;
margin-right: 2%;
height:100%;
float:left;
}
.container .dummy {
margin-top: 100%;
}
.container a {
display:block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: blue;
}
.container>div:last-child {
margin-right: 0;
}
I would set the width and height to the viewport width (a percentage of the viewport width) like this:
width:16vw;
height:16vw;
Your fiddle
Use this little trick
.container a {
margin-right: 2%;
background-color: blue;
float:left;
position: relative;
width: 18.4%;
padding-bottom: 18.4%;
}