I have a totally simple layout, in the page is only a silver background and the red DIV, as is possible to see on the image below. My problem is, that when I add the red DIV into my layout page, the page is longer on the length than 100% (bottom on the right corner - slider). Where could be a problem that caused this?
The CSS properties of the red DIV are:
html, body {
background-color: silver;
margin: 0;
padding: 0;
}
.red-div {
overflow: hidden;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.red-div {
overflow: hidden;
position: absolute;
top: 0;
left: 0;
right:0; /* This is what you need */
}
That way, you can force it to go to the end of the browser. When you do 100%, you do not account for the scrollbars. Which add the extra space and thus the annoying side-scroll
Related
I have a background image which works fine for the most part, however after changing the view to an iPhone 11 for example in Dev Tools, I noticed that the background stops after a certain point. I have included the CSS where the image is held below, can I add anything to fill the gap?
.app::before {
content: '';
background: url('./assets/backgroundImg.jpg') no-repeat center center/cover;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
}
I fixed this by adding overflow: hidden to my styling for all
* {
box-sizing: border-box;
margin: 0;
padding: 0;
overflow: hidden;
}
I have the a page that looks like this:
What I want to do is that when I scroll the page, only the bottom half should move. I did it but because of the padding it makes it like this:
This is my css file:
.sites-list {
height: 40%;
width: 100%;
position: absolute;
right: 0;
bottom: 0;
left: 0;
top: 400px;
padding-left: 18rem;
padding-top: 5%;
background-color: #ffffff;
text-align: left;
font-size: 30px;
line-height: 40px;
color: #396aba;
}
When I inspect it in browser and uncheck top and padding-top it works fine:
How should I change it to make the white border be there if there is no scrolling but when I scroll to make the text go beneath the blue part as in the last picture?
I don't know exactly how your bars look like in CSS, but here is a working example that uses position: fixed.
.Bar {
position: fixed;
left: 0;
width: 100%;
height: 20vh;
z-index: 10;
background: #175f8f;
}
.Bar-top {
top: 0;
}
.Bar-bottom {
bottom: 0;
}
.Content {
position: relative;
z-index: 0;
padding-top: calc( 20vh + 100px ); /* set to the same height as the bar would be */
/* If you want to increase the padding and mix relative with absolute dimensions, use calc. Otherwise just add them up for a slightly better performance */
height: 2000px; /* we cheat a bit so we have something to scroll */
}
<div class="Bar Bar-top"></div>
<div class="Content">
Having your content here.
</div>
<div class="Bar Bar-bottom"></div>
You could set the blue bar to the following:
Position: fixed;
top: 0px;
z-index: 1;
And then set the element which you want the bar
to go over to:
z-index: 2;
This basically means that the blue bar is 'Fixed' to the top of the browser at all times. The nav element underneath it may require a margin-top of however tall the blue bar is to push it below the blue bar before it has been scrolled.
I want to center the slider controls which you can find here
I tried various ways like right:0; left:0; margin-left:auto; margin-right:auto and two more.
But somehow I am not able to make it center in responsive manner so that in any view port, It always remain center.
So Is there a way to achieve it?
This will centre the Your controls without needing to use width but will only really work for modern browsers:
.anythingSlider-minimalist-round .anythingControls {
position: absolute;
z-index: 100;
opacity: 0.90;
filter: alpha(opacity=90);
left: 50%;
bottom: 2%;
transform: translateX(-50%);
}
This method will work for older browsers but you will need a fixed width:
.anythingSlider-minimalist-round .anythingControls {
position: relative;
z-index: 100;
opacity: 0.90;
filter: alpha(opacity=90);
bottom: 5%;
width: 190px;
margin: 0px auto;
}
There are a few other methods to centring a div on a page it might be worth while looking at some other methods here: How to horizontally center a <div> in another <div>?
It looks like they are just being hidden when dropped into mobile. You can reshow them by putting this in your media query for small (mobile) screens.
.anythingSlider-minimalist-round .anythingControls{
display: block !important;
margin: 0 auto;
text-align: center;
width: 186px;
position: relative;
top: -40px;
right: 0;
float: none;
left: 0;
bottom: 0;
}
Put the slider controls in a div that has width:100% and its contents set to text-align:center. Position the div absolute, at bottom:20px (adjust this to set the desired offset from the bottom). Finally, the container that contains the slider controls div needs to be set to position:relative.
div.slider-controls {
width:100%;
text-align:center;
position: absolute;
left: 0px;
bottom: 20px; <----- adjust this until you
} like the offset from the
bottom of the slider
div.slider-container {
position: absolute;
}
I don;t know what your layout looks like, but in the above example, it is assumed that div.slider-controls is a child element of div.slider-container.
This is the website I am modifying: sb460training.org
Here is the code snippet:
#apdiv1 {
position: absolute;
width: 2815px;
height: 276px;
z-index: 1;
top: 1px;
left: 0px;
background-color: #000;
}
#apdiv2 {
position: absolute;
width: 3150px;
height: 115px;
z-index: 2;
left: 0px;
top: 230px;
}
#apdiv3 {
position: absolute;
width: 221px;
height: 411px;
z-index: 3;
left: 0px;
top: 259px;
background-color: #FFF;
}
#apdiv4{
position: absolute;
width: 2853px;
height: 115px;
z-index: 4;
left: 219px;
top: 401px;
}
Do you know what the width dimensions should be so I can get rid of the annoyingly extra space that shows up to the right of the web page?
Thanks
Like the other answers, I agree that your CSS should change the fixed widths to 100%.
However, in your HTML you have img elements with explicit widths, to substitute background colours. For example, in the "apDiv2" DIV element, you have an in-line image containing white, "SB460_Pic/Secondary title2.jpg". This image is set to 2128px wide, causing the page to extend horizontally.
I would recommend removing the images that are being used to pad the right of each DIV, and instead set background colours in CSS.
UPDATE
Quick and dirty example:
http://pastebin.com/4PmZN1r4
change all your container widths to 100%.
give your html a width:100%; margin:0;
give your body a fixed width:1200px or so.
set your body with a margin: 0 auto if you want it centered.
I've heard the same similar issue.
all you need to do is try working with margin set to 0 and auto.
in most cases, try eliminating the use of 'position absolute' and work more with margin, padding and position relative.
I'm trying to create a layout where there is a fixed width and fixed position sidebar on the left.
The problem is setting the width of the main content area - it stretches off the screen to the right. Here's what I've got:
<body>
<div class="left-sidebar">
sidebar
</div>
<div class="main-content">
main
</div>
</body>
CSS:
body {
position: relative;
}
.left-sidebar {
position: fixed;
top: 0;
left: 0;
width: 220px;
}
.main-content {
position: absolute;
top: 0;
left: 220px;
background: #f0f0f0;
width: 100%;
}
How can I have the main content div start at 220px from the left, but only fill the window width?
Try setting the main content to appear fully left but give it a margin-left to make room for the sidebar.
.main-content {
position: absolute;
top: 0;
left: 0px;
margin-left: 220px;
background: #f0f0f0;
width: 100%;
}
Edit:
I've had a bit of time now to try out the code. I suggested margin-left instead of padding-left because it fits better with what you want to do. Using margin gives you the option of putting a border around your content. Also, if you actually do want padding in the content you can set it as normal. if you used a padding to indent for the sidebar you'd have to add the 220px to whatever actual padding you wanted.
This is what I came up with to get it working with margins instead of padding.
body {
margin: 0;
padding: 0;
border: 0;
}
.left-sidebar {
position: absolute;
top: 0;
left: 0;
width: 220px;
border: 1px solid green;
}
.main-content
{
position: fixed;
top: 0;
left: 0px;
right: 0px;
margin-left: 220px;
background: #f0f0f0;
border: 1px solid red;
}
I also agree with the anser referencing dynamic drive. One of the best ways to learn CSS initially is to have a go with a working stylesheet and customise it for your needs. The big advantage is it will already be cross browser compatible. Just use Google to find a bit of inspiration.