I'm updating the page for my company site. The footer here: applebees.com works correctly, but I ported the code to my WHMCS template and it's positioning the sitemap incorrectly. Any ideas what's going on? http://applebees.com/clients
<footer class="row1">
<div class="container1">
<div class="row1">
<div class="span2">
<h3>Sitemap</h3>
<ul>
<li>Home</li>
<li>Pricing</li>
</ul>
</div>
<div class="span2">
<br><br>
<ul>
<li>Reseller</li>
<li>Dedicated</li>
<li>Support</li>
</ul>
</div>
<div class="span2">
<br><br>
<ul>
<li>Terms Of Service</li>
<li>Privacy Policy</li>
<!--<li>#</li>-->
</ul>
</div>
<div class="span4">
<h3>Contact</h3>
<address>
<strong>applebees, LLC</strong><br>
San Francisco, CA<br>
Los Angeles, CA<br>
sales#applebees.com<br>
</address>
</div>
</div> <!-- /row -->
</div> <!-- /container -->
</footer>
CSS file for above page here: site/clients/templates/default/css/whmcs.css
The index.html page CSS (can't post hyperlinks): site/assets/css/style.min.css
I'm confused because I ported the code correctly, I think the divs are messing it up somehow?
In your case, the "noise" class gives some height of your div in armorshark.com. When you ported the region, you did not get the "noise" classed div. You can solve the with add the height: attribute on row1 class.
Related
This is very weird. I am getting end closing </p> tag after HTML element like <span> or <strong>. No opening tag.
Below is sample HTML code I write in classic editor
<div class="blck>
<div class="col-1">
<strong>Heading 1</strong>
<ul>
<li>list......</li>
<li>list......</li>
</ul>
</div>
<div class="col-1">
<strong>Heading 2</strong>
<ul>
<li>list......</li>
</ul>
</div>
</div>
And this is the output i get
<div class="blck>
<div class="col-1">
<strong>Heading 1</strong></p>
<ul>
<li>list......</li>
<li>list......</li>
</ul>
</div>
<div class="col-1">
<strong>Heading 2</strong></p>
<ul>
<li>list......</li>
</ul>
</div>
</div>
Note the </p> after </strong>
Same thing is happening for <span> element.
One solution is that I remove the WordPress filter wpautop. But then I have to manually add p tags for paragraphs. Which is very cumbersome problem because we I have lots of content to edit.
Any solution for this ?
You can just add a new line in between those html element
For example
<div class="col-1">
<strong>Heading 1</strong>
<ul>
<li>List here</li>
<li>List here</li>
</ul>
</div>
I have been able to position the icon bar how I want it, with the exception that it displaces the entirety of the page. What is there a class or something I could use to prevent this? Also, I have a footer as you might see, but it is not black as it is from the foundation website that I took the code from (yes I plan on editing this code, I am just in the learning phase right now).
My Code:
<!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>
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1>My Site</h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="active">Right Button Active</li>
<li class="has-dropdown">
Right Button Dropdown
<ul class="dropdown">
<li>First link in dropdown</li>
<li class="active">Active link in dropdown</li>
</ul>
</li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li>Left Nav Button</li>
</ul>
</section>
</nav>
<div class="row">
<div class="large-12 columns">
<h1>Welcome to Foundation</h1>
</div>
</div>
<ul class="off-canvas-list">
<ul class="side-nav">
<div class="icon-bar vertical five-up" role="navigation">
<a class="item">
<img src="../assets/img/images/fi-home.svg" >
<label>Home</label>
</a>
<a class="item">
<img src="../assets/img/images/fi-bookmark.svg" >
<label>Bookmark</label>
</a>
<a class="item">
<img src="../assets/img/images/fi-info.svg" >
<label>Info</label>
</a>
<a class="item">
<img src="../assets/img/images/fi-mail.svg" >
<label>Mail</label>
</a>
<a class="item">
<img src="../assets/img/images/fi-like.svg" >
<label>Like</label>
</a>
</div>
</ul>
</ul>
<div class="zurb-footer-bottom">
<div class="row">
<div class="medium-4 medium-4 push-8 columns">
<ul class="home-social">
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="medium-8 medium-8 pull-4 columns">
<ul class="zurb-links">
<li>About</li>
<li>Blog</li>
<li>News<span class="show-for-medium-up"> & Events</span></li>
<li>Contact</li>
<li>Sitemap</li>
</ul>
<p class="copyright">© 1998–2014 ZURB, Inc. All rights reserved.</p>
</div>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
.zurb-links li{
display:inline;
}
.sideBar{
height:100%;
position:fixed !important; /* added !important just for the snippet to work. not needed for live production..
}
<link href="http://cdn.jsdelivr.net/foundation/5.4.3/css/foundation.css" rel="stylesheet"/>
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1>My Site</h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="active">Right Button Active</li>
<li class="has-dropdown">
Right Button Dropdown
<ul class="dropdown">
<li>First link in dropdown</li>
<li class="active">Active link in dropdown</li>
</ul>
</li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li>Left Nav Button</li>
</ul>
</section>
</nav>
<div class="row ">
<div class="large-12 columns">
<h1>Welcome to Foundation</h1>
</div>
</div>
<div class="row ">
<div class="small-4 medium-2 columns sideBar">
<ul class="side-nav">
<div class="icon-bar vertical five-up" role="navigation"> <a class="item">
<img src="../assets/img/images/fi-home.svg" >
<label>Home</label>
</a>
<a class="item">
<img src="../assets/img/images/fi-bookmark.svg" >
<label>Bookmark</label>
</a>
<a class="item">
<img src="../assets/img/images/fi-info.svg" >
<label>Info</label>
</a>
<a class="item">
<img src="../assets/img/images/fi-mail.svg" >
<label>Mail</label>
</a>
<a class="item">
<img src="../assets/img/images/fi-like.svg" >
<label>Like</label>
</a>
</div>
</ul>
</div>
<div class="small-8 medium-10 small-push-4 medium-push-2 columns">
<p>I have been able to position the icon bar how I want it, with the exception that it displaces the entirety of the page. What is there a class or something I could use to prevent this? Also, I have a footer as you might see, but it is not black as it is from the foundation website that I took the code from (yes I plan on editing this code, I am just in the learning phase right now).I have been able to position the icon bar how I want it, with the exception that it displaces the entirety of the page. What is there a class or something I could use to prevent this? Also, I have a footer as you might see, but it is not black as it is from the foundation website that I took the code from (yes I plan on editing this code, I am just in the learning phase right now).I have been able to position the icon bar how I want it, with the exception that it displaces the entirety of the page. What is there a class or something I could use to prevent this? Also, I have a footer as you might see, but it is not black as it is from the foundation website that I took the code from (yes I plan on editing this code, I am just in the learning phase right now).I have been able to position the icon bar how I want it, with the exception that it displaces the entirety of the page. What is there a class or something I could use to prevent this? Also, I have a footer as you might see, but it is not black as it is from the foundation website that I took the code from (yes I plan on editing this code, I am just in the learning phase right now).I have been able to position the icon bar how I want it, with the exception that it displaces the entirety of the page. What is there a class or something I could use to prevent this? Also, I have a footer as you might see, but it is not black as it is from the foundation website that I took the code from (yes I plan on editing this code, I am just in the learning phase right now).I have been able to position the icon bar how I want it, with the exception that it displaces the entirety of the page. What is there a class or something I could use to prevent this? Also, I have a footer as you might see, but it is not black as it is from the foundation website that I took the code from (yes I plan on editing this code, I am just in the learning phase right now).</p>
<div class="zurb-footer-bottom">
<div class="row">
<div class="medium-4 medium-4 push-8 columns">
<ul class="home-social">
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="medium-8 medium-8 pull-4 columns">
<ul class="zurb-links">
<li>About</li>
<li>Blog</li>
<li>News<span class="show-for-medium-up"> & Events</span></li>
<li>Contact</li>
<li>Sitemap</li>
</ul>
<p class="copyright">© 1998–2014 ZURB, Inc. All rights reserved.</p>
</div>
</div>
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.1/js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
Fiddle.
If you want to fix your side bar in your web page you have to go with position:fixed.
The problem that one faces by doing this is that rest of the columns are relatively positioned -they go under the side-bar or on top of it(including the footer if you span to 100% width).
In the fiddle i gave a span of small-4 and medium-2 columns for side-bar , small-8 and medium-10 small-push-4 medium-2-push columns for content and nested footer in to this.
As the side-bar has position:fixed the content column(position:relative) stacks underneath it so i push the columns based on the span of side-bar.
<div class="row ">
<div class="small-4 medium-2 columns sideBar">
<ul class="side-nav">
....
..
</ul>
</div>
<div class="small-8 medium-10 small-push-4 medium-push-2 columns">
<p>Your content</p>
.....
...
<div class="zurb-footer-bottom">
....
..
</div>
</div>
</div>
I had a similar problem. Here is my solution:
HTML-Code:
<body>
<!-- Header content "top-bar" ... -->
<div class="icon-bar vertical side_fixed hide-for-small-only">
<a class="item">
<label>Menuitem 1</label>
</a>
<a class="item">
<label>Menuitem 2</label>
</a>
<a class="item">
<label>Menuitem 3</label>
</a>
</div>
<div class="admin_content">
<!-- Main-Content "row" "column" ... -->
<!-- footer -->
</div>
<!-- scripts -->
</body>
SCSS-Code: (CSS similar)
#media #{$medium-up} {
.side_fixed {
left: 0;
top: $topbar-height;
bottom: 0;
position: fixed;
width: 8rem;
max-width: 8rem;
overflow-x: hidden;
}
.admin_content {
margin-left: 9rem;
}
}
i am using foundation 5 and copied the html code for the horizontal tab
<ul class="tabs" data-tab>
<li class="tab-title active">Tab 1</li>
<li class="tab-title">Tab 2</li>
<li class="tab-title">Tab 3</li>
<li class="tab-title">Tab 4</li>
</ul>
<div class="tabs-content">
<div class="content active" id="panel2-1">
<p>First panel content goes here...</p>
</div>
<div class="content" id="panel2-2">
<p>Second panel content goes here...</p>
</div>
<div class="content" id="panel2-3">
<p>Third panel content goes here...</p>
</div>
<div class="content" id="panel2-4">
<p>Fourth panel content goes here...</p>
</div>
</div>
now the css is not being applied to the sample code.
Please help me where can i find the css.
thanks.
Foundation 5 tabs have been switched from ul to dl below is the structure the want
<dl class="tabs" data-tab>
<dd class="active">Tab 1</dd>
....
link on git
the docs are outdated
Have you downloaded the essentials package. you should try to download the complete one as the essentials don't have css applied.
nolawi petros' answer is the correct one: they changed the syntax without updating the documentation.
Here is the full syntax (same as the one nolavi linked to, just a bit shorter):
<dl class="tabs" data-tab>
<dd class="active">Tab 1</dd>
<dd>Tab 2</dd>
</dl>
<div class="tabs-content">
<div class="content active" id="panel2-1">
<p>First panel content goes here...</p>
</div>
<div class="content" id="panel2-2">
<p>Second panel content goes here...</p>
</div>
</div>
On the plus side, they fixed deep-linking to an individual tab so the documentation is now correct regarding this. If you want to use deep linking you should include "data-options="deep_linking:true" in the first line, like so:
<dl class="tabs" data-tab data-options="deep_linking:true">
Note that you'll have to call foundation.tab.js for deep linking to work; otherwise tabs seems to work out of the box.
I am using simple css alignment of button on right hand side using pull right at http://www.inboundio.com/services, it is working for first block but it is not for second block. I am not sure what is going wrong, any help ?
You can see the code at the above url, I am also pasting it here too as per SO guidelines
<div class="span12 well">
<ul class="nav nav-list">
<li>
<h3 style="color:#495B67">Heading</h3>
</li>
<li><br>
<p>Sample Text</p><br>
</li>
</ul>
<div class="span8 pull-left">
<strong><b>Your personal consultation will include:</b></strong>
<p style="font-size: 17.5px">
</p><ol>
<li>How your current marketing strategy compares with your competitors</li>
</ol>
<p></p>
</div>
<div class="span4 pull-right">
<button class="btn btn-warning" type="button"><b>Contact Us</b></button>
</div>
because for first block you have set the css value :
.row-fluid [class*="span"]:first-child{margin-left: 0px;}
that only work for first child
do it like .row-fluid .well [class*="span"]{margin-left: 0px;}
There are some structure issues.
Replace the HTML part with the below code.
Explanations:
In previous box you have only two spans, but on second box, you have three spans without a wrap. So I added a wrap div with row-fluid class.
<div class="span12 well">
<div class="row-fluid">
<ul class="nav nav-list">
<li>
<h3 style="color:#495B67">Inbound Marketing Consulting and Analysis</h3>
</li>
<li>
<br>
<p>Request a personalized marketing assessment and receive a
one-on-one consultation that will provide you with quick tips and
valuable insights that will transform your current marketing strategy.
</p>
<br>
</li>
</ul>
</div>
<div class="row-fluid">
<div class="span8 pull-left">
<strong><b>Your personal consultation will include:</b></strong>
<p style="font-size: 17.5px">
</p>
<ol>
<li>How your current marketing strategy compares with your competitors</li>
<li>Full website analysis and opportunities to improve</li>
<li>SEO tips you can immediately implement into your website</li>
<li>How to generate more leads via your website</li>
<li>Blogging, email marketing, and social media strategy</li>
</ol>
<p></p>
</div>
<div class="span4 pull-right">
<button class="btn btn-warning" type="button"><b>Contact Us</b></button>
</div>
</div>
</div>
I have a page developed using twitter bootstrap version 2. I have a row that is divided into span8 and span4. Span8 has some image slider (built with jquery) and span4 has just some links. When the page loads, all the links in the span 4 is displayed first and then when the image loads, the text gets pushed to right. Is there a way to prevent this shift/jump effect?
<div class="row-fluid">
<div class="span8" id="imgDiv">
<!-- Image slider goes here -->
</div>
<div class="span4" id="linksDiv">
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
</ul>
</div>
</div>
I have devised the following solution. Here's a JSFiddle: http://jsfiddle.net/sJq6y/
HTML
<div class="container">
<div class="row-fluid">
<div class="span8">
<div class="imgDiv">
<h1> Image slider goes here </h1>
</div>
</div>
<div class="span4 linksDiv">
<ul>
<li>Link One
</li>
<li>Link Two
</li>
<li>Link Duo
</li>
</ul>
</div>
</div>
</div>
CSS
.linksDiv ul {
list-style:none;
background-color:lightgrey;
width:90px;
height:90px;
padding:10px;
}
.imgDiv h1 {
text-align:center;
color:tomato;
}
Images
Probably due to styling coming from #imgDiv and #linksDiv.
Would this option work for you?
<div class="row-fluid">
<div class="span8">
<div id="imgDiv">
<!-- Image slider goes here -->
</div> <!-- end #imgDiv -->
</div>
<div class="span4">
<div id="linksDiv">
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
</ul>
</div> <!-- end #linksDiv -->
</div>
</div>
Good luck!