Hello Folks,
since a short time i have been exploring the TW world and for the moment i
was trying to use a grid in TW.
I wrote one which is correctly displayed in my browser but not in TW.
The font(style) / colors / sizes of the boxes is correct but the
arrangement of the boxes is not. Every box is displayed with a width of the
tiddler-width. One under the next.
I changed the fixed total width of my grid from 500 to 50px because i
thought maybe the problem is caused due box-width > tiddler-width but it
had no effect.
I hope you can help and tell me where my mistake is.
Thank you in advance.
I have a Tiddler *myStyle *taged with *$:/tags/Styleshee*t including the
following code:
<code>
.grid {
background-color: beige;
border-radius: 5px;
padding: 2px;
margin: auto;
width: 500px;
display: grid;
grid-template-columns: 10% 30% 1fr;
grid-gap: 5px 10px ;
}
.box {
background-color: lightgrey;
color: black;
border-radius: 5px;
border: 2px black solid;
}
.Nummer {
grid-area: 1/1/2/2;
padding: 7px;
font-size: 140%;
font-weight: bold;
text-align: center;
}
.Hersteller {
grid-area: 1/2/2/3;
padding: 12px;
font-size: 120%;
}
.Produktbezeichnung {
grid-area: 1/3/2/4;
padding: 12px;
font-size: 120%;
}
.Besteller_links {
grid-area: 2/2/auto/3;
padding: 5px;
font-size: 100%;
}
.Besteller_rechts {
grid-area: 2/3/auto/4;
padding: 5px;
font-size: 100%;
}
.Link {
grid-area: 3/2/4/4;
padding: 5px;
font-size: 80%;
}
.Link:hover {
font-size: 100%;
font-weight: bold;
color: darkred;
border: 3px darkred solid;
}
</code>
Besides i hava a tiddler holding the following code:
<code>
<div class="grid">
<div class="box Nummer">055</div>
<div class="box Hersteller">Producer</div>
<div class="box Produktbezeichnung">Product</div>
<div class="box Besteller_links">Bestellnummer/n:</div>
<div class="box Besteller_rechts">with: 200300600<br>without:
200300500</div>
<div class="box Link">[[LINK.pdf]]</div>
</div>
</code>
--
You received this message because you are subscribed to the Google Groups
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/e35c1059-e85f-4062-8a5e-6d7db3355325%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
