CSS – die besten Beiträge

Hey!

Ich arbeite seit neustem in der "Min Ramen Bar" in Mannheim und mir ist aufgefallen, dass die Restaurantkette keine Website hat. Da ich schon relativ IT-Begabt bin, dachte ich mir, dass ich für meine Chefin eine Website bauen könnte. Die Website würde eine Startseite, Standortübersicht, Speisekarte, Kontaktinformationen etc. beinhalten. Da dies sehr viel Aufwand beinhaltet, würde ich die Website selbstverständlich nur gegen Bezahlung entwickeln. Für wie viel Geld wäre es vernünftig das zu machen? Zudem müsste ich wahrscheinlich auch die Verantwortung über das Hosting übernehmen. Sollte ich da auch etwas Geld monatlich anfragen, oder wäre das zu viel des Guten?

Die Website wäre am Ende höchstwahrscheinlich auf einen etwas höherem Niveau als diese Website, welche ich für die Schülerfirma meiner Schule entwickelt habe: http://boells-renote.onlinewebshop.net/

LG IdzA

Hey, der hover effect greift nicht in css

main.projects {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    background-color: #333;
    padding: 20px;
}

main.projects .project {
    background-color: #555;
    color: white;
    padding: 15px;
    border-radius: 8px;
    flex: 1 1 250px;
    max-width: 300px;
    box-sizing: border-box;
    transition: flex-basis 2s;
    flex-basis: 300px; /* Startbreite */
}

main.projects .project:hover {
    flex-basis: 400px; /* Breite bei Hover */
}

main.projects .project h1 {
    font-size: 25px;
}

main.projects .project p {
    font-size: 20px;

} 

Hallo,

Ich bin absoluter Anfänger mit HTML, CSS und JS. Ich möchte gerade eine Web App erstellen und wollte dafür unten eine Navigationsleiste einfügen. Das hat soweit auch alles geklappt. Allerdings kann ich einfach nicht herausfinden wie sich die Navigationsleiste an die Bildschirmgröße anpasst. In allen erklär videos und Artikeln wird immer margin-right: Xpx angegeben. Damit ist es ja aber nicht flexibel anpassbar. Was jemand wie ich das hinbekomme, dass es sich anpasst?

Ich nutze PyCharm, Webstorm & VS Code

Html. am besten oder?

Was habt ihr gelernt und wie und gibt es gute Tutorials oder so?

Ich habe ein Sticky-Element welches im Body liegt (die "navigation"). Allerdings scrollt die nur bis zu einer bestimmten Stelle mit und das liegt daran, dass der Body nicht so hoch zu sein scheint wie die Inhalte der Website.

Im Inspector haben alle Inhalte eine Höhe und werden richtig dargestellt. Der Body hingegen geht nur bis einschließlich des 2. "Marquee". Der blau markierte contentcontainer drückt das Sticky Element dann wieder hoch.

Woran könnte das liegen? ChatGPT liefert mir keine Antwort, hab schon alles ausprobiert.

html, body {
    height: 100%;
    width: 100%;
    scroll-behavior: smooth;
}

.marquee {
    position: relative;
    float: left;
    width: 100vw;
    max-width: 100%;
    height: 125px;
    overflow: hidden;
    font-size: 100px;
    font-weight: 600;
    margin-bottom: 10vh;
}

.navigation{
    position: sticky;
  top: 10px;
  float: left;
  height: auto;
  width: 92%;
  margin: 0 4%;
    z-index: 4
}

.contentcontainer{
    width: 92%;
    float: left;
    position: relative;
    margin: 0 4%;
    overflow: auto;
}

Vielen Dank für eure Hilfe.

Ich habe festgestellt das bei CSS sich der z-index wie die Z Achse im Koordiniatensystem verhält.

Daher stell ich mir die Frage gibt es auch ein x- bzw. y-index?

Hey,

kann mir einer sagen wie ich ein Lauflicht um einen div Conatiner bekomme?

Also so wie im Beispiel?

Hab 4 KIs probiert, wird nichts und Google hilft auch kein bisschen.

Ich möchte für eine Website eine footer.html machen, die ich als iframe in die anderen Seiten einfügen kann.
Die Frage ist, ist es möglich den iframe unten zu positionieren ohne Position: fixed, oder Display: flex im body?

Hallo, ich muss eine html Seite für Informatik machen. Die Sache ist das plötzlich bei ersten der Text gut ist und plötzlich beim zweiten zu groß, obwohl ich meines erachtens nichts verändert habe. kann mir jemand weiter helfen?

Danke an alle die mir helfen können!

Hallo, das Bild im Anhang ist meine Html für Informatik. Kann mir jemand helfen und sagen wie ich es schaffe, dass der Text nur in der bitte ist? oder dass die seiten links und rechts leer sind?

ich hoffe, dass ihr versteht was ich meine.

danke and die, die mir weiter helfen können

(tipps damit sie hübscher wird sind gerne willkommen! (ich werde noch ein paar mehr bilder einbauen))

Hallo zusammen,

ich bin auf Arbeitssuche und arbeite an einer "Projektseite" für meine Bewerbung. Das ganz große Problem ist, dass ich nichts mit Webdesign am Hut habe. Ich hatte zwei Monate lang einen Basickurs belegt aber nun muss ich diese Seite machen, weil ich sie für Bewerbungsgespräche brauche. (Ich will da meine Blogbeiträge vorstellen, bin Texterin)

Das Problem: Ich arbeite nur mit HTML/CSS also kein Java oder so. Ich mache eine Blogseite (bzw. mehrere Seiten).

In der Mitte der Seite steht (mittig) ein div class= "blog-page-container" dort steht eben mein Blogbeitrag und ich möchte von diesem Beitrag aus, auf der rechten Seite, einen Kasten erstellen, wo dann kurze Zusatzinfos stehen. Dieser Kasten ist aktuell eine div class = "sidebar". Auf dem Foto kann man das sehr schön erkennen.

Meine Frage lautet also: Wie kann dieser Infokasten ganz leicht nach rechts geschoben werden und so mit Abstand zu meinem Blogbeitrag stehen, ohne dass der Kasten komplett rechts klebt? Der Infokasten soll eben rechts sein aber nicht ganz am Rand der Webseite sondern nur etwas weiter vom Blogbeitrag weg. Ich will eben diese Textblöcke hier auf dem Foto voneinander trennen aber so, dass der Textblogbeitrag in genau der gleichen Position bleibt. Der dünne Kasten rechts soll nur verschoben werden aber da ich gerade nicht weiterkomme, wollte ich fragen wie das geht.

Das steht gerade im HTML body, main:

<div class="blog-page-container">
 <div class="blog-content">
  <h1>Blogtitel: Mein erster Blogeintrag</h1>
  <p><strong>Lorem Ipsum Lorem</strong> Lorem ipsum dolor sit amet, copraesent...</p>
 </div>
 <div class="blog-right-gap"></div>
 <div class="blog-info-sidebar">
  <h2>Infos & Werbung</h2>
  <p>Hier steht was über dich, Werbung, Links, etc.</p>
 </div>
</div>

Und das im CSS:

/* Haupttext */
.blog-content {
 flex: 3;
 padding: 40px;
}
/* Abstand zum Recht */
.blog-right-gap {
 width: 20px;
}
/* Weiße Infospalte ganz rechts */
.blog-info-sidebar {
 flex: 1;
 background-color: white;
 padding: 20px;
 border-left: 1px solid #ffb6c1;
 margin-right: 20px;
}
/* Responsiv auf kleinen Bildschirmen */
@media (max-width: 1024px) {
 .blog-page-container {
  flex-direction: column;
  max-width: 95%;
  margin: 20px auto;
 }
 .blog-right-gap {
  display: none;
 }
 .blog-info-sidebar {
  margin-right: 0;
  border-left: none;
  border-top: 1px solid #ffb6c1;
 }
}
.blog-content p {
 font-size: 1.1rem;
 line-height: 1.7;
 margin-bottom: 1.2rem;
 max-width: 70ch;
}
.blog-content h2 {
 line-height: 1.3;
 margin-bottom: 1em;
}
/* Textblock exakt unter das Bild setzen */
.blog-content {
 padding-left: 0 !important;
 margin-left: 0 !important;
}

Wie gesagt, ich bin nicht vom Fach und habe auch mit KI gearbeitet also würde mich freuen, wenn jemand eine Lösung hat.

Danke im Voraus.

Hallo, ich muss eine html webseite für mein Informatik unterricht machen. Wir dürfen auch Chat gpt oder so fragen aber alles was ich mache klappt nicht. sogar mit AI. kann mir jemand bei einer skript helfen?

bitte bitte.

wie wir die webseite machen ist eigentlich egal, solange wir erklären können was da passiert. das würde ich dann selbst herausarbeiten

das erste bild ist mein entwurf und die anderen sind wie die webseite rausgekommen ist

Informatik ist gar nicht mein ding. ich will einfach das jahr schaffen und eine gute Note. nächstes jahr hab ich sowieso kein informatik mehr