I am using the right and left properties to place tiny images on the edges of my page.
.class img {position:absolute;left:60%}
The above example places the image at the end of the screen on the right and only half of the image is visible but it also triggers a horizontal overflow making the page draggable towards the full width of the image.
I tried setting overflow to hidden but it didn't help.
Any ideas on how I can achieve this?
Any time you want to allow for items off screen, but prevent scrolling, you're going to have to restrict the user's viewport. This can usually be done by setting the overflow-x or overflow-y to hidden on the body.
/* The problem */
.off-screen {
position: absolute;
right: -50px;
width: 100px;
height: 100px;
background-color: red;
}
/* The solution */
body {
overflow-x: hidden;
}
<div class="off-screen"></div>
Note: Depending on your specific situation, this may need to be tweaked, but the concept is the same. I can update this to be more specific if you include more code in your initial post.
It sounds like you want your images to appear at the right edge of the screen. This should work:
.class img {
position: absolute;
right: 0;
}
Related
Scenario:
In HTML, I have 2 element (top bar and images). The top bar need to be
at position:fixed (which will break the flow, I understand that). And
the 2nd element has margin-top to push down the image after the
"top bar". This has no issue until I minimised my browser width, the
content in the "top bar" push the container height and overlap the 2nd
element, which is the image. And this look ugly.
Anyway to have the 2nd element in flow with the 1st element, so that no matter how I minimised my browser width, the 2nd element is
smart enough to push down.
Code: CSS
.TopBar { /* 1st Element */
background-color: #000000;
opacity: 0.5;
width: 100%;
position:fixed;
padding:10px;
}
.TopBar > div {
color:white;
}
.carousel { /* 2nd Element */
display: inline-block;
margin-top:73px;
}
.carousel_img {
width: 100%;
}
Problem:
As you already know, you can't force position:fixed to flow, so there isn't an answer to your question to do it the way you want.
But the way you describe the problem, it's about supporting different browser sizes. If that's the case, then it sounds to me as if media queries are the answer to your problem.
CSS supports #media { ... } blocks, which allow you to specify styles that only come into play at certain browser sizes. So in order to solve your problem, you need to find out what browser width causes the layout to change (resize very slowly; it will flip out at a specific size), and write a media query that changes your stylesheet for sizes lower than that.
Without (a lot) more detail of your layout, I can't really give you specific code, but there are a lot of resources available online to learn about media queries if you don't already use them.
It's also worth noting that position:fixed can often be troublesome at small browser sizes, so much so that a lot of mobile browsers deliberately didn't even support it for some time. That's changed now, but it can still cause layout gremlins, so you may want to use the media query to switch it off entirely in low-width browsers.
Respond to answer given by Spudley on using the #media to solve the issue, I have try to find some page that has the effect of "fixed" & overflow element, and inspect the code by viewing it through web editor. And this is what I get. I slowly delete all the CSS and related element one by one till I got the "fixed" not working. And while the is still set on position:relative, there is a CSS that attached to it, which when I remove it, the "fixed" effect was gone.
reference URL:
https://www.w3schools.com/css/css3_colors.asp
I filter the source file:
https://drive.google.com/drive/folders/0BzbdjY-H_HzZTC1Rci1nY0F4VFU?usp=sharing
Screen Capture of the coding that solve my problem (I guess)
Click Here to see the screen shot
If I understand what you want to achieve, there's a workaround to achieve similar results.
First, you effectively can't make your TopBar behaving like a flowing bloc element with position: fixed. So, let's make static.
The "fixed" behaviour will be provide by setting the body properties
body {
/* NOTICE the vertical flex box, makes the height adjust
automaticaly (no need to toggle)*/
display: flex;
flex-direction: column;
max-height: 100vh; /* Restrain the body to the window height */
overflow-y: hidden; /* Prevent scrollbar on body */
}
.TopBar {
display: block; /* Blocks have 100% widht by default, don't need to
specify */
padding: 10px;
position: static; /* No need to specify, it's the default value */
/* Helpers to make the TopBar easier to track */
background-color: #000000;
opacity: 0.5;
/* This is not part of the solution, it's only to make the height inversely proportional to window width
e.g. make it grow while the other decrease
*/
height: calc(200px - 10vw);
}
/*
Just under the TopBar, lets place a container element that will act
as scrolling window
*/
.container {
height: 100vh; /* max-height is superfluous because of the overflow. */
/* This will simply make the scrolling on the container instead of the body */
overflow-y: scroll;
}
.TopBar {
/* 1st Element */
}
.TopBar > div {
color: white;
}
/* simply to display some text */
p {
width: 50%;
margin: 1em auto;
}
Place your carousel inside the container and voilà! No need for position nor z-index fiddling. TopBar and container are flowing and the former will "push" the later.
That being said, some media query adjustments wouldn't hurt. According to your picture, elements in your TopBar are inlines (inline or inline blocks). You should consider making them "block". Flex-boxes would also worth some consideration.
Hope this help
I'm trying to build a rather complicated header. This is what it should look like:
As you can see, the header needs to be centered on the page, but the elements need to expand the width of the page. The issue I'm running in to is that I can't get the white part to extend properly. This is what I currently have:
I can't figure out any way to extend the white background over the black bar on the left side. I can kind of get it working using :before, but only at certain zoom levels (at certain points, a gap would appear between the logo and the overlapping :before, causing a bit of the black bar to bleed through), and we need this to work at all zoom levels.
My only other thought would be to use an extremely wide background image for the entire navigation, but I don't think that's an acceptable solution either.
Does anyone have any suggestions?
Demo: http://www.weblinxinc.com/beta/header/
Try that, on your current code (I used your current #headerLeft:after pseudo element) :
#headerWrapper header #headerLeft:after {
/* clear: both; */
content: "\0020";
display: block;
/* visibility: hidden; */
/* zoom: 1; */
width: 1000px;
height: 50px;
background: white;
top: 50px;
right: 100%;
position: absolute;
margin-right: -60px;
}
In a word, I just use a pseudo element to cover the left part in white. So I put it a very high width, and I position it relatively to the logo.
Feel free to put it on another element / pseudo element : I guess this one is making a clearfix.
I'm writing a mobile/desktop chat application that is supposed to utilize the entire screen. The bottom <div> shown in yellow can be fixed-height if it needs to be.
presently it's Absolutely positioned to the bottom of the window.
My problem: the top <div>, in cyan, doesn't fit to the rest of the window, regardless of whether I use padding, margin, border, etc. Presently it appears to allow the content to wrap, but that's only because the bottom overwrites the scroll bar.
My only solution so far is to have a final <div> or <br> that pads the end of the scrollable div, but that doesn't make the div smaller, or make the scroll bars properly align.
Here is my source code so far in Fiddle.
Can you edit your CSS and set the DIV with the chat text a class like .break-word and then in CSS declare it with word-wrap:
.break-word {
word-wrap: break-word;
}
Unsure on the covering of scrollbars. You should post your code for others to view and might be able to pick something out.
This style code basically sums up what I'm doing to compensate for my issue. (Instead of, say, using HTML tables.) This may not be the best solution.
#topPart {
position: absolute;
width: 100%;
top: 0;
bottom: 40px; /* or however high the bottom is */
}
#bottomPart {
position: absolute;
width: 100%;
bottom: 0;
height: 40px; /* same as above */
}
I've spent all morning trying to write what I thought was a simple bit of code.
Two long columns of content, only column 1 is visible
On click of a link, column 1 is hidden and column 2 becomes visible
Both are in exactly the same position, however both have different and varying lengths
I decided to use the target pseudo-class to switch between the columns, setting the visibility of one to show.
This seems to work, but I don't fully understand what I've done. Plus, content below these columns seems to be placed beneath them on the z-axis rather than below them on the y-axis.
My two (related) issues:
I'm not sure exactly what the logic is of what I've created, I could do with a plain english explanation.
I don't understand why the DIV underneath the two columns and container is not appearing below them on the y-axis.
Here's my CSS:
#container
{
background-color: red;
position: relative;
}
#schools-list
{
width: 400px; /* Set the width of the visible portion of content here */
height: 600px; /* Delete the height, let the content define the height */
background-color: purple;
position: absolute;
top: 0;
left: 0;
}
#boards-list
{
width: 400px; /* Set the width of the visible portion of content here */
height: 700px; /* Delete the height, let the content define the height */
background-color: green;
position: absolute;
top: 0;
left: 0;
visibility: hidden;
}
#container:target #schools-list
{
visibility: hidden;
}
#container:target #boards-list
{
visibility: visible;
}
Here's my HTML:
<div id="container">
<div id="boards-list">
Boards List<br>
Switch to Schools List
Here's some content
</div>
<div id="schools-list">
Schools List<br>
Switch to Boards List
Here's some other content
</div>
</div>
<div>Why is this beneath everything?</div>
Absolute positioning removes an item from the flow of the page. This is what is causing your bottom div to appear underneath.
Visibility removes the element from sight but the element will still take up space.
My suggestion is to use display rather than visibility.
Toggle your elements between display:block and display:none and remove the absolute positioning and you should be able to achieve the functionality you desire.
Both #borad-list and #school-list is taken out of normal page flow by position: absolute, that's why your container height should be 0px as there is nothing that takes any space vertically.
I could explain it better but now writing with my phone so... i'll try just to give you starting point.
By positioning the containers using position:absolute, you're removing them from the normal flow of the page. In other words, your other content acts like those containers aren't even there, and those containers magically appear in front of the content.
Instead, what you'll likely want to do is remove the position, top, and left of the containers, and use display:block to show and display:none to hide the containers. You can also remove the height from the containers and allow the content to decide on its own how much room is needed.
I'm working on a site for a client in which there's a background image that will be centered on the page with text, links, etc. overlayed.
I currently have the image resized as follows:
img.bg
{
height:100%;
position:absolute;
}
This fits the image to the height of the browser, but aligns it to the left. I need it to be centered.
Since I need it to be conditionally responsive to browser-height variations, the usual centering tricks aren't working.
Thanks!
Try removing "position:absolute" and adding margin: 0 auto. For example:
img.bg
{
height:100%;
margin: 0 auto;
}
or may be just place it inside a table <table align="center"> <tr><td>"image goes here"</td></tr> it's easier to manage cause you can add more items to the webpage in future without difficulty, add borders, change colours of tables, etc.
I can think of a couple ways to go about it (untested, so you'll probably have to tweak):
img.bg {
position: absolute;
/* Top and/or bottom for stretching it vertically as needed. Setting both will likely make it the size of the whole body, so beware. Remove bottom to keep it from doing that if necessary. */
top: 0;
bottom: 0;
/* Left and/or right for sizing/positioning */
left: 25%; /* Percentage position will make it adjust to browser window size, exact percent may need to be tweaked to get right and will depend on the image's size. */
}
img.bg {
display: block;
height: 100%;
width: 500px; /* Whatever your desired width is. */
margin: 0 auto; /* This should work as long as width is set. */
}
Depending on your exact design, either of these should work and be responsive to the size of the browser window. The second one is probably the most flexible and easiest to implement, since you don't have to fiddle with positioning.
The answer depends on exactly what you are after.
If you want an image displayed in the background of the website (which I think you are saying) then I am not sure what method you are using, but if you do away with your img.bg{} in your html and css, and just put the following into your CSS you will get what you want...
body{
background-image:url('background.gif'); // substitute background.gif for the correct file path
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
background-size:auto 100%;
}