I have a section in my rails web application's view page which is nothing but a code that's displaying the facebook like, twitter tweet and other sharing options. The code goes like this:-
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_pinterest_pinit"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-50effbad1fc26ade"></script>
<!-- AddThis Button END -->
I wanted to move this div to center. So my css code for this is like:
.center {
text-align: center;
}
And I then added the <div class="center"> to my code...
But it's node moving everything center. What could be the reason??
Thanks in advance...
try puting a value to the width of your .center! For your convenience you can use a background color to keep your eyes on different div s what difference it makes.
.center {
text-align: center;
width: 70%
/*For the sake of understanding divs sometimes background color helps*/
background-color:#b0e0e6;
}
Related
I have created a Bootstrap carousel, and I am using custom css to define a background image for each of the three slides. For some reason, the background image is not appearing on the first slide, although the background images for slides 2 and 3 are appearing ok. I can't work out what is wrong. I think it may be something to do with the active class being applied just to the first slide?? Here is the HTML and CSS for the first slide, the carousel is called myCarousel, thanks:
HTML:
<!-- class item means item in carousel -->
<div id="slide1" class="item active">
<!--
<img src="http://placehold.it/1200x500">
-->
<h1>HELLO THERE</h1>
<div class="carousel-caption">
<h4>High Quality Domain Names</h4>
<p>Domains that can help your business marketing</p>
</div> <!-- close carousel-caption -->
</div> <!-- close slide1 -->
CSS:
#myCarousel .item { height: 400px; }
<!-- top left is the background position of the image, no repeat because we don't want the background image repeating -->
#slide1 {
background: url('images/carousel_medium_01.jpg') top center no- repeat;
}
Instead of putting your code directly on the <div class="item"> I suggest to make a nested div (replacing the image) and apply a height, width and background-image properties there instead. Like this:
HTML
<div class="carousel-inner" role="listbox">
<div class="item">
<div class="item-custom first"></div>
</div>
<div class="item">
<div class="item-custom second"></div>
</div>
<div class="item active">
<div class="item-custom third"></div>
</div>
</div>
CSS
.item-custom {
height: 100%;
width: 100%;
}
Then for your .first, .second, and .third classes you can add the background-images you want. That should get you going in the right direction. Hope that helps.
The code above is loading the placeholder background image, but it is only visible behind the h1 element due to the lack of the parent #myCarousel div.
The CSS is looking for the parent div on which to apply the explicit height and width.
Try adding the parent div:
<!-- class item means item in carousel -->
<div id="myCarousel">
<div id="slide1" class="item active">
<!--<img src="http://placehold.it/1200x500">-->
<h1>HELLO THERE</h1>
<div class="carousel-caption">
<h4>High Quality Domain Names</h4>
<p>Domains that can help your business marketing</p>
</div> <!-- close carousel-caption -->
</div> <!-- close slide1 -->
</div>
This allows your height/width properties to be applied, and for the background image to display.
Along with crazymatt's suggestion to organize the nested elements a bit more, you can use the background-size and background-position rules to display the image as needed for each individual slide.
jsfiddle example
I have found the solution by ammending the media queries that the site was using. What I had to do was make sure that I had an explicit media query rule to cover all potential screen widths. In the media queries, I specified the background images for the carousel slides. By doing this, I found I always had the background images correctly populated. Previously, for a certain range of screen sizes, I was just letting default CSS define the background images, and this meant the background image for the first slide didn't show. I guess adding media queries for all possible screen sizes meant there was always a "trigger" to populate the background images.
Thanks also to those who offered a reply.
I'm new to designing web pages. I need to create a page that will have 2 sections.
The first section will have a logo on the top left corner. The second section will be in the middle of the page with some content generated by iframes.
I have put 2 div tags on the page: one for the image and another for content like this:
<div class="logo">
<a href="http://somelink.com/">
<img src=someimage.png'/></a>
</div>
<div class="content">
<iframe src="somepage.php></iframe>
</div>
How can I do it?
Than you
Try something like this:
Fiddle: http://jsfiddle.net/bjfxq/
Use CSS to position your elements. To learn more about styling, try this interactive tutorial:
http://www.codecademy.com/courses/css-coding-with-style/0/1
HTML
<div class="logo"><img src='http://www.w3.org/html/logo/downloads/HTML5_Logo_128.png'/></div>
<div id="content"><iframe src="http://www.stackoverflow.com"></iframe></div>
CSS
#content {
text-align:center;
}
There are a million other ways to do this, but your question was basic, so my answer was basic.
CSS
.logo
{
float: left;
}
.content
{
text-align: center;
}
I am trying to adjust the CSS so the "product" and product information is centered and not floated to the left I cannot adjust the HTML as its given via a shortcode thats added into the WP post but maybe I could wrap it in a div?
HTML:
<ul class="products ribbon">
<li class="product last first">
<a href="http://dailybabydeals.co.nz/shop/estella-rose-designs/">
<div class="thumbnail">
<span class="onsale">Sale!</span>
<img width="325" height="325" src="http://dailybabydeals.co.nz/wp-content/uploads/2013/02/Front-Page-325x325.jpg" class="attachment-shop_catalog wp-post-image" alt="Front Page" />
<div class="thumb-shadow"></div>
<strong class="below-thumb">Estella Rose Designs</strong>
</div>
<span class="price"><span class="from">From: </span><del><span class="amount">$25</span></del> <ins><span class="amount">$19.95</span></ins></span>
</a>
<div class="buttons">
Select options</div>
</li></ul>
CSS:
CSS
Okay, let's try this again now that I understand your question better. So you want to center the <ul> element as a whole? That is a lot simpler than what I originally thought you were going for.
To do that, all you need to do is wrap the <ul> element in a span tag that is set to display as an inline-block. Then set the containing element so that its text is centered.
Try this:
<html>
<head>
<style language="text/css">
/*<![CDATA[ */
#test1 {
text-align: center;
}
#test2 {
display: inline-block;
text-align: left;
}
/* ]]> */
</style>
</head>
<body>
<div id="test1">
<span id="test2">
<!-- Place your <ul> element here -->
</span>
</div>
</body>
</html>
how it works
The "test2" element is set to display as an inline-block, which means it displays inline with the text. This means that it can then be affected by properties that manipulate lines of text, such as "text-align".
Setting "text-align" to "center" on the "test1" element makes the inline content -- the "test2" element in this case -- within it become centered on the screen.
The standard way to center a block is to set the "margin-right" and "margin-left" properties to "auto", but that only works for elements that are displayed as blocks and that have a width that is less than 100%.
I would just put it in a div and float it next to another div with nothing in it.
http://www.barelyfitz.com/screencast/html-training/css/positioning/
Like in step 8 in this link.
The reason that it looks like the text "Sale!" is floated to the left is that <img> elements display as inline blocks by default, so the image is on the same line of text as the words "Sale!". A <br /> tag immediately following the text "Sale!" would solve that problem; but you said you can't modify this HTML, right?
Given that restriction, here is how I was able to solve the problem...
Surround the HTML from your example in a <span> tag and assign it a class. I used "test" as my class name".
Then Place this CSS in the head of the HTML document:
<style language="text/css">
/*<![CDATA[ */
.thumbnail img {
display: block;
}
.test {
display: inline-block;
}
.test .price, .test .below-thumb {
display: block;
text-align: center;
}
/* ]]> */
</style>
why it works
The selector for making the image display as a block solves the problem of the missing <br /> tag.
The span tag with which you surrounded the HTML displays as an inline block. This means that it will collapse around its contents, giving you a box within which you can center the text.
Making the items that contain the text display as a block causes them to take a width of 100%, filling the surrounding box
The inclusion of "text-align: center" is what finally makes the text display as centered within its container
As seen below "Share this awesome read: " at the end of the article.
I've tried various CSS changes, but can't get it to align.
http://poachedmag.com/2012/11/01/laneway-festival-singapore-line-up-released/
Add this to your css and try again:
div.share iframe.twitter-share-button { position: relative; top:3px; }
I had the same issue. I ended up putting each in their own div with the style property float:left and for the twitter holder, I added margin-top:3px and that seemed to be enough to make it line up nicely
<div style="float:left">
<!-- FACEBOOK BUTTON -->
</div>
<div style="float:left;margin-top:3px">
<!-- TWITTER BUTTON -->
</div>
<div style="clear:both"></div>
I have a hover solution setup with CSS. However, the hover images don't respect the viewport and therefore end up displaying outside of it. I planned to simply create new classes specifying the offset depending on the location of the image within my design, but since I can't control the resolution the user is using, I was thinking there should be some way to force the hover to display within the viewport. Does anyone have an idea on how I can do this?
I have the following CSS:
.thumbnail:hover {
background-color: transparent;
z-index: 50;
}
.thumbnail span {
position: absolute;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img {
border-width: 0;
padding: 2px;
}
.thumbnail:hover span {
visibility: visible;
top: 0;
left: 70px;
}
To match the following thumbnails with hover:
<li>
<a href="http://www.yahoo.com" class="img thumbnail">
<img src="1_s.jpg" />
<span><img src="1_b.jpg" /></span>
</a>
</li>
<li>
<a href="http://www.google.com" class="img thumbnail">
<img src="2_s.jpg" />
<span><img src="2_b.jpg" /></span>
</a>
</li>
I have a sample page here displaying the behavior:
http://estorkdelivery.com/example/example2.html
Hover over the images at the bottom to see the hover image display outside of the viewport.
Thanks!
Update 2/22/2012 I tested answer #1 below, but it introduced new issues such as the need to change the transparency and the need to have the hover image always display from the top left of the image - both issues I saw no way of modifying with the script options. Anyone have other suggestions or a way to modify the script in answer #1? Also, I should add what I'm looking for as more of the final result is the hover styling of images on istockphoto.com where the images always appear in the same spot to the left or right of the images they are hovering over and not based off the position of the mouse as you hover over the image.
I've created a bespoke plugin for you!
http://jsfiddle.net/adaz/tAECz/
Well, it's pretty basic but I think it meets your criteria. You can activate it in two ways:
1) If you can't be bothered creating thumbnails for every image, you can just simply list your images like this:
<ul id="istockWannabe">
<li>
<img src="imgURL" width="600" height="400" title="Description" />
</li>
<li>
<img src="imgURL" width="600" height="400" title="Description" />
</li>
...
</ul>
2) If you really want to create your own thumbnails, your html should look like this:
<ul id="istockWannabe">
<li>
<span rel="largeImgURL"><img src="thumbURL" /><span class="iStockWannabe_description">Image description</span></span>
</li>
...
</ul>
Either way you choose, you need to include jQuery 1.7+ in your page along with my plugin.
The very last thing you need to do is to activate it, if you're going for the first option, you can just include in your page following code:
<script type="text/javascript">
$(document).ready(function() {
$("#istockWannabe").istockWannabe();
});
</script>
If you're going for the second option, you need to override default settings like this:
<script type="text/javascript">
$(document).ready(function() {
$("#istockWannabe").istockWannabe({ createThumbs: false });
});
</script>
This is more like a prototype so it's quite limited in terms of functionaltiy but you can set some options like:
thumbMaxWidth: 100
thumbMaxHeight: 100
tooltipWidth: 200
tooltipHeight: 150
transitionSpeed: 100
If you like it, I'm happy to spend some time on it and adjust it to suit your needs!
Try the jQuery Tooltip:
Here is an example according to your request:
http://jsfiddle.net/cadence96/3X2eZ/
DOCS
http://docs.jquery.com/Plugins/Tooltip
http://jquery.bassistance.de/tooltip/demo/
Quick instructions:
1) Within the <head> load the css and scripts:
<link href="http://jquery.bassistance.de/tooltip/jquery.tooltip.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://jquery.bassistance.de/tooltip/jquery.tooltip.js" type="text/javascript"></script>
2) Still within the <head> place the execution script:
<script type="text/javascript">
$(document).ready(function() {
$(".your-div").tooltip({
track: true,
delay: 0,
showURL: false,
fade: 250,
bodyHandler: function() {
return $($(this).next().html());
},
showURL: false
});
});
</script>
The class '.my-div' will be used to display the image with the hover event.
The sibling div to '.my-div' must contain the hidden elements to make visible after hovering.
<ul>
<li>
<div class="my-div">
<!-- Here comes the image with the hover event -->
</div>
<div class="active-hover">
<!-- Here comes all the hidden elements I want to display while hovering the PREVIOUS div --><br />
<!-- .active-hover must be set with display:none -->
</div>
</li>
</ul>
That's all!
I've developed a script, in the js you can change the width of the container.
Here is the fiddle:
http://jsfiddle.net/cadence96/GgDqh/
UPDATED, NOW WORKS IN FIDDLE AND IS MORE ADAPTABLE.
UPDATED:
demo : http://so.lucafilosofi.com/make-css-hover-stay-within-viewport
look at the source code
NB: this does not take in consideration cases in which the popup is bigger then the window, in this case you should not only change the offset position but you have to resize the popup to fit the window.
This works. I however solved the problem only for the Y-axis. For the horizontal offset it should be the same. See how it works here.
I set the top to exactly the side of the image * -1, this aligns the image at the bottom if it doesn't fit, change that value to whatever you want. The images are very big and this script is however not gonna be bulletproof. You would have to get the whole visible area to make sure it doesn't cut out on the other side when you re-position it.
The markup hasn't changed, I just added the Jquery:
$(document).ready(function(){
$(".thumbnail > img").mouseenter(function(){
var winSize = $(window).height();
var winScrollTop = $(window).scrollTop();
var linkOffset = $(this).offset().top - winScrollTop + 75;
// 75px is the height of the img. To get the offset().bottom . Get rid of the scroll too.
var imgHover = $(this).next("span");
var imgHoverHeight = parseInt(imgHover.children("img").attr("height"));
var spaceDif = winSize-linkOffset;
if(spaceDif < imgHoverHeight){
imgHover.css("top", -imgHoverHeight+"px");
//it doesn't have to be -imgHoverHeight. Tweak this value to get better results
}
});
$(".thumbnail > img").mouseout(function(){
$("span").css("top", "0");
});
});
Hope it helped!!
Try this one... seems comparatively cool!
<html>
<head>
<title>Hover Test</title>
<style>
li {margin-bottom: 100px;}
.thumbnail{position: relative;z-index: 0;}
.thumbnail:hover{background-color: transparent;z-index: 50;}
.thumbnail div{ /*CSS for enlarged image*/position: absolute;padding: 5px;left: -1000px;border: 1px dashed gray;visibility: hidden;color: black;text-decoration: none;}
.thumbnail div img{ /*CSS for enlarged image*/border-width: 0;padding: 2px;}
.thumbnail:hover div{ /*CSS for enlarged image on hover*/visibility: visible;top: 0;left: 70px; /*position where enlarged image should offset horizontally */}
</style>
</head>
<body>
<li>
<a href="http://www.yahoo.com" class="img thumbnail">
<img src="1_s.jpg">
<div><img src="1_b.jpg"></div>
</a>
</li>
<li>
<a href="http://www.google.com" class="img thumbnail">
<img src="2_s.jpg">
<div><img src="2_b.jpg"></div>
</a>
</li>
<li>
<a href="http://www.apple.com" class="img thumbnail">
<img src="3_s.jpg">
<div><img src="3_b.jpg"></div>
</a>
</li>
<li>
<a href="http://www.babycenter.com" class="img thumbnail">
<img src="4_s.jpg">
<div><img src="4_b.jpg"></div>
</a>
</li>
<li>
<a href="http://www.food.com" class="img thumbnail">
<img src="5_s.jpg">
<div><img src="5_b.jpg"></div>
</a>
</li>
</body>