My background images have not been spanning the full width of the browser when viewed on an iPad. This has happened more than once now, so it must be in the way I'm writing the CSS.
Here is an example of a footer whose bg image is stopping about 70% of the way on iPad- it has three columns floating within.
I've put the full project up here:
https://github.com/christineh/TJ-portfolio
HTML:
<footer>
<div class="footer_invs">
<div class="footer">
<h1></h1>
<p></p>
</div>
<div class="footer">
<h1></h1>
<img src="" width="32" height="32" border="0">
</div>
<div class="footer3">
<h1></h1>
<img src="">
</div>
</div>
</footer>
CSS:
footer {
background: url(images/footer/background.jpg) repeat-x;
width: 100%;
height: 113px;
margin-top: 250px;
overflow:hidden;
overflow-x:hidden;
}
.footer_invs {
background: url(images/footer/corner.png) no-repeat 186px 0px;
width: 1018px;
height: 78px;
padding-left: 200px;
padding-top: 32px;
}
.footer {
float: left;
width: 275px;
}
.footer h1 {
padding-bottom: 8px;
}
.footer p {
color: #FFF;
padding-bottom: 0px;
line-height: 16px;
padding-top: 0px;
}
.footer img {
padding-right: 10px;
}
.footer3 {
float: left;
width: 120px;
padding-left: 70px;
}
.footer3 h1 {
padding-bottom: 8px;
}
Is there an obvious fix that I'm missing?
I tried using the suggestion above i.e. min-width:1024px in the body tag but it did not work. After a lot of searching I discovered adding it to the html tag also works.
Example:
html {
min-width: 1024px;
}
Pretty sure iPad screen width is 1024px. Is that set anywhere?
body{
min-width:1024px;
}
Note: I've not got mine on me to test.
Related
In my script all content is loaded from a database. It's basicly one page, that retreives its info from the database, depending on which url is clicked. The content is placed into a div. So the height of the div should auto increase, in order to fit the content. With the code I have right now it doesn't. It shows all the content, but the div stays in one size. How do I solve this?
<div class="grid-item grid-item--width100 container">
<div class="img"><i class="fa fa-wrench fa-3x"></i></div>
<div class="innerContainer">
<font class="txt_registerB">Updates</font><font class="txt_registerN"></font>
<br><br>
//Content here
<br>
</div>
</div>
CSS
.container {
background-color: #FFFFFF;
}
.innerContainer {
position: absolute;
top: 15px;
left: 15px;
text-align: left;
padding-right: 15px;
}
.img {
text-align: right;
padding: 15px;
color: #000;
opacity: 0.3;
}
.grid-item {
min-width:160px;
float: left;
margin-bottom: 10px;
}
.grid-item--width100 {
width: calc(100% - 40px);
}
We try to center a CSS circle with a image and a label overlaying the circle. The circle should be horizontally centered in a bootstrap column. Goal is to have this circle always in the horizontal center. Any advise is welcome.
Please see following JSFIDDLE
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<div class="circle1Wrapper">
<div class="circle-textSmall bubble1outer">
<div> <span class="bubbleIconSmall">
<img src="http://lorempixel.com/40/40/" />
</span><span class="bubbleHeadSmall">label</span>
</div>
</div>
</div>
</div>
<div class="col-md-4"></div>
</div>
CSS:
.circle1Wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 9999;
margin: auto;
border: 1px solid;
}
.bubble1outer {
position: absolute;
}
.circle-textSmall div {
width: 125px;
}
.circle-textSmall div {
float: left;
width: 250px;
padding-top: 15%;
line-height: 1em;
margin-top: -0.5em;
text-align: center;
color: #000;
}
span.bubbleIconSmall > img {
width: 45%;
height: auto;
}
.circle-textSmall:after {
width: 125px;
padding-bottom: 125px;
margin-left: 50%;
}
.circle-textSmall:after {
content:"";
display: block;
width: 250px;
height: 0;
padding-bottom: 250px;
background: #ccc;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
It should look like this:
#metaxos, I wanted to put this as a comment, but it is a bit long.
Even when you found a solution that works for you, I think that you may want to consider cleaning that code a bit; look how the original example got rid of most of the code and just kept one div:
.innerwrapper is unnecessary (why not put that style directly on #myCircleDiv?);
Same thing for the div that holds the image (you could put that style directly on the image!);
And the img itself can go too (and use it as background of #myCircleDiv).
This is my opinion (feel free to ignore it), but I think you should aim for something cleaner and easier to maintain, rather than a more complex and elaborated (but unnecessary) structure (unless it is required by the user/customer). The simpler, the better.
In that sense, this (you can see it working on this jsfiddle):
<!-- HTML -->
<div id="myCircleDiv">LABEL</div>
/* CSS */
#myCircleDiv {
width:250px;
height:250px;
border-radius:50%;
display:inline-block;
line-height:375px;
text-align:center;
color:white;
background:url("http://lorempixel.com/50/50/") #ccc no-repeat 50% 38px;
}
Looks beter than this:
<!-- HTML -->
<div id="myCircleDiv">
<div class="innerWrapper">
<div>
<img src="http://lorempixel.com/50/50/" />
</div>
<div>LABEL</div>
</div>
</div>
/* CSS */
#myCircleDiv {
width:250px;
height:250px;
border-radius:50%;
display:inline-block;
background-color:#ccc;
background-size:250px 250px;
line-height:250px;
text-align:center;
color:white;
}
.innerWrapper {
width: 100%;
height: 250px;
}
.innerWrapper div {
float: left;
height: 125px;
width: 100%;
line-height: 125px;
}
.innerWrapper div img {
margin-top: 38px;
}
And the result is exaclty the same. But again... that's my opinion :)
I'm trying to have a clickable image centered in a footer area. I've tested on Chrome and Firefox and the entire footer is clickable. Chrome inspector shows the element as 0 pixels tall and 0 pixels wide. What am I doing wrong?
PS: I'm using Twitter Bootstrap
Here's the CSS:
body {
margin:0;
padding-top: 0px;
margin-bottom: 20px;
}
#footerLogo {
display:block;
margin-left: auto;
margin-right: auto;
width: 73px;
}
#footer {
position: fixed;
bottom: 0px;
width: 100%;
padding-top: 5px;
padding-bottom: 5px;
background-color:red;
}
Here's the HTML:
<div id="footer">
<img id="footerLogo" src="/images/footer.gif">
</div>
Add to #footer a text-align: center to mark centering of elements within it, and margin: 0 auto to the #footerLogo and remove the display:block - since the block sets the <a> tag to box and occupies the whole parent container.
http://jsfiddle.net/T4PSS/
<div id="footer">
<img id="footerLogo" src="/images/footer.gif" />
</div>
notice how I closed the img element />
The problem with the whole footer clickable is the display: block , also take out the margins for the img
#footerLogo {
display:block; //this line - take it out
width: 73px;
}
if you want to center it , then center <a>
#footer a {
position: relative;
margin: auto;
width: 74px; //this may be necessary for IE7
}
this is because you are using
margin-left:auto;
margin-right: auto;
without a specified width, apply id="footerLogo" to the <a> instead:
<style>
body {
margin:0;
padding-top: 0px;
margin-bottom: 20px;
}
#footerLogo {
display:block;
margin:0 auto;
width: 200px;
}
#footer {
position: fixed;
bottom: 0px;
width: 100%;
padding-top: 5px;
padding-bottom: 5px;
background-color:red;
}
</style>
HTML:
<div id="footer">
<a id="footerLogo" href="#"><img src="/images/footer.gif" /></a>
</div>
I seem to be having a problem with my footer growing to 100% width of the page. Currently when it expands there is a gap on each side of the footer. I tried putting the footer outside the the wrapper and inside and pretty much get the same results. I've attached my code to see if anyone can spot what im doing wrong.
<div id="wrapper"> <!--Begin Wrapper -->
<div id="riaandoviwrap">
<div id="riaandovi">Ria And Ovi</div>
</div>
<div id="slideshowwrap">
<div id="slideshow"><img src="images/DSC00495.JPG" /></div>
</div>
<div id="slideswrap">
<div id="slide1">SLIDE 1</div>
<div id="slide2">SLIDE 2</div>
<div id="slide3">SLIDE 3</div>
</div>
<hr />
<div id="contentwrap">
<div id="content"></div>
</div>
<div id="footerwrap">
<div id="footerleft">© 2012 Ria and Ovi</div>
<div id="footerright">Share this on:</div>
</div>
</div> <!--End Wrapper -->
body {
background: #f7f6f6;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
#wrapper {
width: 100%
}
#riaandoviwrap {
width: 300px;
min-height: 150px;
}
#riaandovi {
font-family: Script;
font-size: 75px;
}
#slideshowwrap {
width: 950px;
background: url(../images/slider-bg2.png);
clear: both;
}
#slideshow {
min-height: 350px
}
#slideswrap {
width: 950px;
min-height: 100px;
background: #09F;
margin-top: 6px;
clear: both;
}
#slide1 {
width: 300px;
float: left;
}
#slide2 {
width: 300px;
float: left;
}
#slide3 {
width: 300px;
float: left;
}
#contentwrap {
}
#content {
}
#footerwrap {
min-height: 105px;
background: url(../images/footer-bg.png);
margin: 0px;
}
#footerleft {
width: 350px;
float: left;
}
#footerright {
width: 350px;
float: left;
}
hr {
max-width: 950px
}
img {
border: 5px solid #FFF
}
Set padding and margin to zero for the body tag. Althought you're not setting one manually, browsers do have a default padding/margin.
Include a reset sheet in your document to reset all of those default styles. Recommend Eric Meyer's since its more complete:
http://meyerweb.com/eric/tools/css/reset/
i have a problem with float divs. i try everything, i search everywhere but i cannot find (maybe i use wrong keywords to search, i dont know)
here is the codes:
<div class="mbody">
<div class="mheader"> header content </div>
<div class="mmenu"> menu content </div>
<div class="mcontent">
<div class="content-right">
<div class="r-cont">
<div class="r-cont-header"> header goes here </div>
<div class="r-cont-content"> <p>• There is a sample right content...</p></div>
</div>
</div>
<div class="content"> contents goes here </div>
</div> <!-- mcontent ends here -->
<div class="mfooter"> footer content </div>
</div> <!-- mbody ends here -->
and here goes css codes:
.mbody {
clear: both;
width: 920px;
position: relative;
overflow: visible;
height: auto;
margin: 0px auto;
}
.mheader {
height: 163px;
width: 856px;
background-image: url(img/header.png);
padding: 32px;
}
.mmenu {
height: 40px;
width: 920px;
background-image: url(img/menu-bg.png);
}
.mcontent {
width: 880px;
overflow: visible;
padding: 20px;
height: auto;
background-color: #FFF;
clear: both;
}
.content-right {
width: 200px;
float: right;
}
.content {
margin-right: 220px;
}
.r-cont {
clear: both;
width: 200px;
}
.r-cont .r-cont-header {
background-image: url(img/menu-head.png);
height: 32px;
width: 168px;
line-height: 32px;
color: #FFF;
padding-left: 32px;
font-weight: bold;
font-size: 16px;
}
.r-cont .r-cont-content {
background-color: #F8AF6B;
font-size: 12px;
padding: 6px;
}
.mfooter {
height: 60px;
width: 920px;
background-color: #F58220;
background-image: url(img/footer-bg.png);
clear: both;
}
here we go...
if .content's content is smaller then .content-right, .mcontent's heights is equal to m.content's min-height, so i didn't set it. it equals to .mcontent's padding-top and bottom. left out area has not any background. i cannot set .mbody background because i use rounded the corners with JavaScript and if i use a background corner's outside has the color of .mbody ...
my customers still use ie6, so i cannot any css effects and css3 codes...
thanks in advance...
.class1 .class2 cause problems in IE6 try to use #id1 .class1 like these places .r-cont .r-cont-content
I think you're problem is what's called the 'collapsed parent', i.e. the container div is not as tall as the content within in.
If this is your problem then there are four solutions. I would recommend changing the overflow value of your .mcontent div to hidden (from visible). This solution is compatible with IE6 as you have set a width of the parent.
.mcontent {overflow: hidden;}
Read the section "Fixing the Collapsed Parent" at the link below for more information (and the other three solutions):
http://www.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/