Warum wird mein verschachtelter
css von den äußeren
css überschrieben?CSS

CSS verstehen
Anonymous
 Warum wird mein verschachtelter
css von den äußeren
css überschrieben?

Post by Anonymous »

Ich habe eine Reihe von quadratischen Fliesen (Event-Tile) Line-DUP-DUP den unteren Bildschirmrand. Diese Fliesen sind in einem Container (.ContentContainerBottom) verschachtelt, der über den unteren Bildschirmrand läuft. Jede Kachel enthält wichtige Informationen, Start- und Endzeit, Ereignisname und Togetechy Together Zeit (Ereigniskongregation) mit einer Follow-up-Zeit (nächste Kongregation). < /P>
Ich versuche zu; Dies funktioniert einwandfrei. Dies funktioniert einwandfrei. /> < /li>
nächste Kongregation horizontal zentriert und unter die Ereigniskongregation mit eigener Schriftgröße und Format platziert werden. die Fliese. Ich hoffe, das ist sinnvoll. Beachten Sie nicht, dass das gesamte Ereignis eine Follow-up-Zeit angezeigt wird (nächste Kongregation). Daher gibt es eine nächste Kongregation, die die Informationen in Punkt 3 und Nr. 4 vorantreibt, sodass eine vertikale Misserment-Accross die alle Ereigniskabinen erzeugt wird. Parameter. Ich dachte, die später im CSS offengelegten Parameter haben einen Präzedenzfall - ich muss hier falsch liegen? Beheben Sie die Problemanweisungen? Dieses Layout ist Teil eines breiteren Bildschirmlayouts (vertikales Panel/Container), das gut zu funktionieren scheint. Der einzige Unterschied, den ich zwischen der Vertikalen und dem Boden habe, ist das folgende Setup. gefolgt von verschachtelten s
Unteres Feld

Code: Select all

< /code> gefolgt von verschachtelten  < /code> s < /p>
Grundsätzlich zeigen beide Panels dieselben Informationen mit der vertikalen Anzeige einiger additonaler Informationen.  PrettyPrint-Override ">/* ==========================
✅ Base Layout Styles
========================== */
html,
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
overflow: hidden;
height: 100vh;
width: 100vw;
background-color: black;
}

/* ==========================
✅ General Tile Styles
========================== */
.event-tile {
flex: 1;
text-align: center;
/* Center text horizontally */
display: block;
/* Reset to block if flex was causing issues */
padding: 1px;
margin: 1px;
border-radius: 5px;
font-size: 2rem;
color: white;
flex-shrink: 0;
overflow: hidden;
/* white-space: nowrap;  Wrap the event name tp new line if req'd.*/
text-overflow: ellipsis;
position: relative;
z-index: 1;
/* Lower z-index than the date-time element */
}

/* ==========================
✅ Bottom Container - Single Row Layout
========================== */
.contentContainerBottom {
display: flex;
position: relative;
/* Ensure child elements can be positioned absolutely */
flex-wrap: nowrap;
justify-content: space-between;
align-items: stretch;
/* Ensure all tiles are same height */
height: 15vh;
width: 100vw;
background-color: #333;
padding: 5px;
box-sizing: border-box;
}

#contentContainerBottom .event-tile {
width: auto;
max-width: 100%;
font-size: calc(1rem + 0.3vw);
/* Adjust font size dynamically */
overflow-wrap: break-word;
/* Prevent overflow */
}

#contentContainerBottom .event-header {
display: flex;
position: relative;
width: 100%;
flex-direction: column;
/* Align children vertically */
justify-content: space-around;
/* Distribute children evenly */
align-items: center;
/* Center children horizontally */
height: 100%;
/* Ensure it takes the full height of the parent */
}

#contentContainerBottom .schedule .event-name {
font-size: 0.7em;
padding: 1px;
font-weight: bold;
background-color: green;
}

#contentContainerBottom .event-congregation {
color: #FFD700;
display: flex;
justify-content: center;
/* Center horizontally */
align-items: center;
/* Center vertically */
font-size: 2rem;
font-weight: bold;
margin-top: 5px;
text-align: center;
/* Fallback for older browsers */
}

#contentContainerBottom .next-congregation {
font-size: 1.5rem;
color: #FFD700;
}

/* ==========================
🎨 Tile Status Colors
========================== */
.tile-past {
background-color: #555;
}

.tile-current {
background-color: #4CAF50;
}

.tile-upcoming {
background-color: darkorange;
}

.tile-future {
background-color: #2196F3;
}

.tile-alert {
background-color: darkred;
}< /code>


7:36 PM
FREE PERIOD
7:51 PM

Sunset Workout
7:36 PM
7:38 PM



7:46 PM
9:20 PM

Evening Workout
7:46 PM
7:48 PM



9:20 PM
11:59 PM

Night Workout
9:20 PM



Angehängt ist ein Screenshot meines bisher>

Quick Reply

Change Text Case: 
   
  • Similar Topics
    Replies
    Views
    Last post
cron