I have a position:fixed footer on my page so that it scrolls with the page. Inside that footer I have a set of five images. The problem is that the images all hang off the bottom of the footer so the bottoms are not visible. No margin or padding values have moved them to the appropriate place on screen. Is there a css command I am missing or is their something weird with the footer?
This is the css for the footer and images within it. Thanks for any help.
.footer {
background-color: rgba(0, 0, 0, 0.5);
height: 100px;
font-size:20px;
color:black;
font-family:Verdana;
padding-left: 8px;
width: 100%;
position:fixed; left:0px; bottom:100px;
}
.footer img{
width: 59px;
height: 90px;
float: right;
display:inline;
padding: 1px;
margin-right: 50px;
}
<body>
<div class="container">
<div class="header"></div>
<div class="content">
<div class="leftSidebar">
<div align="center">
<h3>Quick Stats</h3>
</div>
<p>Title: Exposure</p>
<p>Author: Kathy/Brendan Reichs</p>
<p>Series: Virals</p>
<p>Length: 436 pages</p>
<p>Publication Date: March 6, 2014 </p>
<p align="center"><img src="../Images/Barnes-and-Noble.png" width="180" height="120" /><img src="../Images/amazon.png" width="180" height="98.18" style="z-index: -1;" /></p>
</div>
<div class="rightSidebar">
<div align="center">
<h3>Kathy Reichs</h3>
</div>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</br></p>
</div>
<div class="middleBar">
<div class="bookTitle" align="center">
<h1>Virals: Exposure</h1>
<h2 style="font-size:24px;">Kathy and Brendan Reichs</h2>
</div>
<div align="center"><img name="" src="../Exposure.jpg" width="315" height="456" alt="" /></div>
</div>
</div>
<div class="footer">
<div class="relatedBooks">
<p>Related Books: ssssss </p>
</div>
<div class="footerImages">
<img src="../Images/Swipe.jpg" width="1000" height="1500" />
<img src="../Images/Code.jpg" width="59" height="90" />
<img src="../Images/Shift.jpg" width="1000" height="1500" />
<img src="../Images/Seizure.jpg" width="327" height="500" />
<img src="../Images/Virals.jpg" width="327" height="500" />
</div>
</div>
</div>
</body>
Just delete the "height: 100px;". It will be set to auto then, and if you want some more space around the images then use something like "padding: 24px 0;" to space it out a bit. There's no reason to declare the height of the footer. It will auto-grow to the size of your images. I imagine that's why they're floating off.
Related
This is probably much easier than I'm making it sound.
Basically I have 6 Images, each with a button underneath...
This is what it looks like:
I just place them like this:
<img src="Image.png" width="350" height="208" style="margin: 0px 16px">
<img src="Image.png.png" width="350" height="208" style="margin: 0px 16px">
<img src="Button.png" width="282" height="84" style="margin: 0px 16px">
<img src="Button.png" width="282" height="84" style="margin: 0px 16px">
It looks great on a typical browser window. But when I make the window narrower, it goes like this:
Which makes sense give how I list my images/buttons.
But I want them to look like this when the window is narrowed:
What can I add to my very basic HTML to keep this in a nice and format no matter how wide the window is?
Ideally I'd like to go from a 2 by x grid as max, down to a 1 by x grid as seen in the first and final images.
A push in the right direction would be amazing.
I did look HERE on Stackoverflow, but it's far more complex as only works with squares.
I look forward to your help :D
UPDATE
https://jsfiddle.net/du6Lu4ge/
looks like this:
when resized, looks like this:
:(
I would do something like this:
https://jsfiddle.net/du6Lu4ge/3/
Hope it helps you out!
What I did was to wrap the image and the button in a div .img-wrapper styled with display: inline-block
this example is working full responsive, you can simply edit the css and add viewports.
html:
<div class="imageContainer">
<div class="imageBlock">
<!--<img class="image" src="image.png">-->
<div class="image">
your image
</div>
</div>
<div class="buttonBlock">
<!--<img class="button" srck="button.png">-->
<div class="button">
your button
</div>
</div>
</div>
<div class="imageContainer">
<div class="imageBlock">
<!--<img class="image" src="image.png">-->
<div class="image">
your image
</div>
</div>
<div class="buttonBlock">
<!--<img class="button" srck="button.png">-->
<div class="button">
your button
</div>
</div>
</div>
<div class="imageContainer">
<div class="imageBlock">
<!--<img class="image" src="image.png">-->
<div class="image">
your image
</div>
</div>
<div class="buttonBlock">
<!--<img class="button" srck="button.png">-->
<div class="button">
your button
</div>
</div>
</div>
<div class="imageContainer">
<div class="imageBlock">
<!--<img class="image" src="image.png">-->
<div class="image">
your image
</div>
</div>
<div class="buttonBlock">
<!--<img class="button" srck="button.png">-->
<div class="button">
your button
</div>
</div>
</div>
css:
.imageContainer {
width: 400px;
display: inline-block;
}
.imageContainer .imageBlock {
display: inline-block;
}
.imageContainer .imageBlock .image {
display: inline-block;
width: 400px;
height: 300px;
background-color: darkred;
}
.imageContainer .buttonBlock {
display: inline-block;
text-align: center;
}
.imageContainer .buttonBlock .button {
display: inline-block;
width: 300px;
margin: 10px 50px; /* simple way to center it */
height: 100px;
background-color: cyan;
}
you can test it on https://jsfiddle.net/q10fbesm/
edit: if you need a 2 line grid, simply put a container arround this html, style it with max-widht: 801px;
I am trying to done is have a responsive div with 2 pictures centered, one in each div.
What I am want it is to drop down, when the screen is small and not big enought to display them side by side.
At the moment with the below when the screen is smaller it pushes the images into each other.
<style>
.container{width:100%}
.inner_container{float:left;width:50%;}
.img_container{width:250px;margin:0 auto:padding-bottom:5px;}
</style>
<div class="container">
<div class="inner_container">
<div class="img_container">
<img src="left_img.png" width="250" height="70" alt="" border="0">
</div>
</div>
<div class="inner_container">
<div class="img_container">
<img src="right_img.png" width="250" height="70" alt="" border="0">
</div>
</div>
</div>
You're using the wrong styles to do what you're trying to do. Mainly, you've set a fixed width of 250px to your img_container div which is why the images aren't getting scaled down. This the correct way to achieve what you want:
.container {
width: 100%
}
.inner_container {
width: 49%;
display: inline-block;
}
.img_container {
width: 100%;
}
.img_container a img {
width: 100%;
}
<div class="container">
<div class="inner_container">
<div class="img_container">
<a href="http://www.google.co.uk">
<img src="http://lorempixel.com/400/200/" width="250" height="70" alt="" border="0">
</a>
</div>
</div>
<div class="inner_container">
<div class="img_container">
<a href="http://www.google.com">
<img src="http://lorempixel.com/400/200/" width="250" height="70" alt="" border="0">
</a>
</div>
</div>
</div>
With the above code, the images keep on getting scaled down and stay on the same line until the window size is reduced to very small. If you would want them to appear on two separate lines after a particular width, you will need to use media-queries like this:
.container{width:100%}
.inner_container { width: 49%; display: inline-block; }
.img_container { width: 100%; }
.img_container a img { width: 100%; }
#media (max-width: 650px) {
.inner_container { width: 100%; display: block; }
}
<div class="container">
<div class="inner_container">
<div class="img_container">
<img src="http://lorempixel.com/400/200/" width="250" height="70" alt="" border="0">
</div>
</div>
<div class="inner_container">
<div class="img_container">
<img src="http://lorempixel.com/400/200/" width="250" height="70" alt="" border="0">
</div>
</div>
</div>
Set a min-width on the .inner_container
.container {
width:100%;
overflow: hidden;
}
.inner_container {
float:left;
width:50%;
min-width: 250px;
}
.img_container {
width:250px;
margin:0 auto;
padding-bottom:5px;
text-align: center;
}
http://jsfiddle.net/63pnotjc/
When I posted my reply, I didn't notice Fahad, Show code snippet link.
Thank you both for your help, this is the css code I went with in the end.
.container{width:100%;overflow:hidden;}
.inner_container{display:inline-block;width:49%;}
.img_container{width:250px;margin:0 auto;text-align:center;padding-bottom:5px;}
#media (max-width:501px){
.inner_container{display:block;width:100%;}
}
Once again thank you both for your help :)
Im trying to make an image header with a full width , but the image always take the container width and not 100% width (even if i put the div outside the container). i have tried almost everything and nothing worked and this answers here didnt help. it may be done if i change the .container width in a custom css but this will ruin the entire site design.
code:
<body style="background-color: #eee">
<div class='container-fluid'>
<div class="row" style='width: 100%'>
<div class='' style='height: 10px; margin: 0 0;padding: 0 0 ; width:100%'>
<img class='' src="images/shape1.png" style='height: 100%; width:100%; margin-bottom: 13px'>
</div>
</div>
<div class='row text-center rowStyle' >
<img id='leftLogo' src="images/kslogo.png">
<img id='rightLogo' src="images/kglogo.png">
<div class='searchContainer'>
<table class='table-responsive searchTable'>
<tr>
<td width='15%'>
<img class='searchButton' src="images/btn-search.png" >
</td>
<td width='85%'>
<input type='text' class="form-control searchInput">
</td>
</tr>
</table>
</div>
<div class="row " style="margin-top: 40px; margin-left: auto !important;margin-right: auto !important ; width: 76%" >
<div class="text-center col-md-4 items" >
<img src='images/btnlog-in.png' class='buttonsLocation'>
<img class="" src="images/Aricles03.png" alt="Generic placeholder image">
</div><!-- /.col-lg-4 -->
<div class="text-center col-md-4 items" >
<img src='images/btnlog-in.png' class='buttonsLocation'>
<img class="" src="images/Aricles01.png" alt="Generic placeholder image">
</div><!-- /.col-lg-4 -->
<div class=" text-center col-md-4 items" style=' position: relative ;'>
<img src='images/btnlog-in.png' class='buttonsLocation'>
<img class="" src="images/Aricles02.png" style=''>
</div><!-- /.col-lg-4 -->
</div><!-- /.row -->
</div>
</div>
<div style='height: 80px; margin-top: 84px;padding: 0 0 ; width:100%; background-color: #e3e3e3;'>
</div>
</body>
EDIT: added full code + screenshot
Im using bootstrap3
any help would be appreciated,
Thanks
May it be, that you forget to close the "<div class='container-fluid'>" tag?
the class .container-fluid has the left and right padding set to 15px. So if you don't need that just override it.
Try:
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="height: 10px; padding-left: 0; padding-right: 0;">
<img src="images/shape1.png" style="height: 100%; width:100%; margin-bottom: 13px">
</div>
</div>
I'm trying to create a 2 column layout with an image to the left and text to the right in wordpress. This needs to be a max of 600px width, the images will all be a fixed size of 250px wide and 142px high, and I will have image/text repeated below, as in this site http://housemusicpodcasts.co.uk/latest-podcasts/
All my attempts have led to the text just appearing below the images. I'd like to just be able to html/css without the need to change core files.
EDIT: Ok I have this code, but it does not align correctly, any ideas what I need to change?
<div class="pod">
<div class="singleblock">
<div class="wp-caption align:left;" style="width: 250px;"><img title="TEST" alt="" src="http://www.djdavestewart.com/site/wp-content/uploads/2013/04/test.jpg" width="250" height="142" hspace="5" vspace="5" />
<p class="wp-caption-text">TEST CAPTION</p>
</div>
<p>TEXT HERE</p>
<p style="text-align:right;">Read More....</p>
</div>
</div>
<div class="pod">
<div class="singleblock">
<div class="wp-caption align:left;" style="width: 250px;"><img title="TEST" alt="TEST" src="http://www.djdavestewart.com/site/wp-content/uploads/2013/04/test.jpg" width="250" height="142" hspace="5" vspace="5" />
<p class="wp-caption-text">TEST CAPTION</p>
</div>
<p style="text-align: left;">TEXT HERE</p>
<p style="text-align: right;">Read More....</p>
</div>
</div>
CSS
.pod p {
margin: 0px;
padding: 0px;
float: left;
clear: right;
}
.singleblock {
float:left;
clear:left;
margin-bottom: 10px;
}
Any guidance will be much appreciated.
Gary
for each couple of image/text, put them in a div. put a class on this div, and on use this CSS
.yourdive img{
float : left;
}
How to make red banner ad shown in the top of : http://forum.creditcardpaymentgateways.in/index.php same as shown in this site: http://www.creditcardpaymentgateways.in ?
I've tried to use this code but not working out:
<div id="anu-utility2" WIDTH="525" style="margin:auto auto">
<img style="display:block;width:529px;margin:auto auto" WIDTH="529" HEIGHT="75" src="http://www.creditcardpaymentgateways.in/images/banners/celebrationoffer4.jpg" title="Click here" /></div>
I want to remove the light colored background rectangle behind the red banner(used in the forum):
The forum is in PHPBB and Site is in Joomla.
you should move anu-utility2 to into rt-utility3
Your Example Source Code:
<div id="rt-utility" class="feature-shadows-light">
<div id="rt-utility2">
<div id="rt-utility3">
**<div id="anu-utility2" width="525" style="margin: auto auto">
<a href="http://www.creditcardpaymentgateways.in/pc-tech-support-payment-gateway-new-offer-from-mumbai-based-comapny.html">
<img style="display: block; width: 529px; margin: auto auto" width="529" height="75"
src="http://www.creditcardpaymentgateways.in/images/banners/celebrationoffer4.jpg"
title="Click here"></a></div>**
<div class="rt-grid-6 rt-alpha">
</div>
<div class="rt-grid-2 rt-omega">
</div>
<div class="clear">
</div>
</div>
</div>
</div>
Do you want same as the below image.
You need the gradient image and the below code to achieve this
css:
img
{
border:none;
}
#bannerbg
{
background:url(gradient-div.png) repeat-x;
background-color:#FFFFFF;
height:75px;
}
HTML:
<div id="bannerbg">
<div id="anu-utility2" WIDTH="525" style="margin:auto auto">
<img style="display:block;width:529px;margin:auto auto" WIDTH="529" HEIGHT="75" src="http://www.creditcardpaymentgateways.in/images/banners/celebrationoffer4.jpg" title="Click here" /></div>
</div>