I am having an issue with my footer.
It looks great on normal screen sizes, tablets and phones but for people who have larger screens/resolutions the footer is going all the way to the left.
View screen shot here for a big screen: http://www.bkd.com/images/bkd-big-screen.png
This is the actual page URL: http://www.bkd.com/new-test-2.htm
I am needing the footer to stay lined up with the experience BKD logo at the top. Here is it on a normal sized screen how i would like it across the board: http://www.bkd.com/images/bkd-normal-screen.png
Here is the coding for the footer:
<div id="footer3">
<div id="footer3-contents">
<div class="span-6">
<img width="23" height="25 alt="BKD Facebook" src="/images/icons/social-media/facebook-icon.png">
<img width="25" height="25" alt="BKD LinkedIn" src="/images/icons/social-media/linkedin-icon.png" id="icons">
<img width="25" height="25" alt="BKD Twitter" src="/images/icons/social-media/twitter-icon.png" id="icons">
<img width="25" height="25" alt="BKD Youtube"src="/images/icons/social-media/youtube-icon.png" id="icons">
<img width="25" height="25" alt="BKD Google Plus" src="/images/icons/social-media/google-icon.png">
</div>
<div id="footer-legal" class="span-18 last">
<ul>
<li>Contact Us</li>
<li>Terms of Use</li>
<li> Privacy Policy</li>
<li> Disclosures</li>
<li> UltiPro</li>
<li style="color:#fff">Copyright © 2014 BKD, LLP.</li>
</ul>
<img src="/images/praxity-white.png" width="101" height="47">
</div><div class="clear"></div>
<div class="clear"></div></div></div><!--end footer -->
</body>
</html>
CSS:
/*footer */
#footer3 {padding:36px 0px; background: url(/images/common/footer/footer-black.png); background-repeat:text-align:left; width: auto; font-size:14px; font-weight:normal;}
#footer3-contents { margin:10px; width: auto; padding-left: 95px;}
#footer3 h2 { color:#fff; font-size:12px; padding-left:0px; }
#footer3 h2 a { color:#fff; }
#footer3 a { color:#fff; }
#footer3 #footer-legal ul { padding: 0px; margin:0px 0px 0px 0px;}
#footer3 #footer-legal ul li {float:left; padding: 10px 10px 2px 0px;}
#icons {padding-right:4px;}
Thank you in advance for your help.
#footer3-contents {
margin: 0 auto;
width: 1000px;
}
Change #footer3-contents to the above and it will work.
The reason this issue is happening is because all your doing is pushing the footer over 95px in your original code. What you need to do is set a defined width for the footer contents then set the margins on each side to be equal.
If the margins are equal on both sides the div will appear in the center of your webpage.
Provide margin value in % rather than px.
Related
I would like to know if it would be possible to move my footer to the bottom of the page rather then display on the side like it is here Image essentially I want it to function like most other elements and always display below the element above it.
here is the code I used
<div style="border:3px solid black;width:800px;float:left;margin:5%"><center><h1>Builder</h1><br><p style="padding-left:5%;padding-right:5%">We are looking for someone who can offer their building skills and abilities to a passionate team.</p></center></div>
<div style="border:3px solid black;width:800px;float:left;margin:5%"><center><h1>Plugin Developer</h1><br><p style="padding-left:5%;padding-right:5%">Are you passionate about programming? Well if you are we would like your help on Plugin Development!.</p></center></div>
<!--End of body!-->
<footer>
<style>
.mar {
margin-left:10px;
margin-right:10px;
}
</style>
<ul>
<li><img src="Images/Discord.png" alt="Discord" height="35px" width="35px" class="mar"></li>
<li><img src="Images/Instagram.png" alt="Instagram" height="35px" width="35px" class="mar"></li>
<li><img src="Images/Youtube.png" alt="YouTube" height="35px" width="50px" class="mar"></li>
<li><img src="Images/Twitter.png" alt="Twitter" height="35px" width="35px" class="mar"></li>
</ul>
Try to add this code.
<style>
ul{
float:left;
width:100%;
display:inline-block;
}
li{
width: 25%;
float: left;
display: inline-block;
list-style: none;
}
</style>
Try this code
CSS:
footer {
width: 100%;
display: inline-block;
}
footer ul li {
display: inline-block;
}
This following inline block li elements are not perfectly centered, I can send the full code if you need it. Do you know a way to have them perfectly centered keeping their position at default?
<div id="abovenavigation">
<ul id="container">
<li><h1 class="Home">HOME</h1></li><!--
--><li><h1 class="About">ABOUT</h1></li><!--
--><li><h1 class="Blog">BLOG</h1></li><!--
-->
</ul><!--ends container-->
</div><!--ends upper navigation-->
<div id="undernavigation">
<ul id="container">
<li><img class="facebook" src="Facebook.png" width="53px" height="50px" onclick="this.src='Facebookhov.png'" onmouseover="this.src='Facebookhov.png'" onmouseout="this.src='Facebook.png'"/></li>
<li><img class="twitter" src="Twitter.png" width="53px" height="50px" onclick="this.src='Twitterhov.png'" onmouseover="this.src='Twitterhov.png'" onmouseout="this.src='Twitter.png'" /></li>
<li><a href:"mailto:gaaren03#gmail.com"><img class="mailto" src="Mailto.png" width="53px" height="50px" title="gaaren03#gmail.com" onclick="this.src='Mailtohov.png'" onmouseover="this.src='Mailtohov.png'" onmouseout="this.src='Mailto.png'" /></a></li>
</ul>
</div><!--ends undernavigation-->
li {
margin:0 20px;
font-size:18px;
display:inline-block;
text-align:center;
}
Just add text-align: center to the ul. :)
codepen: http://codepen.io/anon/pen/xGgpLK
li {
margin:0 20px;
font-size:18px;
display:inline-block;
}
ul {
text-align: center;
}
You could either give the list items a fixed width seeing as you have them set to display: inline-block. Or if you are supporting IE8 and above you could set the ul to display:table with a 100% width and the li to display: table-cell.
Fiddle
ul {
display:table;
width: 100%;
}
li {
padding: 10px;
font-size:18px;
display:table-cell;
text-align:center;
}
Hope this helps.
I have the following code for my website and I am trying to add padding to the group of image links on my the webpage
<ul class="">
<a href="https://www.github.com">
<img style="height:auto; width:auto; max-width:50px; max-height:50px;" src="images/github.png" border="0" alt="Code" class="">
</a>
<a href="http://www.linkedin.com">
<img style="height:auto; width:auto; max-width:50px; max-height:50px;" src="images/linkedin.png" border="0" alt="Connect" class="">
</a>
<a href="https://www.twitter.com">
<img style="height:auto; width:auto; max-width:50px; max-height:50px;" src="images/twitter.png" border="0" alt="Twitter">
</a>
</ul>
I also have the following CSS:
a{
color:black;
text-decoration: none;
margin: 0px auto;
width: 400px;
}
ul{
padding: 0;
}
What would I need to do add vertical padding on the group image links for my website?
Not sure this is what you want, but try to use padding-top:
ul a img {
padding-top: 10px; /* Change the value according to your needs */
}
Btw, You should give class to your element to target it more specifically.
I have the following code for my website and I am trying to center the images on the webpages
<ul class="">
<a href="https://www.github.com">
<img style="height:auto; width:auto; max-width:50px; max-height:50px;" src="images/github.png" border="0" alt="Code" class="">
</a>
<a href="http://www.linkedin.com">
<img style="height:auto; width:auto; max-width:50px; max-height:50px;" src="images/linkedin.png" border="0" alt="Connect" class="">
</a>
<a href="https://www.twitter.com">
<img style="height:auto; width:auto; max-width:50px; max-height:50px;" src="images/twitter.png" border="0" alt="Twitter">
</a>
</ul>
I also have the following CSS:
a{
color:black;
text-decoration: none;
margin: 0px auto;
width: 400px;
}
ul{
padding: 0;
}
What would I need to do to center all three image links on my website?
use
<ul style="display:block;margin:0px auto;">
///tags
</ul>
it will justify the ul tag.
<ul style="width:100%;display:block;text-align:center;">
///tags
</ul>
it will justify the content of the ul tags
use this code:
DEMO
ul{
padding: 0;
text-align:center; /* added */
}
ul{
margin: 0 auto; /* For hate it at the center*/
padding: 0;
width: aWidthToTheDiv; /* You could set it to 100% or an value as 800px (example) */
}
And done :)
This should work, also you could add a tag as "text-align:center;" but this is gonna keep all the text at the center and probably you want to have it in other alignment.
Since you haven't used <li> tag along with <ul>
I recommend you to use to <p> tag.
This might be funny.But its so simple and you dont need to do any additional styling.
All you need to do is add text-align:center
TRY THIS -> WORKING DEMO
I have a website located here.
I am having a hard time displaying some tags as inline. There are no breaks in the HTML, and no clear attributes. There's something missing here, but I don't know what.
Basically, I want them set up like this...
[logoimage][slider][logotitle]
I have changed the slider size by percentage, and tried wrapping everything in a new div and adding the "in-line block" attribute.
Here's my HTML...
<div id="top">
<div id="logo">
<img id="logoimage" src="images/logo_mpire_management.png" width="80" height="56" alt="logo"></div> <!-- Logo image -->
<section id="slideshow"> <!-- Slideshow Start -->
<div class="html_carousel">
<div id="slider">
<div class="slide">
<img src="images/slideshow/sliderimage1.jpg" width="3000" height="783" alt="2 Chainz"/><!-- Replace these images with your own but make sure they are 3000px wide and 783px high or the same ration -->
</div><!--/slide-->
<div class="slide">
<img src="images/slideshow/sliderimage2.jpg" width="3000" height="783" alt="French Montana"/><!-- Replace these images with your own but make sure they are 3000px wide and 783px high or the same ration -->
</div><!--/slide-->
<div class="slide">
<img src="images/slideshow/sliderimage3.jpg" width="3000" height="783" alt="2 Pistols"/><!-- Replace these images with your own but make sure they are 3000px wide and 783px high or the same ration -->
</div><!--/slide-->
<div class="slide">
<img src="images/slideshow/sliderimage4.jpg" width="3000" height="783" alt="Juicy-J"/><!-- Replace these images with your own but make sure they are 3000px wide and 783px high or the same ration -->
</div><!--/slide-->
<div class="slide">
<img src="images/slideshow/sliderimage5.jpg" width="3000" height="783" alt="Kendrick Lamar"/><!-- Replace these images with your own but make sure they are 3000px wide and 783px high or the same ration -->
</div><!--/slide-->
<div class="slide">
<img src="images/slideshow/sliderimage6.jpg" width="3000" height="783" alt="Artist Name"/><!-- Replace these images with your own but make sure they are 3000px wide and 783px high or the same ration -->
</div><!--/slide-->
</div><!--/slider-->
<!--<div class="clearfix"></div>-->
</div><!--/html_carousel-->
</section> <!-- Slideshow End -->
<div id="logo">
<h1 id="logotitle">MPIRE Booking</h1> <!-- Logo text -->
</div><!--/logo-->
<nav> <!-- Navigation Start -->
<ul>
<li>Home</li>
<li>Services</li>
<li>Booking</li>
<li>Contact</li>
</ul>
</nav> <!-- Navigation End -->
</div><!--/top-->
Here's my CSS... (for the divs you see above)
(Click here for the full style sheet)
#top{
height:20px;
}
#logo {
margin-top:1%;
text-decoration:none;
}
#logo a:hover { color: #8f1929; text-decoration: none; }
#logoimage{
width:200px;
height: 141px;
padding-right:10px;
float:left;
}
#logotitle{
margin-top: 50px;
float:right;
font-family: Broadway, Arial, Helvetica, sans-serif;
font-weight:normal;
font-size:200%;
text-shadow: 0 1px 1px #FFF;
text-decoration: none;
}
nav {
float:right;
width:100%;
display:block;
height:40px;
}
nav ul li{
display:block;
width:25%;
float:left;
text-align:center;
}
nav ul li a{
font-family:Lato, Helvetica, Arial, sans-serif;
width:90%;
text-decoration:none;
text-transform:uppercase;
font-weight:400;
line-height:250%;
display:block;
color:#FFFFFF;
}
nav ul li a:hover{
color:#8f1929;
}
nav ul li p{
font-family:Lato, Helvetica, Arial, sans-serif;
width:90%;
text-decoration:none;
text-transform:uppercase;
font-weight:400;
line-height:250%;
display:block;
color:#8f1929;
}
.html_carousel {
}
.html_carousel div.slide {
position: relative;
}
.html_carousel div.slide img {
width: 30%;
height: auto;
border-radius:15px;
}
.clearfix {
float: none;
clear: both;
}
#slideshow{
width:100%;
margin-top:0%;
}
.clearfix {
float: none;
clear: both;
}
There are several weird things on your code, like huge width properties such as 3000px for slides and even 14326px (!) on your <div id="slider"> that leave no room for the logotitle. Please, check them all.
And the floating properties: that float:right div for the logotitle makes no sense. If it had room enough it would be ok with another float:left as it comes the last one.
Here you have an example with left-floated elements creating a horizontal inline layout: www.w3schools.com/css/tryit.asp?filename=trycss_float5
Try adding this class
.slide
{
display:inline-block;
}