I am using the Zurb Foundation framework and am trying to center text.
If I just use the .text-center class:
<h1 class="text-center">My Heading</h1> The text is center.
However, when I place it inside a column, the text is moved slightly to the right:
<div class="row">
<div class="small-2 small-centered columns text-center">
<h1>My Heading</h1>
</div>
</div>
I want to ask what is the correct way of centering the text inside columns?
its should work fine with your code , but if you can provide screenshot to see what do u mean by its move to the right will be nice.
anyway check this solution may work , and the issue could be from additional custom css added if u have one .
CSS :
.row h1 { margin: 0 auto; padding : 0px }
Try this Fiddle
The problem was that the word inside the heading is too long for my mobile device so I added the style property:
word-wrap: break-word;
Not sure if this is the correct way to handle such cases but it is a possible solution.
Related
Foundation 5 provides grid system and I would like to use it to arrange my web page. But the problem is I dont know how to set the height of each column. now it's just as large as the content needs, but it's really ugly.
I've tried the solution Set height with zurb-foundation grid, but it doesnot work. It is a nested grid of 8 columns which is splited into two 6-columns. I just want these two 6-columns to be the same tall but a different background color.
My code is :
<div class="row">
<div class="small-8 columns"> 8
<div class="row" >
<div class="small-6 columns" id="d8">
more and more people want to learn some HTML and CSS.
</div>
<div class="small-6 columns" id="d9">
more and more people want to learn some HTML and CSS. Joining the
designers and programmers are new audiences who need to know
a little bit of code at work (update a content management system
or e-commerce store) and those who want to make their personal
blogs more attractive. Many books teaching HTML and CSS are dry
and only written for those who want to become programmers, which
is why this book takes an entirely new approach. </div>
</div>
</div>
</div>
</div>
and the JS from the link is:
<script>
$(window).load(function()({
//equalize function
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
//call the equalize height function
equalHeight($("div.small-6"));
});
</script>
In fact it is easy to set the height. Finally I use
.div[id]
{
height:85px !important;
}
and it works.
I am using zurb foundation 4 framework. The following test site looks fine on desktop view for me. On desktop view, I have on the left side: large-7 columns (gray content text box); on the right side: i have: large-5 columns (image 1 green and image 2 blue). Please help me with exact code example. On tablet and phone view, I would like to rearrange the order of the div columns to: image 1 green box first, and then below that is gray content text box, and then below that is image 2 blue box. Please help me with exact code example. Thank you so much in advance!
Here is the preview of what I have so far: http://www.endsnore.com/_test1/marketing5.html
Here is an example of what I want to happen on tablet and phone view: http://www.endsnore.com/_test1/images/_delete14.jpg
You can't have that layout without doing some jquery or javascript. There is no built-in css solution or even javascript from Foundation that will do the trick for you.
You can try this solution. First you need to have a layout something like this:
<div class="row">
<div class="small-12 columns show-for-small" id="topContent"></div>
<div class="large-7 small-12 columns panel">1st column</div>
<div class="large-5 small-12 columns panel">
<div id="img1" class="panel">img1</div>
<div id="img2" class="panel">img2</div>
</div>
</div>
And then have this script to move the first image on top:
$(document).foundation();
$(function () {
var wd = $(window).width();
if (wd < 768) {
$("#topContent").append($("#img1").detach());
}
});
Take note that the script only works on load of the page and not when resizing the browser - I don't think you will need it that way anyway. But for whatever reason you do, then just enclose the "width" logic in a resize function, something like:
$(window).resize(function () {
var wd = $(window).width();
if (wd < 768) {
$("#topContent").append($("#img1").detach());
}
});
Just have switched to Foundation 4.
I want to put texture background pattern for body and another texture background for container with all elements. Can't find out how to create this one in proper way.
In pure html+css i would create container element. But in Foundation4 it will have 100% width and overlap body background.
<div class="container">
<div class="row">
...
</div>
<div class="row">
...
</div>
</div>
If i add .row class to container i got desired result, but offensive horizontal scroll adds on mobile.
...
How to build this simple layout in F4?
I could style all .row elements, but it will use personal background for every element, which is undesired.
Take a look at the answer I gave about CSS and background elements here: How to use background images in Foundation
I want the image to be centered next to the text.The amount of text will be different in each box so I can't set the height.As I research people mainly use two ways of vertical centering.Using line-height which I can't use, because I don't have fixed height.Second one is using absolute positioning which I can't use, because left div with image inside will cover the text.If I set padding to text, when image is not there it won't look good.
The best I could think of is to use jQuery to get and set the container height, and then set the margin according to the height.
<div class="container">
<div class="image_holder">
<img src="http://blog.oxforddictionaries.com/wpcms/wp-content/uploads/cat-160x160.jpg" alt="cat" />
</div>
<p>text</p>
</div>
<style type="text/css">
.container {
width:600px;
overflow:hidden; }
.image_holder {
width:100px;
height:100%;
float:left;
background:#eaf0ff; }
p {
width:500px;
float:left; }
</style>
<script>
$('.container').css('height', $('.container').height() );
$('.image_holder').css('margin-top', ( $('.container').height() - $('.image_holder img').height() ) / 2 );
</script>
Is there a way to do it cleanly with pure CSS ?
The best solution I came up with is to absolutely position the picture inside the box and then use javascript to remove padding if there is no image in the box.
I have several values I'm rendering as <li> elements on my template and I want to further this by having them arranged into equal (or near-equal columns) automatically in the template. How can I achieve this?
So far I'm rendering all the values as
<ul>
{% for feature in features %}
<li>{{ feature }}</li>
{% endfor %}
</ul>
What about styling each li with style="float:left; width: {% width %}px;"
All you have to do is calculate the width parameter... eg width = 1000/features.length;
In newer browsers you can achieve this behaviour using CSS:
ul {
-moz-column-count: 2; -moz-column-gap: 12px;
-webkit-column-count: 2; -webkit-column-gap: 12px;
column-count: 2; column-gap: 12px;
}
Unfortunately, IE doesn't play along (as of today). To work around this, I wanted to achieve the same effect using javascript. At first, I tried Columnizer, but that inserts divs into those innocent ul elements, which I didn't like.
So I went to build our own little plugin to do exactly what we need: ColumnizeLists, part of our jQuery extensions library.
Include the following script tag into your page:
<script src="https://github.com/teamaton/jquery-xt/blob/master/columnize-lists/tn.columnizelists.jquery.js"></script>
(or a local copy) and simply call
$('ul').columnizeLists({ useHeights: true })
and you're done :-)
Hope this helps.