I'm having a problem with my site's footer.
As you can see on your iPhone (in Safari) the footer image is not displaying correctly and spanning the site's width.
This is the code for the footer:
.footer {
width: 100%;
height: 118px;
background: #000000 url(../images/footer.png) top center !important;
margin: 70px auto 0 auto;
}
<div class="footer">
<div style="width:1100px;height:118px;margin:auto;">
<div id="mc_embed_signup">
<form action="http://SaveWithPride.us7.list-manage.com/subscribe/post?u=0beccc5a2d913b0527a748edc&id=cb6e398bc5" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<input type="email" value="" name="EMAIL" class="email footer-field" id="mce-EMAIL" placeholder="enter your text" onfocus="this.placeholder = ''" onblur="this.placeholder = 'enter your text'" required>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button footer-submit"></div>
</form>
</div>
<div style="width:334px;height:118px;float:right;background:transparent;">
<div class="socialtext">save with pride, socially:</div>
<div class="twitter"></div>
<div class="facebook"></div>
<div class="footertext">© 2013 SaveWithPride.com  All Rights Reserved.  Design by A/D</div>
</div>
</div>
</div>
What am I doing wrong here? The footer background (as it appears now) does not stretch to the edge of the browser on iPhone and seems like its not centered. I am trying to get it centered and at 100% width as it shows on my computer.
So the footer element background is not as wide as the screen? Try adding this:
.footer {
background-size: 100% 100%; /* stretches background */
}
Try it removing the width from the .footer css
Also if you wish to fit the page within iPhone screen change the width of the .footer child div to 940px as shown below
<div class="footer">
<div style="width:940px;height:118px;margin:auto;">
I say change the width because .footer is set to 100% width which will be the equivalent of the iphone screen width therefore the image will stretch only to the screen width. The problem is that the child div may have a width bigger than the iPhone screen width which will require the user to scroll further right and is the reason why the image isn't stretched.
Related
I had tried to have a hunt around for this but I'm not sure how to code the determining width value based on the progress bar values.
Example of progress bar code
<div id="raffle_wise_ticket_bar" title="Sold 139 out of 1399">
<div class="zero">0</div>
<div class="progress" style="width: (This is what I need to calculate);">
<div class="arrow_up" style="border-bottom-color: #ffffff;"></div>
<div class="purchased" style="color: #ffffff; background-color: #000000a3;">139 sold</div>
</div>
<div class="full">1399</div>
</div>
I have php code which gives me the amount sold, min amount, full amount and just looking for something which can take those values and calculate the width in the line.
Thanks
You can make use of CSS calc:
width: calc(var(--amount-sold) / var(--full-amount) * 100%)
Simply replace var(--amount-sold) with the amount sold and var(--full-amount) with the full amount. * 100% is required to convert it to a percentage.
Demo (uses CSS variables for demonstration):
:root{
--full-amount: 20;
--amount-sold:10;
}
<div id="raffle_wise_ticket_bar" title="Sold 139 out of 1399">
<div class="zero">0</div>
<div class="progress" style="width: calc(var(--amount-sold) / var(--full-amount) * 100%)">
<div class="arrow_up" style="border-bottom-color: #ffffff;"></div>
<div class="purchased" style="color: #ffffff; background-color: #000000a3;">139 sold</div>
</div>
<div class="full">1399</div>
</div>
I have two sizes of images (vertical and horizontal), they will always be the same size, respectfully. I am trying to create a container that would hold the image but not push the content over and stay a similar height or width. I also dont want to show the image full size so I was thinking about using overflow:hidden. I have attempted this in a JSFiddle seen here but it stretches the container. Any help is appreciated.
<div>
<span class="mixSpanLeft">
<img src="http://cdn.wallpapersafari.com/26/79/HoFC0h.jpg" />
</span>
<span class="mixSpanRight">
<p>The images will always be on the left and will be only two sizes, 1000x500 or 500x1000. What is the best way to show them if they have alternating sizes? Should I have completely different styles for them?
</p>
</span>
</div>
http://jsfiddle.net/hmjoLmej/4/
What about something like this.
I used the more appropriate flexbox instead of float, which gives greater control of the layout.
The image is added using background, which gives greater control to scale, clip, etc.
Note, since the p is block element they should not be children of a span (which is inline element), so I updated your markup/CSS with a div
Updated, showing how you can add the image source in the markup
.wrapper {
display: flex;
}
.mixSpanLeft {
width: 50%;
background-color: #abc;
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
}
.mixSpanLeft a {
display: inline-block;
height: 100%;
width: 100%;
}
.mixDivRight {
width: 50%;
background: #def;
}
.mixDivRight p {
padding: 2%;
}
<div class="wrapper">
<span class="mixSpanLeft" style="background-image: url(http://cdn.wallpapersafari.com/26/79/HoFC0h.jpg)">
</span>
<div class="mixDivRight">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
</div>
<div class="wrapper">
<span class="mixSpanLeft" style="background-image: url(http://cdn.wallpapersafari.com/29/20/3HE5Mx.jpg)">
</span>
<div class="mixDivRight">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
</div>
I have links of images stored in database,I want to bring the set of images at the centre of the screen (which in my case is left-aligned). No matter how many pictures comes dynamically, the set of the images should be aligned centre.
Iam using bootstrap for designing and here is how my code look like:
<div class="row">
<div class="col-md-12 text-center">
<?php
foreach($n as $val)
{ // loop to iterate 'n' image links
?>
<div class="col-md-1">
<img src="<?php echo $val; ?>" // images showing up.
</div>
<?php
}
?>
</div>
</div>
I am adding an image below to demonstrate the situation.
I have tried the following:
bootstrap classes : center-block (which is based on margin)
bootstrap classes : text-center (which is based on text-align)
bootstrap classes : "img-responsive center-block"
Please Note:
I don't want to push the content toward centre forcefully (like using of bootstrap class "col-md-push-3" or something as such, because the number of images to be displayed is not fixed. They vary time to time)
The column classes you are using to wrap the images [col-md-1]are floated left by default....you'd have to override that behaviour.
.text-center .col-md-1 {
float: none;
display: inline-block;
}
.text-center .col-md-1 {
float: none;
display: inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-12 text-center">
<div class="col-md-1">
<img src="http://lorempixel.com/image_output/city-q-c-100-100-6.jpg" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<div class="col-md-1">
<img src="http://lorempixel.com/image_output/city-q-c-100-100-6.jpg" />
</div>
<div class="col-md-1">
<img src="http://lorempixel.com/image_output/city-q-c-100-100-6.jpg" />
</div>
</div>
</div>
You can still use some good old CSS using FlexBox, as shown on this Fiddle. Basically, it uses a structure like:
<div class="container">
<div class="picture">
<img src="http://lorempixel.com/image_output/food-q-c-200-200-1.jpg" />
</div>
</div>
And then, with some FlexBox properties, you can achieve what you want:
.container {
display: flex;
}
.picture {
flex: 1 1;
width: 100%;
}
img {
width: 100%;
}
To sum up, you put the container in flex mode, and then all its div would occupy same space. Some intermediary divs are required in order to keep the aspect ratio of each image.
If you want to center them in case of you have less pictures available, you can still use the justify-content: center; property, setting a maximum width on the divs, such as this other Fiddle.
Note however that this solution would not work on IE9-.
Make a div with text-align:center
Amand then make a div inside it with display:inline-block
i would to create a pdf file from html with mpdf library. i would to set a background image just to 2'nd page of rendered pdf(not all pages). i use the following code:
$html = '
<body>
<style>
body, div, p {
font-family: \'Tahoma\';
font-size: 11pt;
}
#page second {
background: url("../mpdf60/bg1.jpg") 40% 0 no-repeat;
}
div.second {
page: second;
}
</style>
<div style="margin-bottom:50px"> </div>
<div align="center" style=" margin-bottom:350px"><img src="../mpdf60/pdffirst1.jpg" height="100" width="190" alt=""></div>
<div align="center"><img src="../mpdf60/pdffirst2.jpg" alt=""/></div>
<pagebreak />
<div class="second">
page2
</div>
<pagebreak />
<div>
page3
</div>
</body>
';
but the background image set for all pages that been after second page. i want to set background image just for second page, not ather pages. how can i do this? thanks...
Give some id to the second page div. Like "secondPageDiv".
and then change in css.
#secondPageDiv {
background: url("../mpdf60/bg1.jpg") 40% 0 no-repeat;
}
I am trying a really easy thing, hiding / showing an info div my mouse-hovering another element. My code structure is similar to:
<div class="divRow">
<div class="divColumn">
<div class="divInfo">Info</div><img src="" /></div>
<div class="divInfo">Info</div><img src="" /></div>
<div class="divInfo">Info</div><img src="" /></div>
</div>
</div>
Image is shown, and there should be a blank space in which I want divInfo to appear.
I am using the following jQuery code to show / hide:
$(function() {
$('.divInfo').hide();
$('.divColumn').hover( function() { $('.divInfo').toggle(); } );
});
Of course, this works, but shows / hides all 3 divs in the row at a time. I want to be able to show hide each one separately...
Is this possible using classes? Or do I have to use a different unique ID for each??
Functionality I want is shown here, but I don't know how to do that. :)
http://www.therice-co.com
Regards and thanks
Actually you want the divs to always be there but somehow "not visible" when you are not hovering them. This is as simple as:
.divInfo:not(:hover){
opacity: 0;
}
Fiddle
This is what are you trying to achieve
see http://jsfiddle.net/j0aoy47L/
Javascript
<script>
$(function() {
$('.divInfo').hover( function() {
$(this).find('.info').toggle();
} );
});
</script>
CSS
<style>
.info{
display: none;
text-align: left;
}
.divInfo{
background: #fcfcfc;
border:1px solid #e5e5e5;
width:360px;
height:200px;
position: relative;
margin-bottom: 10px;
text-align: center;
padding:10px;
}
.divInfo img{
position: absolute;
bottom: 9px;
left: 19px;
}
</style>
HTML
<div class="divRow">
<div class="divColumn">
<div class="divInfo">
<div class="info"><h4>Image Caption</h4> <p>Some image information</p></div>
<img src="http://placehold.it/350x100/addd" />
</div>
<div class="divInfo">
<div class="info"><h4>Image Caption</h4> <p>Some image information</p></div>
<img src="http://placehold.it/350x100/addd" />
</div>
<div class="divInfo">
<div class="info"><h4>Image Caption</h4> <p>Some image information</p></div>
<img src="http://placehold.it/350x100/addd" />
</div>
</div>
$('.divColumn').children('a').hover(function () { // bind it to exact image
$(this).prev('.divInfo').toggle(); // show previous div
});
will work
jQuery DEMO
but you definetely have too much closing </div>s
also you can do it with pure CSS if you wrap each info and image in separate div and use :hover on it
PURE CSS DEMO