Solved

Footer for my website's alignment is out please help

Posted on 2014-10-02
23
193 Views
Last Modified: 2014-10-21
Hello Gurus, I need major help please I have made changes to my website Shawco , and the footer seems to be off as indicated in the Image.
Please can you look at the source code and instruct me how to fix this as its a real concern for me.
ProblemFooter
0
Comment
Question by:Jason Laskey
  • 6
  • 5
  • 4
  • +3
23 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 40357288
To #footer {} add
margin-left:10px;

Your problem is the footer is inside the inner block which has padding
0
 
LVL 16

Expert Comment

by:Joshua Grantom
ID: 40357300
under the style.csss

you need to change the margin to what is bold

#footer .foot_inner {
width: 918px;
padding: 15px 20px;
background-image: url('../images/footer.gif');
background-repeat: repeat-x;
background-color: #548DD4;
border: 1px solid #5484BF;
margin: 0 auto 0 -10px;
color: #FFF;
}
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 40357382
I wouldn't change the margin - that is trying to paint over the problem

Here is what I would do

1.  Remove the float left on footer and parents up the chain - not sure why you have those.
2. Remove the width: 918px on your footer-inner - if you have removed the float left on the footer you should have a contained footer but the sections inside are wrapping - this is because they have fixed widths and margins
3. for the divs aboutweb, research, sharingweb, adrs remove the margin: 20px and then either give them each a new but same class and give that class a width of 25% or just make the width for each of those blocks 25%.

If you need to pad them then add the style
box-sizing: border-box;

And add padding - that won't effect the 25% width.

That should get you going in the right direction

So
#footer {
  /* remove float: left; */
  width: 100%;
}
#footer .foot_inner {
  /* remove width: 918px */
  background-color: #548dd4;
  background-image: url("../images/footer.gif");
  background-repeat: repeat-x;
  border: 1px solid #5484bf;
  color: #fff;
  margin: 0 auto;
  padding: 15px 20px;
}
#footer .aboutweb {
  float: left;
  /* remove margin-right: 20px; */
  width: 25%; /* change from 220px; */
}
#footer .research {
  float: left;
  /* remove margin-right: 20px; */
  width: 25%; /* change from 220px; */
}
#footer .sharingexp {
  float: left;
  width: 25%; /* change from 220px; */
}
#footer .adrs {
  width: 25%; /* change from 200px; */
}

Open in new window

0
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 40357428
This is always easier to get right if you have valid markup.  Some suggestions here:
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.shawco.org%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
0
 

Author Comment

by:Jason Laskey
ID: 40357450
Thanks Mates , however I am still not coming right here is the code please be kind and help a brother.
<div id="footer">
<span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: small;">
    	<div class="foot_inner">
        	<div class="aboutweb">
            	<h6>SHAWCO</h6>
                <ul>
                	<li><a href="{path=''}">Home</a></li>
                    <li><a href="{path='about-us'}">About Us</a></li>
                    <li><a href="{path='contact-us'}">Contact Us</a></li>
                </ul>
            </div>
            <div class="research">
            	<h6>Sectors</h6>
                <ul>
                	<li><a href="{path='education'}">Education</a></li>
                    <li><a href="{path='health'}">Health</a></li>
                </ul>
            </div>
            <div class="sharingexp">
            	<h6>SHAWCO Enterprise</h6>
                <ul>
                	<li><a href="{path='enterprise-development/projects/shawco-accommodation'}">SHAWCO Accommodation</a></li>
                    <li><a href="{path='enterprise-development/projects/rags-to-riches'}">Rags to Riches</a></li>
                    <li><a href="{path='enterprise-development/projects/shawco-transport'}">SHAWCO Transport</a></li>
                </ul>
            </div>
            <div class="adrs">
            	<a href="{path=''}" class="footlogo"><img src="{site_url}images/logo_small.jpg" alt="" /></a>
                <p>
                	<br /><br /><br/>SHAWCO<br />
                	Braemar Cottage<br />
					Faculty of Health Sciences<br />
					University of Cape Town
                </p>
            </div>
            <div class="clear"></div>
        </div>
        <div class="clear"></div>
        <div class="copy_inner">
        	<p><a style="color:#FFFFFF;" href="{path='terms-and-conditions'}">Terms and Conditions</a> | All contents copyright &copy; SHAWCO</p>
            <a href="#" class="top">Top</a>
        </div>
    </div>

Open in new window

0
 
LVL 16

Expert Comment

by:Joshua Grantom
ID: 40357461
your editing the wrong file.

you need to edit the style.css or custom.css under the css folder.
0
 
LVL 58

Expert Comment

by:Gary
ID: 40357468
style.css line 1291

#footer {
    float: left;
    width: 100%;
   margin-left:-10px
}
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 40357503
@Gary, is adding a negative margin as suggested not just patching bad styling.

@Jason - did you try the suggestion in my post?
0
 
LVL 58

Expert Comment

by:Gary
ID: 40357523
The better solution would be to take the whole footer block of code and move it outside the inner class div - no css changes needed at all (but there maybe a reason for the layout...?)

<div class="inner">
...
</div>
<div id="footer">
...
</div>
0
 
LVL 16

Expert Comment

by:Joshua Grantom
ID: 40357529
Julian,

Based on previous posts, I believe Jason is very new to web development and may not be able to comprehend all of the changes you are suggesting.

We all start somewhere.
0
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 51

Expert Comment

by:Julian Hansen
ID: 40357787
@Joshua,

He's a UCT boy on SHAWCO - so assuming he is bright and eager - code was provided with comments - shouldn't be too hard to follow.

Basically he has some unnecessary floats - a fixed width footer-inner and some margin's and fixed widths in the footer sections to make minor modifications to - for which the CSS was provided.

The question is - at EE do we recommend quick and dirty fixes or do we try to assist in implementing good coding practices. A quick negative margin fix might work now but down the line when other changes are made to the markup it could have side effects.

Better to get it right from the get go, no?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40357860
So several hours screwing around with crap code that (as Ray already pointed out has errors; including structural errors.  Garbage in; garbage out!

Anything that actually works is just another hack to a page that is already structurally unstable.  Painting a fence made of rotting wood will not keep if from falling down.

Cd&
0
 
LVL 16

Expert Comment

by:Joshua Grantom
ID: 40357874
Hopefully he will use Rays link as a guide to fix his HTML and learn in the process.
0
 

Author Comment

by:Jason Laskey
ID: 40358881
Hey Josh thanks BTW your solution worked. As for Julian`s input he is right I prefer to do things right from the beginning too, to prevent future mishaps. However I am only helping someone out with this and I am not a dedicated Web Developer, So just wanted to point this out.

Thanks Again Guys for all of your comments and help! ;)
0
 
LVL 58

Expert Comment

by:Gary
ID: 40359412
The accepted solution only moves part of the footer back, the text at the bottom is still out of alignment (though I suppose it doesn't look terrible)
And since my answer is first and does it correctly on the whole footer I have to object to the accepted answer.
0
 

Author Comment

by:Jason Laskey
ID: 40363475
I never used Gary's method so I cant say its incorrect, I used Josh method and this worked for me, maybe Garry`s is better who am I to argue as I never used it
0
 

Author Comment

by:Jason Laskey
ID: 40367083
This problem was not resolved sorry guys only found out today as when using Gary`s method as Julian mentioned it fixes the one pages alignment,b but now the reset of the pages alignment is out.Please Guys I really do need some serious assistance fixing this.

Thanks for all your time and work
0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 40367098
Before your footer block add a closing div as bolded.

<div class="givengain-widget" data-type="cause" data-id="4574" data-width="200" data-detail="donate|fundraise"></div><script type="text/javascript" src="https://widget.givengain.com/gg_widget.js"></script>        
</div>
</div>
    <div class="clear"></div>
    <!-- Footer -->
    <div id="footer">
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 40367113
@Jason - there are fairly detailed instructions in my previous post that should help to resolve this.

http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_28530026.html#a40357382

The code snippet has comments about what to add remove. Try that and if still stuck post back and we can take it from there.
0
 
LVL 58

Expert Comment

by:Gary
ID: 40367129
There are no CSS changes needed - the HTML needs to fixed as I indicate above with simply adding a closing div. but it actually needs two closing divs, not just one.
And it also needs one before the closing body tag as well.
0
 

Author Closing Comment

by:Jason Laskey
ID: 40395262
Hi Gary your solution is correct, this question was posted as my Fiance needed advice on this but I think she used your method to come right so thanks again!
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now