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
Related
I'm trying to get rid of the horizontal scroll bar (A) but when I changed my footer my images got messed up (B) and I'm not sure what is happening or what to do.
A: Unwanted horizontal scroll: https://mabonzo.github.io/prj-rev-bwfs-tea-cozy/teacozy/
B: Commented out footer and the images go wonky: https://mabonzo.github.io/prj-rev-bwfs-tea-cozy-test/teacozy/
Initially I was trying to change my footer rule-set from having left: 20px; to margin-left: 20px; or padding-left: 20px; when I ran into this problem! I speculate that it is related to the actual resolutions of the images, but I'm not sure.
Resizing the browser fixes centers the images.
I asked on a Slack group to no avail, I just tested it on different browsers and it seems like this is an issue only on Firefox. On Chrome and Edge they load no problem... So I guess my updated question is how to fix this for Firefox users.
EDIT: going to update the website, so the problem won't be in the (A) link. But the TEST site (B) will still be up and broken. Thanks!
Your footer element has an auto width (which is the full width of the screen, because it's a block level element) but then you say left: 20px (combined with position:relative) so now it's the full width of the screen but it starts 20px from the left, meaning it will always be 20px off the right side of the screen.
padding-left:20px on the footer will accomplish the same goal and not cause the horizontal scrollbar.
Your images seem to be defaulting to the left on Firefox because you have position: absolute on .mission-child img. Setting this to position: relative seems to correctly centralise the images for me.
Your footer occupies the full width on the page, in addition to having left: 20px on it. This offsets from the left, leading it to have a total width of 100% + 20px. To offset the text contained within, but not the footer itself, you're looking for padding-left: 20px.
Hope this helps! :)
Firefox might just render position: absolute; images within display: flex; position: relative; justify-content: center; align-items: center; divs weird!
I fixed the problem by adding the align-self: flex-start; and top: 0; declarations to the .mission-child img and .locations-child img rule-sets.
Thank you for the help!
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;
}
Please refer to my site: http://www.vault-x.com
With the window maximized the website appears normal.
When the window is reduced in width you are able to scroll left/right, a blank space appears on the right side of the website and I cannot figure out why?
Does anyone have a solution?
set minimum-width it will be work fine
example css
header {
height: 303px;
min-width:950px;
background: url('images/head_bg.jpg') center no-repeat,
url('images/head_liq_bg.jpg') left top repeat;
text-align: center;
}
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;
}
So, I'm getting married. Hooray!
I'm building a website for the event and HTML/CSS isn't my normal area of expertise.
I've got the site sliced and diced, and most of the important structure laid out in divs.
One thing I'm not sure of though, is that the design calls for an image to spill over both edges of the wrapper. What's the best way to do that in HTML/CSS? Or should I make the wrapper the full image width wide and make another container inside for the other content?
Thanks for your help!
Here's the design comp:
website_comp.jpg
Here's the
image that needs to spill over the
div: ribbon.png
Here's what the
site looks like now:
DierksAndEmster.com
add position:relative and overflow:visible for your #container. Then modify your menu like the following:
#menu {
background: url("http://www.dierksandemster.com/wp/wp-content/themes/et-starter-1-4/images/ribbon.png") repeat scroll 0 0 transparent;
color: black;
display: block;
float: left;
font-family: 'Walter Turncoat',arial,serif;
font-size: 20px;
height: 93px;
left: -71px;
line-height: 22px;
position: absolute;
width: 942px;
}
You could attempt to position the image with position: absolute. Another way could be to use three columns. (~50px wide left column, main area, ~50px wide right column).
You could also take a look how csswizardry has done this, it's a bit advanced though, but might be helpful: http://csswizardry.com/demos/css-powered-ribbons/
Last but not least, if you wan't to be quick and know the navigation panel that has the fancy ribbons never changes place, why not just make a big background image and build the site on top of it? :)