Weird issue keeps happening with this.
I want one of my flex items (an image) to be set to certain dimensions (w:300px h:300px).
When I open it to preview in my browser the image appears squashed up in the container as a flex item would normally behave (the text takes up most of the space.)
As soon as I resize my browser by even 1px the img then resizes to its specified dimensions (w:300px h:300px).
Is this what is supposed to happen? I'm using the Treehouse workspace text editor so I don't know if it's a bug with that or I'm doing something wrong?
Thanks,
.con {
display: flex;
background: gainsboro;
font-size: 1.8em;
}
.con img {
width: 300px;
height: 300px;
margin: 0 10px;
}
<div class="surgery con">
<img src="../img/cloud.jpg">
<p>Lorem ipsum dolor sit amet, urna sollicitudin pede sollicitudin fusce adipiscing vitae. Commodo egestas. Ut tempus, molestie integer in integer, pellentesque sed egestas duis, commodo sapien pellentesque turpis nulla tempor.</p>
</div>
Here's a screenshot of what it looks like when I open to preview:
http://imgur.com/a/Ejp8R
Here's what it looks like as soon as I expand the browser:
http://imgur.com/a/xT5Yr
I suggest you to use min-width property. It will help you to avoid the weird img stretching.
JsFiddle: https://jsfiddle.net/5pbqfyam/
.con {
display: flex;
background: gainsboro;
font-size: 1.8em;
}
.con img {
min-width: 300px;
height: 300px;
margin: 0 10px;
}
<div class="surgery con">
<img src="../img/cloud.jpg">
<p>Lorem ipsum dolor sit amet, urna sollicitudin pede sollicitudin fusce adipiscing vitae. Commodo egestas. Ut tempus, molestie integer in integer, pellentesque sed egestas duis, commodo sapien pellentesque turpis nulla tempor.</p>
</div>
Related
Problem:
I have to indent my text. I have had a lot of problems with it, so I need to learn how to do it correctly now. On the desktop version the indent is looking fine. The problem is when I see on a responsive point of view, all the text is going out of control. Here is the version I have now:
Here is the version after I do a text indent on an iPhone 5 with the CSS below:
Code:
feature-bar {
background-color: #f8f8f8;
height: 200px;
margin-top: 0px;
text-decoration: solid;
color: red;
text-indent: 100px;
padding-top: 20px;
}
Question:
How do I do a correct text indent, so it is also looking correct on a mobile?
UPDATE
After the answers I found out I can use <li> or vw. On a mobile point of view wanted that the clock 13.00 - 13.20 should stay on one line, and the text should start on the other line. Should I make a mediaquery with something for solving this?
SECOND UPDATE
Example on how it should look on mobile
The standard solution would be using left padding. Don't know what your HTML is like, but this would be something like
ul {
padding-left: 100px;
padding-right: 40px;
outline: 1px solid red;/* just for demo purposes to reveal the padding */
}
li {
padding-bottom: 20px;
list-style: none;
}
<p>Heading</p>
<ul>
<li>first item, showing what it looks like when an item wraps to more than one line asdf asdf asdf asdf sdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf</li>
<li>qwer</li>
</ul>
If you want extra vertical space around the list, you could do one of two things. Here I'm making the total space at the bottom of the ul 30px
ul {
padding-bottom: 10px;/* is in addition to the 20px from the last li */
}
or
ul {
padding-bottom: 30px;
}
li:last-child {
padding-bottom: 0;
}
(The second option can be more reliable: you don't have to think about the math, and the person working on the site doesn't have to remember/know that the last li is contributing padding. Not a big deal in a simple case like this, but useful to keep in mind in cases where the css is more involved)
No matter what you do, you'll probably want to do something like .some-class-name and .some-class-name li instead of the bare ul and li in my examples - otherwise this will style every list on your site!
Note that I'm using bottom padding rather than top - that isn't strictly necessary, but I find favoring bottom padding and bottom margin (as opposed to top) a good habit to get into. Knowing that spacing is almost certainly coming from the upper thing can make things easier to debug and/or adjust
Bonus
Following your update to the question: one way of putting the time on its own line on mobile: wrap the time in some element that displays inline on desktop and block on mobile. span is display: inline by default, making it a handy choice here. A generic solution would be
<li>
<span>mobile own line</span> other stuff
</li>
#media (max-width: yyypx) {
span {
display: block;
}
}
where yyy is your mobile break point. Again, that will probably be .some-class-name span.
Because this is a time value, you can be all beautifully semantic with the time element:
<li><time datetime="13:00/13:30">13:00–13:30<time> other stuff</li>
and then target the time in the css (see http://www.w3schools.com/tags/att_time_datetime.asp and https://stackoverflow.com/a/10403376/1241736)
instead of pixels, use viewport units , specificallyuse vw which is viewport width which will decrease as the width of the screen gets smaller
see here more CSS Units
see snippet below :
or better see here > jsfiddle ( you can resize here better )
.feature-bar {
background-color: #f8f8f8;
height: 200px;
margin-top: 0px;
text-decoration: solid;
color: red;
text-indent: 10vw;
padding-top: 20px;
}
<div class="feature-bar">
Lorem ipsum dolor sit amet, aenean sed egestas ultricies eget ornare, luctus proin malesuada. A ac lacinia. Vulputate molestie suspendisse nullam. Ornare velit ac vitae, duis duis, ac diam pede netus. Ipsum nibh ipsum, phasellus id quis vitae consectetuer blandit dolor.
</div>
<div class="feature-bar">
Nec nulla placerat aliquam nulla urna tellus, ac ligula imperdiet, facilisis laoreet nec egestas, porttitor ante, wisi blandit sit erat. Vestibulum fermentum ac. Amet augue, mattis nec integer lorem lorem. Neque enim, pulvinar leo lorem donec, ac in. Etiam nec vestibulum justo praesent mi, pharetra praesent erat enim et purus sed, vel porttitor morbi voluptatem ante pellentesque ligula. In interdum tellus elit volutpat, purus gravida vitae vivamus ante quis, at amet, urna scelerisque suspendisse quis tortor vestibulum.
</div>
UPDATE after your edit to the question .
use lists :
careful, ul has a default padding , change it to padding-left:5vw so it will get smaller when you resize the window
see snippet below or fiddle here : jsfiddle with list
ul {padding-left:5vw}
br { display:none;} /* if you want all content of `li` to be on same row , time and text */
#media only screen and (max-width: 767px) { /* mobile devices */
br { display:block; } /* time on one row, text on the next rows */
}
<h1>
program for seminar
</h1>
<ul>
<li>13.00 - 13.30 <br />
Lorem ipsum dolor sit amet, non leo arcu risus fermentum at quam. Ac tincidunt vel non, quisque at libero odio ac eu sed, lectus condimentum non scelerisque tortor ligula.
</li>
<li >14.00 - 14.30<br />
Consectetuer diam consequat cursus fusce odio, fusce lacinia quis sit, sed etiam consequat pulvinar. Ut nisl, sed vulputate, dui ut pede varius in aenean, blandit accumsan pellentesque.
</li>
</ul>
This happens because the text-indent only applies to a new rule. Where in your phone's example, the rule gets broken and therefore, goes to the start of the div.
Change text-indent: 100px into padding-left: 100px
In case you have other content that shouldn't be aligned, wrap the content in a span / div and apply the styling to this element.
This is tabular data. Just use a table, it's semantic and requires very little maintenance or media queries.
table {
width: 80%;
margin: auto;
color: red;
}
table tr td {
vertical-align: top;
}
table tr td:first-child {
white-space: nowrap;
}
<table>
<tr>
<td>11:30 - 12:30</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, nihil nam veniam perferendis facilis error.</td>
</tr>
<tr>
<td>12:30 - 13:30</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>13:30 - 14:30</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, nihil!</td>
</tr>
</table>
I'm creating a responsive page with three elements. The left two elements are set to display:inline-block so they'll appear side-by-side. The third element is set to float:right so it will align to the right side of the page instead of being inline with the other two elements. I have a CSS media query that makes all three elements display vertically when the window is less than 600px wide.
When I shrink the window smaller than 600px and then stretch it out to be wide again, the third element does not display at the top of the page. It floats to the right side of the page, but there is space at the top as if it's placed below the other two elements.
I see this behavior on a Mac in Chrome 43 and Safari 7.1.6, but NOT in Firefox 38.0.5.
Why does this happen?
Is there any remedy?
I realize there are other ways to structure this layout to avoid this issue. I'm more interested in why this behavior occurs than in alternate methods, especially since it only seems to happen in specific browsers.
Here's an illustration of the issue:
Please see the demonstration below. Use the "Full page" button so that you can resize the window to test the media query.
div#image {
display: inline-block;
vertical-align: middle;
width: 30%;
}
div#image img {
max-width: 100%;
}
div#caption {
display: inline-block;
width: 20%;
}
div#text {
float: right;
width: 30%;
}
div#text p {
margin: 0 0 1em;
}
#media only screen and (max-width: 600px) {
div#image,
div#caption {
display: block;
width: auto;
}
div#text {
float: none;
width: auto;
}
}
<div id="image">
<img src="http://lorempixel.com/400/300/abstract/3/" alt="">
</div>
<div id="caption">
Caption goes here.
</div>
<div id="text">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat.</p>
<p>Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor.</p>
<p>Proin at eros non eros adipiscing mollis. Donec semper turpis sed diam. Sed consequat ligula nec tortor. Integer eget sem.</p>
</div>
It's because of the float:none - for some reason* it remains stuck when you stretch back - just don't use it and you'll be fine. That div staying floated in a column won't probably make any difference anyway.
*(I suspect browsers may choose to ignore reverting the rules in this case to save on resources, since this sort of resizing is mostly done by developers for testing purposes and not so much by regular users - but it's just speculation)
¡Hello! I've looking for some questions like this, but i only found this one, and its solution is useless for me.
I have a website where some books are shown, it is edicionesparalelo.com, and another one where people can buy those books: tienda.edicionesparalelo.com I'd want to put a button under each book image which says "Ir a la tienda" (Go to the store), but i don't know how can i align the button under the image and keep the text like it is now. I've tried floating and positioning but no way.
An example of the book pages in this link. What i want is to put a button under the image.
I strangely feel that this will be duplicated, but i sware i searched the web for a whole hour.
Could you help me? Thanks!
Here is one way of creating the layout that you need. Create two block level elements, one to hold the image and the button and the other to hold the content (header and text).
Float the .thumb-panel to the left and keep the .text-panel as a regular inflow element.
Adjust margins, borders and padding as needed.
.content-panel{
overflow: auto; /* keep the float contained within this panel */
border: 1px dotted blue;
}
.thumb-panel {
float: left;
width: 100px;
border: 1px solid gray;
text-align: center;
margin-right: 20px; /* for example */
}
.thumb-panel img {
display: inline-block;
margin-bottom: 20px; /* for example */
}
.thumb-panel button{
display: inline-block;
margin-bottom: 20px;
}
.text-panel {
overflow: auto; /* prevents text flow wrapping around floated panel */
border: 1px solid gray;
}
<div class="content-panel">
<div class="thumb-panel">
<img src="http://placehold.it/80x120">
<button>Button</button>
</div>
<div class="text-panel">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer facilisis velit ut neque tempor quis cursus tortor suscipit. Curabitur rutrum magna vitae arcu pharetra eget cursus ante accumsan. Nunc commodo malesuada adipiscing. Pellentesque consequat laoreet sagittis. Sed sit amet erat augue. Morbi consectetur, elit quis iaculis cursus, mauris nulla hendrerit augue, ut faucibus elit sapien vitae justo. In a ipsum malesuada nulla rutrum luctus. Donec a enim sapien. Sed ultrices ligula ac neque vulputate luctus. Suspendisse pretium pretium felis, in aliquet risus fringilla at. Nunc cursus sagittis commodo.</p>
</div>
</div>
It's a bit difficult for me to explain my problem, so much better to just show an example (check the JSFiddle):
#contacts {
position: fixed;
bottom: 0;
width: 100%;
max-height: 75%;
}
#contacts .tab-content {
height: 100%;
overflow: scroll;
}
JSFiddle no scroll
As you see, there's a tab fixed on the bottom which toggles a panel (I'm using Bootstrap 3). The content of the panel is dynamically generated, so I need the panel to increase its height as the content is generated, up to a 75% of the page's height (not to cover it all).
Now, when the content is too much, I need an inner scrollbar; as you can see, the scrollbar is there, but it's not working, because the #contacts div has no specific height, so the .tab-content's "height: 100%" is not working.
If I try using "overflow: scroll" on #contacts instead of .tab-content, it works:
JSFiddle scrolls label too
But the problem, now, is that the scrollbar also scrolls the tab label, and that it's outside of the .tab-content, so when I click on it the div loses focus and the tab closes.
Any idea how to solve this? Thanks!
Proof of Concept Solution
I boiled down the design problem to the basics (without Bootstrap).
The .fixed-wrapper is pinned to the bottom of the page using position: fixed, and apply overflow-y: scroll to enable scrolling.
The .header tab element is also positioned fixed, but the trick is to set the bottom offset to the same value as the max-height value of .fixed-wrapper, 60% in this example.
Then you toggle the content, you need to adjust the following:
.fixed-wrapper { max-height: 0;}
.header { bottom: 0;}
.scroll-panel { display: none;}
If you have an .active class to distinguish the display state, your CSS might look like:
.fixed-wrapper.active { max-height: 60%;}
.fixed-wrapper.active .header { bottom: 60%;}
.fixed-wrapper.active .scroll-panel { display: bottom;}
When applying this to a Bootstrap layout, make sure that your selectors are specific enough so that the Bootstrap classes do not override the key rules shown above.
Note: There is a minor limitation to this solution. If the content is insufficiently tall to force scrolling, then the header element may hang at the
60% position even though the .scroll-panel does not reach the max-height. You may need some JavaScript to take care of that.
body {
margin: 0;
}
p {
line-height: 2.0;
}
.fixed-wrapper {
background-color: lightblue;
max-height: 60%;
position: fixed;
bottom: 0;
overflow-y: scroll;
}
.header {
background-color: lightgray;
position: fixed;
bottom: 60%;
right: 0;
margin-right: 50px;
width: auto;
}
.scroll-panel {
background-color: lightblue;
display: block;
}
<div class="fixed-wrapper">
<div class="header">header or tab...</div>
<div class="scroll-panel">
<p>Some content...</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer facilisis velit ut neque tempor quis cursus tortor suscipit. Curabitur rutrum magna vitae arcu pharetra eget cursus ante accumsan. Nunc commodo malesuada adipiscing. Pellentesque consequat laoreet sagittis. Sed sit amet erat augue. Morbi consectetur, elit quis iaculis cursus, mauris nulla hendrerit augue, ut faucibus elit sapien vitae justo. In a ipsum malesuada nulla rutrum luctus. Donec a enim sapien. Sed ultrices ligula ac neque vulputate luctus. Suspendisse pretium pretium felis, in aliquet risus fringilla at. Nunc cursus sagittis commodo.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer facilisis velit ut neque tempor quis cursus tortor suscipit. Curabitur rutrum magna vitae arcu pharetra eget cursus ante accumsan. Nunc commodo malesuada adipiscing. Pellentesque consequat laoreet sagittis. Sed sit amet erat augue. Morbi consectetur, elit quis iaculis cursus, mauris nulla hendrerit augue, ut faucibus elit sapien vitae justo. In a ipsum malesuada nulla rutrum luctus. Donec a enim sapien. Sed ultrices ligula ac neque vulputate luctus. Suspendisse pretium pretium felis, in aliquet risus fringilla at. Nunc cursus sagittis commodo.</p>
</div>
</div>
Ok so I looked at it again and it is indeed a pain, but this seems to work (a bit ugly though): Fiddle
#contacts {
position: fixed;
bottom: 0;
width: 100%;
max-height: 75%;
overflow-y: hidden;
}
#contacts .tab-content {
background-color: #ccc;
}
.tab-pane {
height:300px;
overflow-y:scroll;
}
#contacts ul li {
position: relative;
float: right;
margin-right: 15%;
}
#contacts > ul > li > a {
background-color: #ccc;
}
Using CSS, how can I display an image behind some text and also offset it on both the X and Y axis?
I have a design that is 950px wide, so I'm wanting want this image to remain 'in sync' with the rest of the header by placing it in a container that is centered and also 950px wide.
My problem is that instead of the image being 'a layer behind' the header text, it is instead displaying the image in full and pushing the rest of the contents down.
Any help is greatly appreciated.
IMAGE ADDED FOR CLARIFICATION
Thanks,
Andy.
use Percentage values in your background positions in your css
.divName {
background-position: 50%;
}
or using words like top or bottom ...
See the full list of values here
UPDATE;
use the image as a background image instead of inline html image
<div class='content'>
<p> Some content</p>
<p> More content</p>
.... even more content ...
</div>
Now the css:
div.content {
background-image: url('image path');
background-position: 50%;
}
This way the image will always be behind the content, and it will be in the center of the div.
See: http://jsfiddle.net/Fx5q3/
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
https://developer.mozilla.org/en/Understanding_CSS_z-index/Adding_z-index
CSS:
#container {
width: 300px;
margin: 0 auto;
background: #ccc;
background: rgba(127,127,127,0.7);
position: relative
}
#behindImage {
background: url(http://dummyimage.com/150x150/f0f/fff) no-repeat;
width: 150px;
height: 150px;
position: absolute;
top: -30px;
left: -90px;
z-index: -1
}
HTML:
<div id="container">
<div id="behindImage"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis volutpat blandit. Morbi bibendum pharetra bibendum. Fusce sit amet lobortis odio. Proin ultricies, massa vel ornare fringilla, diam sem convallis arcu, nec laoreet massa leo nec dolor. Nullam vel massa ligula. Donec semper eros dapibus nibh dictum egestas ac nec libero. Maecenas et fringilla augue. Phasellus imperdiet urna in sem scelerisque adipiscing.</p>
</div>
Do you mean something like this example?
Oke, that's more clear. Now I'm pretty sure this is what you want.