I am trying to create a css ribbon on this panel of picture. But the ribbon keeps on appearing on the upper right side of the screen.
Here is my HTML Code
<li class="span4">
<div class="thumbnail">
</div>
<img src="img/placeholder-360x200.jpg" alt="product name">
<div class="caption">
<h3>Product name</h3>
<p>
Few attractive words about your product.Few attractive words about your product.
Few attractive words about your product.Few attractive words about your product.
</p>
</div>
<div class="widget-footer">
<p>
Buy now
Read more
</p>
</div>
</div>
The CSS code can be found here.
And a screenshot of what I'm trying to build
try this
http://jsfiddle.net/UBfCE/68/
.ribbon-wrapper{
margin:0 0 0 212px;
position:absolute;
}
Related
Version 3 layout (https://plnkr.co/edit/XDA9EwMAzH4xDSfZaXvS?p=preview)
<div class="container">
<h1>Confirm your details</h1>
<div class="row">
<div class="col-md-12">
<div class="panel">
<h4 class="panel-heading">We need to confirm your current address details and contact information.</h4>
<p class="panel-body">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-right">
<p>
Confirm
</p>
</div>
</div>
</div>
Version 4 layout (https://plnkr.co/edit/LDy00Kk6eVHDq85ZqjgQ?p=preview)
<div class="container">
<h1>Confirm your details</h1>
<div class="row">
<div class="col">
<div class="card">
<div class="card-block">
<h4 class="card-title">We need to confirm your current address details and contact information.</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-right">
<p>
Confirm
</p>
</div>
</div>
</div>
Why doesn't the button have vertical space and how should I add it in Bootstrap v4?
Found the answer:
https://v4-alpha.getbootstrap.com/utilities/spacing/
Basically, they have added notation for adding margins and padding so that you can add differing amounts depending on the size of the screen. For example, I want to add margin ('m') to the top ('t') of the div for small ('-sm') sized screens. I also want it to be the default spacing ('-3'):
<div class="mt-sm-3"> <!-- footer nav -->
<a class="btn btn-primary" href="#">Confirm</a>
</div>
Updated plnker: https://plnkr.co/edit/LDy00Kk6eVHDq85ZqjgQ?p=preview
According to this link "Migrating to v4 - Bootstrap 4" Panels have been dropped, it's the Panel that is providing the pseudo HR and a margin/padding below it.
Because it's now using cards, I'm thinking you've lost that extra css formatting and it's just going to be a case of applying margins around the preceding card.
Be aware: "Avoid margin-top. Vertical margins can collapse, yielding unexpected results." Boostrap Reboot Approach
Please check this HTML template first Clippinghand
My problem is on what we provide's content below. There is first image then posts and next is first post then image like that 6 Element i took. On Computer type devices things are okay but when I'm going to make it responsive for mobile or tab devices it's making problem and the problem is images and content are getting closer i just always want to make them top of the posts I mean i want my images top of the post all of, How could i do that? Is there any trick ? Also How i can Do complete this section with only one custom post ?
Here is an example on image
You can use Column Ordering via Push + Pull which is built into Bootstrap. You'll have to reorder your content to achieve this. Here a good article also.
Basically stack the column content in the opposite order and apply push and pull classes. (*instead of content 1 then content 2, stack content 2, then content 1 inside your col-md-6). See working example and it will be illustrated.
.red {
background: red;
}
.blue {
background: lightblue;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<section id="our-services">
<div class="container">
<div class="row red">
<div class="col-md-6">
<div class="img-one">
<img src="http://placehold.it/350x150" class="img-responsive" alt="">
</div>
</div>
<div class="col-md-6">
<div class="content-one">
<h4>Background Remove</h4>
<em>Price starts from $0.49</em>
<p>This is the most demandable and most used image editing service all over the world for ecommerce product selling. Don’t worry, we make it easy to ensure all your images fit your ecommerce image editing guideline. We resize, crop, remove borders,
and remove image background turning it to pure white, transparent or color background as per your guideline.</p>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row blue">
<div class="col-md-6 col-md-push-6">
<div class="img-two">
<img src="http://placehold.it/350x150" class="img-responsive" alt="">
</div>
</div>
<div class="col-md-6 col-md-pull-6">
<div class="content-two">
<h4>Web-ready Images</h4>
<em>Price starts from $1</em>
<p>For web-shop owners, we introduce our additional delivery of web-ready images. Add the image specifications (like crop size 800×800 px ) and we will deliver web-ready image. We can fulfill the image size requirements for any ecommerce platform
like Amazon, eBay, Shopify, bigcommerce, volusion, squarespace etc.</p>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row red">
<div class="col-md-6">
<div class="img-three">
<img src="http://placehold.it/350x150" class="img-responsive" alt="">
</div>
</div>
<div class="col-md-6">
<div class="content-three">
<h4>Multiple Mask</h4>
<em>Price starts from $2</em>
<p>If you want to separate and modify different parts and features of the same product including its color, shape, and size, Multipath is the service you can take from us. We can deliver images with Alpha Channel, Layer Mask or Only Path.</p>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row blue">
<div class="col-md-6 col-md-push-6">
<div class="img-four">
<img src="http://placehold.it/350x150" class="img-responsive" alt="">
</div>
</div>
<div class="col-md-6 col-md-pull-6">
<div class="content-four">
<h4>COLOR MATCHING</h4>
<em>Price starts from $2</em>
<p>You have many different color variations of the same product but do not want to spend time taking photos of each one of them? No worries! You don’t have to. We can change the color and size of the same product as per your instruction to save
you from investing more of your time and money in taking photos.</p>
</div>
</div>
</div>
</div>
</section>
<!-- End of Our services area -->
Look here: http://jsfiddle.net/mwvfteuq/
In two words, you need to place your divs in the order you want them to appear on the smallest screen. For wider devices you can play with float set to left or right (pull-left and pull-right in bootstrap) to customize elements position in a row. Revoke those properties using media queries for the smallest screen.
For example:
HTML (using bootstrap)
<div class="row">
<div class="col-sm-6 pull-right right">img</div>
<div class="col-sm-6">some stuff</div>
</div>
<div class="row">
<div class="col-sm-6">img</div>
<div class="col-sm-6">some stuff</div>
</div>
CSS
#media (max-width: 768px) {
div.right{
float:none !important;
}
}
Do not forget to use !important to override bootstrap pull-right property
I´m using the 960 css grid files for a web layout and it works great, but for this layout I need to overlap the divs.
And if I have 2 columns side by side I can overlap the left one by setting class="pull_1" on the right one.
<div class="grid_2">
<p>
<img src="../star.jpg" width="236" height="329" style="float:left;">
</p>
</div>
<div class="grid_2 pull_1">
<p>
<img src="../star.jpg" width="236" height="329" style="float:left;">
</p>
</div>
But if I want to overlap upwards? Yes I can set margin-top:-50px; and that will overlap
both to the left and upwards.
<div class="grid_2">
<p>
<img src="../star.jpg" width="236" height="329" style="float:left;">
</p>
</div>
<div class="grid_2 pull_1" style="margin-top:-50px;">
<p>
<img src="../star.jpg" width="236" height="329" style="float:left;">
</p>
</div>
I want to great a layout like this and I just wonder if this is the way to do it or if anybody has some better way to do it?
Thanks!
If you give all of your divs a CSS rule of: position:absolute, you can then set top and left position offsets to create a layout like the one in the photo you posted. Make sure the divs are ordered from back to front if you want the get the layering correct..
Here's a very simple example of what you could do with absolute positioning:
http://jsfiddle.net/ZqRgj/1/
I'm creating a responsive design for my movie portal using Bootstrap 2.
I want to make the image height on a level with the other pictures. When i manually set picture height then it looks beautiful and all pictures are on the level with the other pictures.
But when I open website on tablet, then all the pictures look compressed!
Example 1:
If I remove height from pictures, then pictures are not on the same level with the other and looks bad.
Example 2:
Maybe you have idea how to fix it?
HTML:
<div class="span2 item all">
<div class="picframe img-polaroid">
<span class="overlay">
<span class="info-area">
<a class="img-icon-url" href="/movie"></a>
</span>
<span class="pf_text">
<span class="project-name">Movie Name</span>
<span>Genre</span>
</span>
</span>
<img data-original="pictur.jpg" src="picture.jpg" alt="" class="poster"/>
</div>
</div>
CSS:
.poster {
width:170px;
height:226px;
}
You might use Bootstrap 3 because it's very easy to make responsive image:
Responsive images
<img src="..." class="img-responsive" alt="Responsive image">
Currently working on a site template rebuild in HTML5 and with trying to keep in line with semantic best practices the markup is getting completely bloated with divs for what I would deem non page relevant content. Here's the markup I'm currently working with for a rather large page footer block containing various info panels:
<footer class="container">
<div class="footer-info-panel left">
<div class="contact-details">
<div class="heading">Contact Us</div>
<div class="content"></div>
</div>
<div class="follow-us">
<div class="heading">Follow Us</div>
<div class="content"></div>
</div>
<div class="bookmark">
<div class="heading">Bookmark & Recommend Us</div>
<div class="content"></div>
</div>
</div>
<div class="footer-info-panel right">
<div class="payment-methods">
<div class="heading">Payment Methods</div>
<div class="content"></div>
</div>
<div class="customer-services">
<div class="heading">Customer Services</div>
<div class="content"></div>
</div>
<div class="company-info">
<div class="heading">Company Information</div>
<div class="content"></div>
</div>
</div>
</footer>
So adhering to OOCSS techniques in SASS with minimal stylesheet nesting I can simply define global footer styles as .footer-info-panel .heading { styles here } etc, however should I be using one of the h1-h6 tags, it seems like div overkill yet my interpretation of the the html5 spec would say otherwise as it's not relevant page content?
Straight from the HTML5 spec:
Some site designs have what is sometimes referred to as "fat footers"
— footers that contain a lot of material, including images, links to
other articles, links to pages for sending feedback, special offers...
in some ways, a whole "front page" in the footer.
This fragment shows the bottom of a page on a site with a "fat
footer":
...
<footer>
<nav>
<section>
<h1>Articles</h1>
<p><img src="images/somersaults.jpeg" alt=""> Go to the gym with
our somersaults class! Our teacher Jim takes you through the paces
in this two-part article. <a href="articles/somersaults/1">Part
1</a> · Part 2</p>
<p><img src="images/kindplus.jpeg"> Tired of walking on the edge of
a clif<!-- sic -->? Our guest writer Lara shows you how to bumble
your way through the bars. <a href="articles/kindplus/1">Read
more...</a></p>
<p><img src="images/crisps.jpeg"> The chips are down, now all
that's left is a potato. What can you do with it? Read more...</p>
</section>
<ul>
<li> About us...
<li> Send feedback!
<li> Sitemap
</ul>
</nav>
<p><small>Copyright © 2015 The Snacker —
Terms of Service</small></p>
</footer>
</body>
As Jared you may use the aside or section elements.