I've got multiple div elements nested in a div. What I want is for the #title-text div to be next to the image - in this case using a float.
The problem is that the text in the div spaces out the div when it has no more room in width as you can see in this jsFiddle.
I want to use floats because there will be multiple tiles using the same classes, and those tiles have different sizes and images etc. Also I don't want to have the #title-text to have a fixed width because of multiple tiles using it and thus having different widths.
Here's the HTML:
<div id="tile-wrapper">
<div id="category-text">
<p class="category-content">Smartphones / software</p>
</div>
<div id="tile-image">
<img src="images/wp10.jpg" class="tile-image" name="title" />
</div>
<div id="title-text">
Placeholder Text placeholder text placeholder text placeholder text
</div>
<div id="date-time-text">
<p class="date-time">3 minutes ago.</p>
</div>
</div>
Okay, so first I added display inline to your classes like this
.tile-image {
margin: 0 auto;
display:inline;
}
.title-text {
margin: 0 5px 5px 0px;
font-weight: 300;
text-shadow: 1px 1px 3px rgba(0,0,0,.3);
text-decoration: none;
font-size: 22px;
color: black;
display:inline;
}
then I put a width and alignment on #title-text
#title-text {
float: left;
margin-left: 5px;
margin-bottom:10px;
text-align:left;
width:50%;
}
I found the answer to my question with Jquery. Here's the solution if anyone wonders.
$(document).ready(function () {
var imageWidth = $('#tile-image').width();
var titleTextWidth = $('#title-text').width();
$('#title-text').width(imageWidth);
$('#tile-wrapper').width(imageWidth * 2 + 30); // +30 for margins.
});
Related
It's mostly in the title. I am displaying products in divs on my website. On hover, I make them increase in size by applying a margin of -15px to give them a nice hover effect. When I hover over any of them, it is fine except for the right-most ones, as it pushes the products below it away into the Bootstrap row below. Here are images:
Good (hover over a middle one):
Bad (hover over the right-most one):
Here is the code:
Search results page:
<div id="search-results">
<div data-bind="template: { name: 'product-template', foreach: allProducts }"></div>
</div>
Product template:
<script type="text/html" id="product-template">
<div class="col-sm-6 col-lg-2" style="margin-top:20px; padding: 25px;">
<div class="product-item">
<div data-bind="style: { backgroundImage: 'url(\'../../the_vegan_repository/product_images/' + product.imagePath + '\')' }"
style= "height: 160px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
color: white;
background: center no-repeat;
background-size:cover;
vertical-align:bottom;">
</div>
<div style="height: 110px; padding: 10px; background: #fc4747;">
<h6 class="medium-text" data-bind="text: product.brand" style="text-transform: uppercase; color: white; margin-top:0; margin-bottom:5px;"></h6>
<h6 class="medium-text" data-bind="text: product.name" style="text-transform: uppercase; color: white; margin-bottom:5px;display: inline;"></h6>
</div>
</div>
</div>
</script>
CSS:
div.product-item:hover {
margin: -15px;
}
div.product-item {
border: 5px solid #fc4747;
border-radius: 15px;
height: 240px;
overflow: hidden;
cursor: pointer;
}
How do I stop the Bootstrap grid system from pushing the bottom row into the row lower?
on hover, I make them increase in size by applying a margin of -15px
Use transform: scale(x); instead of margin: -15px; as transforms do not affect the box-model of the element.
CSS Transforms Module Level 1:
Note: Transformations do affect the visual layout on the canvas, but have no affect on the CSS layout itself. This also means transforms do not affect results of the Element Interface Extensions getClientRects() and getBoundingClientRect(), which are specified in [CSSOM-VIEW].
If you want to move it up by a certain amount, use transform: translateY(-15px) instead of changing the margin on the div.product-item:hover class. To move it in a context that does not interrupt the rest of the document. Or you can use transform: scale(1.2) to make things bigger.
The problem is that it's actually changing the dimentions of the div when you change the margin which in turn affects others. Check out this link . It gives an example on how to give such zoom effect.
Creating a Zoom Effect on an image on hover using CSS?
I'm attempting to place a 'notification' style badge over an images. I am using Twitters Bootstrap as a base framework and creating a custom CSS class called notify-badge. But I cannot get anything to line up properly.
Through the magic of Photoshop, here is what I am trying to accomplish.
Here is my CSS code.
.notify-badge{
position: absolute;
background: rgba(0,0,255,1);
height:2rem;
top:1rem;
right:1.5rem;
width:2rem;
text-align: center;
line-height: 2rem;;
font-size: 1rem;
border-radius: 50%;
color:white;
border:1px solid blue;
}
I would like to be able to place any small about of text in the badge and it expand the red circle to fit.
Here is my HTML code.
<div class="col-sm-4">
<a href="#">
<span class="notify-badge">NEW</span>
<img src="myimage.png" alt="" width="64" height="64">
</a>
<p>Some text</p>
</div>
Bunch of different ways you can accomplish this. This should get you started:
.item {
position:relative;
padding-top:20px;
display:inline-block;
}
.notify-badge{
position: absolute;
right:-20px;
top:10px;
background:red;
text-align: center;
border-radius: 30px 30px 30px 30px;
color:white;
padding:5px 10px;
font-size:20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-4">
<div class="item">
<a href="#">
<span class="notify-badge">NEW</span>
<img src="https://picsum.photos/200" alt="" />
</a>
</div>
</div>
Addendum (from the Asker #user-44651)
(moved from the question)
Here is the result of applying this answer.
Adding margin-top:-20px; to .item fixed the alignment issue.
The idea here is to overlay an absolute container on top of a relative one. Here's a similar example:
<div class="image">
<img src="images/3754004820_91a5c238a0.jpg" alt="" />
<h2>A Movie in the Park:<br />Kung Fu Panda</h2>
</div>
The CSS:
.image {
position: relative;
width: 100%; /* for IE 6 */
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
This is going to put our text right up on top of the image nicely, but it doesn't accomplish the box we want to achieve behind the text. For that, we can't use the h2, because that is a block level element and we need an inline element without an specific width. So, wrap the h2 inside of a span.
<h2><span>A Movie in the Park:<br />Kung Fu Panda</span></h2>
Then use that span to style and text:
h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
For ideas on how to ensure proper spacing or to use jQuery to cleanup the code a bit by allowing you to remove some of the tags from the code and jQuery them back in, check the source.
Here's a fiddle I made with the sample code:
https://jsfiddle.net/un2p8gow/
I changed the notify-badge span into a div. I saw no reason it had to be a span.
I changed the position to relative. Edit - you could actually keep the attribute position: absolute; provided you know what you're doing with it. Guy in the comments was right.
You had the attribute right: 1.5rem; and I simply changed it to left because it was being inset in the opposite direction of your example.
You can tweak it further but in a vacuum this is what you want.
<div style='width:10px'>
<a style="z-index : 1;cursor: pointer; text-decoration: underline; padding: 0px 3px 0px 0px; float: left;">
<img src='myimage.png' />
</a>
<a style="z-index : 1;margin-left: 4px; padding: 0px 3px 0px 0px; float: left;" >
<img src='myimage2.png' />
</a>
</div>
http://jsfiddle.net/n5q06r59/
With this code, the two images are displayed below each other. If I increase the width of the main div, the images are correctly displayed beside each other.
How do I force the elements to be always displayed beside each other, getting rather overlapped than drawn below in case of limited space?
You can use display table/table-cell to display beside. like:
div{
display:table;
}
a{
display:table-cell;
}
And remove float:left from anchor tag.
Check Fiddle Here.
If I understand you correctly, you want the images to display next to each other and when there are more images, you want them to overlap horizontally to fit in the given space.
Use javascript to accomplish what you want.
The overall logic would be,
Get the maximum width of the div
Divide the width by number of images you have (if all the images have same width), say that value is imgPosVal.
Place the images in such a way that you increment imgPosVal for each image on iteration.
To make this work successful, you have to position images as absolute;
Hope this helps. Let me know if you don't get it.
Sample Code: (You may have to tweak little bit according to your requirement)
var allImagesWidth = 100;
placeImages(["image1.png", "image2.png", "image3.png"]);
function placeImages(imageList) {
var parentDiv = $("#div");
var parentDivWidth = parentDiv.width(); //Say this is 200.
var imgPosVal = parentDivWidth/imageList.length; //66.6
for(var i=0; i<imageList.length; i++) {
var imgObj = $("<img src=\""+imageList[i]+"\" >");
parentDiv.append(imgObj);
imgObj.css({"position":"absolute", "left": (imgPosVal*i) + "px"});
}
}
Solution using Flexbox
.main {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-around;
}
a {
width: calc(100% - 4px);
margin: 0px 2px;
}
img {
width: 100%;
}
<div class="main">
<a><img src='http://lorempixel.com/400/200/sports/1/' /></a>
<a><img src='http://lorempixel.com/400/200/sports/2/' /></a>
<a><img src='http://lorempixel.com/400/200/sports/3/' /></a>
</div>
Jsfiddle Demo
Flex Guide
You can use postion: absolute attribute along with z-index:199 to keep top of other. The maximum value of z-index represent top position.
<a style="position:absolute;z-index : 0;cursor: pointer; text-decoration: underline; padding: 0px 3px 0px 0px; float: left;">
<img src='myimage.png' /> </a>
<a style="position:absolute;z-index : 1;margin-left: 4px; padding: 0px 3px 0px 0px; float: left;" >
<img src='myimage2.png' /> </a>
I have been looking for a way to center an anchor tag vertically according to a span tag, which are both encased within div tag.
My HTML
<div id="project_list">
<div class="title">
Example Project
<span class="show_details">Show Details</span>
<div style="clear: both"></div>
</div>
</div>
My CSS
div#project_list {
border: 2px solid #000000;
}
div#project_list div.title {
background: grey;
padding : 10px;
}
div#project_list div.title a {
font-size: 1.231rem;
}
div#project_list span.show_details {
background: orange;
float : right;
padding : 13px 5px;
}
I have also create a JSFiddle here, so you may see what I am speaking about.
Thank you to everyone in advance as I have been racking my brain on how to do this for a couple days now.
You could set the line height to match the button height:
a { line-height:46px; }
Note: I just used a but you will probably want to add a class so the style doesn't get applied to all anchor tags.
http://jsfiddle.net/GxqTh/2/
#OpenNoxdiv- try adding padding to your a tag; 20px seemed to center nicely for me. - see below
#project_list div.title a {
padding-top:20px;
}
In a way this is simple but I have been trying to figure out this for hours now so I decided to write the problem down and maybe with your help I could find a solution.
On layout heading (h1, h2, h3) have a line next to them. Basically somehting like this:
Example Heading--------------------------------------------
Another Example Heading---------------------------------
One more------------------------------------------------------
So that is end result (----- is gfx as background-image). How would you do it? The background color could change and/or have opacity.
One thing what I was thinking would be this:
<h1><span>Example Heading</span></h1>
when the CSS would look lke this:
h1 {
background-image: url(line.png);
}
h1 span {
background: #fff;
}
But since the background color can be something else than white (#fff) that doesn't work.
Hopefully you did understand my problem :D
Hacky but, maybe something like this:
HTML:
<h1>
<span>Test</span>
<hr>
<div class="end"></div>
</h1>
And the css:
h1 span{ float :left; margin-right: 1ex; }
h1 hr {
border: none;
height: 1px;
background-color: red;
position: relative;
top:0.5em;
}
h1 div.end { clear:both; }
Fiddle here
This worked for me.
HTML
<div class="title">
<div class="title1">TITLE</div>
</div>
CSS
.title {
height: 1px;
margin-bottom: 20px;
margin-top: 10px;
border-bottom: 1px solid #bfbfbf;
}
.title .title1 {
width: 125px;
margin: 0 auto;
font-family: Arial, sans-serif;
font-size: 22px;
color: #4c4c4c;
background: #fff;
text-align: center;
position: relative;
top: -12px
}
I don't think you can achieve this with pure css because the heading text could be any length. Here is a dynamic javascript solution which sets the width of the line image based on the width of the heading text.
Click here for jsfiddle demo
html (can be h1, h2 or h3)
<div class="heading-wrapper">
<h1>Example Heading</h1>
<img src="line.png" width="193" height="6" alt="" />
</div>
css
h1{font-size:16px}
h2{font-size:14px}
h3{font-size:12px}
h1,h2,h3{margin:0;padding:0;float:left}
.heading-wrapper{width:300px;overflow-x:hidden}
.heading-wrapper img{
float:right;padding-top:9px;
/*ie9: position:relative;top:-9px */
}
jquery
setHeadingLineWidth('h1');
setHeadingLineWidth('h2');
setHeadingLineWidth('h3');
function setHeadingLineWidth(selector){
var hWidth;
var lineWidth;
var wrWidth = $('.heading-wrapper').width();
hWidth = $(selector,'.heading-wrapper').width();
lineWidth = wrWidth - hWidth;
$(selector).siblings('img').width(lineWidth);
}
heading width = width of the heading text inside the wrapper
line image width = wrapper width - heading text width
Hope that helps :)