I am trying to affix a callout image to the top right of a page, but I do not want it moving once the screen is below a certain width or else it will begin to overlap other page elements. Does anyone know what the best way of going about this is? Thanks!
Standard CSS practises tell us that each element on the page should be encapsulated as a block:
<div style="float:left;">
<div style="float:left;">
<img src="picture.png" />
</div>
</div>
This kind of style allows elelments to stack on top of one another, preventing overlap.
In your case, it sounds like you have a header, and you need a picture fixed in the top right:
<div id="header" style="width:100%;float:left;">
<div style="float:right;">
<img src="picture.png" />
</div>
</div>
<!-- continue stacking elements to build your page -->
<div id="content" style="width:100%;float:left;">
Hey, this stuff works!
</div>
But you also mentioned your page should have a min width, so that when a user tries to contract the width, elements do not overlap horizontally:
<body style="min-width:800px;">
<div id="header" style="width:100%;float:left;">
<div style="float:right;">
<img src="picture.png" />
</div>
</div>
<!-- continue stacking elements to build your page -->
<div id="content" style="width:100%;float:left;">
Hey, this stuff works!
</div>
</body>
Related
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've been using conditional comments as a way to ensure a background image displays correctly in Internet Explorer 8. However, when I do, some of the content (some text and an image) disappears. Furthermore, an image I wanted removed in IE8 still shows up.
EDIT: Here's the URL: http://rbk.tushausweb.com/claria/development (My issue is on the second page, so just click the navigation button on the right.)
Here's a link to what I have so far: http://pastebin.com/agHxJxb0
<div id="introduction2" class="contentContainer" data-role="page" data-prev="index" data-next="introduction3" data-title="Introduction" data-url="introduction2">
<div role="main" class="ui-content">
<!--[if IE 8]>
<link href="css/clariaIE8.css" rel="stylesheet">
<div id="bg">
<img alt="" src="image/bubble.png" />
</div>
<![endif]-->
<div class="background">
<div class="container banner">
<div class="widthContainer">
<div id="banner" class="info-banner">
<p id="smBannerTitle" class="info"></p>
<h1 id="lgBannerTitle"></h1>
</div>
</div>
</div><!-- /.container -->
</div>
<div class="widthContainer">
<div class="contentBody contentBodyWithBanner">
<div class="container media">
<div id="imgIntro2">
<img src="image/Homechoice-Claria-Unit-250-million-exchanges-and-counting-427x188.png" class="img-responsive"/>
</div>
</div>
<div id="pageContent1" class="container"></div>
</div>
</div>
</div>
</div>
A screenshot:
What it should look like:
Is there a way to ensure that using conditional comments doesn't remove content?
It's hard to tell without a demo, but it looks like your IE workaround is using an <img> tag to display the background. If that's the case, you may have a conflict in the z-indices and the content may be on the page but behind the background. Try setting z-index: -1 to the false background image as a first step in debugging.
I've got a div wrapped in another div and this div has to show up when hovered on the image. But the thing is that when an image is placed (img src) in that div container the div won't show anymore on hover.. I don't know how to fix this, and I don't understand why it does work for the other div.
This is my html code:
<!--- START [01] --->
<div class="f1">
<img src="http://d3gtl9l2a4fn1j.cloudfront.net/t/p/original/zdc1F5znCaBRZaqqDdwFakWUltE.jpg" width="139" height="200">
<div class="f2"><b>Khumba</b><span class="yr"><b>(2013)</b></span>
<br /> <span class="moreinfo">Watch trailer // more info</span>
</div>
<div class="f3">
<div class="half"></div>
</div>
</div>
<!--- END [01] --->
Here's the fiddle: http://jsfiddle.net/ffXX9/
(the heart icon won't show up on hover when an image is placed in that div..)
You need to reposition the div
EXAMPLE http://jsfiddle.net/ffXX9/2/
<div class="f1">
<div class="f3" title="bla">
<div class="half"></div>
</div>
<img src="http://d3gtl9l2a4fn1j.cloudfront.net/t/p/original/zdc1F5znCaBRZaqqDdwFakWUltE.jpg" width="139" height="200">
<div class="f2">PPPOOOOPPP <span class="yr">(YEAR)</span>
</div>
</div>
Related to my earlier question
I would like to be able to align the pull-right div to the bottom of a div.
I have the following markup:
<div class="container">
<div class="container">
<div class="footer-images">
<img src="img1">
<div class="pull-right">
<img src="img2">
<img src="img3">
</div>
</div>
</div>
<div class="container">
<div class="copyright">
<p>© Some Company YYYY</p>
</div>
</div>
</div>
I can't figure out how to get the pull-right (or other div classes) to align to the bottom of the footer-images div class.
If I understand the question right. You just have to make sure you float the elements inside it (the tags). But it will only be aligned from the top if you have different image sizes.
Would be much more easier to give you advice if you can show us an image of what you want to do and what does it look like as of now. (Would be better if you also show the css)
I'm having trouble finding a solution to my issue.
I'm working in the footer of a page. From left to right in a single row, there's a disclaimer div, then a parent div containing a FaceBook and a Twitter button.
(Blue ~ disclaimer div, pink ~ parent div, red ~ the twitter button's color; the facebook button does not have a separate color).
The goal is for the Twitter button to always be on the right of the FaceBook button.
The disclaimer div is set up be a minimum size (the page is using Twitter Bootstrap), so when it is resized small enough the parent div of the buttons is moved to the next line below the disclaimer div.
The issue I'm running into is that when this button-parent div moves down, the Twitter button pops out of the parent div and is laid out below the FaceBook button in a column.
The code for the footer itself:
<div class="container">
<div id="footer" class="row">
<div class="span9 footer-leftspan">
<xsl:copy-of select="data/footer-content/entry/content" />
</div>
<div class="row">
<div class="span3 social-media-footer">
<div id='face' class="span1">
<!-- FaceBook Button -->
<a class="button-link" href="http://www.facebook.com/pages/...." target="_blank">
<img id="fb-btn" class="social-img" src="/f.svg" alt="...." />
</a>
</div>
<!-- Twitter Button -->
<div id='twitt' class="span1">
<a class="button-link" href="https://twitter.com/...." target="_blank">
<img id="twitt-btn" class="social-img" src="/t.svg" alt="...." />
</a>
</div>
</div>
</div>
</div>
</div>
Aside from the arbitrary coloring, there are no specific CSS rules on the buttons or their parent div.
I really have no idea on this one, and the only seemingly viable solutions I can find involve position the buttons with absolute or fixed, neither of which keep them in their parent in the footer how I'd like.
My primary goal that I'd like help accomplishing is just getting the Twitter button to stay in the parent div on resize.
Any ideas? And thanks ahead of time!
See if this will work for you:
http://jsfiddle.net/panchroma/yX4ZV/
I have edited your HTML a little so that the twitter and facebook icons are in the same span instead of seperate spans in a nested grid. Doing this solved the question for desktop and smartphone window sizes, but not for tablets.
To solve for tablets I wrapped the two icons in a class which I force to have a min-width:
HTML
<div class="container">
<div id="footer" class="row">
<div class="span9 footer-leftspan">
<xsl:copy-of select="data/footer-content/entry/content" />
</div> <!-- close span9 -->
<div class="span3 social-media-footer">
<div class="social-wrapper">
<!-- FaceBook Button -->
<a class="button-link" href="http://www.facebook.com/pages/...." target="_blank">
<img id="fb-btn" class="social-img" src="https://dl.dropbox.com/u/2665617/bootstrap/images/facebook.jpg" alt="...." />
</a>
<!-- Twitter Button -->
<a class="button-link" href="https://twitter.com/...." target="_blank">
<img id="twitt-btn" class="social-img" src="https://dl.dropbox.com/u/2665617/bootstrap/images/twitter.jpg" alt="...." />
</a>
</div><!-- close social-wrapper -->
</div> <!-- close span3 -->
</div> <!-- close row -->
</div><!-- close container -->
CSS
.social-wrapper{
min-width:185px !important; /* adjust as necessary depending on icon sizes */
}
Good luck!