Ritai#5-Creates a New Members page with temporary style and filler elements. #17
Conversation
pdas002
changed the title
…r usage, updated html to include rows/coloums but this messed up previous css
app/app.css
Outdated
|
|
||
|
|
||
|
|
||
| .table > thead > tr> th{text-align: center;} |
There was a problem hiding this comment.
This class name is too common. Don't use tag names for classes it gets confusing.
app/app.css
Outdated
|
|
||
| .table > thead > tr> th{text-align: center;} | ||
| .table > tbody > tr> td{text-align: center;} | ||
| .btn.btn-default.btn-block{text-align: center;} |
There was a problem hiding this comment.
I'm assuming that you are trying to change some bootstrap, this is not the way to do that. I'd have to take a look at what your dong in order to give a way to fix it.
There was a problem hiding this comment.
The tables had text that were not centered so I just found the element where it can be changed and centered it
app/app.css
Outdated
| .btn.btn-default.btn-block{text-align: center;} | ||
|
|
||
| .membersbound {background: #fff; color: #373737;} | ||
| .membersbound > div {display: none; padding: 20px 25px 5px;} |
There was a problem hiding this comment.
Create a single class that uses attribute then apply it to any tags that need it. This is okay for things like tables, just to save some code. But, usually this is never used. Layered CSS gets really confusing and is usually not good practice.
…r usage, updated html to include rows/coloums but this messed up previous css #UPDATE fixed actual website looking normal issue but another issue came up, where if I put the input/labels inside a div or a row, like asked, the css of using '~' would not work because the input and labels are not inside the same parent function with divs for the table...
app/app.css
Outdated
| label.members:hover {color: #24248f; cursor: pointer; background: #d3d3d3;} | ||
| input.members:checked + label.members {background: #24248f; color: #fff;} | ||
|
|
||
| #tab1:checked ~ .membersbound #Web-Dev, |
There was a problem hiding this comment.
Not sure what this is trying to accomplish, but this is not correct.
| {{ 'Current version is v%VERSION%.' | interpolate }} | ||
| </p> | ||
| <div></div> | ||
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> |
There was a problem hiding this comment.
I know this is for your local version, but just for the sake of argument. Only link in the original index.html.
| label.members:hover {color: #24248f; cursor: pointer; background: #d3d3d3;} | ||
| input.members:checked + label.members {background: #24248f; color: #fff;} | ||
|
|
||
| #tab1:checked ~ .membersbound #Web-Dev, |
There was a problem hiding this comment.
Not sure what this is supposed to do, but this can't be correct
| .totalmembers{ text-align:center;} | ||
| .table > thead > tr> th{text-align: center;} | ||
| .table > tbody > tr> td{text-align: center;} | ||
| .btn.btn-default.btn-block{text-align: center;} |
There was a problem hiding this comment.
I'm assuming that you are trying to change some bootstrap, this is not the way to go about it.
| .btn.btn-default.btn-block{text-align: center;} | ||
|
|
||
| .membersbound {background: #fff; color: #373737;} | ||
| .membersbound > .row > .col-sm-5 > div {display: none; padding: 20px 25px 5px;} |
There was a problem hiding this comment.
Layered CSS is generally bad practice, create a single class and apply accordingly.
| .membersbound {background: #fff; color: #373737;} | ||
| .membersbound > .row > .col-sm-5 > div {display: none; padding: 20px 25px 5px;} | ||
|
|
||
| input.members {display: none;} |
There was a problem hiding this comment.
All CSS should be classes and id references, never reference tags themselves
|
|
||
| <!-- <div class = "row"> --> | ||
| <input class = "members" id="tab1" type="radio" name="tabs" checked> | ||
| <label class = "members" for="tab1">Web Dev</label> |
There was a problem hiding this comment.
Not sure what for does, never seen it so you shouldn't use it.
| <div class="col-sm-5"> | ||
| <div id="Web-Dev"> | ||
| <div class="container"> | ||
| <table class="table table-bordered table-hover" id="1" ng-repeat = "x in firsttable"> |
There was a problem hiding this comment.
id's should follow all coding naming conventions, so you shouldn't start one with a number or a capital.
What should I change? And It says files changed 18... should I just push the ones that I edited instead of the whole directory?