I have seen several sites where these social share buttons looks perfectly horizontal aligned. Take in account that many of these buttons are iframes.
Here is my current painful situation:
Change the margin-top on your iframes (or a div element above it) to negative values to have them line up. Use trial-and-error once you identify the correct elemtn until you get it right, for example using the following HTML:
<div id="twitter">
<iframe/>
</div>
<div id="facebook">
<iframe/>
</div>
<div id="digg">
<iframe/>
</div>
The CSS would look something like this:
div#facebook
{
margin-top:-5px;
}
div#digg
{
margin-top:-10px;
}
Related
I'm making a two column Tumblr theme and I need to fix this weird CSS positioning issue I'm having. If you look at the picture provided you can see that there's a gap in between two pictures in the first column. This happens when a picture is smaller than the max-width I guess the rest of the width it just filled with blank space. How can I fix it?
Code:
http://pastebin.com/eY4EsQKH
Picture:
http://i.imgur.com/z8k22cQ.png
jsFiddle:
http://jsfiddle.net/kQVNd
Try this:
1. Divide the content in two columns like this:
<div class="column">
<!-- articles -->
</div>
<div class="column">
<!-- articles -->
</div>
2. Add this CSS:
.column {
display:inline-block;
vertical-align:top;
}
jsFiddle demo.
I have a page something like this
<div id="top">
</div>
<div id="bottom">
</div>
I want an output which displays bottom first then top..
How can i achieve this using CSS ??
If your question means, the following.. "You would want to place div#bottom on top of the other drawn DOM elements below". DOM ordering.
If you want #top and #bottom to be independent DOM elements.
div#top {
width:200px;
height:100px;
background-color:red;
}
div#bottom {
position:absolute;
width:100px;
height:50px;
background-color:blue;
top:10%;
left:4%;
}
The top and left values are values of your choice, the above example places the bottom inside the top.
positioning - Can be used to manipulate the same. You could use fixed element inside a huge encompassing div. But use fixed only if you are sure that the DOM contents is to be shown even on a overflow. 'relative' positioning might as well work when you are working reference is the body or the Root Node class or element.
If you want to control how DOM displays these elements. Then you might have to use javascript with CSS to achieve this. Like say
document.getElementById('bottom').style.display = 'block';
document.getElementById('top').style.display = 'none';
After a timeout
setTimeout(function() {
document.getElementById('top').style.display = 'block';
}, 200);
Since independent div's are not the best way to do this, would rather suggest you to try Something like this
<div id="top_div">
<div id="bottom_div">
</div>
</div>
with the help of "positions" u can achieve this..
The HTML page is rendered from Top to Bottom. Reverse your div tags as in :
<div id="bottom">
</div>
<div id="top">
</div>
unless you have a specific reason not to do so.
Using Position in css it should work o.w try below
<div id="bottom">
</div>
<div style="clear:both;"></div>
<div id="top">
</div>
I really need your help on this one:
Right now I have divs just on top of each other, filled dynamically with diverse contents so the heights are changing.
What I want to do now is to place them in 2 rows. With a fixed width and "float:left" this kinda works already.
My english is not the very best so pls take a look at my example picture first:
As you can see there is this whitespace because of the third div which doesn't start right beneath the first div because of div number 2 which CAN BE higher as the first div.
I now wonder if there is a possibility to automatically position those divs higher so that there is no whitespace (they always should start right beneath the picture which is above wouth the whitespace, left or right).
LIKE THIS:
I hope you kinda understand what I mean :D Thanks in advance for replys!
EDIT:
Code-Example:
<div id="content">
<div class="xyz">BLABLA</div>
<div class="xyz">BLABLA<br>morebla!<br>EVEN MORE BLA</div>
<div class="xyz">BLABLA</div>
</div>
<style>
#content {
width: 648px;
}
.xyz {
width: 303px;
float: left;
border:1px solid black;
}
</style>
Remeber, heights are always different!
jQuery masonry makes your life a lot easier.. don't reinvent the wheel, especially when you're facing a classic css problem.
this will do it...
<div id="content">
<div class="column1" id="left">
<div id="div1">...</div>
<div id="div3">...</div>
</div>
<div class="column2" id="left">
<div id="div2">...</div>
<div id="div4">...</div>
</div>
</div>
Then just style column2 styles by defining widht values in your css.
Thanks,
#leo.
I have a pre-code page coded as follows:
<div id="linearBg">
<div id="wrapper">
<div class="logo"></div>
<div class="navigation"></div>
<div class="video"></div>
<div class="content"></div>
</div>
</div>
Where linearBg is a gradient background, the back board of the website.
Wrapper is the container for the inner div's, and the rest are content oriented.
So I've already implemented this with styles and all sorts, but the thing is I want to add:
<div class="watermark"></div>
Underneath/behind both the content and video div, sort of like a reverse watermark,
I've tried z-indexing but I'm not an expert. Could you guide me on to do make this possible?
http://jsfiddle.net/nEWCP
All I need is to get the watermark behind both the video and content div's.
Something like this?
http://jsfiddle.net/yXTYM/3/
The trick is:
position: relative on the video and content div
position: absolute on the watermark div and no positioning, so that it starts where the previous element (nav) ended
height: 100% on the watermark so that it spans to the bottom of the wrapper
overflow: hidden on the containing div so that the watermark doesn't extend below it
Let me know if this is what you had in mind.
From your description, I don't think that you would even need a new HTML element. If you want a "reverse watermark" as you've described it, it sounds like you want a different background behind the content and video elements. Something different from the gradient.
Really all you need to do is define a class in your CSS that adds the watermark when you need it.
Here's a basic example. The orange color simulates your watermark behind only the video and content.
.watermark { background: url('/path/to/watermark.png'); }
<div id="linearBg">
<div id="wrapper">
<div class="logo"></div>
<div class="navigation"></div>
<div class="video watermark"></div>
<div class="content watermark"></div>
</div>
</div>
http://jsfiddle.net/82saE/
I think I have what you're after - a wrapping element that mirrors the dimensions of linearBg - giving you a gradient background with a repeating image as well.
I'm having a hard time making boxes flow as illustrated in the attached screenshot. Seeing as I'm not even quite sure what this technique is called, it's making googling hard.
The boxes with be generated using jQuery's AJAX implementation if that makes a difference.
UPDATE:
Thanks Jonathan, that's close but it's apparent I haven't described the problem well enough. Each box contains a categoryHeading, and an unknown number of records (bookmarks) related to that heading -- might be two, might be 50.
Let's say I have six bookmark categories (boxes). Since users can enter as many or few bookmarks as they please into each category (which is also unlimited), I really don't know how big any of the boxes will be.
In the newly attached illustration, this is illustrated better, I hope.
I'd prefer not to be stuck with a fixed number of columns, since the container width depends on the screen resolution of the user.. so low resolution might only have room for two columns, while higher resolution/bigger browser width has room for five columns.
I can somehow mimick this using http://welcome.totheinter.net/columnizer-jquery-plugin/, but it's not perfect, and IF there's a strickly CSS way of doing it, that'd be much prefered.
Using the code Jonathan suggested, it would work well if each category contained about the same number of bookmarks and I was ok with using a fixed column layout, but when one category contains 50 bookmarks, while another one only contains three, a lot of space goes to waste.
See: Ole screenshot/illustration
See: New illustration
Nope. If you can't count on the number of columns there is no CSS-only solution (though it looks like there will be in CSS3 - a fun thought). You'll need JS.
It's nothing more than three master columns, with boxes within:
<div class="col1">
<div class="box1">Top Left Box</div>
<div class="box2">Middle Left Box</div>
<div class="box3">Bottom Left Box</div>
</div>
<div class="col2">
<div class="box1">Top Center Box</div>
<div class="box2">Middle Center Box</div>
<div class="box3">Bottom Center Box</div>
</div>
<div class="col3">
<div class="box1">Top Right Box</div>
<div class="box2">Middle Right Box</div>
<div class="box3">Bottom Right Box</div>
</div>
Then it's a matter of giving each box a specific height, and margin-bottom to all.
.col1, .col2, .col3 {
margin:10px 5px;
float:left;
width:100px;
}
.col1 div, .col2 div, .col3 div {
margin-bottom:10px;
}
.col1 .box1 {
height:100px;
}