how do i connect the formatting css code to this code? sorry to be such a noob at all this stuff
I have the css code if you want to see it. But i already have a fully functioning website with headers and footers and all that, it also has a wp blog attached to it.
i assume there is somewhere in this footer code to link to the css, but i dont know how
ok, the forum wouldnt let me paste the code…but i got it from here
When you post code on the forums, you need to format it so it will display correctly.
You can highlight your code, then use the </> button in the editor window, or you can place three backticks ``` (top left key on US/UK keyboards) on a line above your code, and three on a line below your code. I find this approach easier, but unfortunately some European and other keyboards don’t have that character.
I’ve never used Bootstrap, so this is a bit of a guess, but the tutorial you’ve linked to says:
The styles are located in separate CSS files for each design. You can find them in the /assets/css/ folder.
Presumably, then, you would have a folder with that name on your existing site, and simply upload the relevant CSS file to it.
You would then need to link to it in the <head> section of each page where the footer is used, after any existing links to CSS files.
Forum POSTING Guidelines (Posting Basics): (Help us help you!)
thanks for the help so far…
here is a link to the page: https://www.wiredoffice.com.au/perth2.php
can someone tell me why the “suburbs” section footer is not displaying properly? i.e. its not 3 cols, and I did create a 4th col, but it wasnt displaying right before that either
The URL to the bootstrap CDN needs to be “https”, not “http”
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
thanks for that…occams razor hey
the footer now is improved but still not behaving
the UL list dots ate too far from the word
and how do i put this in the center above the lists?
or better still, put the “suburbs we visit” term in a 4th col to the left
Have you read the bootstrap manual? You are talking about 4 coluumns yet there are 5 columns in the HTML. I’m not a bootstrap person so I cannot competently advise you about setting up bootstrap. It seems odd to me that the page does not seem to rely on bootstrap earlier. When one uses a framework, the rules of that framework are expected to rule the construction of the page. Bootstrap is not a “plug-in”.
You seriously need to validate your code.
https://validator.w3.org/check?uri=https%3A%2F%2Fwww.wiredoffice.com.au%2Fperth2.php&charset=(detect+automatically)&doctype=Inline&group=0
It wouldn’t hurt to rewrite your page with the current doctype: <!doctype HTML>
ok, i dont need a 4th col. just to center that heading on the footer. ive been copying and pasting code for hours. grr.
Hi,
I feel this may end up as using a band-aid for a broken leg but here are a few fixes.
Firstly your page content isn’t matching the width of your wrapper so you need to sort that first.
Add this at the end of your css files or manually adjust correctly in source:
#content.fullwidth{width:auto}
As Ron said above the bootstrap footer you added is meant for bootstrap pages and you have added a whole framework just to add a footer that could have been added with a few lines of html and css. Assuming you have other needs for bootstrap here are some extra fixes to get you on the right track.
Add these rules after all your css files including any linked bootstrap files.
#content .footer-header{text-align:center;margin:0;padding:2em 0 0;}
#content ul{margin:0 0 0 1em;padding:0 0 0 2em;text-align:left;}
#content h5{text-align:center;margin:2em 0 .5em}
You will also need to amend the html of the footer to look like this and have these extra classes added.
<footer id="myFooter">
<h4 class="footer-header">Suburbs We Visit Regularly</h4>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 myCols">
<h5> </h5>
<ul>
<li><a href="#">Perth</a></li>
<li><a href="#">Hillarys</a></li>
<li><a href="#">Marmion</a></li>
<li><a href="#">Trigg</a></li>
<li><a href="#">Mullaloo</a></li>
</ul>
</div>
<div class="col-sm-3 myCols">
<h5> </h5>
<ul>
<li><a href="#">Ocean Reef</a></li>
<li><a href="#">Whitfords</a></li>
<li><a href="#">Edgewater</a></li>
<li><a href="#">Kingsley</a></li>
<li><a href="#">Heathridge</a></li>
</ul>
</div>
<div class="col-sm-3 myCols">
<h5> </h5>
<ul>
<li><a href="#">Joondalup</a></li>
<li><a href="#">Scarborough</a></li>
<li><a href="#">City Beach</a></li>
<li><a href="#">Karrinyup</a></li>
<li><a href="#">Warwick</a></li>
</ul>
</div>
<div class="col-sm-3 myCols">
<h5>Legal</h5>
<ul>
<li><a href="#">Terms of Service</a></li>
<li><a href="#">Terms of Use</a></li>
</ul>
</div>
</div>
</div>
<div class="social-networks"> <a href="#" class="twitter"><i class="fa fa-twitter"></i></a> <a href="#" class="facebook"><i class="fa fa-facebook-official"></i></a> <a href="#" class="google"><i class="fa fa-google-plus"></i></a> </div>
<div class="footer-copyright">
<p>© 2018 Copyright Text </p>
</div>
</footer>
Note that I moved the p tag you had with the heading text and moved it to a correct place and a correct heading tag. You are not allowed in bootstrap to add html inside a row that is not a column class because that is the basis of how bootstrap works. Please read the documentation in full before using bootstrap. It is not a plugin and go system but a framework with specific rules that need to be learned in detail before it can be applied properly. However you would be better off to understand html and css a little more fully first and in consequence would most likely not need the added cost of the bootstrap framework.
Also validate your css regularly to avoid problems . You have a missing bracket here after the rules for the h4 (line 386) which relegates all your other footer styles null and void.
h4 {
margin-bottom: 10px;
font: 'DINNextRegular',Arial,sans-serif;
font-size: 14px;
font-weight: 450;
color: #ff9804;
}/* this bracket is missing */
As I said above you don’t need a framework just to add 4 columns across unless you are adding that framework for other more important reasons.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.