I'm trying to move up the cache bar at the webpage: http://www.skandicinkasso.de/ - cant move the element because it is at the bottom of the "DOM"
I have been trying remove that positioning, and put the element inline where i wanted it, but i cant do that way.
i want to move the bar to here: http://prntscr.com/fsqb5d
Change your ginger_container.bottom css to
.ginger_container.bottom {
position: fixed;
left: 0;
right: 0;
top: 125px;
overflow: hidden;
padding: 10px;
width: 1100px;
margin: 0 auto;
}
remove bottom: 0 and add top: 125px; width: 1100px; margin: 0 auto;
Isn't that enough?
.ginger_container.bottom {
border-top: 1px solid #cccccc !important;
top: 125px;
height: 28px;
}
In the CSS : From .ginger_container.bottom remove position:fixed; and all other position attributes(left,right,bottom).
In the HTML : Move the entire <div class="ginger_banner-wrapper"> and its contents into the header and palce it just above the closing header tag </header>.
Output: Its fixed and stays close below the navigation bar.
Related
I want to build a page so that all content is in the middle of the page. But as I resize the browser, the content goes to minus left and I cant even scroll it.
I want something like this: https://www.apple.com/au/mac/.
Here all content is in the middle and if I resize the browser to a smaller width then I can still scroll horizontally to see all content.
I have tried something similar but when I resize the browser, my content goes to the left beyond the left margin and I cant scroll to the left.
This is the code.
CSS:
html, body
width: 100%; height: 100%;
main
position: absolute; top:0; left: 0;
width: 1000px; height: 100%;
left: 50%; margin-left: -500px;
border: 1px solid;
dont use position absolute. try this style for your main:
.main { margin: 0 auto;}
Thanks Jatin. I tried this and it worked!
html, body
width: 1024px; height: 100%;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
main
position: relative;
background-color: grey;
I am designing a web page with a little toggle menu icon for navigation purposes.
My problem is that whenever the window is resized under the width of the main container (.story, which only has max-width defined), the menu icon overlaps the content.
Instead, I would like the icon to block on the right border of my container.
currently, the code for positionning my nav icon:
nav {
position: fixed;
top: 100px;
right: 100px;
}
and the container:
.story {
padding-top: 50px;
margin: 0 auto;
height: 1000px;
max-width: 1000px;
text-align: justify;
}
Here is a jsfiddle to illustrate my problem.
and here is an example of a website where they made it work
Thanks for taking a look at it.
Per my understanding, position:fixed will overlap data.
A simple way can be reducing width of story div.
nav css
nav { position: fixed; top: 20px; right: 20px; }
story css
.story {
padding: 50px 0;
margin: 0 auto;
height: 1000px;
max-width: 400px;
text-align: justify;}
Ok I am running into a little problem positioning an image inside a DIV.
<div id="wholePage">
<img src="theImages/header_shadow_flip.png" id="hF" />
<div id="pageWrapper"><img src="theImages/header_shadow.png" id="bF" />
</div>
</div>
I have the following CSS for both DIVs
#wholePage {
position: relative;
width: 1000px;
padding: 0 10px;
padding-top: 35px;
margin: 0 auto;
}
#pageWrapper {
position: relative;
width: 960px;
padding: 0 10px;
padding-top: 37px;
margin: 0 auto;
}
The CSS for the top shadow, which works just fine. no need to change, is:
img#hF {
position: absolute;
left: 50px;
top: 56px;
z-index:2;
}
But the bottom footer image is giving me issue and the css is:
img#bF {
position: absolute;
left: 50px;
top: 1657px;
z-index:2;
}
Two examples of the page is below:
www.interfaithmedical.com/CheckSite/index.html
www.interfaithmedical.com/CheckSite/ms_gynecology.html
How do I align the bottom shadow image to match the pageWrapper DIV so it is positioned right below it? and doesn't position based on the page itself like it did on the second link. (On the second link, you can see it uses the original spacing and extends beyond page content)
Instead of setting the top: property of bF, try setting the bottom: property of bF to -4px. That way you aren't tied to your page being 1657px tall every time.
img#bF {
left: 50px;
position: absolute;
bottom: -4px;
z-index: 2;
}
I have a gallery plugin in my main page -> http://tranceil.fm
It is set to these css rules:
box_skitter {
position: relative;
width: 985px;
height: 560px;
margin: 52px auto 32px;
background: black;
}
If you take a look at the website, the gallery is not exactly aligned. I want to move it a bit to the right. But whenever I try doing that it looses its grip and moves all around if I resize the window..
How can I move it without making it go along with a resize?!
Use left property instead of margin
box_skitter {
position:relative;
width: 985px;
height: 560px;
left: 52px;//will move the div to 52px right
background: black;}
EDIT: Since box_skitter is not an HTML element , so if it's ID then do
#box_skitter {
position:relative;
width: 985px;.....
If it's class then
.box_skitter {
position:relative;
width: 985px;....
Try this
.box_skitter {
position: relative;
width: 985px;
height: 560px;
margin: 52px auto 32px;
background: black;
left: 19px;
}
I have a div which needs to fill out the height of the browser's viewport,but still says in the same position when the user scrolls the web page up and down. position: fixed; does this, but I am unable to use it as it's making the overflow scroll bar of the div jerky and slow. Is there an position or method that I can use so for example I currently have:
div.panel {
position: absolute;
top: 36px;
right: 0;
overflow: auto;
background: #636362;
padding: 0 0 20px 0px;
width: 290px;
height: 100%;
}
I'm not sure what you mean with "jerky and slow", because all scrollbars act the same. This is how I would resolve your issue:
HTML:
<div class="fixed">I'm fixed!</div>
<p>Rest of page</p>
CSS:
html, body {
/* make sure the page is at least height of viewport */
height: 100%;
}
body {
/* because the fixed div is no part of the flow,
make sure it is not overlapping the webpage */
padding: 0 0 0 100px;
}
.fixed {
height: 100%;
width: 100px;
left: 0;
position: fixed;
background: #e0e0e0;
/* only vertical-scrolling, but can be changed of course */
overflow-y: scroll;
}
JSfiddled Live example
Works in at least IE7, IE8 and Firefox.