<div id="travel_photos">
<img style="display: inline; margin: 0 10px; title="branson" src="branson.jpg" alt="" width="150" height="75"/>
<img style="display: inline; margin: 0 10px; title="cancun" src="cancun.jpg" alt="" width="150" height="75"/>
<img style="display: inline; margin: 0 10px; title="denver" src="denver.png" alt="" width="150" height="75"/>
<img style="display: inline; margin: 0 10px; title="destin" src="destin.png" alt="" width="150" height="75"/>
<img style="display: inline; margin: 0 10px; title="PV" src="PV.png" alt="" width="150" height="50"/>
</div>
This is what is in my html. I don't know how to get them to css. I have tried the # but nothing will change when I put it in CSS. What does my CSS need to look like?
You are missing a quote in all of your statements.
<div id="travel_photos">
<img style="display: inline; margin: 0 10px;" title="branson" src="branson.jpg" alt="" width="150" height="75"/>
<img style="display: inline; margin: 0 10px;" title="cancun" src="cancun.jpg" alt="" width="150" height="75"/>
<img style="display: inline; margin: 0 10px;" title="denver" src="denver.png" alt="" width="150" height="75"/>
<img style="display: inline; margin: 0 10px;" title="destin" src="destin.png" alt="" width="150" height="75"/>
<img style="display: inline; margin: 0 10px;" title="PV" src="PV.png" alt="" width="150" height="50"/>
</div>
should work. Notice the addition of the " mark after the final semicolon before title attribute.
Related
I am working on a website, and I would like to align 4 circles in the center of the content area. The example can be found at invisionbilling.com/stackoverflow. I have something right now that does the job, but I know there will be issues with different window sizes, different picture sizes, etc. How do I set the height of the div container to automatically wrap around the 4 circles/images? Is there a way to automatically center it using margin-left and margin-right? I tried "auto" for all of these and it wasn't doing the job. Thanks!
HTML
<div class="wrapper">
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-
Circles-Lower-Costs-300x300.png" alt="" width="150" height="150"
class="alignnone size-medium wp-image-358" />
</div>
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-
Circles-Greater-Cash-Flow-300x300.png" alt="" width="150" height="150"
class="alignnone size-medium wp-image-363" />
</div>
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-
Circles-Increased-Revenue-300x300.png" alt="" width="150" height="150"
class="alignnone size-medium wp-image-364" />
</div>
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-
Circles-Emphasis-on-Patient-Care-300x300.png" alt="" width="150"
height="150" class="alignnone size-medium wp-image-361" />
</div>
</div>
CSS
.circles {
display: block !important;
float: left !important;
margin: 10px !important;
}
.wrapper {
height: 175px;
width: 100%;
margin-left: 225px;
}
Try flexbox instead of floating, and try never to use !important:
<!DOCTYPE html>
<html>
<head>
<style>
.circles {
margin: 10px;
}
.wrapper {
height: 175px;
width: 100%;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-Circles-Lower-Costs-300x300.png" alt="" width="150" height="150"
class="alignnone size-medium wp-image-358" />
</div>
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-Circles-Greater-Cash-Flow-300x300.png" alt="" width="150" height="150"
class="alignnone size-medium wp-image-363" />
</div>
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-Circles-Increased-Revenue-300x300.png" alt="" width="150" height="150"
class="alignnone size-medium wp-image-364" />
</div>
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-Circles-Emphasis-on-Patient-Care-300x300.png" alt="" width="150"
height="150" class="alignnone size-medium wp-image-361" />
</div>
</div>
</body>
</html>
I do have issues with the positioning of my elements within a table-cell.
I do have a headline, an image and a button within my table cell. The images of the table cell are different in height, so I do want the button to be at the bottom.
What i want is in the below:
!Final Table-Cell Layout1
At the moment the buttons/Link text is right after the images...
.greyCompareTable {
padding: 20px 0px 20px 0px;
background-color: #f5f5f5;
margin-left: -20px;
margin-right: -20px;
display: table;
width: 100%;
border-spacing: 20px;
border-collapse: separate;
table-layout: fixed;
}
.greyCompareRow {
display:table-row;
background-color:green;
}
.greyCompareCell {
display:table-cell;
background-color: #fff;
border: 1px;
border-style: solid;
border-radius: 2px;
border-color: #37b8eb;
position: relative;
}
<div class="greyCompareTable">
<div class="greyCompareRow">
<div class="greyCompareCell">
<h3 style="text-align: center;">
<span id="Kastein_Bosch_Bartoel">Headline</span>
</h3>
<p style="text-align: center;">
<img src="..." border="0" class="tie-appear">
<img style="border: none !important; margin: 0px !important;" src="..." alt="" width="1" height="1" border="0" class="tie-appear">
<img style="border: none !important; margin: 0px !important;" src="..." alt="" width="1" height="1" border="0" class="tie-appear">
</p>
<p style="text-align: center;">
Jetzt ansehen
<img class="aligncenter tie-appear" style="border: none !important; margin: 0px !important;" src="..." alt="" width="1" height="1" border="0">
</p>
</div>
<div class="greyCompareCell">
<h3 style="text-align: center;">
<span id="Bergland_Bartoel">Headline 2</span>
</h3>
<p style="text-align: center;">
<a href="..." target="_blank" rel="noopener">
<img src="..." border="0" class="tie-appear"></a>
<img style="border: none !important; margin: 0px !important;" src="" alt="" width="1" height="1" border="0" class="tie-appear">
<img style="border: none !important; margin: 0px !important;" src="" alt="" width="1" height="1" border="0" class="tie-appear">
This image is a little bit bigger
</p>
<p style="text-align: center;">
Jetzt ansehen
</p>
</div>
<div class="greyCompareCell">
<h3 style="text-align: center;">
<span id="Bergland_Bartoel">Headline 3</span>
</h3>
<p style="text-align: center;">
<a href="..." target="_blank" rel="noopener">
<img src="..." border="0" class="tie-appear"></a>
<img style="border: none !important; margin: 0px !important;" src="" alt="" width="1" height="1" border="0" class="tie-appear">
<img style="border: none !important; margin: 0px !important;" src="" alt="" width="1" height="1" border="0" class="tie-appear">
</p>
<p style="text-align: center;">
Jetzt ansehen
</p>
</div>
</div>
</div>
You can set position: absolute; and bottom: 0; on your button but remember to set the parent element to position:relative in order to use absolute positioning and add a min-height: 300px; to the cell for smaller images.
Here's the full code aligning the hyperlink at the bottom and center. position: absolute will shift it out of it's position and bottom: 0; will pull the element to bottom, but that's not enough since other elements are not positioned well. Adding width: 100%; + margin:0 auto; will horizontally align link.
At last you will have following:
.shortc-button {
bottom: 0;
left: 0;
width: 100%;
margin:0 auto ;
position: absolute;
}
.greyCompareTable {
padding: 20px 0px 20px 0px;
background-color: #f5f5f5;
margin-left: -20px;
margin-right: -20px;
display: table;
width: 100%;
border-spacing: 20px;
border-collapse: separate;
table-layout: fixed;
}
.greyCompareRow {
display:table-row;
background-color:green;
}
.greyCompareCell {
display:table-cell;
background-color: #fff;
border: 1px;
border-style: solid;
border-radius: 2px;
border-color: #37b8eb;
position: relative;
}
.shortc-button {
bottom: 0;
left: 0;
width: 100%;
margin:0 auto ;
position: absolute;
}
<div class="greyCompareTable">
<div class="greyCompareRow">
<div class="greyCompareCell">
<h3 style="text-align: center;">
<span id="Kastein_Bosch_Bartoel">Headline</span>
</h3>
<p style="text-align: center;">
<img src="..." border="0" class="tie-appear">
<img style="border: none !important; margin: 0px !important;" src="..." alt="" width="1" height="1" border="0" class="tie-appear">
<img style="border: none !important; margin: 0px !important;" src="..." alt="" width="1" height="1" border="0" class="tie-appear">
</p>
<p style="text-align: center;">
Jetzt ansehen
<img class="aligncenter tie-appear" style="border: none !important; margin: 0px !important;" src="..." alt="" width="1" height="1" border="0">
</p>
</div>
<div class="greyCompareCell">
<h3 style="text-align: center;">
<span id="Bergland_Bartoel">Headline 2</span>
</h3>
<p style="text-align: center;">
<a href="..." target="_blank" rel="noopener">
<img src="..." border="0" class="tie-appear"></a>
<img style="border: none !important; margin: 0px !important;" src="" alt="" width="1" height="1" border="0" class="tie-appear">
<img style="border: none !important; margin: 0px !important;" src="" alt="" width="1" height="1" border="0" class="tie-appear">
This image is a little bit bigger
</p>
<p style="text-align: center;">
Jetzt ansehen
</p>
</div>
<div class="greyCompareCell">
<h3 style="text-align: center;">
<span id="Bergland_Bartoel">Headline 3</span>
</h3>
<p style="text-align: center;">
<a href="..." target="_blank" rel="noopener">
<img src="..." border="0" class="tie-appear"></a>
<img style="border: none !important; margin: 0px !important;" src="" alt="" width="1" height="1" border="0" class="tie-appear">
<img style="border: none !important; margin: 0px !important;" src="" alt="" width="1" height="1" border="0" class="tie-appear">
</p>
<p style="text-align: center;">
Jetzt ansehen
</p>
</div>
</div>
</div>
How do I make these photos all go in the center of the webpage? this is my html code
<html>
<body>
<div id="travel_photos">
<img style="display: inline; margin: 0 10px; title="branson" src="branson.jpg" alt="" width="150" height="50"/>
<img style="display: inline; margin: 0 10px; title="cancun" src="cancun.jpg" alt="" width="150" height="50"/>
<img style="display: inline; margin: 0 10px; title="denver" src="denver.png" alt="" width="150" height="50"/>
<img style="display: inline; margin: 0 10px; title="destin" src="destin.png" alt="" width="150" height="50"/>
<img style="display: inline; margin: 0 10px; title="PV" src="PV.png" alt="" width="150" height="50"/>
</body>
</html>
If you're trying to center the images horizontally, try this: https://jsfiddle.net/a5u3q1w5/2/
HTML:
<div id="travel_photos">
<img title="branson" src="http://www.catster.com/wp-content/uploads/2017/08/A-fluffy-cat-looking-funny-surprised-or-concerned.jpg"/>
<img title="branson" src="http://www.petmd.com/sites/default/files/petmd-cat-happy-13.jpg"/>
<img title="branson" src="https://static.pexels.com/photos/126407/pexels-photo-126407.jpeg"/>
</div>
CSS:
#travel_photos > img {
width: 300px;
height: 100px;
margin: 0 auto;
display: block;
}
Please try this:
<html>
<body>
<img style="display: block; margin:auto;" title="branson" src="branson.jpg" alt="" width="150" height="50"/>
<img style="display: block; margin:auto;" title="cancun" src="cancun.jpg" alt="" width="150" height="50"/>
<img style="display: block; margin:auto;" title="denver" src="denver.png" alt="" width="150" height="50"/>
<img style="display: block; margin:auto;" title="destin" src="destin.png" alt="" width="150" height="50"/>
<img style="display: block; margin:auto;" title="PV" src="PV.png" alt="" width="150" height="50"/>
</body>
</html>
So I have a simple image-thumbnails landing page like:
<div style="display: inline-block;"><img style="margin: 3px 3px;" src="..." alt="" width="200" height="200" /></div>
<div style="display: inline-block;"><img style="margin: 3px 3px;" src="..." alt="" width="200" height="200" /></div>
<div style="display: inline-block;"><img style="margin: 3px 3px;" src="..." alt="" width="200" height="200" /></div>
<div style="display: inline-block;"><img style="margin: 3px 3px;" src="..." alt="" width="200" height="200" /></div>
On my site 4 are shown side by side on desktop. How do I force them to appear in twos in one line on mobile view?
So:
Desktop:
# # # #
Mobile:
# #
# #
If you are ok with clear:both then go with this solution.
Updated Demo
It will give you break at that point where you want to..i have used custom media queries and change according to your need. Hope it will help..
You have to add a media query to set the width of divs to 50% at the specified breakpoint.
#media (max-width: 400px) {
div {
width: 50%;
}
}
<div style="display: inline-block;">
<img style="margin: 3px 3px;" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=328&d=identicon&r=PG&f=1" alt="" width="200" height="200" />
</div>
<div style="display: inline-block;">
<img style="margin: 3px 3px;" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=328&d=identicon&r=PG&f=1" alt="" width="200" height="200" />
</div>
<div style="display: inline-block;">
<img style="margin: 3px 3px;" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=328&d=identicon&r=PG&f=1" alt="" width="200" height="200" />
</div>
<div style="display: inline-block;">
<img style="margin: 3px 3px;" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=328&d=identicon&r=PG&f=1" alt="" width="200" height="200" />
</div>
Reference: MDN - CSS media queries
I have three images that I want to display in a single row next to each other.
Here is the HTML:
<div id="client_logos">
<img style="display: inline; margin: 0 5px;" title="heartica_logo" src="https://s3.amazonaws.com/rainleader/assets/heartica_logo.png" alt="" width="150" height="50" />
<img style="display: inline; margin: 0 5px;" title="mouseflow_logo" src="https://s3.amazonaws.com/rainleader/assets/mouseflow_logo.png" alt="" width="150" height="50" />
<img style="display: inline; margin: 0 5px;" title="piiholo_logo" src="https://s3.amazonaws.com/rainleader/assets/piiholo_logo.png" alt="" width="150" height="50" />
</div>
Here is the CSS:
#client_logos { display: inline-block; }
For some reason, it only displays two logos next to each other. Not sure what's wrong. Any ideas?
URL: http://rainleader.com/who-we-are/
See screenshot.
You have a line break <br> in-between the second and third images in your markup. Get rid of that, and it'll show inline.
The code you have posted here and code on your site both are different. There is a break <br> after second image, so the third image into new line, remove this <br> and it will display correctly.
Place this css in your page:
<style>
#client_logos {
display: inline-block;
width:100%;
}
</style>
Replace
<p><img class="alignnone" style="display: inline; margin: 0 10px;" title="heartica_logo" src="https://s3.amazonaws.com/rainleader/assets/heartica_logo.png" alt="" width="150" height="50" /><img class="alignnone" style="display: inline; margin: 0 10px;" title="mouseflow_logo" src="https://s3.amazonaws.com/rainleader/assets/mouseflow_logo.png" alt="" width="150" height="50" /><img class="alignnone" style="display: inline; margin: 0 10px;" title="mouseflow_logo" src="https://s3.amazonaws.com/rainleader/assets/piiholo_logo.png" alt="" width="150" height="50" /></p>
To
<div id="client_logos">
<img style="display: inline; margin: 0 5px;" title="heartica_logo" src="https://s3.amazonaws.com/rainleader/assets/heartica_logo.png" alt="" width="150" height="50" />
<img style="display: inline; margin: 0 5px;" title="mouseflow_logo" src="https://s3.amazonaws.com/rainleader/assets/mouseflow_logo.png" alt="" width="150" height="50" />
<img style="display: inline; margin: 0 5px;" title="piiholo_logo" src="https://s3.amazonaws.com/rainleader/assets/piiholo_logo.png" alt="" width="150" height="50" />
</div>