in my web page top right(see in attached image ) there is a space between content(background image) and body
i want to fill this space with image.i want to load image to all that space.I want to close that space.I give margin,padding-left but it does not close that space
.wrapper {
width:100%;
margin:-5px;
}
what should i do
By using Chrome Developer tools, you will quickly see that the space comes from the CSS margin attribute of your <div class="wrapper">. Please see the print screen below.
In the print screen, the space has disappeared because div.wrapper has no longer a margin.
EDIT:
The background picture has a transparent border itself. You can see this if you open your picture with a graphic program.
Best solution would be to remove the border with a graphic program because then, you are sure how you set your picture at a precise pixel position.
If you would like to pull the picture to the left in order to hide the border as quick solution, then you have to pull it left and at the same time stretch it slightly, e.g.
.wrapper {
width: 101%; /* <<<< a bit wider to hide at right */
margin: -5px; /* <<<< pull to hide at left */
padding: 0
}
Like this, the border disappears left and right.
EDIT 2:
With width: 101%, scroll borders may appear. To get rid of them, use CSS overflow-x: hidden. https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x
Related
I'm pretty new to coding and need to pick some of your brains in order to fix this issue which is occurring on a holding page that I'm currently coding.
The company logo is positioned in the bottom corner and at certain screen size overlaps and interferes with the text (when you manually resize the browser window). I've used media queries so this doesn't happen on devises.
I'm not sure whats possible, but I always need the logo to be in the bottom right hand corner. But I'd like the logo to disappear from the screen when the logo starts interfere with the text , ideally I'd like the user to have to scroll down to see the logo at this point.
This the site in question http://embalmer-tiger-47168.bitballoon.com/
Heres My HTML
<img class="logo--master" src="assets/images/logomark.png" alt="Proud Robinson Logo">
</div>
Heres my CSS
.logos {
position: absolute;
bottom: 55px;
right: 55px;
}
.logo--master {
width: 7em;
}
Many thanks in advance :)
You would need your logo to have a relative position to your text. You can use position:relative. After that if it still doesn't respond like you would like it to, you can position it in a div that as the same width as the page (width:100%) and you can use de margin of your logo to center it (usually margin-left:auto; margin-right:auto; will work, but you might have to use %). Hope this will help you.
Absolutely positioning an element takes it out of the normal flow of the page, so that other elements don't know it's there and will overlap. If you apply a right and bottom margin to .container that matches the size of the logo, the content in .container won't overlap. The logo is about 7em tall/wide (per the width you gave it in css) and is 55px from the right/bottom, so a right/bottom margin of calc(7em + 55px) on .container should leave room for the logo.
div.container {
margin: 0 calc(7em + 55px) calc(7em + 55px) 0;
}
I know how to align my background image as well as my #wrapper div tag, but I am unable to get them to line up the way I want. Here is the example:
http://www.marathoneindhoven.nl/
The blue runner stays locked to the main div tag when resizing the window. If I add a large #container around the whole #wrapper, when I resize the browser I have a big space on the left side of the screen because the overall width of the #container is still trying to center itself. I have tried using the css property overflow but can not seem to get that to work either.
How can I possibly get this to work??
If you want the blue runner to move with the page then change your css to this:
#wrapper {
background: url(/images/bg-runner.png) right 0 top 150px no-repeat;
}
I was trying out the on hover scroll bar style that is used in many places but ran into a problem. The appearance of the scroll bar on hovering causes text to jump which looks jarring.
#scroll {
width: 200px;
height: 200px;
overflow: hidden;
}
#scroll:hover {
overflow-y: scroll;
}
This Fiddle shows the jumping text on mouse hovering
Could I somehow prevent the jumping of text while keeping the appearance of scroll bar on hover?
just use <p> tag for your text like this:
http://jsfiddle.net/pdbYz/6/
UPDATE for firefox:
http://jsfiddle.net/pdbYz/19/
I propose to have another container within div#scroll with fixed, slightly smaller width.
This way your text won't 'jump' when scroll appears. Since scrollbars have different width on different OS (Windows, Mac, Linux) you should leave some free space to the right, where scrollbar appears.
Please see my fiddle here: http://jsfiddle.net/5RXSW/
To make containers more visible I've applied paddings and background colors. You can tweak these styles for your needs, but please reserve some pixels to the right of div#scroll for scrollbar.
You can change the width of the container on hover, so that when the scrollbar appears, it pushes outwards instead of inwards. This prevents the text from moving.
http://jsfiddle.net/pdbYz/3/
To achieve this I've added this line to your CSS:
#scroll:hover {
width: 360px;
}
I have been working at this for the past day and a half. So any help will be greatly appreciated.
The general layout has a top bar and a side bar which are position fixed. I want the content container to fill the rest of the page without a scroll bar unless it is necessary due to content. I am not sure if it is possible to do purely in CSS or if I will need to modify my html structure as well. I have posted a fiddle below to show the most simple example possible.
http://jsfiddle.net/wU2Hd/
Again, any help or pushes in the right direction will be greatly appreciated, this has been throwing me for a loop.
It's not impossible. Check out this JSFiddle I forked from yours.
I did not need to change the HTML structure, but there were some important changes made to the CSS.
First I removed the height: 100%; from html, body. This was forcing the scroll bar to appear.
Then I removed the height and width declarations from .content, and gave #shell-content absolute positioning:
#shell-content {
background: #FFFFFF;
position:absolute;
left: 100px;
top: 86px;
bottom: 0px;
right: 0px;
overflow-y: auto;
}
The left and top are values based on the explicit height you gave to your header and the explicit width you gave to your menu. The overflow-y: auto tells it to only show the scroll bar if the content out-grows its available space, but not otherwise.
The JSFiddle has some crazy-long lorem ipsum text to show the effect. If you change it to less text, the scrollbar will disappear entirely.
The problem is that you are setting
#shell-content{
height:100%
}
body{
height:100%
}
Which means the body fills to fit the window, and then the shell-content expands to fill that space (the EXACT size of its direct parent), but is displaced by shell-top-wrapper, so it overflows. You should either decide on a relative height for the shell top wrapper, or change the height of the shell-content dynamically (using javascript).
Here is a take off of your fiddle: http://jsfiddle.net/eeMz4/. You'll see that with the large image in the content area, it scrolls. If you take the image OUT and replace it with text or something smaller than the available space, the scrollbar goes away.
The trick was adding overflow:auto to #shell-content.
Cheers!
Cynthia
I made a few small changes: http://jsfiddle.net/wU2Hd/5/
- remove the height from content
- remove the height from content-shell
- set the body background to white
- set the sidebar background to grey
This will not actually stretch up the content, but it will appear like it does. Scrollbar will appear automaticly when the content becomes bigger then the viewport.
I basically made a header image for my site and the sides of it have black on it. I want to extend the header so it goes for the width of the user's web browser with black "bars" as if the header extends for their whole browser.
I've tried a few things, but I cant figure this out.
Here's an example of what I have now:
#header {
background: url('img/header.png') no-repeat top center;
height: 131px;
}
#headerbg {
height: 131px;
width:4000px;
background-color:#000;
}
And in the html I just have both in divs and within each other in the html.
Here's a jsFiddle that shows you how to layer the two div's and use background-size property to expand the image so it fits just the same as the background color's width. UPDATE: New jsFiddle above is replaced to include better method for that type of look.
Edit: Here is a different jsFiddle that has places the image inside and centers it, allowing any excess background color from the parent container to show through.
Edit 2: Using the Edit fiddle above, you can apply CSS3/IE gradient effect as shown in this jsFiddle
Status: The solution was to use center center for background-position combined with setting both width and height to 100% for the image used.