I'm trying to create an HTML scheduling app that sizes the created tables to fit the the screen while maintaining its same size ratio. It looks fine when I have it fullscreen: . But when I resize the window or someone with a different screen resolution runs it, the positioning of the tables messes up like so: .
I was wondering if there was something I could do in my CSS or JavaScript files that would ensure that the ratio and relative positioning of each table remained the same no matter what screen size or resolution it is ran on. I'll include a JSFiddle for further understanding here:
CSS for Tables and Positioning:
/* To control the style of the overall table class */
table {
border: 0.0625em solid black;
text-align: center;
table-layout: fixed;
}
th, td {
border: 0.0625em solid black;
width: 8.75em;
height: 2.1875em;
}
/* Settings for Days row */
.tableDays {
width: 8.75em;
}
/* Settings for Employee column */
.tableEmployees {
line-height: 2.1875em;
}
/* Settings for Tasks table */
.tableTasks {
width:100%;
margin-top:0.3125em;
empty-cells: show;
height:62.5em;
line-height: 2.1875em;
width: 6.25em;
}
.empTaskCont {
height: 31.25em;
width: 100%;
overflow-x: hidden;
overflow-y: scroll;
position: relative;
padding-bottom: 1.875em;
}
#table-wrapper-days {
position: relative;
width: 66.5em;
margin-left: 15.8125em;
/*float:right;*/
}
#table-scroll-days {
height: auto;
overflow-x: hidden;
}
#table-wrapper-employees {
position: relative;
float:left;
width:18%;
margin-top:0.5em;
}
#table-scroll-employees {
width: auto;
overflow-y: hidden;
max-height: 31.25em;
}
#table-wrapper-tasks {
position: relative;
width:81%;
float:right;
}
#table-scroll-tasks {
overflow-x: scroll;
overflow-y: scroll;
max-height: 32.625em;
}
.employee-mod-btn{
float:left;
}
JSFiddle: https://jsfiddle.net/hs5sz8kb/#&togetherjs=x3LUnVhmMp
I'm still very new to HTML, CSS, and JavaScript so any additional advice on my code is greatly appreciated. Thank you for your time!
Reviewing the content of your fiddle, the issue is less related to CSS, and more related to your HTML layout. The first problem is that you are building multiple tables when they should just be 1 table. Your top "row" should be part of the table with all the content, instead of a separate table. Your left column is also a separate table. Combine them all into 1 table and that will help a lot.
I hate to redirect your efforts toward a total rewrite because you are learning HTML and CSS, but you may find that a very effective way to implement "responsive" design is with a helper library. I would suggest considering the use of Bootstrap, although there are many others. Bootstrap adds a lot of "helper classes" that will take some of the effort of achieving what you are trying to achieve out of the equation. Consider tables for example, what I think you might be looking for is "breakpoint specific" tables.
https://getbootstrap.com/docs/4.0/content/tables/#breakpoint-specific
Another option is to have always responsive tables, where as the screen resizes you will get a horizontal scrolling frame.
There are a lot of options to choose from, so try it out. You can easily add the Bootstrap library to your JS Fiddle in the "resources" section.
Additionally, you might consider storing your data as JSON or in a database. As you progress with this project, you may find Datatables to be a very useful javascript library. It allows you to work with the raw data and build the tables more dynamically.
https://datatables.net/
Instead of using custom css to style your tables which could take some time for it to be looking good at all screen widths, consider using bootstrap which is a responsive framework for html, css etc. It will be worth while you reading about bootstrap as they provide responsive tables that will help you based on the screen size of the monitor or other device. Check out this link that will help you with building the html structure and adding bootstrap to your workflow. All you will have to do is modify the table to suit your needs.
References:
https://getbootstrap.com/
https://getbootstrap.com/docs/4.0/content/tables/
Related
I'm preparing the email html file for mailing. I'm using the table, tr, td tags. The whole content of my html so far is placed within a table, including another small table within one of the cells (see pictures below). I would like the whole table to display always in the center. I would also like the small table to display in the middle of the cell. The width of outer table it fixed.
I tried putting into CSS:
margin-left: auto;
margin-right: auto;
and
margin: 0px auto;
, all of which I have found in here. The preview looks fine with either, the preview after uploading the file into mass mailing system works ok as well. But after sending, the centering does not display at all (the inner table also doesn't display at all in Gmail, only content of it). So I'm looking for the most common, most widely used html property, which would most likely display the table in the middle in every browser/mail client. OR, for the advice regarding the possible wrong usage of class properties.
My whole section:
<style>
table, th, td {
border-collapse: collapse;
font-family: Verdana, sant-serif;
}
th, td {
padding: 15px;
text-align: left;
}
.main {
width:1000px;
border: 5px solid #114889;
margin: 0px auto;
}
.inside {
width: 500px;
border: 1px dotted #0000CC;
background-color: #CCE5FF;
text-align: center;
font-size: 10px;
margin: 0px auto;
}
</style>
I am not a pro with the topic so I apologize for the use of wrong terminology.
Edit:
Display in Outlook. All is well but the left alignment:
Display in Gmail. No tables whatsoever:
Outlook only works with tables, so you're right to approach it from that angle. However, some Gmail environments do not even look at embedded CSS (CSS within <head> section). You'll need to 'inline' the CSS (https://www.campaignmonitor.com/resources/tools/css-inliner/).
To center a table in Outlook, use the attribute align on the <table> element like so: <table width="300" align="center"...>. You may also need to wrap it all with <center>...</center>, even though that tag is deprecated (yes, email is that old!).
You'll find in general Outlook will support the attributes - e.g. for border colours, <td bgcolor="#abcdef"...> - whereas others will support the inline style, e.g. <td style="background-color:#abcdef"...>. You should use both, and not rely on embedded CSS.
I can update more specifically if you need, after posting the affected HTML.
Try this one.
.parentTable {
position: relative;
}
.childTable {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Hi I'm still new to web development. So I have a register page that floats as a div above the main page but I was wondering how do I ensure that the div gets centered in a responsive manner?
The pages are separated and included at the header.
<?php
include ('includes/login.php');
include ('includes/register.php');
?>
my register's css
#regScreen {
padding: 5 5 40px 5px;
margin: 0 auto;
position: fixed;
top: 5%;
left: 33%;
z-index: 10;
display: none;
background: #ebebeb;
}
#regScreen:target, #regScreen:target+#cover {
display: block;
opacity: 2;
}
#reghead {
background-color: #e2e1e1;
text-align: center;
display: block;
padding: 0px 0px 10px 0px;
}
I tried to use media query on my #regscreen:
#media (max-width: 300px) {
#regScreen {width: 100%;
left:0%;
}
}
But using media queries doesn't seems to recognize the page as responsive as it is already small. From my understanding, please correct me if I'm wrong.
It's difficult to provide an exact answer without more infomation (it would be great if you added more of the HTML markup), however...
If the issue is that the floating div does not resize to fit various screen sizes (and since you're new to web development...welcome aboard!), there are a couple of suggestions I can make:
1) You may be overcomplicating it by trying to apply the #media (max-width:300px) media query. By simply adding the following styles, the registration form should resize accurately:
#regScreen {
/* The rest of your styles go here */
width:90%;
max-width:600px; /* em or rem value would be better than px... e.g. 37.5 em */
}
This would ensure that the width of the form is always either 90% of the screen width OR 600px, whichever is smaller.
2) If you think there may be an issue with the media query not trigerring, an easy way to test it is to make something really obvious happen at that breakpoint...for example:
#media (max-width: 300px) {
/* Test Style */
/* Turn background red when below 300px */
body{
background-color:red !important;
}
/* Your original styles */
#regScreen {
width: 100%;
left:0%;
}
}
By doing this, it should allow you to start troubleshooting whether it's your media query syntax or something else that is the issue; maybe the media query styles are being correctly applied (so your media query syntax is ok) but the new styles are being overwritten later in the CSS (or due to the specificity of certain rules).
If you add more info to your question, let me know and I'll take another look but until then, this should hopefully help get you on the right track.
I'm not sure about what is the element using those selectors, but I tried to make a sample html & css reference for solving your issue. Here is the link jsfiddle.net/3Le34w8p/
i already see one error just by looking
#media and (max-width: 300px) {
#regScreen {
width: 100%;
left:0%;
}
}
you for got 'and' before '(max-width: 300px)'
I am using two separate CSS files with media queries to achieve different styles based on the screen size of the viewer. I have the following lines in my desktop css file:
Desktop CSS:
.labelContainer .labelText.labelText_xl {
width: 155px;
}
.labelContainer .labelText.labelText_big {
width: 135px;
}
.labelContainer .labelText.labelText_med {
width: 105px;
}
What I am trying to achieve, that when the Mobile css version kicks in, indifferent of the labelText_size class the labelText should take up all the width it can. If I copy the above three rules, and change the width to 100% in each of them, this works just as intended. But if I try to do the following
.labelContainer .labelText {
width: 100%;
height: 32px;
}
only the height gets changed, and the width stays the same.
I presume this is because the more exact the rule, the higher priority it has, but isn't there a way to tell CSS, that no matter what other classes the DOM element has, apply the desired rule?
Because if I define like 20 different size styles for my labels, I would now have to define the same 20 different size styles in my mobile css too, instead of using a single rule, that overwrites the rest.
EDIT: I know I can achieve the desired result with marking the rule as important, but I would rather not do that, because I don't think that setting something as important is a good practice in css.
You can achieve this by using attribute selectors:
.labelContainer .labelText[class*="labelText_"] {
width: 100%;
height: 32px;
}
You could add any class only for mobile devices on <html> or <body> and use it in your mobile CSS version. For example:
.mobile .labelContainer .labelText {
width: 100%;
height: 32px;
}
I was designing a very simple page for a friend. I want to make it responsive-ish, and used a table. I can't get border-spacing to work tho...
You can see my work here: https://jsfiddle.net/Lt2wpehL/
Maybe this part overrides something?
#media screen and (max-width: 500px) {
.info td {
display: block;
float: left;
width: 50%;
}
.info tr,
.info td:nth-child(3) {
float: none;
width: 100%;
}
It's already been mentioned, but generally speaking, tables are pretty big faux pas these days. However, don't be afraid of using other methods! There are some very, very simple grid patterns available to you.
Consider using:
Bootstrap (http://getbootstrap.com/css/#grid)
Or the ever present 960 Grid System (http://960.gs/)
These systems are pre-written, and I think you'll find they server you better and save you a lot of time with future projects.
Mousing over a link in the sidebar works; therefore the sidebar is on top.
Issue description
Commends ending under the sidebar cannot be deleted.
What I've tried
Workaround: using Stylebot to set a user-side CSS rule:
td.comment-text {
width: 500px;
}
Question
My attempts to target have failed. Would someone help me find the right target and rule?
!Additional info
This is not necessarily a stackexchange bug. I use font scaling because it prevents horizontal scrolling, which is very inconvenient for low-vision users.
UPDATE/Resolution
tr td textarea{
width: 475px;
}
Well, the default styles have a rule like this:
.comments {
width: 660px;
}
Maybe try overriding that?
.comments {
width: 500px;
}
Update
The comments textarea specifies a cols attribute that makes it too wide, as well. This should shrink it down.
.comment-form textarea{
width: 475px;
}