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
Related
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>
I cant seem to move the image inside a div. It can only be moved with absolute positioning, which I am not okay with. Can someone point out why the below given code isnt working. I want all 3 divs to be in one line . Image seems to be stuck in the top left corner. Applying padding doesnt change anything either.Please help
<div class="container" style="display:table">
<div style="display:table-cell">
<div class="emblem" style="padding:0 0 0 20px ;display:table-cell"></div>
<div class="logo" style="display:table-cell" Software Solutions</div>
</div>
<div class="header" style="">
<nav>
<ul style="display:flex;justify-content">
<li> Home</li>
<li>
<a href="{% url 'aboutus' %}" target="ifr" onclick="setTitle2()">
<title>RCE-About</title>About Us</a>
</li>
<li>Products</li>
<li>Solutions</li>
<li>Support</li>
</ul>
</nav>
</div>
</div>
It's maybe something like this you need to do..
EDIT:edited snippet code, navbar is under logo but take 100% width
.container{
display:flex;
justify-content: flex-start;
flex-wrap:wrap;
background:gray;
padding:5px;
}
.navbar-container{
width:100%
}
.container > div{
display:block;
height: 50px;
background: red;
margin-right: 15px;
padding:15px;
text-align:center;
}
ul{
margin:0;
padding:0;
}
ul li{
display:inline-block;
}
<div class="container">
<div class="1">Some text</div>
<div class="logo">LOGO</div>
<div class="navbar-container">
<div class="navbar">
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
</div>
</div>
</div>
Here is my HTML code for footer section:
<footer>
<div class="footer">
<nav>
<ul class="nav-list1">
<li><img src="img/article-logo.png" alt="img"/></li>
</ul>
<ul class="nav-list2">
<li>ABOUT</li>
<li>AUTHOURS</li>
</ul>
</nav>
<hr class="hr-style" />
<section class="footer-column">
<div class="footer-column1">
<img src="img/dot-net-ad.jpg" class="footer-image" alt="dot"/>
<p class="footer-title">.NET Training</p>
<p class="footer-pgf">If you have a .NET question on a topic that 's not covered by other more specific forums.</p>
<a class="footer-link" href="#">ask here. ></a>
</div>
<div class="footer-column2">
<img src="img/shopify-expert-ad.jpg" class="footer-image" alt="expert"/>
<p class="footer-title">Shopify Expert</p>
</div>
</section>
<hr class="hr-style" />
<p class="copyright">Copyright © 2013 Dot Net How</p>
</div>
</footer>
and, this is my styles for footer:
nav {
text-align : center;
}
.footer {
background-image : url('../img/footer-bg.jpg');
bottom : 0;
height : auto;
}
What is my mistake, and what attribute need to use?
Use padding-top according to your picture height:
.footer {
background:url(img/footer-bg.jpg) top center no-repeat;
padding-top:100px;
}
I'm using 960.gs (http://960.gs) as a CSS framework for my site and I'm trying to colour in the background of the .container_12 classes rather than my .grid_12 classes for the extra 10px I get on each side, giving the grid a bit of whitespace to breathe.
I looked at the 960.gs example site and he has a background repeating on the y-axis and it seems to expand no matter how large or what is inside the .grid_12 or .grid_16 classes.
When I want to paint the background white (instead of have an image repeat on the y-axis), it appears as though my .grid_12 is floating and therefore .container_12 has no height and thus, no white background.
Here is my relevant HTML
<body>
<div id="logoContainer" class="container_12">
<div id="logo" class="grid_12">
<h1>Logo</h1>
</div> <!-- end #logo -->
</div> <!-- end #logoContainer -->
<div class="clear"></div>
<div id="menuContainer" class="container_12">
<div id="menu" class="grid_12">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</div> <!-- end #menu -->
</div> <!-- end #menuContainer -->
<div class="clear"></div>
<div id="contentContainer" class="container_12">
<div id="content" class="grid_12">
<p>Content here</p>
</div> <!-- end #content -->
</div> <!-- end #contentContainer -->
<div class="clear"></div>
</body>
and CSS
/* 960.gs */
#import url('reset.css');
#import url('960.css');
#import url('text.css');
#contentContainer
{
background-color: #fff;
margin-bottom: 10px;
border-radius: 20px;
-o-border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}
To answer my own question, the <div class="clear"></div> need to be after each .grid_, not each .container_
Hello I've got this weird problem with css.
I'm displaying an unordered list
<ul>
<li>
<div class='align-left'>
PMI
</div>
<div class='align-right'>
<img src="/img/delete_icon2.png" id='19' class="elim" name="19">
</div>
</li>
<li>
<div class='align-left'>
GRANDS COMPTES
</div>
<div class='align-right'>
<img src="/img/delete_icon2.png" id='21' class="elim" name="21">
</div>
</li>
<li>
<div class='align-left'>
associations
</div>
<div class='align-right'>
<img src="/img/delete_icon2.png" id='22' class="elim" name="22">
</div>
</li>
<li>
<div class='align-left'>
PME
</div>
<div class='align-right'>
<img src="/img/delete_icon2.png" id='25' class="elim" name="25">
</div>
</li>
<li>
<div class='align-left'>
ecoles privees
</div>
<div class='align-right'>
<img src="/img/delete_icon2.png" id='28' class="elim" name="28">
</div>
</li>
<li>
<div class='align-left'>
organisme
</div>
<div class='align-right'>
<img src="/img/delete_icon2.png" id='32' class="elim" name="32">
</div>
</li>
<li>
<div class='align-left'>
test
</div>
<div class='align-right'>
<img src="/img/delete_icon2.png" id='34' class="elim" name="34">
</div>
</li>
</ul>
now this is accompanied by these css rules:
.align-right{
float: right;
}
.align-left{
float: left;
}
On chrome, the bullet point from the list is actually UNDER the text for the bullet point.
Why did I do this, I want the images to be aligned from top down.
here are screenshots of the problem
thanks in advance.
the code you provided won't cause this problem.
Depending on what you want to do, adding
ul { list-style-type:none; }
or
ul li { padding-left:40px; }
may achieve desired effect.
edit
try adding overflow:hidden; to the li elements
I'd also personally do it like this:
li {
background:url(/img/delete_icon2.png) no-repeat center right;
padding-right:25px; /*might need to adjust */
}
<ul>
<li>PMI</li>
<li>Bla bla</li>
</ul>
no need to over-complicate things.
If you want the DIVS clickable you can just do
<li>PMI</li>
and CSS:
li a { display:block; width:xxx; height:xxx; }
as required.
Try playing with the list-style-position property. Options are inside and outside.
I had the same problem and it seems that you do not have exact control over the position of the default bullet point.
For me the following was working in Firefox and in IE, but in Chrome it is positioned inside the text:
<ul style="list-style-position: outside; margin:0; padding:0;">
<li />
<li />
</ul>
I needed to set margins and paddings for both the list and the list items to get the bullet point(disk) outside the text
<ul style="list-style-position: outside; margin:10px; padding:10px;">
<li style="padding: 10px 0 0 3px; margin-bottom: 8px;" />
<li style="padding: 10px 0 0 3px; margin-bottom: 8px;" />
</ul>
The strange part is, that if I set those bottom margins to anything less than 7 pixel, the bullets jump inside. 8px is the smallest working value, although there is lots of space around and between the elements (they move closer to each other fluently, only the bullet points start to jump).