In order to get some preferred formatting I split 1 image into 10x10 smaller images and I am inputting them onto a page in sharepoint to recreate the image, then will assign links to some of the images to match the overall shape. (Trying to make buttons in the shape of hexagons, trapezoids).
Anyways, problem is ocurring when I go from one line down to the next, I have a small white gap in between that breaks up the larger image. I have removed the horizontal and vertical spacing in the image editing ribbon, tried shift + enter, running the line onto the next with no enter. I also have added padding: 0px and border: 0px to the source code for each image. Both times it actually makes the problem worse, by adding horizontal spacing and including the vertical spacing?
I just need my images to directly stack on top of each other with no spacing.
<p dir="ltr" style="text-align: left;">
<img alt="13.png" src="..." style="margin: 0px; width: 80px; height: 71px;"/>
<img alt="23.png" src="..." style="margin: 0px; width: 80px; height: 71px;"/>
<br/>
<img alt="14.png" src="..." style="margin: 0px; width: 80px; height: 71px;"/>
<img alt="24.png" src="..." style="margin: 0px; width: 80px; height: 71px;"/>
<br/>
<br/> </p>
As far as I understand, this is your result now:
And you want to achieve this:
If that's the case, all you need to do is add display: flex; and flex-wrap: wrap; to the div parent of your images, like this:
<style>
.container {
display: flex;
flex-wrap: wrap;
}
.container img {
width: 10%;
}
</style>
<body>
<div class="container">
<img src="..." />
<img src="..." />
.
.
.
<img src="..." />
</div>
</body>
Related
I'm trying to make a design that utilizes white space.
I have an image that I want on a white background. I have a class that has a white background, and the image itself (which also has a white background as part of the image). I'm having an issue where I can't ensure that the div class is the same height as the image itself if I have both be responsive.
I've tried adding a second image with the same height as the initial image that is just white space, setting the div to be responsive, and a bunch of other things, but I'm not sure what the best way to do this would be. The page itself is up at http://jamieaurora.com/devinTribute.html to get an idea of what I'm going for (though the code is a bit out of date than what I'm posting here). If anyone could point me in the right direction, it'd be greatly appreciated. I cut out the portions of the code that I don't feel are relevant, but if you would like to take a look at the full HTML file, it is located in this hastebin. Thank you so much!
https://hastebin.com/tifiqaciri.xml
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
.responsive
{
width: 100%;
height: auto;
}
.hero-section
{
background-color: white;
font-family: Oswald;
letter-spacing: 4px;
top: 0;
height: 64%;
width: auto;
padding-top: 5%;
padding-bottom: 1%;
}
</style>
<body>
<nav>
<ul id='navbar' style="z-index:0;">
<li><a class = "active" href="index.html">Home</a></li>
</ul>
</nav>
<section class="hero-section" id="hero-section">
<div class = "container-fluid">
<div class = "row">
<div class="col-xs-6">
<img src = "images/devin-townsend-evermore.jpg" class="responsive" ></img>
</div>
<div class="col-xs-6">
<h1 style="padding-left: 62%" class="responsive">Title Text</h1>
<h2 style = "padding-left: 60%; font-size: 140%; align: left;" class="responsive">Paragraph Text</h2>
</div>
</div>
</div>
</section>
I had a parent div container with two main components side-by-side. I had an image on the right that was responsive. I wanted the text on the left side to stay in the centre and to the left of the image as it changed size depending on the browser's screen size.
I set the parent's container height to the same size as the image in its original form but in em.
Using a combination of height: auto and max-height: 100% worked for me.
The return in my React Component was:
<div className="videoAndDescription">
<div className="left33">
<div className="textToSquare">
<h1>Firewood, delivered...</h1>
</div>
</div>
<div className="right66">
<img src={stoveburning} />
</div>
</div>
My CSS:
.videoAndDescription{
display: flex;
flex-direction: row;
background-color: red;
height: 40em;
}
.left33{
color: orange;
display: flex;
justify-content: center;
align-content: center;
width: 60%;
}
.left33 .textToSquare{
height: auto;
background-color: black;
}
.right66{
width: 40%;
}
.right66 img{
max-height: 100%;
}
I have 2 divs inside another div container. I'm using flexbox to center them vertically inside the container, but I want them to be next to each other horizontally rather than one on top of the other. I tried a few different approaches including changing the display property of the container from flex to inline-flex as well as adding display:inline-block to the child divs. Here is a picture of what I'm working with. As you can see the 2 divs (the picture and group 1 label) are centered within the parent div, but I want Group 1 to be next to the picture instead of below it.
Code below and link to JSfiddle:
HTML
<div class="user-group">
<div>
Picture 1
</div>
<div class="user-group-name"><h4>Group 1</h4></div>
</div>
JS
.user-group{
font-family: 'Purista';
border: solid 1px;
display: inline-flex;
float: left;
justify-content:center;
align-content:center;
flex-direction:column; /* column | row */
width: 50%;
height: 200px;
}
.user-group > div{
display: inline-flex;
}
It depends if you intend to have multiple picture + text pairs in the element. If you don't, simply using align-items: center should fix your issue. There are some issues with your code:
align-content is not a flex property
Avoid using display: inline-flex, your situation does not call for it
Floats and flex are conflicting layout methods. Pick one—in this case, we settle for flex.
Use the default flex direction, which is row (if undeclared, it defaults to row, so we can just remove that property)
.user-group {
font-family: 'Purista';
border: 1px solid;
display: flex;
justify-content: center;
align-items: center;
width: 50%;
height: 200px;
}
h4 {
margin: 0;
}
<div class="user-group">
<div>
<img src="https://placehold.it/32x32" alt="" title="" />
</div>
<div class="user-group-name">
<h4>Group 1</h4></div>
</div>
On the other hand, if you have multiple picture + text pairs, you will have to resort to nesting. Each pair will have to be wrapped by an additional <div>:
.user-group {
font-family: 'Purista';
border: 1px solid;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 50%;
height: 200px;
}
.user-group > div {
display: flex;
margin-bottom: 10px;
}
h4 {
margin: 0;
}
<div class="user-group">
<div>
<img src="https://placehold.it/32x32" alt="" title="" />
<div class="user-group-name"><h4>Group 1</h4></div>
</div>
<div>
<img src="https://placehold.it/32x32" alt="" title="" />
<div class="user-group-name"><h4>Group 2</h4></div>
</div>
<div>
<img src="https://placehold.it/32x32" alt="" title="" />
<div class="user-group-name"><h4>Group 3</h4></div>
</div>
</div>
I am trying to arrage image and text in align in the same. I tried below for not working. How arrage like in the image.
<div >
<img src="~/Content/Images/u130.png" alt="" />
<div>
<span style="display:inline; ">Belong to a membership of more than 110,000 members in 141 countries and receive recognition for your contributions</span>
</div>
Try inlining the img and putting both elements in the same div. Also, spans are inline by default so you don't include the style property.
<div>
<img src="~/Content/Images/u130.png" style="display: inline;">
<span>
Belong to a membership of more than 110,000 members in 141
countries and receive recognition for your contributions
</span>
</div>
use <div>s and vertical-align: middle like below:
img {
height: 30px;
}
div {
display: inline-block;
vertical-align: middle;
max-width: 500px;
}
<div>
<img src="http://moneta.com.mx/web/wp-content/uploads/2014/02/check.png" alt="" />
</div>
<div>
<span>Belong to a membership of more than 110,000 members in 141 countries and receive recognition for your contributions</span>
</div>
You are going to be hard pressed to make it align with multiple rows of text depending on which browsers you are trying to support. The vertical-align property is handled very differently between browsers, especially older browsers.
What I usually do is hack it a little bit by setting my text containers to position: relative; and then absolute position my image outside to the left and center using top and negative margins.
To apply this to your code you should be able to simply copy the .feature:after rule into your style sheet. Update the image path with your image, the height/width to match your image size, and the top margin should be changed to half the height of your bullet image. After that, it will actually create the image DOM element for you via the pseudo selector.
.feature {
max-width: 300px;
padding: 10px 30px;
position: relative;
}
.feature:after {
background: url(http://hotmexchili.com/media/infortis/blocks/product_view/bullet.png) center center no-repeat;
content: "";
display: block;
height: 17px;
left: 0px;
margin-top: -8.5px;
position: absolute;
top: 50%;
width: 17px;
}
<div class="feature">
This is a single line feature
</div>
<div class="feature">
This is a longer feature that should wrap to two lines but still have the icon centered on the left!
</div>
div {
display: inline-block;
vertical-align: top;
max-width: 90%;
}
I prefer using jQuery to set the max-width by subtracting the width of img.
v-align the img at top would make it align with the first line.
<div>
<img src="~/Content/Images/u130.png" alt="" />
</div>
<div>
<span>Belong to a membership of more than 110,000 members in 141 countries and receive recognition for your contributions</span>
</div>
Using Twitter Bootstrap, I'm trying to create a horizontally scrolling series of thumbnails which allows for a scrollbar within the row that the thumbnails are displayed in, like so:
This gets me most of the way there, using this HTML:
<div class="row">Hello there</div>
<div class="row" style="overflow-x:scroll">
<table>
<tr>
<td>
<div class="thumbnail" style="width: 400px; height: 400px">
<img src="http://i.minus.com/iucsUZfSM9v45.gif"/>
</div>
</td>
<td>
<div class="thumbnail" style="width: 400px; height: 400px">
<img src="http://i.minus.com/iucsUZfSM9v45.gif"/>
</div>
</td>
<td>
<div class="thumbnail" style="width: 400px; height: 400px">
<img src="http://i.minus.com/iucsUZfSM9v45.gif"/>
</div>
</td>
</tr>
</table>
</div>
JSFiddle: http://jsfiddle.net/54fgv/2/
The overflow CSS property works great, giving me the scrollbar for the container div.
The thumbnail div elements are going to be a fixed size, which is more than likely going to be smaller than the image. In this case, the image is constrained to fit accordingly. As you can see though, when the image is wider than the thumbnail, the width is set to the thumbnail and the height is scaled accordingly. This is the behavior that I want, but I'd like to have the image vertically centered in the thumbnail.
I've tried adding vertical-align: middle to the thumbnail div elements, but to no avail.
How can I get the image to be centered vertically within the thumbnail?
Approach 1 - (example):
Wrap the img elements:
<div class="thumbnail" style="width: 400px; height: 400px">
<div class="thumbnail_wrapper">
<img src="http://i.minus.com/iucsUZfSM9v45.gif"/>
</div>
</div>
Change the display of the .thumbnail element to table. Use border-collapse: separate to fix padding/spacing issues. Change the display of the wrapper to table-cell and then add vertical-align: middle. Finally, give the img elements a width of 100%.
Example Here
.thumbnail {
display:table;
border-spacing: 2px;
border-collapse: separate;
border-radius:10px; /* Demonstrational.. */
}
.thumbnail_wrapper {
display:table-cell;
vertical-align:middle;
}
.thumbnail_wrapper > img {
width:100%;
}
Approach 2 - (example):
The flexbox approach doesn't require the wrapper element, however it has slightly less support than the table/table-cell approach.
<div class="thumbnail" style="width: 400px; height: 400px">
<img src="http://i.minus.com/iucsUZfSM9v45.gif" />
</div>
Basically, just change the display of the .thumbnail element to flex and then add align-items: center. All the other vendor prefixes are added for cross browser support. Read more about flexbox layouts and properties here - (mdn).
Example Here
.thumbnail {
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
As a side note, you can avoid having to use HTML tables - example here.
HTML:
<div class="thumbnail v_align_all" style="width: 400px; height: 400px">
<img src="http://i.minus.com/iucsUZfSM9v45.gif"/>
<span class="v_align_fix"></span>
</div>
CSS:
.v_align_all { white-space: nowrap }
.v_align_all > * {
vertical-align: middle;
display: inline-block !important;
}
.v_align_fix {
height: 100%;
vertical-align: middle;
display: inline-block;
width: 0px;
white-space: nowrap;
}
I'm trying to center 4 divs inside a bigger div with equal margin between them, and it doesn't seem to work.
I've looked at other answers and tried margin: 0 auto but it didn't work for me.
here's the HTML:
<div id="footer_frame">
mail#gmail.com
<span id="phone">044-1234567</span>
<div id="footer_icons">
<div class="icon_div">
<img src="images/youtube.png" alt="Watch our work at our YouTube page" class="icon" />
<p>YouTube</p>
</div>
<div class="icon_div">
<img src="images/email.png" alt="Contact us" class="icon" />
<p>Email</p>
</div>
<div class="icon_div">
<img src="images/googleplus.png" alt="Join our circle # Google+" class="icon" />
<p>Google+</p>
</div>
<div class="icon_div">
<img src="images/facebook.png" alt="Join our Facebook page" class="icon" />
<p>Facebook</p>
</div>
</div>
And the CSS:
#footer_frame {
position: absolute;
background-color: rgba(0,0,0,0.8);
width: 25%;
height: 16%;
top: 83%;
left: 37.5%;
}
#footer_icons {
width: 90%;
clear:both;
margin-top:12%;
}
#footer_icons .icon_div {
display: inline-block;
text-align: center;
font-size: 0.9em;
color: white;
}
#footer_icons .icon_div p {
margin: 0.2em;
}
Now it looks like this, but what I want is that the 4 icons will be centered inside the black div.
Thanks.
Wrap all four inner divs with a single DIV and then set a fixed width and use margin: 0 auto on that one.
When I do things like this I try to use flexboxes as often as possible. The above answer works perfectly but I just thought you might want to try these two options out.
#footerIcons{ display: inline-flex;} .iconDiv{ display: -webkit-flexbox;
-webkit-flex-pack: center;
-webkit-flex-align: center;
}
This should work. For more info visit this link. Before you try to use flexbox in your code make sure you have a ll the right vendor prefixes.