Is it possible to load my webpage so that top-left pixel isn't the first one but rather somewhere else?
This is my current webpage layout and I'd like my webpage to be loaded so that top-left pixel is right where red arrow lands
I think I understand your request: it sounds like your goal is to have a single-column page and then exclusively in the about section with the right/left blocks you'd like to be able to scroll left/right.
If that's correct, I would restructure your page to have just the middle column, and then use css positioning on your #about section like this:
#about {position: relative;}
#left {position:absolute; left:-100%; width:100%; min-height:100%;}
#right {position:absolute; left:100%; width:100%; min-height:100%;}
You might need to do something with your body overflow, too:
body {overflow-x:hidden;}
Then to actually create the functionality you want, you could use javascript/jQuery to animate the sections left/right when you click on the anchors in the #about section.
Or you could use this js plugin, which works extremely well and is designed for just this type of layout: http://alvarotrigo.com/fullPage/
For whole container or body tag apply this css
position: absolute;
top:0;
left:0;
Related
Just like a page http://9to5mac.com , I want to make the navigation bar fixed when it goes on top of the web page.
Do I have to use Javascript or other way using CSS? and how?
You can do this using CSS.
You can use position:fixed; to fix the position of the navigation bar.
for example, if your navigation bar has class="navigation"
then you can fix its position like this.
.navigation {
position: fixed;
height:50px;
width: 100%;
margin-top: -1.5em;
}
In this code position:fixed; fix the position of the div(nav bar) height determines the height of the div width:100%; covers full width of the screen while margin-top: -1.5em; determines the position of the div from top.
CSS3 - currently only in Firefox, via "position: sticky" but it should start working in newest browsers during this year as well (hopefully).
https://developer.mozilla.org/en-US/docs/Web/CSS/position
Cross-platform solution: Javascript (jQuery), search for it (keywords: sticky header jquery javascript), there are many nice libs out there.
If you take a look at gravitatedesign.com and you see the navigation bar is pink, and the letters are there, I want that bar to be there when I first load the page, not necessarily that color but I want it to be up there and to scroll with the page. How do I do this?
This is called a sticky header. There are lots of tools that you can use to implement this but the easiest way is to just apply the following code to your header tag:
header { position: fixed; }
For Pink colored bar, you should use
{
position:absolute;
margin:0;
left:0;
right:0;
top:0;
height:40px;
}
I have read all of the examples of this already and they are not complete and or do not work. What I need is a footer that will be at the bottom of the page always. However if there is no content to fill the area in the middle the footer still needs to be at the bottom of the page rather then in the middle. I tried this Method and this Method Neither of which work. The first does not seem to work at all, and the second forces it to the bottom of the page, if there is content or not, but if there is content, I.E you would have to scroll normally the footer is in the middle of the page as you scroll down. Any help would be great.
As you have not posted code (HTML or CSS) I am just guessing :
#wrapper{
min-height:100%;
position:relative;
}
footer {
position: absolute;
bottom:0;
left:0;
width:100%;
background:red;
height:100px;
}
Demonstration: footer with content
Demonstration: footer without content
I'm working on a personal website (a portfolio site, I guess), and have things looking how I want when the browser window is full-screened, but parts get cut off when the window is shrunk down (of course). I'm using Windows 7, and always dock a window on either side of my screen. It would be really great to have my website work so that certain parts are fixed in place when the browser is full-screened, but once the browser window hits a certain size, they then move in as the window shrinks. Is this possible? Does this require JavaScript (which I'm not good at at all)?
Here is a link to screen-shots of the page in question, with the third image being shopped to show what I want to happen:
http://imgur.com/a/EDWjh#0
I want the side-nav (black box/text on the left) and the logo (top-right, which also links to my index page) to be fixed when the window is big, but pinch in (and be flush with the sides of the browser window) when it shrinks.
The CSS for the pieces in question are:
#blackbox{
background-color: black;
width: 175px;
height: 180px;
left: 50%;
margin-left: 355px;
margin-top: -20px;
position: fixed;
z-index:4;
}
#navleft{
width: 175px;
height:430px;
background-color:black;
position: fixed;
margin-top: -50px;
left: 50%;
margin-left:-530px;
}
And the relevant HTML is just divs, with the top-right black box having a section for the logo image, which links to my index page, and the left side-nav having text links to other pages.
For what it's worth, the meat of the page is a 1060px wide container.
I hope some of you can help me with this, and I sure hope the solution isn't too tough. Thanks a lot in advance for all of your time and guidance, and I'd be more than happy to answer any questions I can. Thanks!
#media
As correctly pointed out by Chris, you can use media queries to do this without needing javascript. See here: jsfiddle
Note that the same applies as the jQuery example - jsfiddle moves the middle bar when resizing the page, this will not happen when using the full browser page.
The relevant css is:
#media screen and (min-width: 400px) {
.testPos
{
right:auto;
left:200px;
}
}
jQuery
Here is a simple example with an input showing how to do it using jquery: jsfiddle
The input will be in a fixed position until the window is resized to be too small, then it will stick to the right. Note: because the jsfiddle middle bar moves according to the size, the input will also move initially, this will not happen on a normal window where the side of the browser that are not being resized are fixed (note that the distance from the bar will be constant).
There are css classes that are added and removed according to the size of the window:
.naturalPos
{
left:200px;
}
.stickRight
{
right:0px;
}
It does not require JavaScript on modern browsers (ones that support CSS version 3). You can use media queries to serve up different CSS depending on the width of the viewport.
Example from the linked article:
#media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
If you need this to work using Javascript you can use the window.resize event to wrap whatever functions you require to adjust the page:
window.onresize = function(event) {
...
}
First of all, I don't want to just remove it, I want to ensure that there is still scrolling capabilities there also.
This is because I would like to have a 'slide show' affect on the website, where you can click 'next' and before, however with the scroll bar there, you can just go through it.
I have hidden the scrollbar in other browsers using:
::-webkit-scrollbar {
display: none;
}
for webkit browsers and overflow: -moz-scrollbars-none; for Firefox. However, when it comes to IE, I can't find anything to simply hide it.
I found these on the internet:
scrollbar-3dlight-color:;
scrollbar-arrow-color:;
scrollbar-base-color:;
scrollbar-darkshadow-color:;
scrollbar-face-color:;
scrollbar-highlight-color:;
scrollbar-shadow-color:;
I thought by changing the colour to transparent, it would disappear, but it did not (just reverts back to normal).
Is there a way I can simply hide the scrollbar (simply like display:none or something else), in IE? I am open to css and js options.
jsFiddle of problem
NOTE: Adding overflow:hidden; stops the page from going past the second div when clicking the a tag.
See here for fiddle using your current code
Try this trick
body, div, html{
height:100%;
width:100%;
padding:0;
margin:0;
}
body{
overflow:hidden;
position:fixed;
}
div{
overflow-y:scroll;
position:relative;
right:-20px;
}
It offsets a scrollable div so its vertical scrollbar is outside the viewable area.
I have similar problem, I don't need scroll bars on main page, but i have to have inside of my page content like in div's and span's.
So I found solution like this:
body {
-ms-overflow-style: none;
}
div, span {
-ms-overflow-style: auto;
}