I have 3 images within a table, which is the only way I could figure out how to get them adjacent to each other. The problem I am having is that while on the screen I am using, they look like how I want them to be without a scroll bar at the bottom, but on other size screens they force the whole page to extend and therefor requiring scrolling to see the whole width of the page. How can I make the appearance responsive so that the images remain the same size relative to everything else?
Screenshot attached
There are a couple of good ways to make webpages like this responsive to screen size. I'll describe two of them, but again, there are many more:
Making the table width match the page width
An external style library, like Bootstrap
Making the Table Width Match the Page Width
First, you need to make sure that the page itself has the style position: relative on it - so that any of its children (including your table) can be positioned or sized relative to it. There are a couple ways to do this with css, but if you're using classes, you can just assign all of the standard high-level elements in html to be positioned relatively, and to be the full-width provided by the browser.
html, body {
position: relative;
width: 100%;
min-width: 100%; //we do both width and min-width for compatability with old browsers
}
Now that that's out of the way, you have a starting point for your dynamic width. If the table is a direct child of the <body> element, then you should define a class for it that will also give it a width of 100%. Remember, this width maps to the width of it's parent, so since the <body> is the full page width, then the table will attempt to be too! If you want to add some space around it (so that it doesn't literally hit the page edges, you can add some padding too!
.fullWidthTable {
position: relative;
width: 100%;
min-width: 100%;
padding-left: 20px;
padding-right: 20px;
}
Now you can put that class on your table element, and it should map to the page size! Keep in mind that if your images don't re-size according to the size of their <td> parents, then they might overlap or have some other undesired behavior.
Using Bootstrap
So if you're interested in using existing frameworks for organizing your html elements on the webpage, I would strongly recommend Bootstrap. Bootstrap provides you a number of pre-defined classes that have a consistent and predictable structure which you can use to make dynamic websites. In general, bootstrap structure involves three main classes:
containers
rows
columns
It's actually quite similar to working with an html table - but it takes dynamic sizing into account by design.
You can find full documentation and examples for using Bootstrap here: Bootstrap Docs
Related
I am developing an information board for a university club of mine. I almost have it complete, except I have one annoying bug left: The center image expands beneath the viewport.
The image is supposed to shrink and expand to stay between the two side columns, which it does because of
a percentage width css attribute. However, I would like it to not expand further once the bottom of the image makes contact with the bottom of the viewport; it should simply remain centered.
For the life of me I cannot get a solution that both stops it from growing beyond the bottom of the page without mangling the aspect ratio of the image.
I thought I was on to something with object-fit: contain but alas, it appears width will always prioritize itself over object-fit.
Any help would be much appreciated, as I'm quite new to web dev.
Here is a link to a client-side view of what I have so far:
https://jsfiddle.net/ydumcrnk/
Have you looked into display: flex? You can wrap a div around the three .column classes, give that container div a property of display:flex and then you can add some subsequent properties that will line up the .column classes the way you want.
Here is a page on the subject I reference often.
I have a table-like structure made out of different divs (and not the html tag). (kind of like an excel view).
I want to implement the fixation of the top row (header) and the first column (has some actions).
All my actions are in one view. Every row with data is a separate view and the header is a separate view.
I have presently applied position: sticky/-webkit-sticky and top: 0/left:0 as required.
This has been able to fix my problem in most browsers. However, Safari is behaving very abnormally.
My left column gets to stay fixed, but the top column on scrolling goes out of the viewPort.
Can anybody suggest some other fix or a Safari related fix?
Please find images attached below:
Sticky can be finicky. If you showed us relevant html/css it would be easier to offer solutions.
Is there a reason you can't use position: fixed; instead of sticky? unless the sticky elements are only sometimes sticky, then fixed should work.
Or maybe set the body 100% width and height, overflow: none; and then set the area you want scrollable to 100% height with overflow-y: scroll or 'auto'.
Edit: Based on your comments below.
I think I have a better idea about what you are trying to do. You want the left column to scroll up/down with the rows, but not left/right. position: sticky; may be the only way to achieve that other than javascript.
I think you should take the top row out of the equation though. Put the whole thing in one container, then setup nested containers within that. There are lots of different ways to structure it. Because position: sticky; gets positioned relative to the nearest scrollable ancestor.
I made a jsfiddle to show one possible method. https://jsfiddle.net/c9kaz854/4/ I can't test it in safari right now, but maybe you can test it, and maybe it can give you some different ideas.
I would suggest you make the same sort of structure you are going for in a simplified format. Start with a clean html file and basic css reset file. Build the basic structure and tweak it until you have something that works consistently across the browsers you need to support. Then use that basic pattern in your full site.
Because position: sticky; has inconsistent implementations in some browsers, a possible workaround for your situation could be to put the element in an <iframe>, <object> or <embed>. Then you could used position: fixed; in a more limited context.
To make that work though, you would put the top row above and outside the iframe, and all the scrollable content inside the iframe (left column and all but top row). Just have left column (inside iframe) be 'fixed.' Put the iframe in a div with overflow-y: scroll; (or auto), and make the iframe itself taller than its container div, so for vertical the scrolling happens outside the iframe, and the whole iframe element scrolls within the containing div, including the left column which is fixed inside the iframe. Then put a class on the iframe source's html/body elements and limit their width with width: 100%; (size of the container) and give them overflow-x: scroll; (or auto), so the the horizontal scrolling happens within the iframe where the left column is fixed and won't move.
When I switch off the blog part and sidebars in the terrifico theme in Wordpress I don't seem to be able to place a full width slider anywhere.
The theme looks like this in the form that I'm talking about: http://vpthemes.com/preview/Terrifico/page-full-width/
As you can see all the text is 'bounded' by a box (the black line). Is there any way in which I can make the metaslider go OUTSIDE of this box (i.e. to span the FULL width of the page)? I don't necessarily want to get rid of the box all toghether, the text can stay within it.
I have seen on the Metaslider website that some solutions for certain themes are given (here - but I am not sure how to adapt this to the theme that I'm using.
Thanks in advance!
Disclaimer
Before I suggest a solution, I'd like to point out that what you're asking is to break the Box flow model. I wouldn't recommend that because you're likely to run into inconsistent results across browsers.
That said, what you're trying to accomplish is possible. You could use javascript to do this and it may in fact be easier in some respects but here's a CSS solution.
1. Break out of the box model
float: left;
width: 200%;
margin-left: -50%;
text-align: center;
The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.
The width of the container is still relative to its parent so if you use % units to scale it up you would need to compensate for the responsiveness of the parent. Here, I'm just overcompensating.
To ensure that our element remains centered, we use a negative margin that is half of the overflow. That is, we want our box to be 100% wide, we have 100% overflow to ensure that so half the overflow is 50% (comment below if that doesn't make sense).
We use text-align to put the element we add in step 3 in the center of the viewport.
2. Allow Overflows
This is where you may well break themes. The parent elements will hide elements that float outside of them if they have the overflow: hidden property (note overflow can also be used to show scrollbars).
You will need to ensure that the parent elements have:
#post-body, .content-posts-wrap {
overflow: visible;
}
As far as I can see that affects #post-body and .content-posts-wrap
3. Add an element that will be the right size
Now we have an oversized container for our slider but we need it to be the width of the page. Inside the div or whatever it is you want to put your slider into you will need to nest another element that will be the correct width. That element will need the following css:
display: inline-block;
width: 100vw;
text-align: left;
You need display because we are back to the box model now and we want our block to obey the width rule we give to it.
We set our width using vw (viewport width) units to make this a bit easier (but they may not be supported on your target browser). There may be some ingenius way to do this without vw units but I would probably just use javascript if it's not an option for you.
Finally, since we set our text-align above, we need to reset it here.
4. Add a Clearing Div
Because you've broken out of the flow, elements aren't too sure what to do. You probably want to add another element after your parent slider that
specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them. source
It can be as simple as a <div> element with:
clear: both
write your code something like this...
html like that...
<div id="parent_for_slider">
<div id="slider">
//place your slider code
</div>
</div>
Css for that
#parent_for_slider{
position:relative;
}
#slider{
position:absolute;
width:100% !important;
height:auto;
}
i am recommending to use ResponsiveSlides.js for full width slider with responsiveness
I've always wondered about this.
Even with media queries, how would I significantly change the placement of things(since I'm not modifying element placement in HTML directly).
For example, if social Facebook/Twitter links appear somewhere in the middle of the page(with their HTML container elements nested in a bunch of other parent tags), how would I go about moving that to the bottom of the page(or, to make it look like they are nested in a different section).
You have at least two options:
Change the positioning of the container element. Instead of static position (default behavior), you can use position: absolute or position: fixed to move it to a totally different place on your page.
Repeat the elements in two different places, and set one of them visible depending on a screen size.
I must add, however, that in a good design such measures are rarely necessary. You do not want to confuse your users by moving the elements to a totally different location. A better approach is to use a responsive grid (for example, changing the layout from three columns to two, or from two to one, when a screen gets smaller), collapse tabs into a drop-down list, etc., but keep the position of different elements relatively stable.
Moving to the bottom of the page wouldn't be a big deal. Depending on the parent container, use position:absolute or position:fixed and adjust the z-index of this and the parent container.
However, if you wanted to re-order your containers for specific media queries, you'll either have to give absolute positioning to more elements, adjust your floats, or use Javascript.
If this is a client request, I would personally revisit the wireframe stage and plan your responsive behavior from scratch.
You never ever can assume height of elements for sure from a CSS perspective: user will zoom a bit or a lot, images included or not; images won't appear because of network problem or by user choice, etc. Thus position: absolute is a recipe for future or immediate failure (and fixed not what you're searching for).
You can play with:
flexbox (horizontal or vertical, natural or reverse order)
display: table-(header|footer)-group or display: table-caption along with table-cell and if possible with parent element having display: table (with or without table-layout: fixed) or table-row
floats and Block Formatting Context effects (such a powerful beast)
nope: CSS Grid Layout is IE10 and IE11 only
If you want to move an element from somewhere inside some other element far away both in HTML and visually, then go with JS/jQuery. CSS doesn't allow for complex manipulations. Just make sure that you watch for resize both from and to desktop/mobile resolutions (and allow for initial manipulation and after some AJAX event) and don't fire 100+ events per second when resizing
When an HTML table is wider than the page body, it's always left aligned, no matter if you specified a centered alignment. I've a table containing CSS3 gradient buttons, whose size isn't easy to predict (buttons size depends on the font used by the browser). On some browsers this table grows wider than the page body, causing the table to become uncentered related to the page banner.
I've read questions like this: Center table, even if it is wider than parent container stating that the only way of centering tables in this scenario is with Javascript.
But I'd wish to find a solution without javascript. The page design is very simple (just the site logo centered on the header, and an array of big buttons below).
Do you have any suggestion for an easy and elegant solution for this, so that the buttons table is always centered in the page?
http://jsfiddle.net/JQ3qb/
I'm not sure but is, this what you want? You can do it with positioning and then play with left percentage to adjust table.
#test{
border: 1px black solid;
width: 800px;
position:relative;
left: -25%;
text-align:center;
}