I use this template for my website skin. In this section of press have two div that contain text and image.I want change position of image and text. The image placed in left side and texts placed in right side. My site skin has rtl direction.
<div class="fh5co-press-item to-animate fadeInUp animated">
<div class="fh5co-press-img" style="background-image: url(/DNN_test/Portals/_default/Skins/Crew/images/img_8.jpg)"></div>
<div class="fh5co-press-text">
<h3 class="h2 fh5co-press-title">Versatile <span class="fh5co-border"></span></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis eius quos similique suscipit dolorem cumque vitae qui molestias illo accusantium...</p>
<p>Learn more</p>
</div>
</div>
On .fh5co-press-img and .fh5co-press-text you can set the order property. Add the following CSS:
.fh5co-press-text {
order:2;
position: relative;
}
.fh5co-press-img {
order:1;
position: relative;
}
You are using position:absolute; for the elements, you have to add position:relative;.
Related
I have added a margin to the .quotes-text selector however it moves the whole quotes section down not just the text within the quotes section. Any idea what might be causing this? Code below.
.quotes {
height: 344px;
background: #bf4b54;
}
.quote-text {
font-size: 2rem;
max-width: 860px;
}
<div class="quotes">
<div class="quote-text">
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque soluta necessitatibus a autem obcaecati officiis reiciendis. - Head Chef</span>
</div>
<img src="" alt="" class="chef">
</div>
If you just want the text to move down (but not the section) use padding instead of margin.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I wanted to replicate the effects as shown here -
https://allods.my.com/en/news (not this one, sorry)
http://bit.do/b2692
https://www.google.co.in/sheets/about
Ignoring all the animations, i wanted to know how can we implement multiple different backgrounds as one scrolls down the page.
PS. I am a complete beginner, i prefer to have an HTML/CSS solution only.
You should try to add position fixed property to Your background , it should help.
body,
html,
main {
/* important */
height: 100%;
}
.fixed-bg {
min-height: 100%;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
}
.fixed-bg.bg-1 {
background-image: url("https://c7.staticflickr.com/8/7052/6803328782_432e1dd481_b.jpg");
}
.fixed-bg.bg-2 {
background-image: url("https://imagesus-ssl.homeaway.com/mda01/b8b73d34-98e2-4633-ab05-6797a99bcf2e.1.10/Cocoa-Beach-Pier-with-Disney-cruise-ship-in-background.jpg");
}
.fixed-bg.bg-3 {
background-image: url("http://static.fly4free.pl/s/2015/4/f/f6dc42b71e7ef2336edbfbc8c9124684.jpeg");
}
.fixed-bg.bg-4 {
background-image: url("http://coachhouse.com.au/default/assets/File/kayak.jpg");
}
.scrolling-bg {
min-height: 100%;
}
<main>
<div class="fixed-bg bg-1">
<h1><!-- title goes here--></h1>
</div>
<div class="scrolling-bg cd-color-2">
<div class="container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi...
</p>
</div>
</div>
<div class="fixed-bg bg-2">
<h1><!-- title goes here --></h1>
</div>
<div class="scrolling-bg color-2">
<div class="container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi...
</p>
</div>
</div>
<div class="fixed-bg bg-3">
<h1><!-- title goes here --></h1>
</div>
<div class="scrolling-bg color-2">
<div class="container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi...
</p>
</div>
</div>
<div class="fixed-bg bg-4">
<h1><!-- title goes here --></h1>
</div>
<div class="scrolling-bg color-2">
<div class="container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi...
</p>
</div>
</div>
</main>
Div after div approach :
body,
html,
main {
/* important */
height: 100%;
padding:0;
margin:0;
}
.container{
position:absolute;
}
.fixed-bg {
min-height: 100%;
background-repeat: no-repeat;
background-position: center center;
}
.fixed-bg.bg-1 {
background-image: url("https://c7.staticflickr.com/8/7052/6803328782_432e1dd481_b.jpg");
}
.fixed-bg.bg-2 {
background-image: url("https://imagesus-ssl.homeaway.com/mda01/b8b73d34-98e2-4633-ab05-6797a99bcf2e.1.10/Cocoa-Beach-Pier-with-Disney-cruise-ship-in-background.jpg");
}
.fixed-bg.bg-3 {
background-image: url("http://static.fly4free.pl/s/2015/4/f/f6dc42b71e7ef2336edbfbc8c9124684.jpeg");
}
.fixed-bg.bg-4 {
background-image: url("http://coachhouse.com.au/default/assets/File/kayak.jpg");
}
.scrolling-bg {
min-height: 100%;
}
<main>
<div class="fixed-bg bg-1">
<div class="container"><!-- content goes here--></div>
</div>
<div class="fixed-bg bg-2">
<div class="container"><!-- content goes here--></div>
</div>
<div class="fixed-bg bg-3">
<div class="container"><!-- content goes here--></div>
</div>
<div class="fixed-bg bg-4">
<div class="container"><!-- content goes here--></div>
</div>
</main>
So you are looking for a parallax effect, there is a number of plugins for that. I recently used http://pixelcog.github.io/parallax.js/ which worked out well for me.
It's very simple to use it. You said you want an HTML / css solution for this, but i don't think you can do it without javascript. If someone else knows the alternative without javascript i'd like to see it also. But even if you don't know much about javascript you can use this plugin, just follow the instructions on the link i provided.
The plugin requires jquery to work!
For some reason centering items in this Bootstrap example doesn't seem to be working the way that it normally would with CSS using the table/table-cell method of:
<div class="parent" style="display:table">
<div class="child" style="display:table-cell; vertical-align:middle>
<h1>This is the lockup to be centered</h1>
</div>
</div>
The Bootstrap version of something I'm working on is as follows:
<div class="container">
<section class="hero--section col-lg-12">
<div class="col-lg-6 col-lg-offset-3 text-center hero--content">
<h1>Bore'em Ipsum</h1>
<p class="lead">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis totam numquam id quidem eligendi temporibus ullam cupiditate, assumenda, qui eaque deserunt libero, vitae sed expedita dolores laborum iusto accusamus facere.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima quam eveniet dolorem sapiente reiciendis dolorum sit nam debitis odio optio, dignissimos, dolor nulla rerum earum aliquid molestias! Culpa, odit, quo!</p>
<p><a class="" href="#"><img src="//placehold.it/20x20" alt=""></a></p>
</div>
</section>
</div>
With the following CSS:
.container {
background:lavender;
display:block;
}
.hero--section {
display:table;
height:535px;
}
.hero--content {
display:table-cell;
vertical-align: middle;
}
Example of issue here:
http://codepen.io/pdnellius/pen/bEPXyG.
Anyone have an idea what I'm missing here? This is my goto method for vertical centering. I know I could probably use transform to solve this. But I'd like to know the 'why' behind why this isn't working. Is something being overridden?
Bootstrap is floating your table and table cell elements with float: left on both.
Add this to your CSS:
.hero--content {
display: table-cell;
vertical-align: middle;
text-align: justify;
float: none; /* NEW */
}
If the floats are essential to your layout, then try another centering solution. Here's a flex alternative:
.hero--section {
display: flex;
height: 535px;
}
.hero--content {
margin: auto;
}
Revised Codepen
In a flex formatting context, floats are ignored.
Note that flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, use Autoprefixer. More browser compatibility details in this answer.
I'm trying to make it so inside of this row there are two equal columns; text on the left side with an image on the right. The problem is when I set my first col as text and my second column with the image, I get what I want except once everything collapses my image is stacked below my text. I want my image to be above my text once stacked. I've tried using pull right but then my image is no longer centered once everything is stacked. How can I get my image on the right and my text on the left and have my image centered and above my text once stacked?
<div class="row">
<div class="col-lg-6">
<img src="http://placehold.it/550x350" alt="" class="img-responsive">
</div>
<div class="col-lg-6">
<div class="center-col">
<h1 class="title">header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem perspiciatis voluptatum a, quo nobis, non commodi quia repellendus sequi nulla voluptatem dicta reprehenderit, placeat laborum ut beatae ullam suscipit veniam.</p>
</div>
</div>
</div> <!-- end row -->
Looks like you have to offset the columns:
<div class="row">
<div class="col-sm-6 col-sm-push-6">
<img src="http://placehold.it/550x350" alt="" class="img-responsive">
</div>
<div class="col-sm-6 col-sm-pull-6">
<h1 class="title">header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem perspiciatis voluptatum a, quo nobis, non commodi quia repellendus sequi nulla voluptatem dicta reprehenderit, placeat laborum ut beatae ullam suscipit veniam.</p>
</div>
</div> <!-- end row -->
And here is a jsbin for you. And a link where you can read more.
Btw. I had to use the "sm" grid because my screen is small, but I think you get the idea :) -- Good luck!
You want to use Gorm Casper good answer and use it at md size or even look at using #media to show not show different containers with a reverse set up have a look at this Fiddle.
Resize the window to see how it flows.
#media (min-width: 1200px) {
.desktop{display: block; }
.tablet{display: none; }
}
#media (max-width: 1200px) {
.desktop{display: none; }
.tablet{display: block; }
}
I have a sample html page with a list build with semantic ui.
When I try to resize my browser window a list item with bigger description makes the image smaller(screenshot).
ps. I dont have this problem with twitter bootstrap.
up
I didn't change much css just added this to custom.css
.ui.tiny.images img, .ui.tiny.image { width:30px;}
one of the items:
<div class="sixteen wide column ">
<div class="ui divided small list">
<div class="item">
<div class="image">
<img class="ui tiny image " src="examples/images/207664bebf8011e1a9f71231382044a1_7.jpg">
</div>
<div class="content">
<a class="header">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, quod, culpa voluptatem illo cupiditate error in minus eveniet ut impedit? Quo quia inventore assumenda </a>
<span class="ui mini horizontal label">6.12.2014 | Comments: 10</span>
</div>
</div>
</div>
</div>
Thanks!
.img-responsive {
width: 100%;
height: auto;
}
Is how bootstrap handles it. Consider making a similar implementation.
The problem was with the default max-width property.
it used to be max-width: 100%; by default
now I have this:
.ui.tiny.images img, .ui.tiny.image {
width:32px;
max-width: none;
}