When trying to put my HTML into a grid format the elements do not change to the correct postion set and do not move at all and was wondering if there was any fix to this. I am using firefox and am using an server to edit the code and host the website. As well as this it comes up with a cautio that grid-template-area: is an unknown propiety if this makes any diffrence.
.diaryNav {
grid-area: diaryNav;
margin-left: 0px;
background-color: #3F3F3F;
padding: 30px;
margin-left: 35px;
margin-right: 880px;
}
.banner {
grid-area: banner;
}
.timeTable {
grid-area: timeTable;
margin-left: 0px;
}
.diaryEntry {
grid-area: diaryEntry;
}
.extraWork {
background-color: #66fcf1;
color: black;
margin-left: 0px;
grid-area: extraWork;
}
.refrences {
grid-area: refrences;
margin-left: 0px;
}
.pageNav {
gridArea: pageNav;
margin-left: 0px;
}
#wrapper {
display: grid;
grid-gap: 0;
grid-template-areas: "banner" "timeTable" "pageNav" "diaryNav" "diaryEntry" "extraWork" "refrences" "footer";
}
<!doctype html><!--HTML5 doctype declaration -->
<html lang="en">
<!--default language of the document content -->
<head>
<meta charset="utf-8">
<!--character encoding for the document (Unicode) -->
<title>Brandon's Learning Journal</title>
<!--web page title -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/normalize.css" rel="normal">
<link href="css/stylesheet.css" rel="stylesheet /">
</head>
<body>
<!--Markup all web page content inside the 'body' tags -->
<div id="wrapper">
<a id="top"></a>
<!--The 'wrapper' contains all the page content-->
<header class=banner>
<!--The main heading for the page -->
<h1>Welcome to my Learning journal</h1>
<h2>
Feel free to look around and check out the other pages avaliable
</h2>
</header>
<aside class=pageNav>
<nav class="menu">
<!--The primary navigation for the page -->
<ul>
<li>Learning Journal</li>
<li>Tutorial</li>
<li>Contact me</li>
</ul>
</nav>
</aside>
<main>
<!--The main page content -->
<aside class=timeTable>
<h2>Weekly Posts</h2>
<table class=dates border="1">
<tr>
<th>Day/time</th>
<th>Monday</th>
<th>Tuesday</th>
</tr>
<tr>
<td>9-10am</td>
<td></td>
<td>CI435 lecture</td>
</tr>
<tr>
<td>10-11am</td>
<td>CI401 lecture</td>
<td>CI435 lab </td>
</tr>
</table>
</aside>
<aside class=diaryNav>
<p class=menu>Go to week one</p>
<p class=menu>Go to week two</p>
<p class=menu>Go to week three</p>
<p class=menu>Go to week four</p>
</aside>
<article class=diaryEntry>
<diary>
<ul>
<li>
<a id="w1"></a>
<h3>Week 1: ...</h3>
<p>Hello </p>
<figure>
<img src="images/ssww1.png" alt=" " />
<figcaption>Week 1 of the website<br />
<small>Screenshot Brandon Bridges</small>
</figcaption>
</figure>
<p>I learned to:</p>
<ol>
<li>a</li>
<li>b</li>
</ol>
</li>
<li>
<a id="w2"></a>
<h3>Week 2: ...</h3>
<p>Hello </p>
<p>I learned to:</p>
<ol>
<li>a</li>
<li>b</li>
</ol>
</li>
<li>
<a id="w3"></a>
<h3>Week 3: ...</h3>
<p>Hello </p>
<p>I learned to:</p>
<ol>
<li>a</li>
<li>b</li>
</ol>
</li>
</ul>
</diary>
</article>
<aside class=extraWork>
<h2>My own work outside of lessons</h2>
<p>Some reference here to my own reading and research, explaining what I have done and what I have learned from it.</p>
</aside>
<aside class=refrences>
<h2>References</h2>
<ol>
<li>
<blockquote>helo???</blockquote>
</li>
<li>...</li>
</ol>
<p class=menu>Go to top</p>
</aside>
</main>
<!--Close main page content -->
<footer>
<!--Footer content -->
<small>© 2019, author.</small>
</footer>
</div>
<!--Close 'wrapper' div -->
</body>
<!--Close 'body' -->
</html>
<!--Close 'html' -->
After fixing what #s.kuznetsov has described you should mind adding a class or an id to you main tag and then apply this css to it instead of the wrapper or however you prefer
#main{
display: grid;
grid-gap: 0;
grid-template-areas: "timeTable diaryNav"
"diaryEntry extraWork"
"refrences refrences"
}
When using grid-area and grid-template-areas you are implicitly arranging your content in a table-like form, so you specify which area goes into which cell.
The first thing I can notice is that you have the doctype in lowercase, change it to , the next is the normalize, the rel says "normal" which is wrong because it is a css file and it should say "stylesheet". The next thing that is the problem is that it says in the stylesheet.css file in the rel it says "stylesheet /", remove the space and the /. With that it should work
The problem with your code is the missing double quotes when declaring the class in html elements. You pointed out as:
<aside class=diaryNav>
Correct like this:
<aside class="diaryNav">
And you have many items with this error!
Also, there is one error in the css, when specifying rule grid-area: pageNav to .pageNav. You indicated like this:
gridArea: pageNav;
Correct like this:
grid-area: pageNav;
And write doctype in uppercase. Like this:
<!DOCTYPE html>
.diaryNav {
grid-area: diaryNav;
margin-left: 0px;
background-color: #3F3F3F;
padding: 30px;
margin-left: 35px;
margin-right: 880px;
}
.banner {
grid-area: banner;
}
.timeTable {
grid-area: timeTable;
margin-left: 0px;
}
.diaryEntry {
grid-area: diaryEntry;
}
.extraWork {
background-color: #66fcf1;
color: black;
margin-left: 0px;
grid-area: extraWork;
}
.refrences {
grid-area: refrences;
margin-left: 0px;
}
.pageNav {
grid-area: pageNav;
margin-left: 0px;
}
#wrapper {
display: grid;
grid-gap: 0;
grid-template-areas: "banner" "timeTable" "pageNav" "diaryNav" "diaryEntry" "extraWork" "refrences" "footer";
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Brandon's Learning Journal</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/normalize.css" rel="normal">
<link href="css/stylesheet.css" rel="stylesheet /">
</head>
<body>
<div id="wrapper">
<a id="top"></a>
<header class="banner">
<h1>Welcome to my Learning journal</h1>
<h2>
Feel free to look around and check out the other pages avaliable
</h2>
</header>
<aside class="pageNav">
<nav class="menu">
<ul>
<li>Learning Journal</li>
<li>Tutorial</li>
<li>Contact me</li>
</ul>
</nav>
</aside>
<main>
<aside class="timeTable">
<h2>Weekly Posts</h2>
<table class="dates" border="1">
<tr>
<th>Day/time</th>
<th>Monday</th>
<th>Tuesday</th>
</tr>
<tr>
<td>9-10am</td>
<td></td>
<td>CI435 lecture</td>
</tr>
<tr>
<td>10-11am</td>
<td>CI401 lecture</td>
<td>CI435 lab </td>
</tr>
</table>
</aside>
<aside class="diaryNav">
<p class="menu">Go to week one</p>
<p class="menu">Go to week two</p>
<p class="menu">Go to week three</p>
<p class="menu">Go to week four</p>
</aside>
<article class="diaryEntry">
<diary>
<ul>
<li>
<a id="w1"></a>
<h3>Week 1: ...</h3>
<p>Hello </p>
<figure>
<img src="images/ssww1.png" alt=" " />
<figcaption>Week 1 of the website<br />
<small>Screenshot Brandon Bridges</small>
</figcaption>
</figure>
<p>I learned to:</p>
<ol>
<li>a</li>
<li>b</li>
</ol>
</li>
<li>
<a id="w2"></a>
<h3>Week 2: ...</h3>
<p>Hello </p>
<p>I learned to:</p>
<ol>
<li>a</li>
<li>b</li>
</ol>
</li>
<li>
<a id="w3"></a>
<h3>Week 3: ...</h3>
<p>Hello </p>
<p>I learned to:</p>
<ol>
<li>a</li>
<li>b</li>
</ol>
</li>
</ul>
</diary>
</article>
<aside class="extraWork">
<h2>My own work outside of lessons</h2>
<p>Some reference here to my own reading and research, explaining what I have done and what I have learned from it.</p>
</aside>
<aside class="refrences">
<h2>References</h2>
<ol>
<li>
<blockquote>helo???</blockquote>
</li>
<li>...</li>
</ol>
<p class="menu">Go to top</p>
</aside>
</main>
<footer>
<small>© 2019, author.</small>
</footer>
</div>
</body>
</html>
Related
The content from my html document is overlapping my navbar.
I have tried to add margins to my .main-nav in css but it did not work.
The example code has "Hello World" on top of my nav bar. I want to have a new section that starts right below the main navbar without using
.main-nav{
float:right;
list-style: none;
margin-top: 25px;
margin-bottom: 50px;
}
.main-nav li{
display: inline-block;
margin-left: 15px;
}
.section-test{
margin-top: 200px;
}
<body>
<nav>
<div class="row">
<img src="{% static 'resources/img/logo-transparent.png' %}" class="logo" alt=" Logo">
<ul class="main-nav">
<li>About</li>
<li>Log In</li>
<li>Get a Demo</li>
</ul>
</div>
</nav>
<section class="section-test">
<h3>hello world</h3>
</section>
</body>
use clear:both; on section-test class
/* Styles go here */
.main-nav{
float:right;
list-style: none;
margin-top: 25px;
margin-bottom: 50px;
}
.main-nav li{
display: inline-block;
margin-left: 15px;
}
.section-test{
clear: both;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<nav>
<div class="row">
<img src="{% static 'resources/img/logo-transparent.png' %}" class="logo" alt=" Logo">
<ul class="main-nav">
<li>About</li>
<li>Log In</li>
<li>Get a Demo</li>
</ul>
</div>
</nav>
<section class="section-test">
<h3>hello world</h3>
</section>
</body>
</html>
As you are using float: right on your nav element, it is out of the flow. What that means is that the nav parent doesn't takes it's height into account.
You have multiple solutions here. The first one is to apply an overflow:hidden to the nav element to force it to grow, to use a clear element as mentioned by Punith Jain, or simplify your markup and get rid of the floating with the usage of flexbox!
.row {
display: flex;
}
.main-nav{
text-align: right;
flex: 1;
}
.main-nav li{
display: inline-block;
margin-left: 15px;
}
<nav>
<div class="row">
<img src="{% static 'resources/img/logo-transparent.png' %}" class="logo" alt=" Logo">
<ul class="main-nav">
<li>About</li>
<li>Log In</li>
<li>Get a Demo</li>
</ul>
</div>
</nav>
<section>
<h3>hello world</h3>
</section>
I have an app that I am trying to build that uses three-columns. Currently, I have the following code:
<html>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/css/foundation.min.css">
<style type="text/css">
.app {
height: 100%;
width: 100%;
position: relative;
overflow: hidden;
}
.app-col {
height: 100%;
}
.fullwidth {
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
max-width: initial;
}
</style>
<meta class="foundation-data-attribute-namespace">
<meta class="foundation-mq-xxlarge">
<meta class="foundation-mq-xlarge-only">
<meta class="foundation-mq-xlarge">
<meta class="foundation-mq-large-only">
<meta class="foundation-mq-large">
<meta class="foundation-mq-medium-only">
<meta class="foundation-mq-medium">
<meta class="foundation-mq-small-only">
<meta class="foundation-mq-small">
</head>
<body>
<div class="app">
<div class="row fullwidth" data-equalizer="">
<div style="width:33%; height:100%;">
<div class="row" data-equalizer="">
<div class="large-6 columns" style="background-color:#467EAF;">
<h3>Hello</h3>
<nav>
<ul style="list-style: none;">
<li><a href="/what/we-do" style="color:white;">
<h4><i class="icon-google-plus"></i>Welcome</h4></a>
</li>
<li><a href="/about" style="color:white;">
<h4><i class="icon-google-plus"></i>About Us</h4></a>
</li>
</ul>
</nav>
<ul class="inline-list text-center pull-bottom">
<li>Google Plus</li>
<li>LinkedIn</li>
<li>Email Us</li>
</ul>
</div>
<div class="large-6 columns" style="background-color:#829EBF;">
<h3>ABOUT</h3>
<nav>
<ul style="list-style: none;">
<li>Overview</li>
</ul>
</nav>
</div>
</div>
</div>
<div style="width:67%;">
Content
<ul class="inline-list text-center pull-bottom">
<li>©2015 Goes Here</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/js/foundation.min.js"></script>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js" gapi_processed="true"></script>
</body></html>
My problem is, my columns are not taking up the full-height of the screen. I thought that was the purpose of the data-equalizer attribute. Unfortunately, it looks like I was wrong. What am I doing wrong?
I've been using vh units to get this to work:
div.full-height {
min-height:100vh;
}
For our particular project it meets our requirements, which you can check for your project at Can I Use
According to the foundation docs you're supposed to use data-equalizer on the parent and then data-equalizer-watch on all the children. http://foundation.zurb.com/docs/components/equalizer.html
<div class="row" data-equalizer>
<div class="large-6 columns panel" data-equalizer-watch>
...
</div>
<div class="large-6 columns panel" data-equalizer-watch>
...
</div>
</div>
And then don't forget to add $(document).foundation();
Edit
I misunderstood what you wanted initially. Basically you need to add several css rules of height: 100%; so that both the parents and children can expand to 100% of the screen height.
Here is an updated JSfiddle: http://jsfiddle.net/NateW/e4uqw4yq/
I am trying to flush my footer to the bottom of the page. I have tried the official bootstrap method listed on http://getbootstrap.com/2.3.2/examples/sticky-footer.html which only seems to work on pages that have some amount of content. On pages with a short amount of content, it actually pushes the footer past the bottom of the page and creates scroll bars.
Sorry if the post if done badly. Ive never posted here before and it took me a while to figure it out.
Picture 1 shows the main body and there is no visible footer as it is past the bottom of the page.
<link rel="stylesheet" href="css/bootstrap.css" >
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/camera.css">
<link rel="stylesheet" href="fonts/font-awesome.css">
<link rel="stylesheet" href="css/easy-responsive-tabs.css">
<!--JS-->
<script src="js/jquery.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/superfish.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.mobilemenu.js"></script>
<script src="js/jquery.ui.totop.js"></script>
<script src="js/jquery.equalheights.js"></script>
<script src="js/camera.js"></script>
<script>
$(document).ready(function(){
jQuery('.camera_wrap').camera();
});
</script>
<!--[if (gt IE 9)|!(IE)]><!-->
<script src="js/jquery.mobile.customized.min.js"></script>
<!--<![endif]-->
<!--[if lt IE 9]>
<div style='text-align:center'><img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." /></div>
<![endif]-->
<!--[if lt IE 9]><script src="../docs-assets/js/ie8-responsive-file-warning.js"></script><! [endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="wrap">
<!--header-->
<header>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4">
<h1 class="navbar-brand navbar-brand_"><span>Smile Hawthorn</span></h1>
</div>
<div class="col-lg-8 col-md-8 col-sm-8 follow-box">
<div class="box2">
<ul>
<li><a href="#" target="new"><button type="button" class="btn btn-book btn-lg">
<span class="fa fa-calendar-header">BOOK ONLINE</button></a></li>
</ul>
<p class="tel"><span class="fa fa-phone-header"></span></p>
</div>
<div class="box1">
<p>Please click <strong>Book Online</strong> or <strong>Call</strong> our clinic for an appointment. </p>
</div>
</div>
</div>
<div class="menu-box">
<nav class="navbar navbar-default navbar-static-top tm_navbar clearfix" role="navigation">
<ul class="nav sf-menu clearfix">
<li>Home</li>
<li class="active sub-menu">About Us<span></span>
<ul class="submenu">
<li>Our Staff</li>
<li>Our Values</li>
<li>Our Technology</li>
</ul>
</li>
<li class="sub-menu">Services<span></span>
<ul class="submenu">
<li>Emergency</li>
<li>Fillings<span></span>
<ul class="submenu">
<li>Composite</li>
<li>CEREC</li>
<li>Amalgam</li>
</ul>
</li>
<li>Crowns/Caps</li>
<li>Root Canal</li>
<li>Whitening</li>
<li>Wisdom Tooth Removal</li>
<li>Veneers/Bonding</li>
<li>Orthodontics</li>
</ul>
</li>
<li>F.A.Q</li>
<li>Pricing</li>
<li>Location</li>
</ul>
</nav>
</div>
</div>
</header>
<!-- Content -->
<div class="global indent">
<div class="container">
<div class="row clearfix">
<div class="col-lg-3 col-md-3 col-sm-2 banner-box2">
<div>
<p class="title" align="center"><span>About Us</span></p><p> </p>
<p class="description" align="center">Our Staff</p>
<p class="description" align="center">Our Values</p>
<p class="description" align="center">Our Technology</p>
</div>
</div>
<div class="col-lg-9 col-md-9 col-sm-10 banner-box2">
<div>
<p class="title">Lorem ipsum dolor sit amet <br>
conse ctetur adipisicing elit, sed <br>
do eiusmod tempor incididunt ut <br>
labore et dolore magn</p>
<p> </p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--</div> <!-- end wrap-->
<div id="push"></div>-->
<div id="footer"><!--footer-->
<div class="container">
<div class="row clearfix">
<div class="col-lg-4 col-md-4 col-sm-4"><!-- First Row First Coloumn -->
<p class="text" align="left"><span class="fa fa-home-footer"></span><span class="footer_txt"> testing 123</span></p>
</div>
<div class="col-lg-4 col-md-4 col-sm-4"><!-- First Row First Coloumn -->
<p class="text" align="center"><span class="fa fa-phone-footer"></span><span class="footer_txt"> testing 123</span></p>
</div>
<div class="col-lg-4 col-md-4 col-sm-4"><!-- First Row First Coloumn -->
<div class="col-xs-10 col-sm-8 col-md-8 col-lg-10"> <!-- nested 2 coloumn in First Row -->
<p class="text" align="right"> <span class="fa fa-envelope-footer"></span><span class="footer_txt"><span style="color: #000;"> Email Us</span></span></p>
</div>
</div>
<hr>
<div class="row clearfix">
<div class="col-md-12 column"> <!-- second row -->
</div>
</div>
</div>
</div>
</div><!-- end footer Div -->
<script src="js/bootstrap.min.js"></script>
<script src="js/tm-scripts.js"></script>
</body>
</html>
i used the following CSS
body {
line-height: 1.42857;
font-family: 'Roboto', "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
height: 100%;
background-color: #ffffff;
font-weight: bold;
}
html{
height: 100%;
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by it's height */
margin: 0 auto -100px;
}
#push{ /* height must be the same as #footer height */
height: 100px;
}
#footer {
background-color: #FFFFFF;
padding-top: 40px;
padding-right: 0;
padding-left: 0;
background-position: top;
left: 0px;
bottom: 0px;
height: 100px;
background-image: url(../img/footer.jpg);
background-repeat: repeat;
}
The easiest way I know of to push down the footer in all cases is the following:
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
margin-bottom: -100px;
padding-bottom: 100px;
}
footer {
height: 100px;
}
Demo here
I have added relevant HTML and CSS
I set margin of header to 0 auto but there is still a white space between header and section. How come?
And what is the exact difference between setting margin like 0 5 and 15px?
This is the CSS code:
header{
text-align:center;
background:blue;
margin: 0 auto;
}
h1,h2{
color:black;
}
nav a{
color:#fff;
}
section{
background:orange;
}
Html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jack Yuan | Web Developer</title>
<link rel="stylesheet" href="TreeHouse/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="TreeHouse/main.css">
</head>
<body>
<header>
<a href="First.html" id="logo">
<h1>Jack Yuan</h1>
<h2>Web Developer</h2>
</a>
<nav>
<ul>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
<section>
<ul id="gallery">
<li>
<a href="TreeHouse/Jack.jpg">
<p> This is me </p>
<img src="TreeHouse/Jack.jpg" width="500" height="400" alt="">
</a>
</li>
<li>
<a href="TreeHouse/Life.jpg">
<p> This concludes my life, lol </p>
<img src="TreeHouse/Life.jpg"width="500" height="400" alt="">
</a>
</li>
<li>
<a href="TreeHouse/Study.jpg">
<p> This shows what I study </p>
<img src="TreeHouse/Study.jpg"width="500" height="400" alt="">
</a>
</li>
<li>
<a href="TreeHouse/2.jpg">
<p> This is what I believe</p>
<img src="TreeHouse/2.jpg"width="500" height="400" alt="">
</a>
</li>
</ul>
</section>
<footer>
<a href="https://www.facebook.com/jackyuan.jack">
<img src="TreeHouse/facebook.gif" alt="FaceBook Logo">
</a>
<a href="https://twitter.com/Jack19909100">
<img src="TreeHouse/twitter.png" alt="Twitter Logo">
</a>
<p>Jack Yuan</p>
<p>All Rights Reserved.</p>
</footer>
</body>
</html>
You need to add this CSS :
ul,p {
margin:0;
}
FIDDLE
I would also suggest you use som kind of CSS reset styleshhet like this one or this one.
It is because of margin collapse.
I'm trying to style the footer of a website made using Joomla 3.2.
Here's a picture of it:
(http://imageshack.com/a/img585/9589/1edo.png)
I renamed the classes so I can modify it with CSS but the problem is that I can't put the div(s) next to each other!
Here's the HTML:
<footer class="row-fluid">
<div class="footer1">
<jdoc:include type="modules" name="footer1" style="html5" />
<h3>Main Links:</h3>
<ul>
<li>Home Page</li>
<li>About Us</li>
<li>Company Mission</li>
<li>Company Vision</li>
<li>Products</li>
<li>Site Map</li>
</ul>
</div>
<div class="footer2">
<jdoc:include type="modules" name="footer2" style="html5" />
<h3>Contact Us:</h3>
<ul>
<li>Address: 28 ...</li>
<li>Phone: 0224</li>
<li>Email: ...#....com</li>
<li>Mobile: 0100</li>
<li>Fax: </li>
</ul>
</div>
<div class="footer3">
<jdoc:include type="modules" name="footer3" style="html5" />
<div class="span4"><img src="templates/greensand/images/footerlogo.png" alt="Greensand, Inc." class="pull-right" /></div>
</div>
<div class="footer4">
<jdoc:include type="modules" name="footer4" style="html5" />
<p>© 2014 Greensand, Inc. All rights reserved. </p>
</div>
</footer>
Here's the CSS:
footer .span9 {
padding: 4em 0 0 3em;
clear: both;
}
footer p {
padding-left: 0em; text-align: center;
}
footer .nav-pills a {
color: #fff;
}
footer .nav-pills a:hover {
color: #21AB49;
}
.footer1 {
padding-left: 3em;
}
Does anyone have any ideas to make them sit next to each other with a white line between them?
Main Links | Contact Us | the Logo and at the bottom the copyright