Code is right now:
HTML:
<section class="sponsorSection">
<div class="sponsorImageRow">
<div class="sponsorImageColumn">
<img src="img/kvadrat_logo.png" class="sponsorpicture1"/>
</div>
<div class="sponsorImageColumn">
<img src="img/small_vertical_logo.png" class="sponsorpicture2"/><br>
</div>
</div>
<div class="sponsorImageRow">
<div class="sponsorImageColumn">
<img src="img/long_vertical_logo.png" class="sponsorpicture1"/>
</div>
<div class="sponsorImageColumn">
<img src="img/logo4.png" class="sponsorpicture2"/><br>
</div>
</div>
<div class="sponsorImageRow">
<div class="sponsorImageColumn">
<img src="img/logo5.jpg" class="sponsorpicture1"/>
</div>
</div>
</section>
CSS:
.sponsorSection{
width: 480px;
margin-top:30px;
border:2px solid rgba(0, 0, 0, .2);
border-radius: 5px;
}
.sponsorImageRow{
height: 50px;
}
.sponsorImageColumn{
width : 50% ;
display: inline;
}
.sponsorpicture1{
padding: 10px;
max-width: 100%;
max-height: 95%;
height : auto;
margin: 0 auto;
}
.sponsorpicture2{
padding: 10px;
max-width: 100%;
max-height: 95%;
height : auto;
margin: 0 auto;
}
Though it does not look correct:
I'm not sure, if I understood your requested positioning correctly, but if I look at your code, you want your image to be horizontal centered? Since image is an inline element per default the margin:0 auto will not be considered. Try something like this:
/* keep it as a block element, not inline */
.sponsorImageColumn {
width : 50% ;
float:left;
display: block;
}
/* and image also as a block element */
.sponsorSection img {
display:block;
}
I put together a small fiddle to demonstrate.
For more complex positioning you could have a look at the css-syntax display: table, table-row and so on, to emulate a classic table with other html elements.
Make the following change to your CSS -
.sponsorImageColumn{
width : 50% ;
float : left; /*remove display property and use float as you want to set the width*/
}
hope this solves your query
Related
Good day,
NO matter what i try or what tutorial i use, the card size images are not the same.
A user uploads a image and then the cards needs to scale the image up or down but the total card size across should stay the same width and height.
one image is 2956 x 1965
and the second image is 1024 x 683
the below code looks right until you use different images sizes.
i don't want to upload 100's of images with the same sizes
Below is a screenshot and the code
[enter image description here][1]
<style>
.column_main {
float: left;
width: 25%;
padding: 10px;
height: 900px; /* Should be removed. Only for demonstration */
}
.column {
float: left;
width: 25%;
padding: 5px;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media screen and (max-width: 500px) {
.column {
width: 100%;
}
.column_main {
width: 100%;
height: 100%;
}
}
div.polaroid {
width:100%;
overflow: hidden;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin-bottom: 25px;
}
div.container {
text-align: center;
padding: 10px 20px;
}
</style>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="row">
<div class="column">
<div class="polaroid">
<img src="img_nature2.jpg" alt="5 Terre" style="width:100%">
<div class="container">
<p>Title</p>
</div>
</div>
</div>
<div class="column">
<div class="polaroid">
<img src="img_nature1.jpg" alt="5 Terre"style="width:100%">
<div class="container">
<p>Title</p>
</div>
</div>
</div>
</div>
</body>
</html>
You need to give a default css to the img or its parent div element
.card{
width: 200px;
height: 200px;
border: black solid 1px; //Look clearly with border :)
}
.card-image{
width:100%;
height:150px; //Whatever you want for only image
object-fit: cover; // it is important for scale of image
}
<div class="card">
<img src="https://theimageconference.org/wp-content/uploads/2020/04/vancouver_image_conference_3-scaled.jpg" class="card-image">
<p>Card Title</p>
</div>
I am using JQuery slideUp/slideDown to add an overlay to an image that is hidden until mouseover and then slides up from the bottom of the image.
The div that is sliding up is given a background color, but it doesn't show up over the image, it shows up behind it (the text shows up on top of the image, but I can just see the bottom edge of the div's background color because of the margins I set). Z-index is already set to 100.
Any ideas? Thanks!
(function($) {
$(document).ready(function() {
$(".slider").attr("style", "display: none;");
if ($(".slider")) {
$('.image').mouseover(function() {
$(this).find(".slider").slideDown("400");
}).mouseout(function() {
$(this).find(".slider").slideUp("400");
});
}
});
}(jQuery));
.image{
height: 300px;
width: 300px;
background: #000000;
}
.slider {
background-color: #333333 !important;
background: #333333 !important;
background-position: 0% 100%;
color: #ffffff;
margin: -90px 0 0 0;
height: 90px;
width: 100%;
z-index: 100 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="image">
</div>
<div class="slider">
<div class="title">Title</div>
<div class="text">Text</div>
</div>
</div>
It's better to define display: none; for slider in css rule.
Also to bind mouseenter and mouseleave to container will prevent jumping slider when mouse is leaving image and moving over slider.
$('.container').on("mouseenter", function() {
$(".slider").slideDown();
});
$('.container').on("mouseleave", function() {
$(".slider").slideUp("400");
});
.container {
width: 300px;
}
.image{
height: 300px;
width: 300px;
background: #000000;
}
.slider {
background-color: #333333;
color: #ffffff;
margin: -90px 0 0 0;
height: 90px;
width: 100%;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="image">
</div>
<div class="slider">
<div class="title">Title</div>
<div class="text">Text</div>
</div>
</div>
z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).
If you do not define position, element will be static, as that's default position for block elements.
M.
What I am trying to do:
I am creating a page footer using html, css, and bootstrap. When the page is open on a desktop, it looks like this (which is what I want):
But when the web page reaches the minimum width, it looks like this:
However, I would like it to look something like this when the web page has been decreased to the minimum width:
Problem/ What I tried:
So, I am have trouble with two things.
Problem 1: I can't seem to find a solution where I can get both the images and the text to center once there is no more room for them to be side by side.
Problem 2: I can't find a solution where I keep the size of the black jumbotron the same and that keeps the text from flowing out the bottom of it.
I tried creating a table (with text in place of the images to test it). I thought if I put the elements in a table with the images centered in the far left column and the text centered in the far left column, then, when the table got small enough, the columns would stack and the elements would be centered. But I couldn't get that to work.
I also tried adding two smaller jumbotrons within the larger one. One that holds the images and another that holds the text. But I still couldn't get the images to center properly, and there is still an issue with the text flowing out the bottom of the black jumbotron.
What am I doing wrong, and how can I do what I am trying to do using CSS and HTML? If Javascript is the only solution, I don't mind trying that, I just don't use it much.
Code:
Here is my HTML:
<div class="container">
<div class = "grid">
<div class="row">
<div class="jumbotron" id="footerJumbotron">
<img src="ContactImages\facebookLogo.png" id="facebookLogo">
<img src="ContactImages\twitterLogo.png" id="twitterLogo">
<img src="ContactImages\youtubeLogo.png" id="youtubeLogo">
<p id="footerFont">© 2016 Company Name. All Rights Reserved.<br> Built & Managed by Company Name</p>
</div>
</div>
</div>
</div>
Here is my CSS:
#facebookLogo{
float:left;
width:30px;
height:30px;
margin:5px;
}
#twitterLogo{
float:left;
width:40px;
height:30px;
margin:5px;
}
#youtubeLogo{
float:left;
width:40px;
height:25px;
margin:5px;
}
#footerFont{
float:right;
color:white;
font-size:10px;
padding-top:10px;padding-bottom:10px; text-align:right;
}
#footerJumbotron{
background-color:black;border-radius: 0 !important;
height:100px !important;padding-top:30px;
}
You can do this with bootstrap grid and media queries DEMO
#media(min-width: 768px) {
.custom-row p {
text-align: right;
}
}
#media(max-width: 768px) {
.custom-row {
text-align: center;
}
}
something i sorted out that can then be worked on.
http://codepen.io/simondavies/pen/jqjgxL
HTML
<footer>
<div class="footer-social-wrapper">
<div class="social-wrapper">
<div class="social-icons"><div class="facebook"></div></div>
<div class="social-icons"><div class="twitter"></div></div>
<div class="social-icons"><div class="youtube"></div></div>
</div>
</div>
<div class="footer-copy">
<p>© 2016 Company Name. All Rights Reserved.</p>
</div>
</footer>
CSS:
body {margin:0;padding:0;}
footer,
.social-wrapper {
margin: 0 auto;
padding: 0;
width: 100%;
height: auto;
position: relative;
height: 50px;
}
footer:before,
.social-wrapper:before,
footer:after,
.social-wrapper:after { content: " "; display: table;}
footer:after,
.social-wrapper:after {clear: both;}
.footer-social-wrapper {
margin:0;
padding: 0;
position: relative;
float: left;
width: 30%;
}
.footer-copy {
margin:0;
padding:0;
position: relative;
float: left;
width: 70%;
height: 50px;
}
.footer-copy {
text-align: right;
}
.social-wrapper .social-icons {
margin: 0px;
position: relative;
float: left;
width: 33.333%;
height: auto;
}
.social-wrapper .social-icons .facebook {
margin: 0 auto;
background:blue;
width: 40px;
height: 40px;
}
.social-wrapper .social-icons .twitter {
margin: 0 auto;
background: red;
width: 40px;
height: 40px;
}
.social-wrapper .social-icons .youtube {
margin: 0 auto;
background: yellow;
width: 40px;
height: 40px;
}
#media(max-width:700px){
.footer-social-wrapper,
.footer-copy {
margin: 0 auto;
width: 100%;
text-align: center;
}
}
without a frame work like bootstrap etc.
Inside jumbotron, create another element contentWrapper and put contents inside then add a media query for it. You need to set width and margin: auto to make it centered.
Try resizing the window width to below 800 pixels, and you will see the contents are aligned center.
#facebookLogo{
float:left;
width:30px;
height:30px;
margin:5px;
}
#twitterLogo{
float:left;
width:40px;
height:30px;
margin:5px;
}
#youtubeLogo{
float:left;
width:40px;
height:25px;
margin:5px;
}
#footerFont{
float:right;
color:white;
font-size:10px;
padding-top:10px;padding-bottom:10px; text-align:right;
}
#footerJumbotron{
background-color:black;border-radius: 0 !important;
height:100px !important;padding-top:30px;
}
#media (max-width: 800px) {
.contentWrapper{
width: 400px;
margin: auto;
}
}
<div class="container">
<div class = "grid">
<div class="row">
<div class="jumbotron" id="footerJumbotron">
<div class="contentWrapper">
<img src="ContactImages\facebookLogo.png" id="facebookLogo">
<img src="ContactImages\twitterLogo.png" id="twitterLogo">
<img src="ContactImages\youtubeLogo.png" id="youtubeLogo">
<p id="footerFont">© 2016 Company Name. All Rights Reserved.<br> Built & Managed by Company Name</p>
</div>
</div>
</div>
</div>
</div>
In Bootstrap 4 you can just use the responsive alignment classes, something like text-xs-center text-sm-left, Also your code is highly repetitive, consider something like this:
#footerJumbotron img {
width: 30px;
height: 30px;
margin: 5px;
}
#footerFont {
color: white;
font-size: 10px;
}
#footerJumbotron {
background-color: black;
border-radius: 0 !important;
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="grid">
<div class="row">
<div class="container-fluid jumbotron" id="footerJumbotron">
<div class="col-sm-6 text-sm-left">
<img src="ContactImages\facebookLogo.png" id="facebookLogo">
<img src="ContactImages\twitterLogo.png" id="twitterLogo">
<img src="ContactImages\youtubeLogo.png" id="youtubeLogo">
</div>
<div class="col-sm-6 text-sm-right">
<p id="footerFont">© 2016 Company Name. All Rights Reserved.
<br> Built & Managed by Company Name</p>
</div>
</div>
</div>
</div>
</div>
jsFiddle: https://jsfiddle.net/azizn/veyytd6u/
* no need to set a fixed height if your footer is going be dynamic (in mobile when there are 2 rows, the height must change so leave it automatic)
* consider escaping the & in HTML => &
Basically I have a fixed size div that contains an <img> tag. I cannot change the structure.
Often these images are much larger than the container due to keeping them 100% width and filling the box. Most times this results in too much of the image shown at top and not cropped to the center of the image.
So using jQuery (or pure CSS if possible) I want to adjust the position of the image to move it up so the top is cropped off instead of the bottom.
Also, this should remain responsive as the viewport changes width.
Here is a fiddle
.container {
height: 200px;
width: 100%;
overflow: hidden;
margin: 0 0 30px;
}
<div class="container">
<img src="http://placekitten.com/900/500/">
</div>
<div class="container">
<img src="http://placekitten.com/901/500/">
</div>
It's doable with known height container, like your demo. We can set the container to position:relative, and set the image to position:absolute, plus some extra set ups as follows.
.container {
height: 200px;
width: 100%;
overflow: hidden;
margin: 0 0 30px;
position: relative;
}
.container img {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
max-width: 100%;
height: auto;
}
<div class="container">
<img src="http://placekitten.com/900/500/">
</div>
<div class="container">
<img src="http://placekitten.com/901/500/">
</div>
jsfiddle
If you are OK with using the images as the div background, you can do the following:
Option1:
HTML:
<div class="container" id="first"></div>
<div class="container" id="second"></div>
CSS:
.container {
height: 200px;
width:100%;
overflow: hidden;
margin: 0 0 30px;
border: solid;
background-position: center center;
background-repeat: no-repeat;
}
#first {
background-image: url('http://placekitten.com/901/500/');
}
#second {
background-image: url('http://placekitten.com/900/500/');
}
Update- Option2:
without using the image as background.
HTML:
<div class="container">
<img class="centered" src="http://placekitten.com/900/500/" />
</div>
<div class="container">
<img class="centered" src="http://placekitten.com/901/500/" />
</div>
CSS:
.container {
height: 200px;
width:100%;
overflow: hidden;
margin: 0 0 30px;
border: solid;
}
.centered {
object-fit: none;
object-position: center;
width: 100%;
height: inherit;
}
Please check this option1, option2
For now I'm going to use:
$("img").each(function(){
var hHeight = $(this).height()/2;
$(this).css("top", - hHeight);
});
I would love to see other solutions, especially if they are better.
I have some modules on my project that are generated dynamically. This basic HTML will work fine as an example of what I want to achieve:
<div class="container">
<div class="image">
image here
</div>
<div class=" ellipsis">
<div class="description">
here we have a text not very long for a small module
</div>
</div>
<div class="end">
buttom
</div>
</div>
My problem is that I don't want this module to ever grow too much vertically, if the web administrator writes a long "description" (I can't limit how much he wants to write as the "description" text will show on other pages).
I found a nice CSS trick to add "ellipsis" to a multiple lines container. Here you can see this "trick" in the .ellipsis (plus the basic CSS):
.container {
background-color: #eee;
width:100px;
margin:20px;
float:left;
}
.image {
border:2px solid #999;
width:100px;
height:60px;
background-color: #fff;
margin-bottom:10px;
}
.end {
border:2px solid #999;
width:100px;
background-color: #fff;
}
.ellipsis {
overflow: hidden;
max-height: 200px;
line-height: 25px;
margin-bottom:10px;
position:relative;
}
.ellipsis:before {
content:"";
float: left;
height:100%;
width: 5px;
height: 200px;
}
.ellipsis > *:first-child {
float: right;
width: 100%;
margin-left: -5px;
}
.ellipsis:after {
content: "\02026";
box-sizing: content-box;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
float: right; position: relative;
top: -25px; left: 100%;
width: 20px; margin-left: -20px;
padding-right: 5px;
text-align: right;
background-color:#eee;
}
You can see everything together here: JSFIDDLE
The problem I have is that while ellipsis works fine, I don't want ALL the modules to have a fixed height. I just want to limit the max-height to a fixed size. (Just delete "height: 200px;" from ".ellipsis:before" to see what I want to achieve.)
So, the problem is the .ellipsis:before fixed height. 100% height won't work unless I turn the position to absolute, but then the "ellipsis" trick won't work as the float won't take effect.
Any help with my problem will be greatly appreciated. I don't think there may be a pure CSS solution, (trust me, I have tried) and I'm very bad a JavaScript/jQuery. However, if you have a jQuery solution that may help, I could implement it in the project (and give you nice rep points here :) ). I was thinking something like:
If div.ellipsis > 200px then add height:200px to ellipsis:before
Thanks a lot in advance and please excuse my poor English. Hope the question is clear enough.
There is no need of :before pseudo class. Check this fiddle.
.ellipsis:after {
content:"\02026";
position: absolute; /* removed position: relative */
top: 200px; /* equal to max-height value */
right: 0px;
margin-top: -25px; /* equal to line-height value */
/* other styles */ /* removed float property */
}
Working Fiddle
In the above fiddle, I removed :before pseudo class and set the position of the :after pseudo class to top by 200px which is equal to the given max-height value of the .ellipsis.
and to remove the default upper and lower gaps of the container, I added margin-top: -25px which is equal to the given line-height.
Note: You can apply just top: 175px which is result value of subtraction of given max-height and line-height values.
Here's a simple jQuery solution.
First add a class for when an ellipsis reaches the maximum height, let's call it maxed. Set the :before height for that to 200px:
.ellipsis.maxed:before {
height:200px;
}
Then as you say. you can do some simple jQuery to check the height. If it is the maximum, then add our maxed class to the ellipsis:
$(function() {
$('.container .ellipsis').each(function() {
var $this = $(this);
if($this.height() >= 200) {
$this.addClass('maxed');
}
});
});
Updated fiddle here
You can do it easily with jquery (I assume jquery is an available option in your project).
You just have to
Remove all "ellipsis" class from HTML
Add "ellipsis" whenever needed with JS (= when your content exceeds 200px).
For that, you can use the following :
$('.description').each(function(){
if($(this).height() >= 200 ){
$(this).parent().addClass('ellipsis');
}
});
Working JSfiddle
You can't directly manipulate pseudo elements like :before. What you could do here is add a class for large ellipsis with height: 200px. Then use jQuery to add the new class according to the height.
$(function() {
$('div.ellipsis').each(function (index, element) {
if ($(element).height() >= 200) {
$(element).addClass('ellipsis-large');
}
});
});
See the code snippet for the full example:
$(function() {
$('div.ellipsis').each(function(index, element) {
if ($(element).height() >= 200) {
$(element).addClass('ellipsis-large');
}
});
});
.container {
background-color: #eee;
width: 100px;
margin: 20px;
float: left;
}
.image {
border: 2px solid #999;
width: 100px;
height: 60px;
background-color: #fff;
margin-bottom: 10px;
}
.end {
border: 2px solid #999;
width: 100px;
background-color: #fff;
}
/* ellipsis class for small modules */
.ellipsis {
overflow: hidden;
max-height: 200px;
line-height: 25px;
margin-bottom: 10px;
position: relative;
}
.ellipsis:before {
content: "";
float: left;
height: 100%;
width: 5px;
/* height: 200px; */
}
.ellipsis > *:first-child {
float: right;
width: 100%;
margin-left: -5px;
}
.ellipsis:after {
content: "\02026";
box-sizing: content-box;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
float: right;
position: relative;
top: -25px;
left: 100%;
width: 20px;
margin-left: -20px;
padding-right: 5px;
text-align: right;
background-color: #eee;
}
/* ellipsis class for large modules */
.ellipsis-large:before {
height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="image">
image here
</div>
<div class=" ellipsis">
<div class="description">
here we have a text not very long for a small module
</div>
</div>
<div class="end">
buttom
</div>
</div>
<div class="container">
<div class="image">
image here
</div>
<div class=" ellipsis">
<div class="description">
here we have a text not very long for a small module
</div>
</div>
<div class="end">
buttom
</div>
</div>
<div class="container">
<div class="image">
image here
</div>
<div class="ellipsis">
<div class="description">and here we have a much longer text to reach the 200px "ellipsis" div to activate the effect made with pure css. a nice discovery from http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/
</div>
</div>
<div class="end">
buttom
</div>
</div>