Im working on some CSS with a web app that I am doing, and I have finally got what I want my page to look like encoded in the css.
#searchNavBar {
position: relative;
width: 100%;
left: -53%;
top: -40px;
height: 70px;
}
#searchResultsDoodle {
position: absolute;
left: 0px;
top: 10px;
width: 100px;
height: 50px;
}
#searchResultsSearchBar {
position: absolute;
left: 110px;
top: 10px;
width: 690px;
height: 50px;
}
#searchResultsSearchButton {
position: absolute;
left: 810px;
top: 10px;
width: 100px;
height: 50px;
}
So I've got a navbar type thing along the top, with a picture, search bar, and a button. Actually taken heavy inspiration from google ;)
Things look good now, however, when I do a "ctrl+", increasing the size of the page, the formatting gets thrown completely off, the search bar drawn to the center of the page, etc... is there any way to write the CSS for this code such that, in the event I increase or decrease the size of the page, the things on the page will attempt to stay as close as they can, proportionally speaking, to the locations that I initially wanted them on the page?
Related
I've tried a number of solutions but with no success.
Here is a simplified page demonstrating the problem.
I fixed it.
I found the solution after finding a similar problem with a page using html5 columns. The modals would work in the first column but not in the second. I found that the modal static position overlapped the position of the link-image in the second column though it was not visible.
In the original problem I changed the css from:
#modal1{
position: absolute;
margin-left: -20%;
padding: 20px;
opacity: 0;
width: 40%;
top: 100px;
left: 50%;
}
#modal1:target {
opacity: 1;
}
To this:
#modal1{
position: absolute;
margin-left: -20%;
padding: 20px;
opacity: 0;
width: 40%;
top: 100px;
left: -1000px;
}
#modal1:target{
position: absolute;
margin-left: -20%;
padding: 20px;
opacity: 1;
width: 40%;
top: 100px;
left: 50%;
}
Now the modal static position is well off the page and is no longer where it can be clicked.
I realize this was a noobie mess-up but I finally got it.
Roy
I'm developing a mobile website that has essentially three divs a header, content, and footer. I want the header and footer to be fixed and the content scrollable if there is over flow. Right now my css is:
#header{
top: 0;
left: 0;
height: 8%;
width: 100%;
position: fixed;
text-align: center;
text-height:font-size;
}
#content{
top: 8%;
left: 0;
bottom: 15%;
width: 100%;
position: fixed;
margin: 0;
padding: 0;
overflow: auto;
z-index: 0;
}
#footer{
height: 15%;
width: 100%;
position: fixed;
text-align:center;
bottom: 0;
left: 0;
z-index: 1;
}
This works perfectly, however in the content I have some text fields and on a mobile device when the keyboard pops up the header and footer also get pushed up making the content field too small. Is there anyway to keep them fixed but not have them get pushed up when entering in text?
You could just hide the footer using JavaScript every time a textfield gains focus, since the fact that the website gets smaller is hard-coded in the operating system (which is responsible for showing the keyboard)
This can be done using jQuery, or for mobile even better (because smaller): zepto.js
Hope that helps
#content{
top: 8%;
left: 0;
bottom: 15%;
**width: 100%;**
position: fixed;
margin: 0;
padding: 0;
overflow: auto;
z-index: 0;
}
Change this highlighted text into px value.
% values adjust the object based on your browser size.
I've got this css code that makes a webkit scrollbar.
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
This will make a scrollbar that will be right next to the screen edge. Is there any way that I can put some space between the screen edge and the scrollbar?
Here is an interesting solution to what I think you are talking about; they actually put padding/position on the body element:
body {
position: absolute;
top: 20px;
left: 20px;
bottom: 20px;
right: 20px;
padding: 30px;
overflow-y: scroll;
overflow-x: hidden;
}
Do not do this, you will be murdering usability.
If a scrollable region extends to the edge of the screen, the scrollbar must also be at the edge of the screen. This way, the user can simply hit the edge of the screen with their cursor and use the scrollbar. This action doesn't require visual attention or precise positioning; it's a simple, easy movement.
If the scrollbar is not at the edge of the screen, the following will happen:
The user will want to scroll the content which will unconsciously translate to hitting the edge of the screen with the cursor.
This unconscious scrolling action will fail, breaking the user's focus on the content.
The user will look toward the cursor to see what's wrong.
After detecting the problem, the user will have to make a precise movement of the mouse to position the cursor over the scrollbar. The difficulty of this movement is even greater if you use a non-standard, narrower scrollbar.
The user will click and drag, scrolling the content and returning their focus to it.
Even if all this takes a second, it's still very annoying and completely unnecessary, and, I imagine, quite likely to make the user take their business elsewhere.
Change the width of the scrollable element. For instance...
#div_content {
width: calc(100% - 20px);
}
That way, the other elements of the page are unaffected. For instance.
<div id="div_header">Welcome</div>
<div id="div_content">
Scrollable content goes here.
</div>
<div id="div_footer">©2015 by Whomever</div>
Sample CSS...
#div_header {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100px;
}
#div_content {
position: absolute;
left: 0;
top: 100px;
width: calc(100% - 20px);
height: calc(100% - 140px);
padding: 50px;
overflow-x: hidden;
overflow-y: auto;
}
#div_content::-webkit-scrollbar {
-webkit-appearance: none;
}
#div_content::-webkit-scrollbar:vertical {
width: 5px;
}
#div_content::-webkit-scrollbar:horizontal {
height: 5px;
}
#div_content::-webkit-scrollbar-thumb {
border-radius: 8px;
border: none;
background-color: #404040;
}
#div_footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 40px;
}
I'm currently working on this page and as it loads initially, the slideshow thumbnails will be where they're supposed to be but drops second later. I've tried changing the CSS from
.pika-thumbs {
width: 995px;
margin-left: 55px;
}
To
.pika-thumbs {
width: 995px;
margin-left: 55px;
position: relative;
top: -150px;
Z-index: 999;
}
and it stayed exactly where I wanted it to stay but the space stays and goes away when I remove the whole like of CSS.
You forgot your semi-colon after relative:
.pika-thumbs {
width: 995px;
margin-left: 55px;
position: relative;
top: -150px;
z-index: 999;
}
Edit:
and it stayed exactly where I wanted it to stay but the space stays
and goes away when I remove the whole like of CSS.
This is the reality of using position: relative and top with negative values. Try margin-top: -150px; instead of top.
position, not positioning:
.pika-thumbs {
width: 995px;
margin-left: 55px;
position: relative;
top: -150px;
z-index: 999;
}
here is my site
http://iadprint.com/about
i am trying to make the menu tag and the colright div to have a height of 100% and stick to the footer div pushing down to the bottom. but no matter what i try nothing works. i have tried validating the html but only 3 errors exist which arent that important to fix. what ami doing wrong?
You need to use faux background technique, CSS (possibly with table-cell) or JavaScript.
I'm a fan of fixed layouts for this sort of scenario where you want a footer to always appear at the bottom of the window:
header
{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 130px;
}
nav
{
width: 960px;
margin: 0 auto;
}
article
{
top: 130px;
bottom: 120px;
left: 0;
width: 100%;
position: fixed;
overflow: auto;
}
footer
{
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 120px;
}