As you can see in thew image below, all items have different spacing between them and simply look awful.
This is what I currently have:
Here is the code (it's a mess) after trying tons of different tricks:
http://pastebin.com/D8ekkj6S
I'd be really thankful if someone could tell me how to properly do this correctly.
PS: If possible, I'd love to know how to vertically align the icon and it's corresponding text by the middle point.
Something like this should work for you:
HTML:
<div class="iconing">
<i class="icon-someIcon"></i>
<p>Your text</p>
</div>
CSS:
.iconing i, .iconing p {
display: inline-block;
vertical-align: middle;
}
[class^="icon-"],
[class*=" icon-"] {
width: 50px;
height: 50px;
line-height: 50px;
}
Replace all instances of 50px with your height.
First of all, don't use inline CSS. Try using this CSS instead:
img {
float: left;
clear: both;
margin-right: 10px;
}
p {
line-height: 45px;
}
For the whole example:
http://jsfiddle.net/VMfYa/
You could also set a bigger line height and set the icon as a background with a padding on the text to keep it away from the icon, or have an icon div and a text div, and float them both left beside each other using margin's to align them properly.
give more width to p
check this out fiddle demo
Related
I am completely stuck trying to get a left chevron and a right chevron to display on either side of a date in an h1 tag. I want a user to be able to click on either chevron to move forward or backward one day. However, no matter what combination of div or img classes and position, float, display it still looks like the screenshot attached, even though I've made sure the document is updating.
How can I modify the HTML/CSS so the chevrons are placed on the same line as the date?
<div class= "dater">
<div class="chevron-left">
<img src="glyphicons-225-chevron-left.png"/>
</div>
<h2><%= #todie %></h2>
<div class="chevron-right">
<img src="glyphicons-224-chevron-right.png"/>
</div>
</div>
EDIT: My solution based on Rob's answer.
.chevron-right img {
float: right;
}
.chevron-left img {
float: left;
}
.dater {
margin-left: auto;
margin-right: auto;
width: 100%;
margin-top: 60px;
margin-bottom: 40px;
}
.dater h2 {
text-align: center;
font-weight: 400;
float: left;
}
The reason for your problem is you have the images contained within block level elements which occupy the full width of the browser viewport. Even then it won't work exactly as you wish but there are many ways to accomplish it.
First, you can put the images inside the <h2> to the left and right of the text. That's the easiest way.
Second, you can use the CSS pseudo classes ::before and ::after
You can also set the width of the <h2> and float the everything, images included but the must be set to inline to help this along.
There are more ways than just those.
I'm struggeling a bit with the sharebuttons for social media (Twitter, Facebook, Google+) because the facebook button is a few pixels more down than the other two.
I have the feeling I tried everything in my knowledge, by adding or removing divs, margin, padding etc.
This is the HTML code:
<div class="sharebuttons">
<div class="sharebutton"><div class="fb-share-button " data-layout="button" data-mobile-iframe="false"></div></div>
<div class="sharebutton">Tweet</div>
<div class="sharebutton"><div class="g-plus" data-action="share" data-annotation="none"></div></div>
</div>
And the only CSS code from my part:
.sharebutton{
display:inline;
}
And the result is this:
You need to vertically align them. Since text is on top I suggest apply this css:
.sharebutton {
display: inline-block;
vertical-align: bottom;
}
this way all buttons will flow to bottom of line and align properly keeping text on top.
You can add just float:left and some width looking for your site:
.sharebutton {
display: inline-block;
float: left;
width:auto;
}
.sharebutton {
display: inline-block;
vertical-align: top; // or bottom as per your needs
}
I want to make the button always aligns vertically on the middle of the image responsively. I can make the image responsive using .img-responsive, however I can't make the arrow to be always on the middle of the image. I suspect the issue is because I can't make the height of the arrow's div to be equal the height of the image. Any way to do so?
Here is my jsFiddle..
PS: for those who can come up with better words please change the title.. ^^
CSS only solution. Using the display table and table-cell combo, you can achieve what you are looking for. I had never really tried it before, as far as I know, but searched around a bit and found a solution which gave me a good starting point to achieve what I needed.
The trick is to have a container which will possess the display table property. Inside that wrapper, you will have all your other elements, which will possess the table-cell property, in order to have them behave properly and stack themselves next to each other, as table-cell would to do.
By giving your table-cells a 100% height, they will adapt themselves to the height of the wrapper, giving you the chance to use the handy little table property going by the name: vertical align. Use the middle vertical align property to center perfectly your nav buttons.
Give your image the max-width 100% property for proper responsive behavior. But don't use bootstrap's own image responsive class because it contains css properties we don't want and that messes up our layout.
I reworked the html a bit, so that each element align perfectly, in the correct order.
WORKING EXAMPLE JSFIDDLE
HTML:
<div class="row">
<div class="col-xs-12">
<div class="image-container">
<div class="prev-btn nav-btn"> < </div>
<div class="inner-container">
<img src="http://farm9.staticflickr.com/8072/8346734966_f9cd7d0941_z.jpg" class="center-block">
</div>
<div class="next-btn nav-btn"> > </div>
</div>
</div>
</div>
CSS:
.image-container{
display:table;
height: 100%;
text-align:center;
}
.inner-container{
display:table-cell;
width: 100%;
height: 100%;
padding: 0 15px;
vertical-align: middle;
text-align: center;
}
.inner-container img{
width: 100%;
height: auto;
max-width: 100%;
}
.nav-btn{
font-size:50px;
font-weight:700;
font-family: monospace;
color: #000;
cursor:pointer;
}
.nav-btn:hover{
color: #B6B6B6;
}
.prev-btn{
position: relative;
height: 100%;
display: table-cell;
vertical-align: middle;
}
.next-btn{
position: relative;
height: 100%;
display: table-cell;
vertical-align: middle;
}
Here's a simple solution in Javascript/Jquery. The trick is to adjust the position of each NAV buttons according to the height of the image each time the browser id resized. Dividing the image height by 2 will get you the center of the image, aka the position where you will want your buttons to be. Using only this value will no be enough, you also need to get the center value of your nav buttons. Substracting each values will give you the real position value for your buttons. The ScreenResize function will then update the position each time the image is scaled responsively.
$(function(){
//Call On Resize event on load
screenResize();
//Bind On Resize event to window
window.onresize = screenResize;
});
function screenResize() {
//Adjust Nav buttons position according to image height
$('.nav_btn').css({
'top': (($('.center-block').height() / 2)-($('.nav_btn').height() / 2))
});
}
Also, change the line-height of your buttons to this, it will help:
.nav_btn p{
line-height: 1.25;
}
Finally, use Media-Queries to change buttons font-size and line-height if necessary. Also, like user Valentin said, using images for the nav buttons could also be easier, you wouldn't have to use media-queries.
Example JSFIDDLE
I have been trying to do the following. I have a <div> element
which spans the whole width of its parent div. Inside of this
I would like to place A. some text and B. an image.
A. some text (either loose text or text enclosed in a <p>, <h2>,
or <span>, or <div> element), on the left.
B. an image defined via an <img> element whose both height and width
are known.
Other requirements:
There must be 12px of space between the text and the <img> element.
Important: both the text from A. and the image from B. must be
centered as a group.
The text from A. must be vertically centered in its enclosing space.
How can I achieve this effect? I have tried different things but cannot
manage to place the image to the right of the text and cannot manage to
have the text A. vertically centered.
Anyone know how to solve this simple problem?
Thank you all for your answers, seems CSS makes simple things so hard,
anyways:
div#content_whatsnew, div#content_bestsellers { clear: both; height: 108px; font-size: xx-large; text-transform: uppercase; margin-left: 380px; }
div#content_whatsnew p, div#content_bestsellers p { float: left; height: 108px; line-height: 108px; padding: 8px 12px 0px 0px; color: black; }
div#content_whatsnew img, div#content_bestsellers img { float: left; height: 108px; }
Is this what you are trying to achieve? http://dabblet.com/gist/3130292
Is this about right?
http://jsfiddle.net/89twb/2/
For aligning text, check this out.
And for placing elements next to each other, this.
This should work:
<div class="my-outer-container">
<div class="my-inner-container">
<div class="my-text">Here is my text, it is lovely text.</div>
<img src="my-image.jpg" alt="" class="my-image" />
</div>
</div>
.my-outer-container {
width:auto;
text-align:center;
}
.my-inner-container {
width:XXXpx; /* enter whatever the width you want here is */
margin:0 auto;
overflow:auto;
}
.my-text {
width:XXXpx; /* enter whatever the width you want here is */
float:left;
margin-right:12px;
}
.my-image {
width:XXXpx; /* enter whatever the width you want here is */
height:XXXpx; /* enter whatever the height you want here is */
float:left;
}
Then maybe use the vertical centering tip on the link provided above by #biziclop
The most intuitive way would be using 'vertical-align:middle;' but it often tends not the way you want it to work.
I did some research and found this code from here. http://phrogz.net/css/vertical-align/index.html
Hope this helps!
<style type="text/css">
#myoutercontainer { position:relative }
#myinnercontainer { position:absolute; top:50%; height:10em; margin-top:-5em }
</style>
<div id="myoutercontainer">
<div id="myinnercontainer">
<p>Hey look! I'm vertically centered!</p>
<p>How sweet is this?!</p>
</div>
</div>
In order to center a div, it has to have a fixed width. If it spans the width of its parent div, you can only then center things inside it. So it sounds to me like the best solution would be to place your text in a fixed-width left-floated div, and do the same for your image, and then place those both in a fixed-width holder div, which is centered with margin:auto;
Here's an example: http://dabblet.com/gist/3130148
Edit- I vertically centered the text by placing it in a table. Tables are the only surefire way to vertically center something cross-browser.
I want to do something like this:
.even {
float: left;
text-align: left;
}
.even img {
float: right;
}
It's not working though. I'm hoping my problem is just a syntax one, but I can't see to figure out how to do this. I've dug around google, but I'm having trouble finding the right set of keywords.
The associated html I'd like to use should look something like ths:
<div class="linkBlock even">
<img class="linkThumbnail" src="graphics/links/thumbnail_oilcan.jpg" width="267" height="200"/>
<h2>oilcan press</h2>
<p>
oilcan press is a purveyor of handmade books & word-related artefacts.
if you'd like to commission work of a particular size or shape or theme let him
know via etsy or email: oilcanpress [!at] gmail.com
they will gladly make custom boxes as per your general requests of colors/concepts.
if you are desirous of sevral items a bundle can be arranged at reduced prices.
</p>
<p>
you can view much of his work on flickr.
</p>
</div>
I'd like for the text of that block to float and align left, and the image to float right. With the code I have written above, the image is being centered in the page above the text; it's not floating, it looks like it's still using the static layout.
I'm only a CSS dabbler but I think this should work:
div.even>img {
float: right;
}
This matches child img elements inside a div with class even.
<img> & <p> are both block-level elements and so they line-break unless other wise specified. You need to position the <img> & <p> inside the parent div, instead of trying to position the text on the parent div. You also need to specify a width for the parent div and the <p> tag. This is probably why you are seeing the text appear below the image, because it is defaulting to the width of the parent div and cannot fit side by side with the image even though it is floated. You probably want something like this:
.even {
width: 400px;
display: block; /*or inline-block*/
padding: 10px; /*just for a little visual spacing*/
}
.even img {
position: relative;
display: inline-block;
float: right;
margin-right: 25px;
}
.even p {
display: inline-block;
position: relative;
width: 250px;
float: right;
}
You should also move your <img> tag below your h2 tag as it might interfere with the float. (I'm assuming you want this to appear above the thumbnail and the text.)
Maybe you have a clear attribute defined for the paragraph or some other style sheets? Your code works fine for me.
Use Firebug to debug your css.