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/
Related
I have to differentiate value 1 and value 2 using dot icon so I wrote css for that and placed in div but it is overlapping on each other I just want to show two div side by side with icon and text without overlapping
.dot {
height: 12px;
width: 12px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
}
.user-values-color{
background-color: #1BBC9B;
float: left;
}
.default-values-color{
background-color: #2D3E50;
float: left;
}
<div class="user-values-color dot" ><span style="float:left;">Value 1</span></div>
<div class="default-values-color dot"><span style="float:left;"> value 2</span></div>
take the span out of the div put it side by side in a parent container like below:
.dot {
height: 12px;
width: 12px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
}
.user-values-color{
background-color: #1BBC9B;
float: left;
}
.default-values-color{
background-color: #2D3E50;
float: left;
}
.container {
display: inline-block;
}
<div class="container">
<div class="user-values-color dot" ></div>
<span style="float:left;">Value 1</span>
</div>
<div class="container">
<div class="default-values-color dot"></div>
<span style="float:left;"> value 2</span>
</div>
If you are really using bootstrap then you shall learn about Grid system, it 's the basic.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container">
<div class="row justify-content-start">
<div class="col-2">
Value 1
</div>
<div class="col-2">
value 2
</div>
</div>
</div>
now you are just using inline css
I have the following html block (image is just something I found on the web). I've used multiple examples and answers from different questions tackling the similar problem I have but I can't seem to figure it out.
What's the proper or best way to align a text vertically beside an image? I'm currently using bootstrap 3.3.6. I tried using different approaches but can't seem to make anything work.
.textContainer {
display: table;
}
.imageClass {
margin: 5px;
}
.spanText {
display: table-cell;
align-items: middle;
}
<div class="container-fluid">
<div class="row">
<div class="col-md-6 textContainer">
<img class="imageClass" width=100 height=100 src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Wiktionary_small.svg" alt="alt text" />
<span class="spanText">Need to center</span>
</div>
</div>
</div>
You can simply remove your display: table; CSS, and use bootstrap's default img { vertical-align: middle; } CSS to align the text vertically.
.imageClass {
margin: 5px;
width: 100px;
height: 100px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 textContainer">
<img class="imageClass" src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Wiktionary_small.svg" alt="alt text">
<span class="spanText">Need to center</span>
</div>
</div>
</div>
You can also use display: flex; on the parent with align-items: center; to align the flex children vertically.
.textContainer {
display: flex;
align-items: center;
}
.imageClass {
margin: 5px;
width: 100px;
height: 100px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 textContainer">
<img class="imageClass" src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Wiktionary_small.svg" alt="alt text">
<span class="spanText">Need to center</span>
</div>
</div>
</div>
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>
I would like to achieve this effect
Basically, I want an image and text both centered with the image to the left and text to the right. Both image and text are part of a bigger div that makes up its own row. It doesn't matter if the img or text is part of its own div as long as this effect is achieved.
It would be best to have this done without using flex, which I think is a common way to work around any trouble with spacing and position. However, I've read negative things about this technique so i rather just play it safe and not use it.
Help would be awesome, thank you
I had also same problem. I wanted to achieve the center alignment of image and text and solved it using the technique that i used in this fiddle. Check this fiddle
<div style="background-color:black;color:white;padding:20px; display: flex;">
<div style="color:white;overflow:hidden;width: 50%;height: 100px;">
<img src="http://placehold.it/350x150" style=" margin-right: 10px; float: right; width: 75%;">
</div>
<div style="color:white;/* padding:20px; */width: 50%;height: 100px;">
<h2 style=" margin-left: 10px;">This is text</h2>
</div>
</div>
https://jsfiddle.net/Lpjxse6L/
You can try this..
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row" style="border: 2px solid; text-align: center;">
<div class="col-sm-3">
<h3>Parent Div</h3>
</div>
<div class="col-sm-3" style="border: 2px solid; margin: 14px;">
<h3>Div of image</h3>
</div>
<div class="col-sm-3" style="border: 2px solid; margin: 14px;">
<h3>Div of text</h3>
</div>
<div class="col-sm-3">
</div>
</div>
</body>
</html>
Here is what I did, see if you understand it or if you have any questions. http://codepen.io/anon/pen/RKppYd
<div class="container">
<div class="images"><img class="top" src="http://placehold.it/350x150"></div>
<div class="text">some text and stuff goes here probably.some text and stuff goes here probably.some text and stuff goes here probably.some text and stuff goes here probably.some text and stuff goes here probably.some text and stuff goes here probably.some text and stuff goes here probably.some text and stuff goes here probably.some text and stuff goes here probably. </div>
</div>
.container {
text-align:center;
}
.top {
vertical-align: text-top;
}
.images {
display:inline-block;
}
.text {
display:inline-block;
vertical-align: text-top;
width:350px;
background-color: black;
color:white;
}
If you don't want to use displa:flex then use can try this
.container{
float:left;
position:relative;
left:50%;
-webkit-transform:translateX(-50%);
-moz-transform:translateX(-50%);
-ms-transform:translateX(-50%);
transform:translateX(-50%);
}
.section{
float:left;
margin:0 10px;
padding:10px;
border:1px solid #000;
}
.wrapper {
background: #fbfbfb;
border: 1px solid #000;
float: left;
width: 100%;
padding: 10px 0;
}
<div class="wrapper">
<div class="container">
<img src=" http://fillmurray.com/200/200" class="section"/>
<div class="section"><p>Text for fun!!</p></div>
</div>
</div>
It's pretty straightforward if you use display flex.
You can then set the justify-content property to center.
.parent {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
/* The following is optional, to add space between image and text */
.parent div {
margin: 0 5px;
}
<div class="parent">
<div><img src=" http://fillmurray.com/200/200"/></div>
<div><p>Text for fun!!</p></div>
</div>
Description of Problem:
I'm attempting to arrange the kittens in a star-like pattern with 3 DIV "rows." I would like for the first top row's kitten to be centered on the page (easy enough); the second (or '#middle') row to have their cats left-aligned and right-aligned, respectively; and the third ('#bottom') row to have its cats aligned similar to the second row, but slightly indented on both sides. Again, like a star.
I know the float property essentially makes the element(s) absolutely positioned, which collapses the bottom two rows' height, so that's probably not the right answer. But I've also tried text-align and futzing with margins. My brain is fried. What am I doing wrong?
Fiddle:
http://jsfiddle.net/k97CG/1/
HTML Structure:
<div id="top">
<div id="container1" class="containers">
<div id="cat1">
<img src="http://placekitten.com/g/125/125" />
</div>
</div>
</div>
<div id="middle">
<div id="container2" class="containers">
<div id="cat2">
<img src="http://placekitten.com/g/125/125" />
</div>
</div>
<div id="container3" class="containers">
<div id="cat3">
<img src="http://placekitten.com/g/125/125" />
</div>
</div>
</div>
<div id="bottom">
<div id="container4" class="containers">
<div id="cat4">
<img src="http://placekitten.com/g/125/125" />
</div>
</div>
<div id="container5" class="containers">
<div id="cat5">
<img src="http://placekitten.com/g/125/125" />
</div>
</div>
</div>
CSS Structure:
.containers {
position: relative;
width: 125px;
height: 125px;
}
#top, #middle, #bottom {
position: relative;
width: 100%;
border: 1px solid red;
}
#container1 {
margin: 0 auto;
}
#container2 {
float: left;
}
#container3 {
float: right;
}
#container4 {
float: left;
}
#container5 {
float: right;
}
Is there a reason you can't just place them all in one div, then position them with CSS?
<div>
<img id="img01" src="img1">
<img id="img02" src="img1">
<img id="img03" src="img1">
<img id="img04" src="img1">
<img id="img05" src="img1">
</div>
then
div {
position:relative;
width:100%;
height:100%;
}
div img {
position:absolute;
}
#img01 {
top:x;
left:y;
} etc
As a rule, you shouldn't rely on HTML for visually styling content unless you have no other option. That's what CSS is for.
Is this the one you are looking for:
#top, #middle, #bottom {
position: relative;
width: 100%;
border: 1px solid red;
clear:both;
}
DEMO