I have a problem with my web site position, this is my CSS:
My web site: http://jsfiddle.net/maxspeed200/qYCUJ/5/embedded/result/
My CSS: http://jsfiddle.net/maxspeed200/qYCUJ/6/
The problem is: I have this two images one in header and the second in content & jquery slide show all this elements work good and I modified their position on my computer BUT when I take my website index to another computer all images move left or right (Pushed from its place)
And I work in my Dreamweaver in split view I create my design n n set my images in their places when I go to view my web site in browser (Mozilla/IE) I see my images not in same places I know it is a problem in CSS but how do I modify it?
If there in an absolute position element so give his parent position relative now give position: relative; to .container DIV. like this:
.container {
background-color: #CCCCCC;
height: 800px;
margin: auto;
position: relative;
width: 700px;
}
Related
I'm making a website using fullPage.js, On the second page (or equivalently, second section) I want to achieve a very simple layout where I have a header fixed on top of the page displaying an image which should be responsive, or decreases in size as the window shrinks but stays at the top.
Currently, I'm wrapping the image to be displayed in a div. I then scale the div fullscreen using,
.post-header {
background: #22BDA0;
max-width: 100%;
height: auto;
}
The img tag inside of the div has a class header-image which I style as,
.post-header .header-image {
max-width: 100%;
height: auto;
margin: 0;
}
However, I'm not getting the desired result. There is a small space on top of the second page which I can't get rid of. You can see the website I'm making along with the source code HERE. Just scroll down to second page, or click Personal Details on the homepage.
Thanks a lot for the help!
What if you just give height:100%; to .section2-container? Will it solve your issue?
Remove display: table-cell; from .fp-tableCell and the padding disappears. Does this need to have display set to table-cell?
fullPage.js has an option: verticalCentered that can be set to false. This seems like a good solution, since the alternative means always trying to ensure that the content of the containing element is always 100%.
I want to add a logo at the bottom of the very first page. Ideally I'd position:absolute it bottom:0 - but anything positioned to the bottom in wkhtmltopdf doesn't seem to work.
This is a problem because the logo is dynamic and could have different heights depending on the aspect-ratio of the uploaded image.
I see that I can add a footer, but this adds it to all pages, and I only want this on one page.
What are my options? Do I have to position-absolute it from the top? If so, what if the page size changes? This needs to work in A4 and US Letter.
I was having the same issue and solved by actually adding a width to the element. So, for the element I want to stick to the bottom I have this css:
.footer {
position: absolute;
bottom: 0;
width: 100%;
}
This didn't work for me. (using python's pdfkit)
I had a one page document and I wanted a footer.
I had to set the height of the page to be the height of a sheet of paper (<body style="height: 297mm">) and then absolute position worked correctly.
Had the same issue, used the answer of Carlo but changed it to use the top margin since it is using the document margins. This way the element was always on the bottom of the first page.
.footer {
position: absolute;
top: 700px;
width: 100%;
}
kinda new here
so I've been trying for the past 2hr to position an iframe and just couldnt get it right (or anywhere near that...)
my goal is to position an iframe of amazon just where "Hello, [name]" is written.
first I couldnt set an iframe because of their Same origin policy but I guess some pages aren't protected, like this one: http://www.amazon.com/product-reviews/B0051QVF7A/ref=cm_cr_dp_see_all_top?ie=UTF8&showViewpoints=1&sortBy=bySubmissionDateDescending
positioning the iframe on my account information just seem impossible (tried margin-left, right, divs and everything)
my goal would be somewhat like this - http://i.stack.imgur.com/gQwyn.png
While I'm a little skeptical about what this is for, I'll provide an answer for it anyways.
So you can't exactly target the location of where your iframe's initial screen will show up at (as it will always default to the top left corner if I'm not mistaken) but you can move the iframe itself around.
Knowing that, it's possible to create an iframe effect over the iframe itself.
You'll have an iframe that will be large enough to capture the button at first glance (which 1260px wide and 300px high is good enough)
You will then move the iframe to position the button to where you would like it to show up in using an absolute position and the top and left style.
Then create a new div to contain that iframe and give it a width and height to what the button's size would be and then remove the ability to scroll with overflow: hidden; and remove the scrolling by stating it within the iframe tag scrolling="no".
You should then have the same results as below:
#my-div {
width: 128px;
height: 55px;
overflow: hidden;
position: relative;
}
#my-iframe {
position: absolute;
top: -42px;
left: -884px;
width: 1260px;
height: 300px;
}
<div id="my-div">
<iframe src="http://www.amazon.com/product-reviews/B0051QVF7A/ref=cm_cr_dp_see_all_top?ie=UTF8&showViewpoints=1&sortBy=bySubmissionDateDescending" id="my-iframe" scrolling="no"></iframe>
</div>
I've been working a lot with responsive webdesign lately, and I've come across a bit of an issue. I have a one-page based website, where I currently have 2 sections (pages) first one is the intro, and second one is "about me". Now, I had a couple of my friends to visit my website on their computers (1 being a laptop, which screen height is very low compared to my 24 BenQ) I want to ask how I can make my content static, so the intro doesn't sort of disappear underneith the "about me" section.
.intro-container
{
width: 70%;
letter-spacing: .2em;
height: 100%;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#ContentWrap-2-about
{
width: 100%;
height: 50%;
background-color: rgb(255, 255, 255);
}
these are the wrappers that sort of interacts the wrong way. You can visit www.old.vhammershoi.dk and scale down your browser to see that the box with the arrow in it (click and explore popdown) will move underneith the about me section
Thank you in advance
First off all, there is no need for custom height. You have set height to element with overflow: hidden, and because content is longer than element, button is pushed down. Remove height from all main elements, also, remove margin from intro container. In that way, button will be visible, and rendered page will be the same as without changes (except visible button)
Try one of these to fix your DIV (intro container) to the top of the screen.
position:fixed;
position:static;
position:absolute;
Here is a working example : http://jsfiddle.net/19Lhchyy/1/
Using postition:fixed;
http://www.w3schools.com/cssref/pr_class_position.asp
#ContentWrap {
min-height: 100%:
padding-bottom:30px;
}
#clickAndExploreText{
position: absolute;
}
I dont know if ure able to position it but if you dont, your container will grow on hover
Then your Text 'Click and Explore' will never be under the following container.
aditionally you are missing some white-space:nowrap in your mobile version to prevent linebreak for the headlines and the tet 'click and Explore'
I need to fix a .gif image to a specific spot on my home page. I've placed the image in my HTML, and "position:fixed" doesn't do what I want - the rest of the page's content scrolls beneath the image. I want the image to stay in the same place at all times.
Disclaimer: I know next to nothing about HTML & CSS, so my apologies if this is a very simple question. I've done research, but nothing I've tried seems to work.
On a related note, my image changes size depending on what browser I'm viewing my site in. I read here in answer to another question that you can remedy that by using percentages instead of pixels to format your object, but I tried that and the problem remains.
Other notes: I use Chrome as my browser and am building my site using Weebly. My website address is http://www.designartistree.com/ and the image in question the ribbon in the middle of the page beneath the large "Design Artistree" logo.
Any beginner-friendly advice would be greatly appreciated! Thank you!
Here's the html code that I have for the image:
<img src="/files/theme/ribbon.gif" alt="ribbon" style="position:fixed; margin-left:27.6%; margin-top:61%; width:63.7%; height:10%; z-index:50; visibility:show">
If you use position:fixed, the element is positioned relatively to the window, so even if you scroll, the element doesn't move.
If you want it to move when you scroll, use position:absolute.
But because of your layout, you have 2 options:
Place the image inside #box
Remove the following code:
html{
overflow:hidden;
height: 100%;
max-height: 100%;
}
body {
height: 100%;
max-height: 100%;
width: 100%;
}
#box {
height: 100%;
max-height: 100%;
overflow: auto;
width: 100%;
}