I currently am working on a basic website for a friend who wants a simple blog/website, and have a quick CSS question.
http://nashread.com/template1 Is the current domain, and if the background on there is fine and covers the whole screen. That's because the content box isn't long enough to extend the page. If you click on the 'blogs' tab, you'll see that if the content box extends the background, it just goes into white space. Basically what I'm asking, is how would I make it so when you scroll it only scrolls the content box, rather than the whole webpage? It might not even be possible in HTML or CSS, so if so please tell me.
Thanks (=
Just do the following changes in your css I hope it will work for you. Instead of the position absolute I have changed it to position fixed.
#background {
background: url("pics/bg.jpg") no-repeat scroll 0 0 transparent;
height: 100%;
margin: 0;
position: fixed;
width: 100%;
z-index: 1;
}
Related
I'm having trouble how to fix the white space on the right side of this website.
Please, can someone help me? Here is a screenshot.
and here is the site http://ottserby.lr-dev.com/ TIA
Here is the code that you apply style in your site for the header menu.I increased the width size so that it appears as a better when you resize.
.top-container-inner .header-menu {
background: transparent url("/static/images/desktop/menu-bar.gif") repeat scroll 0% 0%;
position: static;
height: 61px;
margin-bottom: 10px;
width:1189px;
margin-right: 100px;
}
Actually the image used for the menu-bar is the problem if you remove the menu-bar image it look like this as a correct one.here is a link of that image
The main thing is that a proper website means there is no scroll bar on the bottom which makes you to design your site proper for all type of screens.so keep doing
I'm really new to programming and trying to customize a theme that I am using. However I am having several issues where if I fix one thing something else breaks. I've researched solutions for about 3 days and I think it's time I reach out to some more experienced with CSS for help.
I tried setting up a JSFiddle but it's not working correctly as I can't access the HTML file directly. The website is www.preethijagadeesh.com. Would it be possible to review the html/css files and provide suggestions for the following requirements?
Center the title (I believe this is found in the 'site_header'
class which is pasted below). I am using margin to change the percentage and it looks
different on various browsers.
I would also like to 'fix' the title so that when I scroll the title
goes with me. I used 'position: fixed' but it cause all the
content in the 'index' ID (pasted below) to overlay on the title/site_header.
The text in the 'About' page appears to be more on the left with
a lot of white space on the right. No matter what I am unable to get
the content to center regardless of which class I update.
The line/border_bottom that appears under the navigation items should be
the same length as the text. I tried updating it but now every time
I hover over the items the text/options move around
overlay a
black color on the thumbnails on hover. I got it to 'kind of' work.
It's just when I hover on the thumbnails, the images and the
'background color' flicker
Widen the gap between the thumbnails.
Right now, there are two columns, it would be great to just put some
space in between them.
Please let me know if there's any other information I can provide.
Change
.header_image {
float: left;
margin-top: 80px;
max-width: 100%;
}
to
.header_image {
text-align: center
margin-top: 80px;
max-width: 100%;
}
Add these to .site_header:
.site_header{
/* old css remains here... */
position: fixed;
top: 0;
left: 0;
right: 0;
}
Move the padding properties from the a to their parent instead (the .page_link div).
and 5. I can't get the thumbnails to display on your jsfiddle so I can't really give the answer. But for 4 I think something like this will help:
put a <div class="thumbnail-overlay"></div> inside your thumbnail html.
For the css:
.thumbnail-overlay{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
/* this z-index should be higher than the thumbnails' child element. If no z-index is set for their child element leave it at 1 */
}
.thumbnail-overlay:hover{
background-color: rgba(0,0,0,0.5);
}
Hopefully this helps.
.header_image is floating, so you can't center it nicely. If you remove the float and then use text-align: center;, the image should center.
Not really sure where you are wanting the title to appear - should it be above the content or to the left of the content?
You have removed the padding from the links to resize the underline, but it's only been changed on hover. This is what is causing the "jumping" navigation links. If you add this code to .navigation a (instead of .navigation a:hover), this should work nicely:
.navigation a {
padding: 0;
margin-right: 6px;
margin-left: 7px;
}
Instead of using .thumb_image:hover, try using .thumbnail:hover .thumb_image and see if that's helps with the flickering. Also, maybe remove the background-position: 0 -30px;.
Is a plugin being used to generate and control the thumbnail images? The absolute positioning being used on the thumbnail images will make it difficult to reposition them.
You should be creating the site offline and reviewing your work before migrating the site to your host.
If your host does not allow you to migrate your site and/or denies you access to your HTML files, you need find a new web host.
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%;
}
On this site I have an auto-resizing BG but I wanted a fixed black bar at the bottom of the page.
The site looks fine when the browser is maximized but when you scale the window down and scroll down the black bar almost completely gone and it looks messed up. It is not positioning correctly.
I have tried a few things but can't figure out a solution to this. Does anybody have any ideas how I should go about this? (Maybe I am missing 1 little thing or maybe I need to start over from scratch, either way please help!)
Note: the auto size background is in the html tag and the black bottom bar is in its own separate div tag "#black_bottom"
http://graves-incorporated.com/test_sites/gm_2012/
Just remove height:100% from #black_bottom make the absolute:position div height auto.
You have everything wrapped incorrectly I believe. Why does your <div id="black_bottom> contain everything from your wrapper to your <div id="footer_wrap">?
Ok, so I think I see what you're going for now. If my understanding is correct, you want the gradient background to extend to about 70-73px above the bottom edge of your content box, where it meets the solid gray bar which extends to the bottom of the window, or just below that bottom circular G emblem, whichever is lower. I've accomplished this by removing the #black_bottom element entirely, setting a solid gray background color for the html element to match the color of your bottom bar graphic, and applied the circular gradient background to the body element. I've also removed the explicitly-defined height from #wrapper, and given it a negative margin-bottom to allow the black bar to underlap it. The styles I replaced are listed below. Hopefully this is closer to what you're after:
html {
background: #333;
}
body {
background: url(http://graves-incorporated.com/test_sites/gm_2012/images/bg.jpg) no-repeat center center fixed;
background-size: cover;
height: 100%;
}
#wrapper {
width: 960px;
margin: 0 auto -136px;
top: 20px;
position: relative;
}
i grabbed a template from themeforest and modded it. all works well, except, on some pages, the footer isn't sticking at the bottom of the page. i've messed w/ the css a bit, but haven't been able to get it stick. i'm still learning html/css so wanted some help in reviewing it to make sure i don't have any mistakes in my html. i haven't modded the css from the initial template. i did some, but reverted them before the post, as they were attempts at getting the footer to stick.
here is a link to the site > http://capitalcrestoration.com/build/
I think from your question you are asking how to make the footer appear at the bottom of the window at all times.
To do this you just need to change the CSS rule for #subfooter-wrapper:
#subfooter-wrapper {
background: url("images/sub_footer_bg.jpg") repeat-x scroll 0 0 transparent;
width: 100%;
position: fixed;
bottom: 0;
z-index: 1000;
}
You could try giving CSSStickyFooter a shot.
You need to do something with your CSS to position the footer element at the bottom of the window. Otherwise it's just a block element that will be directly under it's sibling.
Try placing div id="subfooter-wrapper" just before the closing tag of the wrapper, and using position:absolute; bottom: 0;