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>
Related
I'm making a model of a website in HTML and Css and I do not know how to remove this little space on my div element
I've tried to put padding and margin to 0 but nothing happens
Here's my CSS code
body{
padding-left:269px;
padding-right:269px;
background-color:black;
margin: 0;
}
.blanco{
background-color: #fff;
height:780px;
width: 1366px;
padding:0;
margin:0;
}
The div element is named "blanco"
The arrows are a CSS too
Here's the HTML:
<div class="setaEsquerda">
<img src="images/Path Copy.svg" alt="">
</div>
<div class="setaDireita">
<img src="images/Path.svg" alt="">
</div>
and here's the css
.setaEsquerda{
position: absolute;
top: 42.1%;
border-radius: 5px;
margin-left: 36px;
}
.setaDireita{
position: absolute;
top: 42.1%;
border-radius: 5px;
margin-left: 1290px;
}
You are specifing the size of your div.blanco .. Any bigger screen than that will also show the <body> behind it, if .blanco ends there.
I am just assuming and i think the issue you have may be because of these arrows. They are pushing the other content down.
You may want to divide the body into 3 section, then apply the style you want and it should be affective
<body>
<div class="main">
<div class="left-col">arrow left</div>
<div class="content">
<h1>Some text</h1>
<button>Hey</button>
</div>
<div class="right-col">arrow right</div>
</div>
</body>
<style>
.main {
display: grid;
grid-template-columns: auto 1fr auto;
}
</style>
</html>
try not to give a size for your Blanco Class in your CSS code.
.blanco{
background-color: #fff;
padding:0;
margin:0;
}
I've looked around and tried many different solutions, yet none of them worked for me. Basically I am just trying to have my <center> tag aligned vertically, so the margin on the top is always equal to the bottom when resizing. What kind of CSS can I apply to do this?
.modalText {
font-weight: 100;
font-size: 2.5em;
}
.paypalCenterModal {
margin: auto 0;
}
.modalText {
margin: auto 0;
}
.img-responsiveModal {
margin: 30px 0px 30px 0px;
display: block;
width: 100%;
height: auto;
box-shadow: 10px 10px 8px #888888;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 modal3ImgPrev">
<img class="img-responsiveModal" id="myImg3" src='/CMS_Static/Uploads/313864614C6F6F/DJI_0019-Recovered.jpg' />
</div>
<center class="paypalCenterModal">
<h3 class="modalText">Select Options</h3>
<form class="paypalForm" <p>Form Content In Here</p>
</form>
</center>
</div>
</div>
You can easily get this by using Flexbox.
If you are thinking to upgrade your bootstrap to version4 you will get this easily.
And as I see you are not using bootstrap grid col-* and row classes according to doc.
Read Bootstrap3 Grid
Stack Snippet
.v-align-section .row {
display: flex;
align-items: center;
}
.modalText {
margin-top: 0;
}
#media (max-width:767px) {
.v-align-section .row {
flex-direction: column;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="v-align-section">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 modal3ImgPrev">
<img class="img-responsiveModal img-responsive" id="myImg3" src='http://via.placeholder.com/250x350' />
</div>
<div class="col-sm-6">
<form class="paypalForm">
<h3 class="modalText">Select Options</h3>
<p>Form Content In Here</p>
</form>
</div>
</div>
</div>
</div>
You can adjust the bottom values in the class it self. Try the following snippet. Further more you can adjust values with using rem rather than pixel to improve the responsiveness.
.divThatNeedsToBeCenteredVertically {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0px;
margin: auto;
width: 100px;
height: 100px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 modal3ImgPrev">
<img class="img-responsiveModal" id="myImg3" src='/CMS_Static/Uploads/313864614C6F6F/DJI_0019-Recovered.jpg' />
</div>
<center class="divThatNeedsToBeCenteredVertically">
<h3 class="modalText">Select Options</h3>
<form class="col-sm-6 paypalForm">
<p>Form Content In Here</p>
</form>
</center>
</div>
</div>
Why did you use "centre" tag? It has been obsoleted. (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center)
Below is the solution, make sure that the position of the parent div, with class name "row", is not "static" (by default, the position of div is static, you can change it to "relative" or whatever).
.row {
position: relative;
height: 100vh;
}
.divThatNeedsToBeCenteredVertically {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: gray;
}
For more details look at the URL: https://jsfiddle.net/sanqian/y9ftobma/
Here is another example, I recommend you to having a look at it.
https://jsfiddle.net/sanqian/La9m2u8L/
Try adding this CSS Snippet
form{
position : absolute;
transform: translate(-50%,-50%);
top : 50%;
left : 50%;
margin: auto;
}
We are setting the top and left to middle of the form screen
Try this..!
.modalText {
font-weight: 100;
font-size: 2.5em;
margin: auto 0;
}
.img-responsiveModal {
max-width: 100%;
height: auto;
box-shadow: 10px 10px 8px #888888;
}
.row{
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 modal3ImgPrev">
<img class="img-responsiveModal" id="myImg3" src="https://images-na.ssl-images-amazon.com/images/M/MV5BMjM2ODEzMDUzMF5BMl5BanBnXkFtZTcwNDQ2NzU3OQ##._V1_UY317_CR20,0,214,317_AL__QL50.jpg"/>
</div>
<div class="col-xs-6 paypalCenterModal">
<h3 class="modalText">Select Options</h3>
<form class="paypalForm"><p>Form Content In Here</p></form>
</div>
</div>
</div>
</div>
I'm at a project where I need all images within a div to be placed at the same place for an animation where I've put the images to be absolute to stack on top of each other though this interupts the rest of the code when scaling the page.
Example start -
HTML
<div class="a b">
<div class="c d">
<div class="e">
<img class="f" src="" alt="image"/>
</div>
</div>
<div class="c d">
Some content
</div>
</div>
CSS
.a {
clear: both;
padding: 0px;
margin: 0px;
width: 100%; }
.b:before,
.b:after {content:""; display: table; }
.b:after {clear:both; }
.c {
display: block;
float: left;
margin: 1% 0 1% 0%;
}
.d {
margin: 0;
padding: 0;
width: 50%;
}
.e {
position: relative;
margin: 100px auto;
width: 100%;
max-width: 640px;
height: auto;
max-height: 640px;
vertical-align: center;
}
.f {
position: absolute;
margin: 0;
padding: 0;
}
Example end -
As said this works great on fullscreen but when resizing the second class="c d" appears overlapped by the first class="c d" and I would like them to be stacked underneath eachother instead as the did before I created class="f", is there any way to do this with pure css?
to make child absolute within parent you need to wrap the child with div with position relative.
for elements with position set to relative or absolute there is no direct way to prevent them from over layering, you can prevent them by calculating left and top values.
a work around is to use a blocking div. do that wrap your absolute positioned element with normal div and set its height to a value suitable to your needs check this plunker.
note the div with .absolute-parent class
also note the div with .blocking-div class
check this plunker
https://plnkr.co/edit/dT1cC8YAY1ENYfhRvncs?p=preview
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1>Absolute Positioning</h1>
<div class="absolute-to-page">
to page
</div>
<div class="my-cont">
<div class="blocking-div">
<div class="absolute-parent">
<div class="absolute-to-parent">
to parent
</div>
<div class="absolute-to-parent obj-2">
object two
</div>
</div>
</div>
<div class="absolute-parent">
<p>Some other content</p>
</div>
<div>
<p>Some other content 2</p>
</div>
</div>
</body>
</html>
and the css code
/* Styles go here */
.my-cont{
border:1px solid blue;
min-height:400px;
margin-top:200px;
}
.absolute-to-page{
position:absolute;
width:40px;
height:40px;
background:green;
top:0;
}
.absolute-parent{
position:relative;
}
.absolute-to-parent{
position:absolute;
width:40px;
height:40px;
background:red;
top:0;
}
.obj-2{
left:50px;
}
.blocking-div{
height:40px;
}
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.
I have the following code to present a set of images. The images are filtered by date and they include a caption underneath. Pictures are placed as a grid on next to other. The code
html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="../css/main.css">
<title>Images</title>
</head>
<body>
<div class="date-group">
<div class='date-title'>
13/02/2014
</div>
<div class="date-content">
<div class="img-thumb float">
<a href="../images/bold.jpg">
<img src="../images/bold.jpg">
<span class="caption">A big caption that might be going in more than one lines</span>
</a>
</div>
<div class="img-thumb float">
<img src="../images/bold.jpg">
<span class="caption">A caption</span>
</div>
<div class="img-thumb float">
<img src="../images/bold.jpg">
<span class="caption">A caption</span>
</div>
<div class="img-thumb float">
<a><img src="../images/bold.jpg"></a>
<span class="caption">A caption</span>
</div>
<div class="img-thumb float">
<a><img src="../images/bold.jpg"></a>
<span class="caption">A caption</span>
</div>
</div>
</div>
</body>
</html>
css
div.date-group {
text-align: center;
border: 1px solid black;
}
.date-group img{
width:100px;
height:100px;
}
.img-thumb{
width:100px;
text-align: center;
}
.date-group span{
display: block;
}
.float{
float: left;
}
.date-title{
height:20px;
border-bottom:1px solid black;
margin-bottom: 10px;
}
.date-content{
margin-right: 10px;
min-height: 150px;
}
Here is the fiddle. My problems is that the border does not grow as the caption might grow when it wraps to more than one line. Also will this code won't make images go to second and third row if the first one is full. How can I change those two things (the border growing and .img-thumb float to change row when not enough space. Also keep in mind that these images will populate the page automatically(if it is possible) within a for in a django template
#Apostolos try this one:
.float{ display: inline-block; }
Fiddle
you should use this css
.date-content {
margin-right: 10px;
min-height: 150px;
overflow: auto;
}
fiddle
you can add div.date-group {display: inline-block;}
http://jsfiddle.net/jkPR7/11/
http://jsfiddle.net/jkPR7/12/
That's all
.date-group span{
display: table-cell;
}
.date-content{
margin-right: 10px;
min-height: 150px;
display: table;
}
try adding this to your CSS:
.date-content:after {
content: "";
clear: both;
display: block;
}
Edited fidle: http://jsfiddle.net/jkPR7/27/
Learn more http://css-tricks.com/all-about-floats/