I’m rewriting my website for my softwares (I’m a hobbits in Xojo and website).
In the exemple of CSS I find, I see sometimes the CSS type name which begin with a . or a # or nothing :
.TxtCentr {
text-align: center;
}
or
#TxtCentr {
text-align: center;
}
or
TxtCentr {
text-align: center;
}
Is there a difference, is it something like in Xojo Global and Local variable?
Does it, if we use many of them, the .MyCSStype will be apply instead of #MyCSStype ?
I didn’t find explanation on the web.
As part of a CSS selector, # means that what follows is the ID of an element on the page to which you want to apply the CSS properties in the block. IDs on the page should be unique per element. Let’s say that I have this HTML button on the page:
<button id="buttonStart">Start</button>
I can use the #buttonStart selector to identify only that element as the target of this CSS:
I thought I couldn’t make menu but I found some examples on the web and I reach to make a MenuBar.
Actually I put it only on one page : Soft-Toroco-Miscellaneous
Here is the CSS page.
My MenuBar CSS code :
/* ### Début CSS MenuBar ### */
.TteLargeur { /* https://fr.w3docs.com/snippets/css/comment-creer-un-menu-de-navigation-deroulant-avec-css.html */
width: 100%; /* Pour le symbole Dropdown triangle il y a : ∇ ∨ ▼ ▾ ▿ */
height: 33px;
margin: 0;
z-index: 99;
position: relative;
background-color: #FFFFFF; /* Turquoise; #444444; a3a1a1; Couleur d'arrière plan de la MenuBar */
}
.navbar {
/* height: 36px; */
padding: 0 80px 0 80px; /* Haut Droite Bas Gauch - Ecart extérieur de la MenuBar */
margin: 0; /* Marge du haut de la MenuBar */
position: absolute;
}
.navbar li { /* MenuBar et Menus (vertical qui s'affiche au survol du MenuBar) */
height: 14px; /* auto; */
width: 132px; /* 135.8px; */
float: left;
text-align: center;
list-style: none; /* Supprime la puce des éléments */
font: normal bold 13px/1em Arial, Verdana, Helvetica;
/* Avant : border-left-right: 1px solid red; */
border-style: none none none none ; /* Haut Droite Bas Gauche (dotted dashed solid double) */
border-width: 1px;/* Trait vertical à droite et à gauche des menus */
border-color: #D2D2D2; /* Même couleur pour Body DivDlColABCD navbar */
padding: 10px 0 10px 0; /* Haut Droite Bas Gauche - Ecart du texte des MenuBar et Menus */
margin: 0;
color: #000000; /* green; Couleur du texte */
display: block;
background-color: #F2F2F2; /* Salmon #444444; Couleur de la MenuBar */
}
.navbar a { /* MenuBar avec lien */
/* padding: 12px 0;
/* border-left: 10px solid red; ccc9c9; */
text-decoration: none;
color: #000000; /* green; Couleur du texte */
display: block;
}
.navbar li:hover {
background-color: #E2E2E2; /* ; #444444; Couleur lors du survol */
} /* Avant, ci-dessus et ci-dessous étaient dans le même block : .navbar li:hover, a:hover mais ça faisait merder les survols d'image partout */
.navbar a:hover {
background-color: #E2E2E2; /* ; #444444; Couleur lors du survol */
}
.navbar li ul {
display: none;
height: auto;
margin: 0;
padding: 12px 0; /* Ecart entre la MenuBar et les Menus */
}
.navbar li:hover ul {
display: block;
}
.navbar li ul li {
background-color: #F2F2F2; /* #444444; Couleur des Menus */
}
.navbar li ul li a {
/* Avant : border-left: 1px solid blue;
border-right: 1px solid blue;
border-top: 1px solid red;
border-bottom: 1px solid blue; */
border-style: none none none none ; /* Haut Droite Bas Gauche (dotted dashed solid double) */
border-width: 1px; /* Trait vertical à droite et à gauche des menus */
border-color: #E2E2E2; /* Même couleur pour Body DivDlColABCD navbar */
}
.navbar li ul li a:hover {
background-color: #E2E2E2; /* yellow; Couleur lors du survol */
}
/* ### Fin CSS MenuBar ### */
It does not work on iPhone, if someone could tell me if I can add an instruction somewhere, I would be very happy. I don’t develop iOS App then it’s not a big problem, but the menu should work on SmartPhone anyway.
If you open this page and reduce the width of the window less than 1000, all the images will be under the text (1 column) instead of be on the right (2 columns).
I first coded in my CSS :
I thought it will be ok on my smartphone but no. Then I search on the web and I have to enter :
@media only screen and (max-width: 1000px) {
.DivPgColABC {
/* grid-template-areas: "a" "d"; */
grid-template-columns: 1fr;
}
}
But I don’t understand why it works. As far as I understood, "screen" means that it is a computer without keyboard (smartphone or tablet), then it shouldn’t work if I reduce the window on my Mac as there is a keyboard???
I would have coded :
@media only screen OR (max-width: 1000px) {
.DivPgColABC {
/* grid-template-areas: "a" "d"; */
grid-template-columns: 1fr;
}
}
If (it is a smartphone or a tablet) OR (the width < 1000) Then 1 column.
Screen means that it’s displayed on a digital display, not for print or speech. You can review the table from the @media Rule page of W3Schools:
Media Types
Value Description
all Default. Used for all media type devices
print Used for printers
screen Used for computer screens, tablets, smart-phones etc.
speech Used for screenreaders that "reads" the page out loud
I believe it works after adding screen because your media rule was invalid as the media type must be supplied with the media dimensions. Someone feel free to correct me if I’m wrong.