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>
Related
I'm making a website for a friend who isn't very tech savvy. She wants a box that'll get bigger based on how many lines of text she puts in on the back end.
This is the relevant page. She wants the light grey box (and the dark grey one too, I guess) to grow as she adds more pages to the list. Problem is, I only know rudimentary CSS from building a basic website for fun.
I've been attempting to use CSS grids to evenly space the entries, but that's not working, and I haven't been able to find a way to grow the boxes based on the text. Any help is appreciated.
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Watch as I Perform my own Tracheotomy
</title>
<link rel="shortcut icon" type="image/png" href="https://cdn.discordapp.com/attachments/889079414732779580/1028746579101876264/Icon.png"/>
</head>
<style>
.square {
height: 550px;
width: 100%;
background-color: #8C8C8C;
}
.square2 {
height: 400px;
width: 900px;
background-color: #B8B8B8;
margin: auto;
margin-bottom: 25px;
display: grid;
grid-template-rows: 80px 200px;
}
.square3 {
margin-top: 10px;
height: 100px;
width: 900px;
background-color: #8C8C8C;
margin: auto;
}
.log {
width: fit-content;
gap: 10px;
padding: 5px;
margin-bottom: 0em;
font-size:1.5em;
}
</style>
<body style="background-color:#212121;">
<div>
<p style="text-align:left; font-family:'Courier New'">
<FONT COLOR="#FFFFFF">
<br>
<u>Watch As I Perform My Own Tracheotomy.</u>
<br>
<br>
</p>
</div>
<div class="square">
<div class="square2">
<p style="text-align:left; color:#FFFFFF; margin-left:4%; font-family:'Courier New';"><FONT COLOR="#000000"><br><br>
<div class="log">
<br> <b>11/10/22</b> - Page 7 </div>
<div class="log">
<br> <b>09/10/22</b> - Page 6</div>
<div class="log">
<br> <b>09/10/22</b> - Page 5</div>
<div class="log">
<br> <b>09/10/22</b> - Page 4</div>
<div class="log">
<br> <b>08/10/22</b> - Page 3</div>
<div class="log">
<br> <b>08/10/22</b> - Page 2</div>
<div class="log">
<br> <b>08/10/22</b> - Page 1 </div>
</p>
</div>
</div>
<div class="square3">
<p style="text-align:left; font-size:.9em; font-family:'Courier New'; margin-top: 150px; margin-left:3%;">
</div>
</body>
</html>
Try this, wrap your text with class item, or maybe you can explore from this snippet.
.container {
border: 2px solid #ccc;
padding: 10px;
width: 30em;
}
.item {
width: -moz-fit-content;
width: fit-content;
background-color: #8ca0ff;
padding: 5px;
margin-bottom: 1em;
}
<div class="container">
<div class="item">Item</div>
<div class="item">Item with more text in it.</div>
<div class="item">
Item with more text in it, hopefully we have added enough text so the text
will start to wrap.
in it, hopefully we have added enough text so the text
will start to wrap.
in it, hopefully we have added enough text so the text
will start to wrap.
in it, hopefully we have added enough text so the text
will start to wrap.
in it, hopefully we have added enough text so the text
will start to wrap.
</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 want to set two images beyond the another one image. Please find the below image i am trying to fix. But i couldn't to reach the solution.
.main {
border: 1px solid black;
background-color: white;
padding: 10px 10px 10px 10px;
width: 1100px;
height: 100%;
margin: auto;
}
.container-fluid {
background-image: url("bluescreen1.png");
background-size: 100% 15%;
background-repeat: no-repeat;
}
<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.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body class="main">
<div class="container-fluid">
<div class="row" style="z-index: 1;">
<div class="col-sm-12">
<img src="http://u.realgeeks.media/legacyplusrealty/email.jpg">
</div>
</div>
<div class="row">
<div class="col-sm-4">
Some Text
</div>
<div class="col-sm-4">
<img src="http://u.realgeeks.media/legacyplusrealty/email.jpg" alt="Paris" style="width: 100%; height:320px; ">
</div>
<div class="col-sm-4">
<img src="http://u.realgeeks.media/legacyplusrealty/email.jpg" alt="Paris" style="width: 100%; height:320px; z-index: -100;">
</div>
</div>
</div>
</body>
I want to the above format of design. The blue color image shows beyond the two images. but i couldn't to do it. Please review and guide me...
add position:relative; to every img as z-index only works with positioned elements
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/
So what I'm trying to do is create a mock up for my own little website in HTML. So everything been going good until just now. What I want to do is display an image and then a title and description next to it, sort of like what youtube does.
Example:
So the way I have it right now it works perfectly if the text doesn't have to drop down to a new line.
Example of it working:
However, if one of them is too long, everything gets messed up, example of messed up:
I set up a JS fiddle to make it easier for you guys. However remember I'm designing with bootstrap so the reason the CSS is so long is because it includes the full bootstrap, however only the first 57 lines is my custom written css. Anyway, if anyone could help me so that when my title or my description is too long it will drop onto the next line like youtube does.
My HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
<title>Comments</title>
</head>
<body>
<div class="logo">
<img height="70" width="200" src="/img/logo.png">
</div>
<div class="container">
<div class="leftBar">
<div class="well">
<div class="title">
<h3>Mini Title</h3>
</div>
<hr/>
<div class="contentLink">
<div class="smallContentImage">
<img src="http://i.imgur.com/zesaMhG.gif">
</div>
<div class="smallContentText">
<h5>Title Goes Here</h5>
<em>
Other Informati
</em>
</div>
</div>
</div>
</div>
<div class="rightBox">
<div class="well">
<div class="title">
<h1>Title For Content</h1>
</div>
<p> CONTENT CONTENT CONTENT </p>
</div>
</div>
</div>
</body>
</html>
MY CSS
body {
background #FAFAFA;
}
.title {
text-align: center;
}
.logo {
margin-right: auto;
margin-left: 2%;
padding-top: 2%;
}
.leftBar
{
margin-right: auto;
float: left;
width: 30%;
overflow: hidden;
}
.rightBox
{
margin-left: 0;
float: right;
width: 70%;
}
.contentLink
{
padding-left: 1%;
padding-right: 1%;
width: auto;
height: auto;
}
.smallContentImage {
width: 100px;
height: 100px;
margin-left: 0;
margin-right: auto;
float:left;
}
.smallContentText {
float: right;
width: auto;
margin-left: auto;
margin-right: 0;
width: fixed;
}
JS Fiddle: http://jsfiddle.net/BjSv8/
Thank you
There is no such thing as width:fixed. You need to make sure the widths of the two content items add up to the width of the parent.
Is there any reason you used em instead of div.
If you could use 'div' instead of 'em' and define the width , then your problem could be solved.
<div style="word-wrap:break-word;border:1px solid red; width:100px">
Other Information goes here
</div>
See this fiddle: http://jsfiddle.net/BjSv8/1/