I created a slideshow using HTML and CSS. Everything works, but the images don't take up the full page. Here's what this looks like:
from the looks of your screenshot you have some padding and margin on the body and/or html tags.
But a link would work best in your favor.
Related
So, i'm trying to design my first page, and kinda trying to learn as i go.
I'm trying to design a one page website, that contains multiple backgrounds, so i divided each section of the website that will contain a different background into divs.
The background looks fine with a full sized window and 100% zoom on the page, but if i zoom in it gives me the option to scroll the page horizontally and it gets messed up, id like to make it so it just simply scales and it does not give me the scroll option.
I've tried setting the background size to cover the page, messed with the width of both the body and the div that contains the background but i can't seem to get it to work.
So, this is part of the page with 100% zoom:
Fully scaled window 100% zoom
But when i reduce the window: it looks like this:
Gives me scroll option and the background image cuts out
Heres the HTML code:
HTML code
And heres the CSS:
CSS code
Thanks, sorry for noob question.
Alright i think i found a solution while just trying different stuff out:
i put on the html and body css:
overflow: auto;
It seems to have fixed my problem, i was kinda of just randomly trying stuff out.
Thx for the help.
I had a programmer code a page for my site, but when we migrated the code to my site (on Shopify), some of the things stopped working. I've been able to fix almost everything, but the top banner is still giving me trouble.
I want it to fill the full browser width (like the other banner a bit further down the page) but it's being clipped to 970px wide. How can I fix this to make it responsive and fill the full browser width? I also want the whole page to be centered under the header.
And the code I'm using is here (I'm including the full code so I don't miss anything important): codepen.io/anon/pen/xZZwZN
When I run it in codepen it works, so I'm wondering if it's clipping it because of the page width coded into my Shopify theme. Any ideas on how to fix/override this on this page only?
Remove float : left from the css of .container .columns to center align.
After changing this, the page looks like below -
Hope that helps!
as i have seen in your site, you just have to remove float:left; from skeleton.css link for particular page
so go in this file and remove from .container .column, .container .columns this class and your site is ok :) If you can't find the class then note line no 26 in your css file.
I have a Weebly website, and the default Weebly css and html code only uses one main content background (the background that fits the drag and drop area) for all pages on the website. I know how to customize this, however I dont know how to create more/different main content backgrounds and use each for a specific page. I suspect I need a script, or maybe enter a specific code in the header of each page, but I dont know.
Alternative options like inserting the background in the header code itself will not work, as this will not fit when resizing the browser window.
Help is much appreciated :)
Each page on Weebly has a wsite-page-... class on it. For example, take this website which is made in Weebly. The background is on the #wrapper div element, but the body tag on this page has a wsite-page-my-story class on it. This class is unique for this page. Therefore, I can apply CSS to the #wrapper id by identifying it through the body's class like so:
.wsite-page-my-story > #wrapper {background:red;}
This will make the background on that specific Weebly page bright red. This can of course be replaced with anything else.
I'm working on a very simple website that is pretty much just HTML and CSS. The mock up I've made works well in Firefox but when I put it into chrome it does something weird. The the text I've put in a div tag is displaying under the end.
Here's the code, if you take it into chrome you should be able to see what I'm talking about.
HTML of Site
CSS of Site
It displays correctly if you set a height on the fishtank image.
<img src="./graphics/fishtank.jpg" width="1090" height ="10" />
JSFiddle
Is the fishtank image a background image? If so, you can put it as a background image in the parent div's CSS.
I am trying to create one advert that use both empty sides of the website content. So i add the advert image as a background on BODY tag. look nice. But the problem is to add a link to it. I start with onclick att on body, but them all site content become clickable. Also i try to use different z-index for body and the content div. Don;t work as well.
This the website i take the idea from. I just want to do some thing similar.
http://www.sport.co.uk/
Any help are welcome.
I would forget about the body background and use 3 div columns.
Other possibility would be to use absolute positioning in css and for new browsers you can make the div to stay on its position and not to scroll.