This is my first foray into Twitter Bootstrap. Take a look at this template here:
http://twitter.github.com/bootstrap/examples/hero.html
Underneath one of the headings, I'd like to break a long ul into two columns:
*item1 *item4
*item2 *item5
*item3 *item6
It can be two separate <ul>s in the code, it just needs to look like two bulleted columns next to each other.
Can someone recommend a method to me? My problem so far is keeping it responsive to screen size so on narrows screens the two separate lists somewhat stack on each other again.
Thanks!
I would use a fluid grid system inside the span4 div tag. Check out the fluid grid system here...
http://getbootstrap.com/css/#grid
Using this method, the lists will stack on each other again when the screen is small.
Here's an example...
<html>
<head>
<title></title>
<link href="css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="span4">
<h4>Column 1</h4>
<div class="container-fluid">
<div class="row-fluid">
<div class="span6">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div class="span6">
<ul>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>
</div>
</div>
</div>
<div class="span4">
<h4>Column 2</h4>
</div>
<div class="span4">
<h4>Column 3</h4>
</div>
</div>
</div>
</body>
</html>
this should help in case you have one ul an many li's
css
#media (min-width:768px) {
.col2{ width:100%;}
.col2 li{width:49%; float:left;}
}
html(haml)
.box-body
.row-fluid
%ul.col2.clearfix
-#categories.each do |category|
%li
=category.title
Related
I have created a custom alignment of li tags that I want to use in a CSS media query. Here is a JFiddle how it should look:
https://jsfiddle.net/4fwx7rbj/1/
The li are centered in their container and the text is centered with the list images. Now I tried to use this together with a media query:
https://jsfiddle.net/ro7gj60h/
What should happen is, that the .half-width div take 100vw and the list gets aligned like in the first snippet. However this does not really work as expected, could someone help me what I am missing?
Thanks a lot.
Here the HTML for a quick overview:
<div class="container">
<div class="half-width section3">
<div class="half-width-content">
<div class="middle-text">
<h2>A Headline</h2>
<p>
Some paragraph
</p>
<div class="list-div" id="A">
<ul class="items-list" id="list">
<li class="animation-listener">This is a list item</li>
<li class="animation-listener">This is a list item</li>
<li class="animation-listener">This is a list item</li>
<li class="animation-listener">This is a list item</li>
</ul>
</div>
<img class="hand-writing-img" src="https://fakeimg.pl/498x50/?text=this is some image">
</div>
</div>
</div>
</div>
the display flex in class #media (max-width: 768px) and (min-width: 500px)
.list-div {} shrinks the ul
I'm looking to change the background color of a footer. I tried making another div around it which worked but no matter what the background-color didn't budge. I must be overlooking something obvious!
This is what I have right now: http://jsfiddle.net/x5yvm50r/
And the code:
<div class="floatleft">
<h3>Heading</h3>
<ul>
<li>Link 1</li>
<li>Link 1</li>
<li>Link 1</li>
<li>Link 1</li>
</div>
<div class="floatleft">
<h3>Heading</h3>
<img src="http://i.imgur.com/N23RQo5.png">
</div>
<div class="floatleft">
<h3>Heading</h3>
social icons
</div>
<div class="clear"></div>
.floatleft {float: left; margin: 0 20px 0 0; width: 400px;}
.clear {clear:both}
If anyone has any idea, I'd really appreciate pointing me in the right direction! This is more or less what I'm hoping for it to look like eventually
Thanks! :)
Simple, you should wrap the content in a seperate block level element (i.e. div or footer). Here is the updated fiddle, using a block level element with id="wrapper": http://jsfiddle.net/df1zjwmb/1/
<footer id="wrapper">
<div class="floatleft">
<h3>Heading</h3>
<ul>
<li>Link 1
</li>
<li>Link 1
</li>
<li>Link 1
</li>
<li>Link 1
</li>
</div>
<div class="floatleft">
<h3>Heading</h3>
<img src="http://i.imgur.com/N23RQo5.png">
</div>
<div class="floatleft">
<h3>Heading</h3>
social icons
</div>
<div class="clear"></div>
</footer>
And the CSS:
#wrapper {
background-color: green;
}
Clearing floated elements means that elements below the clear will be reset, but does not turn the floated elements into a block itself. To solve the problem requires adding a wrapper div, which creates a block level element that you can apply a background color to. Or you could use something other than floats, like inline blocks.
Here is more information: Advantages of using display:inline-block vs float:left in CSS
Check this fiddle
HTML
<div class="floatleft footcontainer">
<div class="floatleft">
<h3>Heading</h3>
<ul>
<li>Link 1
</li>
<li>Link 1
</li>
<li>Link 1
</li>
<li>Link 1
</li>
</div>
<div class="floatleft">
<h3>Heading</h3>
<img src="http://i.imgur.com/N23RQo5.png">
</div>
<div class="floatleft">
<h3>Heading</h3>
social icons</div>
<div class="clear"></div>
</div>
CSS
.floatleft {
float: left;
margin: 0 20px 0 0;
width: 400px;
}
.clear {
clear:both
}
.footcontainer {
background-color:lightblue;
float:left;
}
I've added a div which holds the 3 divs and gave it the background color and the float property.
Here you go: http://jsfiddle.net/5s4w19zy/
I wrapped the three floated divs in a container div (footer) and then floated them inside of that.
<footer>
<div>
<h3>Heading</h3>
<ul>
<li>Link 1</li>
<li>Link 1</li>
<li>Link 1</li>
<li>Link 1</li>
</ul>
</div>
<div>
<h3>Heading</h3>
<img src="http://i.imgur.com/N23RQo5.png">
</div>
<div>
<h3>Heading</h3>
social icons
</div>
<div class="clear"></div>
</footer>
footer
{
width: 100%;
height: 150px;
background: #f5f5f5;
overflow: hidden;
}
footer div
{
float: left;
display: block;
margin: 0 0 0 0;
width: 33.333333%;
height: 150px;
}
.clear {clear:both}
HTML5 offers semantic markup tags, and since you need a wrapper for your footer (allowing a parent element to have a the background-color property of your choosing), <footer> tag sounds like the way to go:
<footer id="footer">
<div class="floatleft">
<h3>Heading</h3>
<ul>
<li>Link 1</li>
<li>Link 1</li>
<li>Link 1</li>
<li>Link 1</li>
</div>
<div class="floatleft">
<h3>Heading</h3>
<img src="http://i.imgur.com/N23RQo5.png">
</div>
<div class="floatleft">
<h3>Heading</h3>
social icons
</div>
<div class="clear"></div>
</footer>
#footer { background-color:#asYouLikeIt; }
I have used flex box:
check this : http://jsfiddle.net/x5yvm50r/9/
HTML:
<footer>
<section class="left">l</section>
<section class="center">c</section>
<section class="right">r</section>
</footer>
CSS:
footer{
width:100%;
display:flex;
}
footer section{
flex:1;
}
I am using the latest version of Foundation to add an off-canvas navigation menu and add a toggle to the tab-bar. While I have this working with the tab-bar being sticky, the content of the off-canvas menu scrolls with the page. How can I make the content of the menu be sticky such that on any size screen or page vertical scroll position hitting the menu toggle will show the menu content without scroll? My HTML so far is:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation | Welcome</title>
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<div class="off-canvas-wrap" data-offcanvas>
<div class="contain-to-grid sticky">
<nav class="tab-bar top-bar" data-topbar data-options="sticky_on: large">
<section class="left-small">
<a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
</section>
<section class="middle tab-bar-section">
<h1 class="title">Foundation</h1>
</section>
</nav>
</div>
<div class="inner-wrap">
<!-- Off Canvas Menu -->
<aside class="left-off-canvas-menu">
<!-- whatever you want goes here -->
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</aside>
<div class="row">
<div class="large-12 columns">
<h1>Welcome to Foundation</h1>
</div>
</div>
<!-- Content goes here -->
<!-- close the off-canvas menu -->
<a class="exit-off-canvas"></a>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
Make the height of the content 95vh and the overflow-y=scroll. Whenever the content on the right is scrolled, the off-canvas menu is unaffected and remains at the top.
CSS:
.mycontent {
height:95vh;
overflow-y:scroll;
/* fix scrolling on webkit touch devices (iPhone etc) */
-webkit-overflow-scrolling: touch;
}
HTML:
<div class="row mycontent" >
<div class="large-12 columns">
<h1>Welcome to Foundation</h1>
</div>
</div>
Try this in css (Works 100%)
.tab-bar {
position: fixed;
width: 100%;
z-index: 702;
}
I had the same issue, couldn't get it to stick when open. In the end I went with this:
CSS:
.tab-bar {
position: fixed;
z-index: 9999;
width: 100%;
}
Added an inner wrapper for the off canvas menu right after the "<aside>" tag, before the "off-canvas-list" <ul>s.
.inner-canvas-menu-wrapper
{
position: fixed;
top: 0;
overflow-y: hidden;
width: inherit;
padding-top: 2.8125rem; (standard height of the "tab-bar")
}
JS
Changed foundation.offcanvas.js -> settings -> open_method to "overlap"
Now it overlaps, but it at least it is fixed/sticky. You may want to change close_on_click to "true" as well in this setup.
If you are using Foundation 6 it will be fixed by default:
https://foundation.zurb.com/sites/docs/off-canvas.html#sass-reference
I'm having some trouble formatting some text that appears after an ordered list. The text after the list is no longer indented. Why is this happening and how can I fix it?
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<title>Practice Site</title>
<link rel="stylesheet" type="text/css" href="prac_style.css">
</head>
<body>
<h1>Practice Website</h1>
<div id="content">
<div class="post">
<p>
List of things:
<ol>
<li>Item 1
<li>Item 2
<li>Item 3
</ol>
Text after list.
</p>
</div>
</div>
</body>
</html>
And here is my CSS:
body {
margin: 0;
background: #FFEEEB;
font-family: verdana, sans-serif;
font-size: 0.85em;
}
p {
line-height: 1.5em;
text-align: justify;
}
#content {
float: left;
width: 700px;
margin-right: 20px;
}
#content .post {
background: #FFF;
padding: 10px;
margin-bottom: 20px;
border: 2px solid #CCC;
}
#content .post p {
margin: 10px 20px;
}
I believe the reason is that your HTML is not properly formatted. You shouldn't wrap an <ol> list inside a <p> tag. Also, I recommend you close the open <li> tags too.
Try this HTML instead:
<body>
<h1>Practice Website</h1>
<div id="content">
<div class="post">
<p>List of things:</p>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<p>Text after list.</p>
</div>
</div>
</body>
Your problem is that the browser is automatically ending the <p> tag before the <ol>. It's kind of like how you don't end your <li> tags because you know they will be ended automatically.(Which, by the way, is not the proper way of doing it.)
To fix this, just put the 'List of things:' and 'Text after list.' in their own separate <p> tags like this:
<p>List of things:</p>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<p>Text after list.</p>
If you have Chrome our some other browser with 'inspect element', use that and you will see what I mean.
Lists get given padding by default, other elements don't. You either need to apply the same padding to the <p> tag so they line up, or reset the padding and the list-style-position of the <ol>.
Also, don't nest <ol> inside <p>, it's not allowed. And close your <li> tags (</li>). Although I don't think it's required in HTML5, it is best practice.
Try:
<h1>Practice Website</h1>
<div id="content">
<div class="post">
<p>List of things:</p>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<p>Text after list.</p>
</div>
</div>
To reset the list indentation use:
ol {
list-style-position: inside;
padding: 0;
}
You can then control the padding on the parent <div> if you want the whole block indented.
Demo
I have an area on my page #topLeft which has a minimum height set to it.
Within #topLeft I have a section #heroBanners that I wish to anchor to the bottom of #topLeft - using position:absolute; bottom:0;
At first this works fine, however when #topLeft should expand it is not and the heroBanner section simply overlaps the content above it.
I am assuming the problem is called by mixing a min-height with absolute positioned content?
Any ideas how to get round this, code below:
<div id="topLeft">
<div class="linksBox">
<ul>
<li>Item 1</li>
<li>Item2 </li>
<li>Item 3</li>
<li>Item4 </li>
</ul>
</div>
<div id="#heroBanners">
</div>
</div>
#topLeft {margin:0 27px 27px 0; width:478px; min-height:378px; *height:378px; *margin-bottom:22px; position:relative;}
#heroBanners {bottom:0; position:absolute;}
It would be quite easy if you put both blocks or divs in a new div and set its style to {bottom:0; position:absolute;} instead of heroBanners.
<div id="parent">
<div id="topLeft">
<div class="linksBox">
<ul>
<li>Item 1</li>
<li>Item2 </li>
<li>Item 3</li>
<li>Item4 </li>
</ul>
</div>
<div id="#heroBanners">
</div>
</div>
</div>
#topLeft {margin:0 27px 27px 0; width:478px; min-height:378px; *height:378px; *margin-bottom:22px; position:relative;}
#parent {bottom:0; position:absolute;}