I can't get my footer image to strech the entire screen. The right side is fine but the left wont cover the entire gap. Before anything else. due to the way the website is set up. I cannot change anything from the HTML code beyond whatever that is in the footerContainer tag. That is just how the backend is set up for the client. I've tried using a background and x-repeat, but, backgrounds dont strech beyond the DIV itself.
Footer is basically the white text inside the footer background.
Set the footer div's css left property to 0:
left: 0;
Add the following two properties to the .background class in the CSS.
left: 0px;
right: 100%;
Put your footer outside the <div id="frame">...</div>. You may need to tweak other CSS to accomodate for that.
Related
I am trying to created a CSS design on my web app. I am going for a banner that is flapping in the wind. I want the banner to expand/scroll its height so all text will be displayed on the banner but regardless of how tall the banner is, I want to add a ripped section of the banner at the bottom of it. The banner will be the same width in all cases.
Something like the example below (forgive the horrible Paint screenshot):
I can't seem to wrap my brain around how to accomplish this. Any of you smart people have any ideas?
First, I think it'd be helpful if you could provide an example of what you have so far. For example, what's your HTML & CSS for the adjustable-height divs, just without the image at the bottom? Easier to add onto that.
I believe the best way would be to add an image element at the bottom of your adjustable element (assuming it's a <div>). Position it as absolute, and set it relative to the bottom of its parent container. You may have to fiddle with it a bit to get it to work. Don't forget to also set the position of the parent to relative.
If you'd like to see the shoddiest example ever, go here: https://jsfiddle.net/c2ptfv8o/
Good further reading on position: https://developer.mozilla.org/en-US/docs/Web/CSS/position
Give the container element "position:relative" (to create a new positioning context) and some bottom padding (to make space for the image). Then you can either use a background image set to be at the bottom of the container and not repeat vertically or absolutely position an image to the bottom.
You can use pseudo-elements for this. This way you don't require extra markup for each element.
.myDiv {
position: relative;
}
.myDiv::after {
content: url(image.jpg);
display: block;
position: absolute;
left: 0;
top: 100%; /* will be placed immediately where the div ends */
width: 100%;
}
Based on the height of the 'banner curls', set a margin-bottom on .myDiv.
Or directly, without absolute, as long as you don't have paddings:
.myDiv::after {
content: url(image.jpg);
display: block;
width: 100%;
}
Here is the html and css that i am using: https://gist.github.com/zacatac26/d5733e9289be157982a448a03bda6711
this is only a single page but just making this page work is fine.
I want to make it so the header and body is always in the same place on the webpage but also have the text in the body scroll. I have tried position: fixed and overflow: scroll/auto, but when i do so the page appears how i want but the text does not scroll.
Any help would be appreciated.
Typically the best way to achieve this is just to apply the position: fixed CSS rule to the container of the header element. position: fixed removes the element from the flow, like position: absolute, so you need to also tell the browser where to position the container, e.g. top: 0. To manage the width of the header, you can use left: 0; right: 0; or width: 100%.
I think this page gives the best example of how to achieve what you are going for: https://www.w3schools.com/howto/howto_css_fixed_menu.asp. I'd suggest starting with the HTML/CSS templates given in the tutorial and then add the content and styles from your Gist piece by piece, reviewing the results after each change to make sure that it still looks/behaves as you expect.
I had to make the background image part of the fixed header so that the page content would go underneath the header image and navmenu with no overlapping. I used the same percentages that enclosed the header for the background image with top:, bottom:, left: and right:
I want to create a page with vertically centered content (I'm using this method). I need to use two different page backgrounds. One is assigned to html tag and the other one to the body tag (it doesn't matter if I'll create div's instead). The first one is a background picture (full width & height of the view port, fixed, no-repeat) and the other one is just a pattern, intended to overlay the picture (repeat). I tried to use CSS3's multiple backgrounds for this case, but it didn't worked as I intended.
The problem is that when the content exceeds the view port, the body's background covers only the height of the view port. The solution for this is quite simple:
body { min-height: 100%; }
But it comes with a serious drawback. If I set the min-height value while the content doesn't exceed the view port, it won't be vertically centered.
I created a fiddle to help you better understand my problem. Don't mind the JavaScript as it does not play any role in this case. I used 1x1 px background images as an example.
Try to toggle the content's height while the body's height is set to 100% and scroll down. You will see what I'm talking about. You can fix that by toggling the body's height, but as soon as you toggle the content's height back to auto it won't be centered vertically any more.
I want the body's background to cover the full page height and have the content positioned in the middle no matter if the content fits in the view port or not. I've tried to achieve that for several hours and I failed, so maybe some of you know something that I don't and could help me with that.
Here is what I came up with:JSFiddle
I avoided your problem by making the .block div the size of your screen by fixed positioning. After this I used the .block div to scroll the elements inside. Hope this solves your problem ;).
.block {/*made .block fullscreen size so you cannot scroll the page anymore, but scroll this div instead*/
position: fixed;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
text-align: center;
overflow-y: auto;
If you don not need < IE9 support, you can use transforms to do that.
http://jsfiddle.net/0tgvrw3k/1/
Basically you don't need the .block and make the vertical alignment using top, left, and transform. You need position: fixed;, as position: absolute; will make the viewport scroll.
Please do not forget to prefix the transform with -webkit-, -moz-, -ms- and -o-
I have set up some background div's to theme a blog I am making. I am using 3 colors for the heading, a grey background, and I am wanting to add a texture to the background. I have the semi transparent image I want to tile, but I am not sure of the best way to have this work. I do NOT want position: fixed; on the div containing the image, so that it will move as you scroll.
Example code:
http://jsfiddle.net/YPXmT/
Is there a way to achieve this while not having scroll bars? (Note, I don't want to get rid of scrollbars, as content may require scrolling.)
Going from your example fiddle, you were most of the way there. All you have to do is make your backgroundTexture div height and width 100% instead of the static pixel values you used:
#backtexture {
position: absolute;
overflow: hidden;
width: 100%;
height: 100%;
background : url('http://static.tumblr.com/wyzt2fm/Hq8mhgfry/hp_asset_diagonalline.png');
}
MORE SIMPLE UPDATE:
Simplicity is best most times.
All you should need to do is add:
body{
position: relative
}
Don't bother making the container div and rearranging the elements as below, just making the body's position relative should fix this for you.
UPDATE: (Use update above, keeping this for posterity)
As per the comments below, with the code above any content that makes the window scroll beyond the visible space will not include the background. This is because the div is set to position: absolute and height/width: 100%. The div is getting sized to the size of the viewable space, but any content that extends beyond that will cause the background div to look like it has stopped. To fix this problem you just need to tweak your HTML and CSS a little bit more. Instead of the CSS above use:
#backtexture {
width: 100%;
height: 100%;
background : url('http://static.tumblr.com/wyzt2fm/Hq8mhgfry/hp_asset_diagonalline.png');
}
Notice we removed the position:absolute and overflow:hidden. Next we change the HTML so that the background isn't just an empty div placed on the page, but instead used as a container for all other elements on the page:
<div id="backtexture">
<div id="redtop"></div>
<div id="orangetop"></div>
<div id="yellowtop"></div>
<div id="wrapper">
</div>
And that should do it.
Forked fiddle: http://jsfiddle.net/digthedoug/pVxSq/
I want to make a header like http://www.chacha.com (doesn't move, is about that wide and that height, and able to fit divs inside it and also has to be an image)
I am starting off with a blank html document and a blank css page, so there I haven't currently written any code.
I've been trying two days straight to do this now so I would really appreciate any help anyone can provide.
I have gimp so if anyone could also give me image dimensions for a perfect header and perfect background size I would appreciate it even more.
CSS:
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 10px;
background: url(yourimage.png) repeat-x;
}
<!--html -->
<div id="header"></div>
That should give you a starting place, I can't tell you more without seeing exactly what the layout's supposed to be.
The CSS property you're looking for is position: fixed which will position the element relative to the viewport. This is good breakdown of positioning: https://developer.mozilla.org/en-US/docs/CSS/position
In this specific case, what you've got is an element with styles roughly along these lines:
#header_id {
position: fixed;
width: 100%;
height: 35px;
}
You don't have to set the height, but unless there is content in the fixed element, it will collapse if there is no height specified. They also appear to have put a drop-shadow on the element toget the neat floating effect.
If you want to have an image inside, you can just put the <img> inside the header element, or use it as the background-image url in the CSS and position it with background-position (see also: https://developer.mozilla.org/en-US/docs/CSS/background-position although the compatability table at the bottom is important if you want to do anything too specific with this property).
You can do this with any block-level element (or any element with display:block set on it). In your example they are using the HTML5 <header> tag; a <div> would work, too, if <header> wasn't appropriate for your page.
I would recommend using the Firebug addon with Firefox (or similar developer consoles with other modern browsers) -- you can right click on an element on the page and select 'Inspect element' from the dropdown menu and get a breakdown of both the markup and styling to see how other websites are constructed. Very useful for when you're browsing the internet and you see something and think, 'that's a neat trick, how does it work?'
FOR FULL WIDTH FIXED HEADER
header {
width:100%;
background:green;
height:60px;
margin:-8px;
position:fixed;
}
FOR NONFULL WIDTH FIXED HEADER
Create a div and set width and height (you can also set it left or right by float:left, float:right)
then in this div put the code above but without margin:-8px; and change the width to the width that your div has.
Here is a test