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.
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;
}
I have written this code to display 4 images in the left of the page and when hovering over an image it appears bigger at a div to the right of those images ..
i want some text to show up under the big image at the right, but i can't do it.
Any suggestions?
Here is my code:
body{padding:20px 100px}
a img{display:block;border:none;}
.image-holder{
float:right;
margin:42px 560px 0px 0;
width:300px;
height:350px;
background:#ffffff;
border:10px solid #000;
padding:3px;
position:relative;
z-index:1;
}
ul.links{
list-style:none;
margin:0 0px;
padding:0;
border:5px solid #000;
border-bottom:none;
width:100px;
}
.links li{
width:100px;
border-bottom:10px solid #000;
}
.links li a span{
position:absolute;
right:682px;
top:222em;
width:300px;
height:300px;
z-index:2;
}
.links li a:hover{
background:teal;
color:#0f0;
}
.links li a:hover span {top:200px;
}
h1{text-align:center;margin:1em 0;}
<p class="image-holder"></p>
<ul class="links">
<li><img src="image1.jpg" width=100 height=100><span><img src="image1.jpg" width="300" height="300" alt="example image" /></span></li>
<li><img src="image2.jpg" width=100 height=100><span><img src="image2.jpg" width="300" height="300" alt="example image" /></span></li>
<li><img src="image3.jpg" width=100 height=100><span><img src="image3.jpg" width="300" height="300" alt="example image" /></span></li>
<li><img src="image4.jpg" width=100 height=100><span><img src="image4.jpg" width="300" height="300" alt="example image" /></span></li>
</ul>
body{padding:20px 100px}
a img{display:block;border:none;}
.image-holder{
float:right;
margin:42px 560px 0px 0;
width:300px;
height:350px;
background:#ffffff;
border:10px solid #000;
padding:3px;
position:relative;
z-index:1;
}
ul.links{
list-style:none;
margin:0 0px;
padding:0;
border:5px solid #000;
border-bottom:none;
width:100px;
}
.links li{
width:100px;
border-bottom:10px solid #000;
}
.links li a span{
position:absolute;
right:682px;
top:222em;
width:300px;
height:300px;
z-index:2;
text-align:center;
}
.links li a:hover{
background:teal;
color:#0f0;
}
.links li a:hover span {top:200px;
}
h1{text-align:center;margin:1em 0;}
<p class="image-holder"></p>
<ul class="links">
<li><img src="image1.jpg" width=100 height=100><span><img src="image1.jpg" width="300" height="300" alt="example image" /><em>Some Text</em></span></li>
</ul>
Simply add a tag in span after <img> tag as i used in above code and if you want to align it to center then add text-align:center; property to span css as i used above.
I would recommend using javascript if that is valid:
<li onmouseover="onMouseOverImage(1)">
<a href="image1.jpg">
<img src="image1.jpg" width=100 height=100>
<span>
<img src="image1.jpg" width="300" height="300" alt="example image" />
</span>
</a>
</li>
And then add the javascript handling. If you use jQuery it would become more easier:
<script>
function onMouseOverImage(imageNumber) {
var text = getTextForImage(imageNumber);
var element = document.getElementById("IdOfTextDisplay");
element.innerHtml = text;
}
</script>
or with jQuery:
<script>
function onMouseOverImage(imageNumber) {
$("IdOfTextDisplay").text(getTextForImage(imageNumber));
}
</script>
No guarantee on syntax. ;)
EDIT: You may have to place the event registration (onmouseover="onMouseOverImage(1)") into your link (a) or img. I'm not sure right now about that.
A very simple way to do it is to add the title attribute inside of your <img> tag, like this:
<img title="Your text"/>
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 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.
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