I'm building a site that includes a table in the middle of the homepage, and I can't seem to get a line (looks like an <hr> line) to disappear from the top of it. Here's a link to the page http://marccary.com/test and here's the code I'm using for the table:
<table cellspacing="0" cellpadding="0" border="none">
<colgroup border="none">
<col span="1" width="400" >
<col span="1" width="400" >
</colgroup>
<tr>
<td height="225" width="600"><p align="center">
<iframe width="400" height="166" scrolling="no" frameborder="no" src="http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F84936057%3Fsecret_token%3Ds-4zQJw&show_artwork=true&secret_url=true"></iframe><br><span style="font-size:20px;">Marc Cary on Soundcloud>></span></p></td>
<td height="225" width="600"><p align="center">
<iframe width="400" height="225" src="http://www.youtube.com/embed/j9GhIaaEC6c" frameborder="0" allowfullscreen></iframe>
<span style="font-size:20px;">Marc Cary's YouTube channel>></savaipan></p></td></tr></table>
I've gone into my CSS and tried to make sure there are no borders on tables. I've put the following code into my CSS stylesheet:
table {
border-collapse: separate;
border-spacing: 0;
border: none !important;
border-top: none;
border-bottom: none;
}
caption,
th {
border-bottom: none;
border: none;
border-top: none;
}
td {
font-weight: normal;
text-align: left;
border-top: none;
border: none;
border-bottom: none;
}
tr {
border: none;
border-bottom: none;
border-top: none;
}
Still no luck. Does anyone have a suggestion?
You have a CSS setting:
.entry-content td, .comment-content td {
border-top: 1px solid #EDEDED;
}
Thats the border you see.
This CSS
border-top: none;
border: none;
border-bottom: none;
can be shortened to just
border: none;
Add the following to your CSS:
hr {
height: 0px !important;
}
It seems you're using a CMS software to develop your site and the template you're using is actually putting an <hr> at
<div id="page" ...>
<header id="masthead" ...>
<hgroup ...>
<nav id="site-navigation" ...>
<hr>
</header>
<div id="main" ...>
<footer ...>
</div>
Related
I am building an app in Vue that is tracking the sum of donations paid to my ExtraLife Team and tallies them up based on a user-submitted #tag in the message provided with the donation. Currently, I've been working on a Goal Editor view using what I've named the adminView component to display the full goals table and allow a user to edit the rows. The problem that I'm having is that for some reason when I attempt to update(goal) I'm getting a 400 (Bad Request) response. Obviously, I must have something malformed or missing in the data, I'm just not seeing what.
Here is my current #/components/AdminView.vue (Auth url and Key Removed)
<template>
<div id="adminView">
<h1>Goal Editor</h1>
<table style="border-collapse: collapse; width: 80%">
<thead>
<tr style="border: 1px solid #ddd">
<th
style="
padding: 8px;
text-align: left;
border: 1px solid #ddd;
width: 3%;
"
>
ID
</th>
<th
style="
padding: 8px;
text-align: left;
border: 1px solid #ddd;
width: 5%;
"
>
Tag
</th>
<th
style="
padding: 8px;
text-align: left;
border: 1px solid #ddd;
width: 35%;
"
>
Description
</th>
<th
style="
padding: 8px;
text-align: left;
border: 1px solid #ddd;
width: 10%;
"
>
Target Amount
</th>
<th
style="
padding: 8px;
text-align: left;
border: 1px solid #ddd;
width: 10%;
"
>
Current Donations
</th>
<th
style="
padding: 8px;
text-align: left;
border: 1px solid #ddd;
width: 4%;
"
>
Active
</th>
<th
style="
padding: 8px;
text-align: left;
border: 1px solid #ddd;
width: 6%;
"
></th>
</tr>
</thead>
<tbody>
<tr
v-for="(goal, index) in goals"
:key="goal.goal_id"
:style="[index % 2 == 0 ? 'background-color: #f2f2f2' : '']"
>
<td style="padding: 8px; text-align: left; border: 1px solid #ddd">
{{ goal.goal_id }}
</td>
<td style="padding: 8px; text-align: left; border: 1px solid #ddd">
<input
v-model="goal.tag"
v-if="goal.editing"
type="text"
style="border: none; outline: none; width: 100%"
/>
<span v-else>#{{ goal.tag }}</span>
</td>
<td style="padding: 8px; text-align: left; border: 1px solid #ddd">
<input
v-model="goal.goal_description"
v-if="goal.editing"
type="text"
style="border: none; outline: none; width: 100%"
/>
<span v-else>{{ goal.goal_description }}</span>
</td>
<td style="padding: 8px; text-align: left; border: 1px solid #ddd">
<input
v-model="goal.goal_target"
v-if="goal.editing"
type="number"
style="border: none; outline: none; width: 100%"
/>
<span v-else>${{ goal.goal_target }}</span>
</td>
<td style="padding: 8px; text-align: left; border: 1px solid #ddd">
<input
v-model="goal.goal_tally"
v-if="goal.editing"
type="number"
style="border: none; outline: none; width: 100%"
/>
<span v-else>${{ goal.goal_tally }}</span>
</td>
<td style="padding: 8px; text-align: left; border: 1px solid #ddd">
<input
v-model="goal.active"
v-if="goal.editing"
type="checkbox"
style="outline: none"
/>
<span v-else>{{ goal.active }}</span>
</td>
<td style="padding: 8px; text-align: center; border: 1px solid #ddd">
<button
v-if="goal.editing"
#click="saveGoal(goal)"
style="
outline: none;
border: none;
background-color: #4caf50;
color: white;
padding: 8px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
"
>
Save
</button>
<button
v-else
#click="editGoal(goal)"
style="
outline: none;
border: none;
background-color: #f2f2f2;
color: black;
padding: 8px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
"
>
Edit
</button>
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import { createClient } from "#supabase/supabase-js"; // Import the Supabase client
export default {
name: "adminView",
data() {
return {
supabase: null,
session: null,
error: null,
goals: [],
};
},
async created() {
// Create the Supabase client object
this.supabase = createClient(
"MY DB URL IS HERE",
"MY DB SECRET KEY IS HERE"
);
// Fetch the current user's session
const { data, error } = await this.supabase.auth.getSession();
this.session = data;
this.error = error;
// Fetch the goals from the database
await this.fetchGoals();
},
methods: {
async fetchGoals() {
console.log("Fetching goals...");
const { data, error } = await this.supabase.from("goals").select("*");
console.log(data, error);
this.goals = data;
console.log("Goals fetched!");
console.log(this.goals);
},
editGoal(goal) {
goal.editing = true;
},
async saveGoal(goal) {
console.log(goal);
goal.editing = false;
await this.supabase.from("goals").update(goal);
},
},
};
</script>
<style>
#adminView {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
</style>
Thanks to a comment from #kissu I remembered to check the network tab and compared it to a manual request and discovered that I had an extra value in this.goal that was making it's way into the request. I fixed by deleting the extra value and then setting it back to false.
async saveGoal(goal) {
delete goal.editing;
console.log(goal);
await this.supabase
.from("goals")
.update(goal)
.eq("goal_id", goal.goal_id);
goal.editing = false;
},
I'm extremely new to coding so forgive if this is a basic question; however, I need a little direction and hope someone is able to provide an answer.
I'm reading an article pertaining to the alignment of numerical data to a decimal point within a table https://alistapart.com/article/web-typography-tables/#section6
which uses the below declaration for example:
td { text-align: "." center; }
Below is the basic table code I'm testing the syntax on.
<!-- HTML CODE -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<table>
<caption>
October Expenses
</caption>
<colgroup>
<col style="text-align: right" />
</colgroup>
<thead>
<tr>
<th>Date</th>
<th>Expense</th>
<th>Cost</th>
<th>Payment Method</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="col">01.10.21</td>
<td scope="col">75" Samsung tv.</td>
<td scope="col">$1,995.00</td>
<td scope="col">Zip</td>
</tr>
<tr>
<td>07.10.21</td>
<td>Netflix</td>
<td>$15.99</td>
<td>Debit</td>
</tr>
<tr>
<td>12.10.21</td>
<td>Paint Supplies</td>
<td>$102.14</td>
<td>Debit</td>
</tr>
<tr>
<td>18.10.21</td>
<td>Pencil</td>
<td>$0.80</td>
<td>Debit</td>
</tr>
<tr>
<th colspan="2" style="text-align: right">Total</th>
<td colspan="2" style="text-align: left">$2,113.93</td>
</tr>
</tbody>
</table>
</body>
</html>
/* CSS */
caption {
font-size: 1.3rem;
font-weight: bold;
padding-bottom: 10px;
}
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
padding: 1%;
}
thead th:nth-child(n) {
width: 20%;
}
tbody tr:nth-child(even) {
background-color: #adc2a9;
}
tbody tr:nth-child(odd) {
background-color: #d3e4cd;
}
thead th:nth-child(1) {
text-align: right;
}
thead th:nth-child(2) {
text-align: left;
}
thead th:nth-child(3) {
text-align: center;
}
thead th:nth-child(4) {
text-align: left;
}
tbody td:nth-child(1) {
text-align: right;
}
tbody td:nth-child(3) {
text-align: center;
}
caption {
font-size: 1.3rem;
font-weight: bold;
padding-bottom: 10px;
}
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
padding: 1%;
}
thead th:nth-child(n) {
width: 20%;
}
tbody tr:nth-child(even) {
background-color: #adc2a9;
}
tbody tr:nth-child(odd) {
background-color: #d3e4cd;
}
thead th:nth-child(1) {
text-align: right;
}
thead th:nth-child(2) {
text-align: left;
}
thead th:nth-child(3) {
text-align: center;
}
thead th:nth-child(4) {
text-align: left;
}
tbody td:nth-child(1) {
text-align: right;
}
tbody td:nth-child(3) {
text-align: "." center;
}
However, when I employ this code within my <td> elements located on separate rows and contain various decimal placed numbers, the output doesn't appear to line up the periods directly beneath each other. I have the text-aligned to center to test this . syntax (I understand numbers should be styled to text-align: right;)
Am I misinterpreting the function of this syntax? Am I not doing something correctly? or does this syntax simply not work?
I'm new to Vue, this is my first time using it instead of just regular old HTML or CSS with some Javascript thrown in.
How do I format it so that it adjusts to the size of the screen it's being displayed on? My media queries don't seem to be doing anything.
<template>
<div id="app">
<Home msg="AutoSentinel"/>
</div>
</template>
<script>
import Home from './components/Homepage.vue'
export default {
name: 'app',
components: {
Home
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: black;
text-decoration: none;
}
body{
margin:0px;
}
</style>
<template>
<div class="Home">
<div class="top-bar">
<h1>{{ msg }}</h1>
<div class="nav-bar">
<button #click="$router.push('about')">Home</button>
<button #click="$router.push('about')">Drowsiness</button>
<button #click="$router.push('about')">SOS</button>
<button #click="$router.push('about')">Map</button>
<button #click="$router.push('about')">Drivers</button>
<button #click="$router.push('about')">Data</button>
</div>
</div>
<div class="main-page">
<div class="greeting-wrapper">
<p class="p1">
Welcome to AutoSentinel
</p><br>
<p class="p2">
Where driving meets safety
</p>
<div class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2964.9888949227957!2d-87.81797538455504!3d42.0005138792127!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x880fb63b7755aae1%3A0x4a77c1865fe64ca0!2sPanoskin!5e0!3m2!1sen!2sus!4v1608611108029!5m2!1sen!2sus" width="650" height="350" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>
</div>
<div class="driver-photo">
<img src="../assets/MicrosoftTeams-image.png" width="300px" height="600px">
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Home',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.top-bar{
height: 200px;
background-color: #8b1be6;
color: black;
box-shadow: -6px 0 white, 6px 0 white, 0 7px 5px -2px #d4d3d3;
}
h1{
font-size: 90px;
font-weight: bold;
display: flex;
justify-content: space-evenly;
align-items: center;
margin: 0px;
letter-spacing: 0.3em;
}
.nav-bar{
margin-top: 38px;
display: flex;
justify-content: space-evenly;
}
.main-page{
font-size: 40px;
display: flex;
justify-content: space-between;
padding: 15px;
background-image: url("../assets/backgroundline.png");
background-repeat: no-repeat;
background-size: 100%;
}
.map{
padding-top: 30px;
padding-left: 15px;
}
.p1 {
margin-left: 20px
}
.p2 {
margin-top: -40px;
margin-left: 105px;
}
button {
background-color: white;
border: none;
border-radius: 25px;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-weight: bold;
margin-bottom: 30px;
outline: none;
cursor: pointer;
}
.driver-photo {
padding-right: 70px;
padding-top: 30px;
}
</style>
Added code, sorry for forgetting that. I was trying to use a media query in this (not sure if I'm using Vue completely correctly here, either). Is there a way to make it dynamically adjust to the screen size?
Use media queries
You said media queries isn't working but from your code you aren't even using it.
You can read us on media queries here
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
The fact that you are using vue.js doesn't change how you're would implement media queries. Just use it the regular way you would in a regular HTML and CSS environment.
This shows the working jfiddle (Click the color-picker)
http://jsfiddle.net/xztoqtd7/
This shows the non-working jfiddle (Click the color-picker)
http://jsfiddle.net/p7dm051z/
They should both change the color of the second row cells, but only one of them does that. Code:
HTML
<table>
<tr>
<td>
<input type="color" id="colorpicker1" />
</td>
<td>
<input type="color" id="colorpicker2" />
</td>
</tr>
<tr>
<td id="one">ipsum</td>
<td id="two">lorem</td>
</tr>
</table>
CSS
table {
border-collapse: collapse;
background: #000;
border-top: 1px solid #777;
border-left: 1px solid #777;
}
table tr td {
border-right: 1px solid #777;
border-bottom: 1px solid #777;
color: #fff;
text-align: center;
}
input {
border: 0;
padding: 0;
margin: 0;
}
JS
$("#colorpicker1").on("change", function() {
$("#one").css("color", $("#colorpicker1").val());
});
$("#colorpicker2").on("change", function() {
$("#two").css("color", $("#colorpicker2").val());
});
Why is the result different?
I am having hard time figuring out how to fix a small alignment issue as shown in the fiddle. The text box and 'R' bootstrap label is not aligned on the top.
https://jsfiddle.net/haribalaji/p7Louzq9/
.inline-form-control
{
display: inline-block;
width: 90%;
}
.labelClass
{
display: inline-block;
height: 40px;
}
.label-primary {
background-color: #337ab7;
}
.label {
display: inline;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
}
Here is the code
<code>
<form>
<div class="row">
<div class="col-xs-12 col-md-8">
<div class="form-group">
<label for="adrTerm"><span>Adverse Reaction Term</span><span style="color:red;">*</span></label>
<div class="field"><input type="text" name="adrTerm" class="inline-form-control form-control" placeholder="Enter the ADR Term Name" value="" tabindex="1"><span class="labelClass label label-primary">R</span>
<div class="input"></div>
</div>
</div>
</div>
</form>
</code>
This fiddle demonstrates the "R" label being the same height as the input and aligned to its right.
As mentioned in the comments earlier, the markup needed to be much simpler:
<div class="container">
<form>
<div class="form-group">
<label for="adrTerm" class="col-xs-12 control-label text-left">Adverse Reaction Term<span style="color:red;">*</span></label>
<div class="col-xs-11">
<input type="text" name="adrTerm" class="form-control" placeholder="Enter the ADR Term Name" value="" tabindex="1">
</div>
<div class="col-xs-1">
<label class="text-center rLabel">R</label>
</div>
</div>
</form>
</div>
And also, very little custom CSS is required:
.container {
margin: 10px
}
.rLabel {
padding-top: 6px;
padding-bottom: 6px;
background-color: #337ab7;
margin-left: -30px;
color: #fff;
width: 80%;
}
This still may not give you exactly what you want. For example, you may not care for how the "R" label will change width when the window is resized. If so, change the width in the .rLabel class to a fixed width.
Note how the Bootstrap styles are added to the fiddle as an external resource.
Also, note that the use of a container is required.
Updated link to JSFIDDLE
.labelClass
{
display: inline-block;
position:absolute;//added
}
.label {
display: inline;
padding:0 0.6em;//changed
font-size: 75%;
font-weight: 700;
line-height: 1.8;//changed
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
}
Make label position absolute,
Removed unnecessary padding,
Changed line height of label.
Use input group add-on of bootstrap if you are using.
http://v4-alpha.getbootstrap.com/components/input-group/