Trying layout inline elements I discover wierd behavior.
Can someone explain me why is there any different?
To both HTML I apply this css:
.time {
position: relative;
top:100px;
height: 5px;
background: red;
border-radius:5px;
text-align: justify;
font-size: 0.1px;
padding: 0px 10px;
}
.time > .snapshot {
position: relative;
display: inline-block;
width:2px;
height: 13px;
top: -5px;
background: red;
}
.time:after {
content:'';
width: 100%;
display: inline-block;
}
And now HTML
- Wierd behavior:
<div class="time" >
<div class="snapshot" ></div><div class="snapshot" ></div>
</div>
http://jsfiddle.net/FSLAJ/
Expect behavior:
http://jsfiddle.net/dXwjR/1/
Update
I play a little with inline-block and justify, and I have another wierd example:
<div style="text-align: justify;">
test test test
<div style="display: inline-block; width: 100%;">test test</div>
test test test
</div>
JSFiddle example
I just wonder why second anonymous inline element is not justify?
The difference is due to the fact that inline elements are sensitive to white space in the code, and that's what's providing the spacing in your "expected" example. Add some margin-right to your .snapshot tick marks in your other one and they'll spread out like the other example.
jsFiddle example
Related
TL;DR: Here's a CodePen.
I have a UI with an image and a grid of text with long lines which looks like this:
I'm using CSS Flexbox with two elements: the image and the text. And then to lay out the text, I'm using CSS Grid. Now, when I view this on a narrow screen for mobile, it correctly wraps everything and stacks the two elements:
But on desktop, with a slightly narrower div, the flex box wraps before the grid text like this:
How can I get the text to wrap while leaving the flex box alone in this case? I fear I may need to use some media queries, but I'm not even sure if I'm using the right CSS components for this.
Here's the code:
index.html:
<div class="media-callout">
<div class="media-thumb">
<img height="170" width="120">
</div>
<div class="media-callout-grid">
<div class="media-callout-key">Authors</div>
<div>Babalola, J & Ogunkola, Babalola</div>
<div class="media-callout-key">Year</div>
<div>2013</div>
<div class="media-callout-key">Title</div>
<div class="media-callout-value">Scientific Literacy: Conceptual Overview, Importance and Strategies for Improvement</div>
<div class="media-callout-key">Journal</div>
<div><em>Journal of Educational and Social Research</em></div>
<div class="media-callout-key">Location</div>
<div>vol. 3, no. 1, pp. 265–274</div>
<div class="media-callout-key">DOI</div>
<div>10.5901/jesr.2013.v3n1p265</div>
</div>
</div>
style.css:
.media-callout {
display: flex;
flex-wrap: wrap;
justify-content: center;
row-gap: 20px;
column-gap: 10px;
padding: 1em;
max-width: max-content;
}
.media-thumb img {
float: left;
height: 175px;
width: auto;
}
.media-callout-grid {
display: grid;
font-size: 12pt;
grid-template-columns: 6em 1fr;
align-content: center;
gap: 0 15px;
}
.media-callout-key {
text-align: right;
font-weight: bold;
}
.media-callout-value {
word-break: break-word;
word-wrap: break-all;
}
A media query does indeed resolve this:
#media screen and (min-width: 600px) {
.media-callout {
flex-wrap: nowrap;
}
}
The query must come AFTER the .media-callout block. I also had to use this approach to prevent the image from being squashed.
I have a website I am creating for a school project. I am very new to html and css. I have created div containers for the different sections of my pages. On my index page, I have 5 containers including the header and footer.
The containers are working everywhere except in 1 location where I am floating images. For some reason, the box is shrink-wrapping under the 3 images. I thought by placing a position:relative in the .container css rule, it would behave like it is with paragraphs and other elements. I would like that container to surround the pictures just like it is with the other boxes on the index page.
Here is the html for that specific container that is not working:
<div class="container">
<article>
<h2>Meet the Staff:</h2>
<div class="gallery">
<figure class="staff"><img src="images/mary.jpg" alt="mary the librarian" />
<figcaption>Mary the Librarian</figcaption>
</figure>
</div>
<div class="gallery">
<figure class="staff"><img src="images/ruth.jpg" alt="mary the librarian" />
<figcaption>Ruth the Assistant</figcaption>
</figure>
</div>
<div class="gallery">
<figure class="staff"><img src="images/esther.jpg" alt="mary the librarian" />
<figcaption>Esther the Research Librarian</figcaption>
</figure>
</div>
</article>
</div>
And here is the css:
.container {
width: 1000px;
height: auto;
margin: auto;
margin-bottom: 25px;
padding: 0 20px;
position: relative;
background: #fff;
box-shadow: 0 0 10px #b5b2ab;
}
figure img {
border: 1px solid #666;
background-color: #fff;
padding: 4px;
box-shadow: 2px 2px 4px rgba(0,0,0,.5);
}
figcaption {
font: Arial, sans-serif;
text-align: center;
margin: 10px 0 0 0;
}
figure {
display: block;
float: left;
width: 240px;
margin: 0 25px 25px 25px;
}
Here is the so you can see what is happening: http://www.ta5zc.com/
Thanks for any help you can provide. I can't seem to figure out what is wrong.
Embarrassing, but I figured it out. The container is acting just like it is supposed to. There was no elements below the images, so there was nothing to stay in place. Therefore, when I floated the images, the box moved up the page like it was supposed to. Like I said, I'm new at this ;-)
What i have
If I have two images (one includes frame and another includes the picture),
My question
can I show it in the same image by using Polymer? I think it looks like bitmap in android and I want to do in web but I really don't know how
Here is one example on how to place a picture over a picture. Since I didn't have any pictures i "faked" them with span tags. Plunkr
<style>
.pic-one{
background: red;
position: absolute;
height: 30px;
width: 30px;
}
.pic-two{
background: blue;
position: absolute;
margin: 5px 5px;
height: 20px;
width: 20px;
}
</style>
<div class='container'>
<span class='pic-one'></span>
<span class='pic-two'></span>
</div>
I'm working some css and encountered a weird problem. Two elements are inline-block staying in the same container. Both of them have the width, height, and line-height.
But if we set the first element an empty content, the layout will be disordered (vertical alignment).
You can see the problem here
<div class="part">
<div class="foo"></div>
<div class="bar">bar</div>
</div>
.part {
width: 400px;
height: 80px;
background-color: #ddd;
margin-bottom: 100px;
}
.foo {
display: inline-block;
width: 100px;
height: 80px;
line-height: 80px;
background-color: red;
}
.bar {
display: inline-block;
width: 100px;
line-height: 80px;
height: 80px;
background-color: green;
}
I know empty content is always a bad smell of html code. But I just want to know why this is and how to solve this problem.
I found a similar question. People say we could use a   instead of empty content. Is this the only way we could solve it? Or we have other better solution?
Thanks.
use 'vertical-align: middle;' to the inline-block element
vertical-align: middle;
http://jsbin.com/ajexab/1/edit
At my site on the first page i have two images put together so it looks like a sunset. I want to my logo to go down between them as if it was the sun, but i cant make this happend. The logo is currently at the second page of the site
Heres i the html:
<div id="intro">
<div id="introbaggrundbagved"></div>
<a name="section1" class="section">SECTION 1</a>
<div id="logo">
</div>
</div> <!--#intro-->
And the css:
#intro{
background: url('images/introforan.png') no-repeat center;
height: 900px;
margin: 0;
position: relative;
z-index: 3;
}
#introbaggrundbagved{
background: url('images/introbagved.png') no-repeat center;
height: 900px;
width: 1440;
margin:0;
position: relative;
}
#logo{
background: transparent url('images/logo.png') no-repeat center;
width: 600px;
height: 600px;
position: relative;
margin-left: 420px;
margin-top: 100px;
z-index: 2;
}
You need to take the #logo div out of its parent element #introand give it a z-index that is larger than both of its siblings— then wrap all of the header elements into an #intro-wrapper div. In addition, I would then position the #logo element using position: absolute, instead of relative, this will give you more granular control on it's placement without disturbing the document flow of the surrounding elements.
Also, it appears that you have the function parallaxScroll updating the top property of #logo, which will prevent the element from being placed between your two images.
function parallaxScroll(){
var scrolledY = $(window).scrollTop();
$('#logo').css('top','+'+((scrolledY*.376))+'px');
....
}