Currently working on my first SvelteKit project.
I have created a "+layout.svelte" file which uses a navbar and footer component from my lib folder.
When I add content to a page, it's currently overlapping the navbar.
+layout.svelte
<script>
import Nav from "$lib/nav.svelte";
import Footer from "$lib/footer.svelte"
</script>
<body>
<Nav />
<Footer />
</body>
<slot></slot>
<style>
body {
margin: 0;
}
</style>
nav.svelte
<script>
const nav = [
{ title: "Home", path: "/" },
{ title: "Products", path: "/products"},
{ title: "News", path: "/news"},
]
</script>
<nav>
<ul>
{#each nav as item}
<li><a href={item.path}>{item.title}</a></li>
{/each}
</ul>
</nav>
<style>
nav {
position: fixed;
width: 100%;
padding-bottom: 0.01%;
box-shadow: 0 1px 1px -1px black;
}
ul {
list-style: none;
text-align: center;
padding-left: 0;
}
li {
display: inline-block;
margin-right: 2em;
font-weight: bold;
}
</style>
"+page.svelte" that affects +layout.svelte
<script>
import products from "..\\products.json";
</script>
<table id="productSearchResult">
<thead>
<tr>
<th></th>
<th>Product ID</th>
<th>Supplier ID</th>
<th>Status</th>
</tr>
</thead>
<tbody>
{#each products as product}
<tr>
<td><img src="product.jpg" alt="product"></td>
<td>{product.productId}</td>
<td>{product.supplierId}</td>
<td>{product.statusId}</td>
</tr>
{/each}
</tbody>
</table>
<style>
#productSearchResult {
text-align: center;
/* This also affects the navbar */
margin-top: 5%;
padding: 10px;
border: 1px solid #bebebe;
box-shadow:
15px 15px 30px #bebebe,
-15px -15px 30px #ffffff;
}
#productSearchResult img {
width: 50px;
}
</style>
When I tried to add margin-top to the html table for it to be displayed below the navbar, the navbar is affected aswell. The table is inside a "+page.svelte" from another route.
As far as I understand, css inside a "+page.svelte" should only apply to the current file.
What am I doing wrong?
That is not CSS affecting other elements, you have the nav element set to position: fixed, so it will stay in that place of the viewport regardless of everything else. Use a different placement mechanism if that is not intended.
(Also, don't add body elements, there should only be one and that should be in the app.html file. Hierarchically the page <slot/> should appear between header and footer, otherwise tab navigation and screen reader order will make no sense.)
Related
I need to create the CSS that will modify the style of:
<th class="sort-column" data-is-only-head="false" data-field="daysElapsedfromInfoReceived" style="text-align: left;"><!-- react-text: 463 --> <!-- /react-text --><!-- react-text: 464 -->Days Elapsed From Info. Received<!-- /react-text --><!-- react-text: 465 --> <!-- /react-text --><span class="order"><span class="dropdown"><span class="caret" style="margin: 10px 0px 10px 5px; color: rgb(204, 204, 204);"></span></span><span class="dropup"><span class="caret" style="margin: 10px 0px; color: rgb(204, 204, 204);"></span></span></span><div></div></th>
(Got this from chrome)
so style = "text-align: left; white-space: normal"
I tried:
th .sort-column {
text-align: left;
white-space: normal !important;
}
and also:
th.sort-column {
text-align: left;
white-space: normal !important;
}
with no luck. I need the content of this th to be in multiple lines.
According to Chrome, the next is the CSS hierarchy:
I've formatted your table a little bit and colored it grey to show the cell size:
th.sort-column {
text-align: left;
background-color: grey;
min-width: 10rem;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<table>
<th class="sort-column">Days Elapsed From</th>
<th class="sort-column">Info</th>
<th class="sort-column">Received</th>
</table>
I need the content of this th to be in multiple lines.
When changing min-width into width that'll force the browser to introduce linebreaks:
th.sort-column {
text-align: left;
background-color: grey;
width: 6rem;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<table>
<th class="sort-column">Days Elapsed From</th>
<th class="sort-column">Info</th>
<th class="sort-column">Received</th>
</table>
I want to use the item from the Polymer catalog as a grid.
I've set the grid attribute on the list and gave the children a fixed width and height.
However, each row just contains one child.
Here is my code:
This is the container for my custom element, which contains the iron-list
<div style="height: 675px;">
<cit-entity-card-container card-data="[[cardData]]"></cit-entity-card-container>
</div>
This is my custom element
<dom-module id="cit-entity-card-container">
<style include="cit-shared-styles">
:host {
#apply(--layout-horizontal);
#apply(--layout-wrap);
margin: 0 8px 0 0;
height: 100%;
border-radius: 5px;
background-color: var(--cit-white);
box-sizing: border-box;
padding: 16px 0 16px 0;
display: block;
}
iron-list {
height: 675px;
}
</style>
<template>
<iron-list items="[[cardData]]" as="item" grid>
<template>
<div style="width: 100px; height: 100px;">100x100</div>
</template>
</iron-list>
</template>
<script>
Polymer({
is: 'cit-entity-card-container',
properties: {
cardData: {
type: Array,
value: function() { return []; }
}
}
});
</script>
This is how it looks like:
I solved it
It was simple at the end, but really cost me some nerves.
My iron-list was some versions behind the latest
Updated via bower (bower --force update)
Problem solved
I am trying to make a CSS footer but have ran into some major problems.
Here is what my footer looks like
Logo Games Database
Home About Contact
Where the logo is an image at the far left. Games Database appears in text. Both appear about 1 line above
I would like my footer to look like this
Logo Games Database Home About Contact
Alright, I decided to post the full HTML output I received from the browser. I removed the data turbo links and a bunch of the rows in my table because I wanted to be as concise as possible.
<!DOCTYPE html>
<html>
<head>
<title>Games</title
</head>
<body>
<header class='navbar navbar-fixed-top navbar-inverse'>
<div class='navbar-inner'>
<div class='container'>
Games Database
<nav>
<ul class='nav pull-right'>
<li>Home</li>
<li>Help</li>
<li>Profile</li>
<li>Favorites</li>
<li><a data-method="delete" href="/signout" id="signout" rel="nofollow">Sign Out</a></li>
</ul>
</nav>
</div>
</div>
</header>
<h1>Games Database</h1>
<table>
<thead>
<tr>
<th id = 'title_id'><a class="current asc" href="/games?direction=desc&sort=title">Title</a></th>
<th id = 'console_id'>Console</th>
<th id = 'genre_id'>Genre</th>
<th id = 'release_id'>Release Date</th>
</tr>
</thead>
<tbody>
<tr>
<td id = 'title'>Animal Crossing</td>
<td id = 'console'>Gamecube</td>
<td id = 'genre'>Life Simulation</td>
<td id = 'released_on'>2001</td>
<div>
<td>Show</td>
<td>Edit</td>
<td><a data-method="delete" href="/games/36" id="delete" rel="nofollow">Delete</a></td>
</div>
</tr>
<tr>
<td id = 'title'>Donkey Kong Country</td>
<td id = 'console'>Super Nintendo</td>
<td id = 'genre'>Platform</td>
<td id = 'released_on'>1994</td>
<div>
<td>Show</td>
<td>Edit</td>
<td><a data-method="delete" href="/games/35" id="delete" rel="nofollow">Delete</a></td>
</div>
</tr>
</tbody>
</table>
<p>
Add a new game
</p>
<ul class = 'footer'>
<li><img alt="83ec69e47df392e6856aca4a7a276e9b" id="footer-logo" src="http://m1.behance.net/rendition/modules/59245571/disp/83ec69e47df392e6856aca4a7a276e9b.jpg" />
<li id = "footer-left">Games Database</li>
<div id = 'footer-center'>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</div>
</ul>
</body>
</html>
Here is my CSS file
.footer {
display: inline-block;
border-top: 1px solid #eaeaea;
color: black;
bottom: 0;
position: fixed;
li {
display: inline;
}
#footer-center {
float:right;
word-spacing: 20px;
margin-left: 980px;
color: black;
}
#footer-logo {
height: 30px;
width: 50px;
}
}
#logo {
float: left;
padding-top: 10px;
margin-right: 10px;
font-size: 1.5em;
text-transform: uppercase;
&:hover {
text-decoration: none;
}
}
#links {
color: black;
}
I've tried just about everything. I've tried setting the footer to fixed, relative and absolute. I tried setting the bottom property to 0, fiddling around with it, even in the negatives.
I tried margin-top and margin bottom on the left hand side, but just cannot figure this out.
I even tried to post it on jsfiddle, but I had no luck because I can't figure out how to get that site to work.
I'm using bootstrap.
Help is appreciated.
I finally got the CSS to show in CSSDesk, but I'm not sure I trust it, because it doesn't render bootstrap. Anyways, here goes
http://cssdesk.com/eL2J2
You can't wrap three of your list elements in a div the way you currently have it. Here is a potential solution:
-- the plain CSS --
.footer { position: relative; width: 100%; overflow: auto; }
#footer-left { float: left; }
#footer-right { float: right; }
.footer ul { margin: 0; padding: 0; }
.footer li { display: inline-block; list-style-type: none; margin: 0; padding: 0; }
.footer a { color: black; }
#footer-logo { height: 30px; width: 50px; }
#game { float: right; }
-- the HTML --
<div class="footer">
<ul id="footer-left">
<li><img alt="83ec69e47df392e6856aca4a7a276e9b" id="footer-logo" src="http://m1.behance.net/rendition/modules/59245571/disp/83ec69e47df392e6856aca4a7a276e9b.jpg" />
<li id="game">Games Database</li>
</ul>
<ul id="footer-right">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
No idea how this would be implemented in bootstrap, but this should give you a basic idea for how to structure your footer.
Just upgraded my IE to version 10 on Windows 7 yesterday, and am having problems with hover menus.
Seems to work fine on other browsers I've tried(including previous versions of IE) but on IE10 the popup table menu loses background and border. At first on page load it is ok but on moving across items loses the table background color and border(appears table becomes 0 width for some reason).
Here is some sample code:
<!DOCTYPE html>
<html>
<head>
<title>IE 10 Menu Test Page</title>
</head>
<style>
li {
background-color: #cccccc;
list-style: none;
position: relative;
width: 80px;
}
li table {
background-color: #cccccc;
border: 1px solid #999999;
display: none;
left: 75px;
position: absolute;
top: 0;
z-index: 1000;
}
li:hover table {
display: block;
}
</style>
<body>
<ul>
<li>Fish
<table>
<tbody>
<tr><td>Cod</td></tr>
<tr><td>Salmon</td></tr>
</tbody>
</table>
</li>
<li>Fruits
<table>
<tbody>
<tr><td>Apple</td></tr>
<tr><td>Orange</td></tr>
</tbody>
</table>
</li>
<li>Grains
<table>
<tbody>
<tr><td>Rice</td></tr>
<tr><td>Wheat</td></tr>
</tbody>
</table>
</li>
<li>Meat
<table>
<tbody>
<tr><td>Beef</td></tr>
<tr><td>Chicken</td></tr>
</tbody>
</table>
</li>
<li>Vegetables
<table>
<tbody>
<tr><td>Carrot</td></tr>
<tr><td>Tomato</td></tr>
</tbody>
</table>
</li>
</ul>
</body>
</html>
IE Version: 10.0.9200.16521
Thanks for any help!
Edit: have added jsfiddle of example above here for people to try out: http://jsfiddle.net/3Babs/
*Edit 2: Added screenshot images from different browsers to compare:
Chrome (25.0.1364.172)
Firefox (19.0.2)
IE10 (10.0.9200.16521)
Opera (11.64)
This should work as expected: http://jsfiddle.net/ESd8y/1/
Remove the background colour from the table and add it to the tr instead. You will see gaps due to borders not collapsing in tables, so you need to collapse them:
li table {
border-collapse: collapse;
/* other styles here, except background-color */
}
li table tr {
background-color: #cccccc;
}
Once you make these changes it should work as expected.
I have some Sharepoint-produced HTML markup which is not the best you've seen, and cannot interfere in the markup, but have to style it via CSS.
The markup goes more or less like this:
<div id="searchbox">
<table>
<tr>
<td>
<table class="mstable">
<tr>
<td><input></input></td>
<td><select><option></option><option></option></select></td>
</tr>
</table>
</table>
<div id="fontsize">
<a href=""/>
<a href=""/>
</div>
</div>
Here is the CSS applied
#searchbox {
float: right;
margin-right: 15px;
margin-top: 10px;
text-align: right;
width: 40%;
}
#fontsize {
float: right;
width: 46px;
}
.mstable {
border-collapse: collapse;
margin-left: 2px;
margin-top: 2px;
width: 100%;
color: #000000;
font-family: Verdana;
font-size: 0.7em;
font-style: normal;
font-weight: normal;
}
What I am trying to do is put the fontsize div, next to the table. Currently, after the table there's a break and the fontsize id goes under it.
I set display:inline to all the table descendants of searchbox and the fontsize div, and in Firefox I get the desired result, but in IE (all versions 8 and below) it ignores it..
I know my solution would be to remove these tables and make it div-only but I don't know if I have this possibility..
Edit: I resolved the problem by setting float:left to both table and fontsize div AND setting a width in pixels to the table itself such as to limit it from expanding to the whole searchbox div.
This should do it for you :
http://jsfiddle.net/nULYR/8/
works in ie7+
EDIT
<table>
<tr> // here is
<td> // the problem
<table class="mstable">
<tr>
<td><input></input></td>
<td><select><option></option><option></option></select></td>
</tr>
</table>
</table>
With : http://jsfiddle.net/nULYR/13/
Without : http://jsfiddle.net/nULYR/12/
try to float left the table that comes directly after the 'searchbox' div:
<div id="searchbox">
<table style="float: left;">