Set up a website at www.fleetwoodlifecoaching.co.nz and everything looks great when viewed from a desktop computer, however when I view the website from my iPad an odd white space appears between two fixed position divs that make up the nav bar and heading areas (see screenshot). They've been positioned pretty precisely and clearly the way iPad decodes this breaks it - what's the best way to get around this?
Thanks in advance for your help
Apparently I don't have enough reputation to post an image so here's an imgur link. http://imgur.com/0PEn41r
EDIT: So basically I have two divs that are right up against one another, one called nav that runs down the left side and another called header that runs along the top. Below is the CSS for each:
#nav {
position: fixed;
margin-left: -8px;
margin-top: -17.5px;
padding-left: 40px;
width: 140px;
height: 100%;
background: #8E8074;
list-style: none;
z-index: 7;
}
#header {
position: fixed;
width: calc(100% + 16px);
height: 100px;
background-color: #8E8074;
margin-left: -8px;
margin-top: -120px;
padding-bottom: 3px;
z-index: 6;
}
Maybe try to make the margin on the bottom of the first block negative by a few pixels. If that pulls the second block up a bit that might cover up the white line. If that doesn't work than its clearly a coding problem and not that there actually is a gap or strip that is white in your design. Something to try maybe before you really dive into it.
The .5px is likely being rounded up to -17px by mobile safari leaving the 1px gap between the two divs, try changing the margin-top of the #nav to -18px instead of -17.5px.
The #nav style would then become:
CSS
#nav {
position: fixed;
margin-left: -8px;
margin-top: -18px;
padding-left: 40px;
width: 140px;
height: 100%;
background: #8E8074;
list-style: none;
z-index: 7;
}
Related
I did try using position:fixed; (I saw another topic with similar problem)
Here is the page I am working on
The Problem: click on the "*Click to view acute conditions" which is under Same Day Appointments. This opens up a div that is position:fixed 50% top & left of the page but not when scrolled down.
Here is a Jfiddle (only the preview frame: http://jsfiddle.net/u5cXv/2/embedded/result/)
The Code: Below is the parent div
#ubookwhite_content {
Background-color:#fff;
display:none;
position: fixed;
outline:solid 10px #cccccc;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -400px;
width: 800px;
padding: 25px;
z-index:1002;
overflow: auto;
}
The Javascript is a simple open close function. Can you please help me understand why this doesn't position when scrolled down.
You are defining the styles for that element in two places. Here is the other one:
#ubookwhite_content {
Background-color: #fff;
display: none;
position: absolute;
border: solid 5px #cccccc;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -400px;
width: 800px;
padding: 25px;
z-index: 1002;
overflow: auto;
}
That second is after the first and uses position:absolute
The width of your #ubookwhite_content is 800px, but once the padding is added in, the actual element width is 850px. This is setting your element off by 50px when you use margin-left: 400px.
You can either make the width: 750px or make the offset margin-left: 425px. Either way takes into account the additional width of the padding: 25px.
http://jsfiddle.net/u5cXv/4/
Your website doesn't match what you copy and pasted onto the website. The position on the website isn't fixed: it's absolute, which is completely different. If your code says fixed, you may need to re-upload to your server.
This is apparently located on index: line 860.
I would also recommend using google's "inspect" command in order to investigate later issues.
Try removing the margins or playing around withit. Keep the position: absolute
margin-top: -150px;
I've wasted numerous hours on this and cannot seem to get it to work, I've read many answers on here already but none seem to be helping.
I have a header DIV then then two DIV's underneath floated Left of eachother. the menu on the left and content on the right. the right i have set Overflow: hidden so it sits next to the menu div on left and against broswer on right.
Now i want the menu Div on the left to fill the height downwards to match the content div on the right but i cannot for the life of me seem to get the settings right.
The link to website is here http://www.mxbempire.com
Anyone shed some light on this?
im not 100% sure what you are asking.
however using static attributes on your header and menu would give it a 'wiki-feel'
adding this to your CSS will give an example
.menu{position:fixed; top:80px}
.headercontainer{position:fixed; top: 20px;}
.user{padding-left: 200px; float:none;}
.card{margin: 90px 25px 0 250px;}
use this in your css
.headercontainer {
width: 100%;
height: 60px;
margin: 0 auto;
background-color: #2C2E33;
position: fixed;
top: 0;
.two {
float: left;
width: 220px;
position: fixed;
top: 60px;
}
You can try adding this styles to your css:
.headercontainer {
position: fixed;
z-index: 10;
}
.menu {
height: 100vh;
margin-top: 60px;
position: fixed;
}
.three {
margin-left: 220px;
padding-top: 60px;
}
I'm not sure how it will behave on older browsers, soo just try it.
I am trying to build a page that has a header and a left-sidebar, and has an iframe in the content area. I wan't the Iframe area to fill the whole content area(the whitespace), but cant seem to get it to work. I am looking for the IFrame to fit perfectly, meaning that it begins where the header and left menu edges end. I can only seem to get it to span from one side of the page to the other, or get it in the middle of the whitespace.
Can anyone help?
Here is the JsFiddle: http://jsfiddle.net/P9CH9/2/
When removing the <div id="iframe-content"> it will span the iframe from one side of the page to the other.
I was able to achieve what I wanted by manually adding the margin top and left to the iframe container and also set the Top, left, right, bottom to 0 as such:
.abs-frame-container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin-left: 250px;
margin-top: 55px;
}
Here is the latest JFiddle, I added black to show where the iframe is since JsFiddle doesn't seem to allow Iframes. http://jsfiddle.net/P9CH9/4/
You set width 100% for wrappend and fixed the menu, so the wrapper does not consider at all the menu and gets the full width of the screen
Main Modification :
.menu {
background: none repeat scroll 0 0 #202020;
float: left;
margin-top: 55px;
position: fixed;
width: 25%;
height: 100%;
z-index: 2147483647;
}
.wrapper {
float: left;
margin-top: 55px;
width: 75%;
margin-left: 25%;
}
And this solution is responsive.
See : http://jsfiddle.net/joseapl/P9CH9/5/
I have seen people ask questions about how to get two divs to line up side by side. I can get mine to do that just fine.
My problem is that they will not smash up against each other. There always seems to be a gap.
For example, I have a wrapper div with a width of 500px. Inside that div I have two other divs with widths of 250px.
They will not line up next to each other because there is not enough space for each other.
When I set the width to 248px they do line up but with a 4px gap between each other.
I have an example of this code located here:
https://c9.io/riotgear66/day1/workspace/sams/html/index.html
Please feel free to take a look at it and try adjusting it with your browser's element inspector.
The layout problem is the result of applying display: inline-block to the div elements.
Any white space between those div elements are taken into account when laying out the content.
You could remove the white space (linefeed or carriage return) between the div's if you don't mind how your source code looks.
Since your parent container has specific dimensions (500px x 300px), I would use absolute positioning to place the child elements. This would make it easier to position your logo motif over the other images.
You could also use floats as stated in other responses, not any easier or harder.
In this application, the layout is fixed so there are no design considerations for a responsive or flexible design, so either approach is valid.
Demo
You can see how this might work in the following demo: http://jsfiddle.net/audetwebdesign/hZ5dB/
The HTML:
<div class="container">
<div class="panel ul"></div>
<div class="panel ur"></div>
<div class="panel ll"></div>
<div class="panel lr"></div>
<div class="overlay"><span>Cats</span></div>
</div>
and the CSS:
.container {
border: 1px dotted blue;
width: 500px;
height: 300px;
position: relative;
margin: 0 auto;
}
.panel {
width: 250px;
height: 150px;
position: absolute;
}
.ul {
background: red url("http://placekitten.com/400/400") -50px -20px no-repeat;
top: 0; left: 0;
}
.ur {
background: red url("http://placekitten.com/300/300") 0px -30px no-repeat;
top: 0; right: 0;
}
.ll {
background: red url("http://placekitten.com/350/250") -20px -20px no-repeat;
bottom: 0; left: 0;
}
.lr {
background: red url("http://placekitten.com/300/200") 0px -30px no-repeat;
bottom: 0; right: 0;
}
.overlay {
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
}
.overlay span {
display: block;
background-color: gray;
border-radius: 50%;
text-align: center;
vertical-align: middle;
width: 80%;
height: 80%;
margin: 10%;
line-height: 80px;
}
I also show how you can create the circular motif without having to modify the original background images, saves a bit of work with PhotoShop or similar.
You shouldn't be using
display: inline-block;
Make them:
float: left;
Here is a jsfiddle sample of how it should be.
http://jsfiddle.net/Tqdqa/
The problem lies in the white space in your HTML. When using display: inline-block, white space after elements is taken into account like Marc Audet said.
To fix it without changing your current method, you must remove that white space. The easiest way I've found to do so while still maintaining readability of the HTML is by commenting it out, or using <!-- after each element and --> before the next element. This prevents having to change the whole structure and you can make each one 250px again as well
You could also move the closing > to the next line, move everything after the opening <div> to the next line, or use margin-left:-4px; for each element after the first. Or use a method described by others here, floating it or using FlexBox
Here is the CSS Tricks page that references this situation and provides more detail
I'm trying to create this design for a WP template:
http://minus.com/lbi1iH25EcKsu7
Right now I'm like this: http://www.uncensuredftw.es/plantilla-blueftw/boilerplate/index.html
I think you can get the general idea ;)
I know...it's my fault: The browser calculate the size of the window from left to right, so if I put a margin it will move the div with the 100% size to de right.
But the thing is: I don't know how to make it work :(.
I wanted to make the "black bars" with divs (I painted the ones than don't work in red and orange) and the trick worked...but only the left ones works like I want.
I'm getting out of ideas. I tried like everything I could think off, and nothing works.
Maybe you can help me? ;)
This is the html code:
<div class="barraUL"></div><div class="barraDL"></div>
<div class="presentacionbg"></div>
<div class="presentacion">
<div class="barraUR"></div><div class="barraDR"></div>
And this the css:
.barraUL {
position: absolute;
width: 50%;
height: 27px;
background-color: black;
right: 50%;
margin-right: 500px;
margin-top: -20px;
}
.barraDL {
position: absolute;
width: 50%;
height: 27px;
background-color: black;
right: 50%;
margin-right: 500px;
margin-top: 309px;
}
/* This next two are the ones than "doesn't work" */
.barraUR {
position: absolute;
width: 50%;
height: 27px;
background-color: red;
left: 50%;
margin-left: 500px;
margin-top: -4px;
}
.barraDR {
position: absolute;
width: 50%;
height: 27px;
background-color: orange;
left: 50%;
margin-left: 500px;
margin-top: 325px;
}
The right divs are expanding to 50% the window width. For a liquid layout where the bars extend to the length of the window and then cut off, you'd usually make an underlaying div (in this case the bars and the black patterned background) and then expand it to 100% of the window. You can't make an additive layout using relative lengths like percent (left div + fixed middle image + right div) with just CSS (especially not with absolute positioning). If you insist on using this, you'll have to overflow: hidden; the html {} or body {} tag after centering your content and that's just bad practice. I recommend just having two long divs go all the way across the screen under your sprite image.