I have my social media icons in the footer using html because nothing I tried with CSS gave me the results I wanted. Problem is that now I want the icons to be fixed to the bottom but doing it with CSS isn't working. Here's the code right now:
<div class="footer">
<center>
<a class="faceb" href="http://facebook.com/" title="Facebook" alt="faceb">
<img src="http://www.sheisbiddy.com/wp-content/uploads/2015/11/wfaceb.png" hspace="5" style="PADDING-BOTTOM: 20px" onmouseover="this.src='http://www.sheisbiddy.com/wp-content/uploads/2015/11/faceb.png'"onmouseout="this.src=' http://www.sheisbiddy.com/wp-content/uploads/2015/11/wfaceb.png'" border="0" alt="" />
</a>
</center>
</div>
And here's the CSS I tried that didn't work:
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
}
There's several issues with your original code. First you never close your <center> tag, but you should probably be using text-align:center; in your css instead as the center tag is depreciated.
Next you're using an ID selector instead of a class selector. So you have a couple options, you can either replace your CSS with:
.footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
}
Or you can replace your HTML with:
<div id="footer">
<center>
<a class="faceb" href="http://facebook.com/" title="Facebook" alt="faceb">
<img src="http://www.sheisbiddy.com/wp-content/uploads/2015/11/wfaceb.png" hspace="5" style="PADDING-BOTTOM: 20px" onmouseover="this.src='http://www.sheisbiddy.com/wp-content/uploads/2015/11/faceb.png'"onmouseout="this.src=' http://www.sheisbiddy.com/wp-content/uploads/2015/11/wfaceb.png'" border="0" alt="" />
</a>
</center>
</div>
But I'd highly recommend dropping those center tags and updating it like the following:
<div id="footer">
<a class="faceb" href="http://facebook.com/" title="Facebook" alt="faceb">
<img src="http://www.sheisbiddy.com/wp-content/uploads/2015/11/wfaceb.png" hspace="5" style="PADDING-BOTTOM: 20px" onmouseover="this.src='http://www.sheisbiddy.com/wp-content/uploads/2015/11/faceb.png'"onmouseout="this.src=' http://www.sheisbiddy.com/wp-content/uploads/2015/11/wfaceb.png'" border="0" alt="" />
</a>
</div>
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
text-align:center;
}
You are using id(#) selector use dot(.) instead as you are using class in your div.
.footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
}
Related
<div style="position:absolute; top:0; right:0">
<a href="index.html">
<img src="~/Content/Img/tr.png" alt="Türkçe" />
</a>
<a href="index_en.html">
<img src="~/Content/Img/eng.png" alt="English" />
</a>
</div>
I have this block of html in my home page. Images show but link does not work. In fact if I remove the style it starts to work. I am very confused.
Some element was overlapping your links, just add z-index: 1; in your <div> style, jaunt got the answer!
<div style="z-index: 1; position:absolute; top:0; right:0">
<a href="index.html">
<img src="images/tr.png" alt="Türkçe">
</a>
<a href="index_en.html">
<img src="images/eng.png" alt="English">
</a>
</div>
Add the class on-top to the images and use the below CSS.
HTML:
<div style="position:absolute; top:0; right:0">
<a href="index.html">
<img class="on-top" src="~/Content/Img/tr.png" alt="Türkçe" />
</a>
<a href="index_en.html">
<img class="on-top" src="~/Content/Img/eng.png" alt="English" />
</a>
</div>
CSS:
.on-top {
position: relative;
z-index: 1;
}
What is happening is that you have another DIV that happens to be overlapping this
I would change the first line to something like this and it should work
<div style="position:absolute; top:0; right:0; z-index=1000" >
You need to add a z-index to the div that surrounds your links.
Right now <div class="fp-tableCell" style="height:776px;">is sitting on top of the div you're having issues with.
Add this to the div that you are having issues with:
<div style="position:absolute; top:0; right:0; z-index:999;">
Okay so you can either set z-index:1 in the parent div or you can apply
position:absolute;
top:0;
right:0;
and
position:absolute;
top:0;
right:40px;
to the img tags inside the a tags instead of the parent div. I'm sure there are other ways too, but these seems the easiest.
I have some really basic HTML and CSS and for some reason the outline of the link is lower than the image itself, but they should line up because the image is inside the tag as below:
The code for this is:
<div id="social">
<img src="images/social/deviantart.png" alt="DeviantArt"/>
<img src="images/social/facebook.png" alt="Facebook"/>
<img src="images/social/flickr.png" alt="Flickr"/>
<img src="images/social/google+.png" alt="Google+"/>
<img src="images/social/linkedin.png" alt="LinkedIn"/>
<img src="images/social/tumblr.png" alt="Tumblr"/>
<img src="images/social/twitter.png" alt="Twitter"/>
<img src="images/social/youtube.png" alt="You Tube"/>
</div>
And the CSS:
#social {
float:left;
width:24px;
}
#social a {
padding:0px;
height:24px;
}
Has anyone got any idea why they are not in line and if so how to get them in line?
Try to add display:inline-block;
#social {
float:left;
width:24px;
display:inline-block;
}
HTML/CSS newbie question for you.
I've been stuck on this for awhile. I'm looking to center my image gallery AND also make the padding between the images tighter. I'm thinking I need a container but, I've just been screwing it all up when I try. Any help would be great!
<div id="container" align="center">
<div class="img">
<a href="#">
<img src="#" alt="PIcture1" width="210" height="180">
</a>
<div class="desc">BLAH</div>
</div>
<div class="img">
<a href="#">
<img src="Images/9700_1915630577543_1314909545_n.jpg" alt="oldman" width="210" height="180">
</a>
<div class="desc">BLAH</div>
</div>
<div class="img">
<a href="#">
<img src="#" alt="Picture3" width="210" height="180">
</a>
<div class="desc">BLAH</div>
</div>
<div class="img">
<a href="#">
<img src="#" alt="Picture4" width="210" height="180">
</a>
<div class="desc">BLAH</div>
</div>
</div>
CSS:
#container{
}
div.img
{
margin:5px;
padding: 5px;
border:none;
height:auto;
width:auto;
float:left;
text-align:center;
}
div.img img
{
display:inline;
margin:5px;
border:none;
}
div.img a:hover img
{
border:none;
}
div.desc
{
text-align:center;
font-weight:normal;
width:120px;
margin:5px;
}
It depends on how you want to centre your gallery.
There's a few things that you need to bear in mind. In order to centralise some HTML you need to have a set width of the centralising element.
Here's some code for you to work with:
Create a "centre" class in CSS as follows:
div.centre{
margin:0px auto;
width:800px;
}
Then add it to your container as follows:
<div id="container" class="centre">
The secret to centralisation is in the margin:0px auto;, this is convention of modern web development to centralise content.
Have a look at this code
p.s. don't use align="center" it is depreciated in later versions of HTML. Better to not get into the habit of using it and stick to using CSS classes to centralising things for you.
You should not use align. It is a deprecated property. To center something with a container you need to specify a fixed width and add margin auto.
Ex:
#container {
width:970px;
margin: 0 auto;
}
You can remove the padding on div.img
so I'm trying to create a slideshow, by using absolute positioning to stack the pictures on top of each other, but the problem I'm having is the text from below the slideshow is also getting stacked on top of the pictures. I tried putting the pictures inside a wrapper div, whose position was relative, but that didn't do anything. If anyone see's the problem, I'd really appreciate some help.
HTML CODE
<div id="imageDiv">
<div id="mainImage">
<img class="imagePositioning" id="slideshowImg1" src="images/tbrownMain.jpg" alt="Image of Terrell Brown" ></img>
<img class="imagePositioning" id="slideshowImg2" src="images/giantsMain.jpg" alt="Image of Giants" ></img>
<img class="imagePositioning" id="slideshowImg3" src="images/kobeMain.jpg" alt="Image of Kobe" ></img>
<img class="imagePositioning" id="slideshowImg4" src="images/nashMain.jpg" alt="Image of Nash" ></img>
<img class="imagePositioning" id="slideshowImg5" src="images/tebowMain.jpg" alt="Image of Tim Tebow" ></img>
</div>
<div id="contentText">
<a id="introText">Tim Tebow talks about Aaron Hernandez</a>
<p id="detailsPar">Tim Tebow...</p>
</div>
<table id="mediaMenu">
<tr>
<td class="subMenu">
<a href="#" onclick="doEverything(0)">
<table>
<tr> <td class="subTitle"> Tebow Talks </td></tr>
<tr><td><img style="opacity:1.0" id="sub0" src="images/tebow.jpg" alt="Tim Tebow"></img></td></tr>
</table>
</a></td>
//...4 more nested tables in same way
</tr>
</table>
</div>
CSS CODE
#mainImage {
position:relative;
}
#imageDiv {
border: 5px solid black;
width:70%;
position:relative;
}
.imagePositioning {
position:absolute;
}
#contentText {
color:orange;
float:right;
position:absolute;
left:43%;
width:26%;
top:2%;
}
#mediaMenu td {
margin:3px;
padding:0px;
width:20%;
color:blue;
font-family: Chalkduster, Verdana, Sans-serif;
text-transform:uppercase;
font-size:12px;
}
Couple of things here:
As #diodeus pointed out, don't use absolute positioning with float
I think you meant to close your #imageDiv before the table
You need to clear #mediaMenu {clear:both}
JsFiddle: http://jsfiddle.net/tc36z/1/
Here is a solution. Using lots of absolute positioning and percentages to get everything working. I'm not sure of the exact layout you were going for so I just took a guess
This requires code for me to post an answer
http://jsfiddle.net/t3FNg/
Try setting the z-index lower for whatever div wraps the text. assuming it's contentText use:
#contentText {
position:absolute;
z-index:-1;
}
if this isn't your exact solution fiddling with z-indices should be your solution in any case...
I think I am having an issue with my floats, they are not aligning correctly and I feel like it has to do with the way I have my boxes setup. I have tried changing the alignment with margin-left and right but am not getting the desired look, I would like all of it to lineup. Here is the html and css.
HTML
<div id="service1">
<center>
<h1>Savings <br />Strategies</h1>
<img src="images/eg1.png" class="alignleft" height="150" width="200" alt="" />
</center>
</div>
<div id="service2">
<center>
<h1>Vendor <br />Management</h1>
<img src="images/eg2.png" class="alignleft" height="150" width="200" alt="" />
</center>
</div>
<div id="service3">
<center>
<h1>Environmental<br /> Stewardship</h1>
<img src="images/eg3.png" class="alignleft" height="150" width="200" alt="" />
</center>
</div>
CSS
#service1 {
float:left;
width:360px;
height:280px;
padding:15px;
}
#service2 {
margin-left:auto;
margin-right:auto;
width:360px;
height:280px;
padding:15px;
}
#service3 {
float:right;
width:360px;
height:280px;
padding 15px;
}
Thanks in Advance!
Why not try displaying each div as an inline-block. Remove all the floats and margins as well.
div { display: inline-block; }
You could set display to inline and remove all the margins:
http://jsfiddle.net/ABVJd/2/
Result: http://jsfiddle.net/ABVJd/2/embedded/result
Either that,, or you could remove all margins and floats and add inline-block, as suggested:
http://jsfiddle.net/ABVJd/3/
Result:http://jsfiddle.net/ABVJd/3/