Webdesign – die neusten Beiträge

Verwandte Themen
verreisterNutzer
20.11.2021, 19:11

Navigation ausklappbar <html/CSS>?

Hallo,

ich möchte eine Navigation bauen, die wenn man hovert noch Unterpunkte anzeigt. Ich habe es so gemacht und komme leider nicht mehr weiter, wenn sich die Navigation ausklappt soll es ganz oben angezeigt werden. Ich habe einen Button unter der Navigation und als ich es selbst versucht hatte, zeigte es mir das Ausgeklappte hinter dem Button.

HTML:

    <header>
        <nav>
            <ul>
                <li><a href="">Hallo</a>
                    <ul>
                        <li><a href="">Hallo</a></li>
                    </ul>
                </li>
                <li><a href="">Hallo</a>
                    <ul>
                        <li><a href="">Hallo</a></li>
                        <li><a href="">Hallo</a></li>
                    </ul>
                </li>
                <li><a href="">Hallo</a></li>
                <li><a href="">Hallo</a></li>
                <li><a href="">Hallo</a></li>
                <li><a href="">Hallo</a></li>
            </ul>
        </nav>


    </header>

CSS:

header ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: darkblue;
  height: 1.5cm;
  
}


header li {
  float: left;
}


header li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}


header li a:hover:not(.active) {
  background-color: rgb(195, 251, 255);
  color: black;
  height: 29px;
  font-weight: bolder;
}


header .active {
  background-color: #00e1ff;
  height: 21px;
  height: 29px;
  font-weight: bolder;
  color: darkblue;
}

Ich hoffe, dass mir irgendjemand helfen

Danke im voraus

Ps.: Das "Hallo" ist ein Platzhalter.

HTML, Programmierer, programmieren, CSS, Programmiersprache, Webdesign, Visual Studio Code
1 Antwort
MrHibo
06.11.2021, 23:15
Mit Bildern

Einzelne Schriften in HTML Bearbeiten?

Hallo,

ich habe vor kurzem begonnen eine Website mit HTML zu programmieren, dazu nutze ich Visual Studio Code, aber ich mache das ganz noch nicht so lange, also kenne ich mich noch nicht so gut aus. Zurzeit versuche ich eine Tabelle mit verschiedenen Raritäten zu erstellen. Dazu soll z.B. "Rare" einen blauen Rahmen bekommen, so ähnlich wie in Bild 1 zusehen.

Ich habe schon versucht es zu schaffen, dennoch habe ich bisher nur hinbekommen um alles einen Rahmen zu kreieren.

Meine Frage ist nun, wie man das individuell anpassen kann. So brauche ich die Rahmen nur bei den Namen der Raritäten und diese sollen jeweils eine eigene Farbe haben (z.B. "Rare" = blau, "Epic" = Violett usw.). Außerdem soll der Rahmen genau passen. So ist es bei mir oben so, dass es für "Uncommon" passt, aber für "Epic" viel zu groß ist. Meine Skills in HTML reichen bisher nur die Rahmen für alle zu machen. Ich habe den Style so gemacht:

CSS:

table tr td
{
  font-size: 1.2em;
  background: #fff;
  color: black;
  border-radius: 20px;
  padding: 4px 10px;
}

Vermutlich nicht besonders gut, aber da hoffe ich auf eure Hilfe 😅 Falls es euch etwas hilft, schreib' ich hier noch ein Beispiel hin, wie ich die Tabelle gemacht habe (das Richtige ist natürlich länger)

HTML:

<table>
  <thead>
    <tr>
      <th>Eyes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Normal</td>
      <td>23.99%</td>
      <td>Common</td>
    </tr>
  </tbody>
  <tfoot>
  </tfoot>
</table>
Bild zum Beitrag
Computer, HTML, programmieren, CSS, Webdesign, Visual Studio Code
5 Antworten
Joni626262
15.07.2021, 22:13
Mit Bildern

Positionierung von Pfeilen in Flexboxen?

Hallo,

ich wollte bei meiner Website eine kleine Slideshow einbauen. Dazu habe ich erst einmal Pfeile erstellt. Diese wollte ich nun richtig positionieren. Ich hatte die Idee, eine Flexbox um die Bilder mit den Pfeilen zu erstellen und die Pfeile dann einfach mit align-items zu positionieren. Irgendetwas habe ich allerdings falsch gemacht. Vielleicht fällt euch ja mein Fehler auf. Bin für jeden Tipp dankbar.

html:

<div class="slide">
            <div id="footer2">
                <div id="bilder">
                    <div id="flexbox">
                        <div class="post">
                            <img src="wohnzimmer.png" alt="Wohnzimmer">
                            <div class="post-s">
                                <h2>Einbaumöbel</h2>
                            </div>
                        </div>
                        <div class="post1">
                            <img src="badezimmer.png" alt="Badezimmer">
                            <div class="post1-s">
                                <h2>Badmöbel</h2>
                            </div>
                        </div>
                        <div class="post2">    
                            <img src="einbauschränke.png" alt="Einbauschränke">
                            <div class="post2-s">
                                <h2>Einbauschränke</h2>
                            </div>
                        </div>
                    </div>
                    <div class="post3">
                        <img src="hochbett.png" alt="Hochbett">
                        <div class="post3-s">
                            <h2>Kinderhochbetten in Eichemassivholz</h2>
                        </div>
                    </div>
    
                    </div> 
                    
                </div>
                <a class="pfeil pfeil-links"><span>&#10094;</span></a>
                <a class="pfeil pfeil-rechts"><span>&#10095;</span></a>
            </div> 
        </div>

Css:

.slide{
    display: flex;
    border: solid black;
}
.pfeil {
    position: absolute;
    top: 0px;
    bottom: 0px;
    font-size: 50px;
    font-weight: bold;
    display: flex;
    align-items: center;
    
}
.pfeil-links {
    left: 0;
}
.pfeil-rechts {
    right: 0;
}

Bild zum Beitrag
Computer, HTML, programmieren, CSS, Programmiersprache, Webdesign
1 Antwort
ClaudiHundemom
09.07.2021, 20:25
Mit Umfrage

Weiterbildung Webdesign, Mediengestalter Umschulung oder Web Development Studium?

Hallo :)

Ich bin in der luxuriösen Situation, dass ich wahrscheinlich das Recht auf eine Umschulung habe.

Ich habe ein künstlerisches Studium vor über elf Jahren abgeschlossen und bin schon Technik/Grafik-affin, daher überlege ich mich ganz praxisnah technisch-kreativ ausbilden zu lassen. Möchte später gerne angestellt oder als Freelancer Design/Entwicklungsjobs - ggf. kleine Komplettpakete anbieten können, daher soll der Programmierteil in der Ausbildung genauso Stellenwert haben wie der Umgang mit der Adobe Palette.

Mir wurde gesagt, dass Menschen mit Programmierkenntnissen bessere Jobaussichten haben als "nur" geprüfte MediengestalterInnen, weswegen mir alternativ eine Weiterbildung zur Webdesignerin vorschwebt, da hier imho noch mehr Wert auf Programmierung, UX Design etc. gelegt wird als beim Mediengestalter digital und print - wenn das stimmt.

Da Webdesign kein geregelter Ausbildungsberuf ist habe ich aber Bedenken, dass der Abschluss auf dem Markt "nichts wert" ist und die Joblage ohne vorherige grundständige IT oder Mediengestalter Ausbildung super schlecht für mich aussieht. Den Web Developer Studiengang habe ich zufällig im Netz gefunden.

Beides - IHK Umschulung + Webdesign Weiterbildung - würde mir aber nicht bezahlt werden und nun muss ich mich entscheiden: Was ist sinnvoller? (siehe Umfrage)

Habt ihr Tipps, Erfahrungen?

Weiterbildung Webdesign mit Trägerzertifikat (1170 Lerneinheiten) 100%
Umschulung MediengestalterIn Digital u. Print - Spez.Digital/ IHK 0%
BA/BSc (Hons) Web Development (24-40 Monate) 0%
Anderes (bitte Vorschläge) 0%
Umschulung, Webdesign, Ausbildung und Studium, Beruf und Büro
2 Antworten
Abbasdas
04.11.2020, 23:36

CSS 3D-Würfel: Wie kann ich die Rückseite so wie die anderen Würfelseiten bewegen lassen?

Ich habe einen 3D-Würfel per CSS erstellt und würde ihm nun gerne eine 3D-Animation beim Hovern verleihen.

An sich komme ich auf das richtige Ergebnis, aber irgendwie verstehe ich die Rotation der Rückseite nicht und würde gerne wissen, wie ich sie so wie die anderen Würfelseiten bewegen lasse und nicht über diese komische Seitwärtsbewegung. Beziehungsweise ich möchte wissen, weswegen es bei rotateX überhaupt eine Seitwärtsbewegung durchführt.

Hier der Code:

HTML:

<div class="scene">
  <div class="cube">
    <div class="cube__face cube__face--front"></div>
    <div class="cube__face cube__face--back">back</div>
    <div class="cube__face cube__face--right">right</div>
    <div class="cube__face cube__face--left">left</div>
    <div class="cube__face cube__face--top">top</div>
    <div class="cube__face cube__face--bottom">bottom</div>
  </div>
</div>

CSS:

.scene {
  width: 200px;
  height: 200px;
  border: 1px solid #CCC;
  margin: 80px;
  perspective: 400px;
  transition-duration: 1s
}

.cube {
  transition-duration: 1s;
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(-100px);
}

.scene:hover .cube {
  transform: translateZ(-10px);
}

.cube__face {
  ;
  border: 3px solid black;
  position: absolute;
  width: 200px;
  height: 200px;
  color: white;
  font-size: 2.5em;
  transform: scale(2.5);
  text-align: center;
  font-weight: bold;
  line-height: 200px;
  transform: perspective(500px) translateZ(250px)
}

.cube__face--front {
  transition-duration: 1s;
  transform: rotateY(0deg) translateZ(100px);
  background: url(Gesichr.png) hsla(214, 100%, 46%, 0.7);
  opacity: 0.5;
  background-size: cover;
}

.cube__face--right {
  transition-duration: 1s;
  transform: rotateY(90deg) translateZ(100px);
  background: hsla(99, 100%, 36%, 0.7);
}

.cube__face--back {
  transition-duration: 1s;
  transform: rotateY(180deg) translateZ(100px);
  background: hsla(63, 99%, 59%,0.7)
}

.cube__face--left {
  transition-duration: 1s;
  transform: rotateY(-90deg) translateZ(100px);
  background: hsla(10, 100%, 50%, 0.7)
}

.cube__face--top {
  transition-duration: 1s;
  transform: rotateX(90deg) translateZ(100px);
  background: hsla(181, 100%, 67%,0.8)
}

.cube__face--bottom {
  transition-duration: 1s;
  transform: rotateX(-90deg) translateZ(100px);
  background: hsla(38, 100%, 52%,0.7)
}

.scene:hover .cube__face--front {
  transform: rotatex(-30deg) translateZ(100px);
}

.scene:hover .cube__face--right {
  transform: rotateY(90deg) translateZ(100px) rotatez(-30deg);
}

.scene:hover .cube__face--back  {
  transform: rotateY(0deg) rotateX(150deg) translateZ(100px) rotate(-180deg);
}

.scene:hover .cube__face--left {
  transform: rotateY(-90deg) translateZ(100px) rotatez(30deg);
}

.scene:hover .cube__face--top  {
  transform: rotateX(60deg) translateZ(100px);
}

.scene:hover .cube__face--bottom {
  transform: rotateX(-120deg) translateZ(100px);
}
Programm, HTML, 3D, programmieren, CSS, Code, Webdesign
1 Antwort
AnonymousX63
19.08.2020, 14:48

Seltsamer Codierung?

Könnt ihr mir sagen was dieser Code heißen soll und könnt ihr ihn für mich lesen? Ich danke euch schon mal in voraus hier der Code.

1000) {
    r = r.substring(0, r.length - 1);
}
return r;
}());
}
var ftDomain = (window == top) ? "" : (function() {
    var d = document.referrer,
        h = (d) ? d.match("(?::q/q/)+([qw-]+(q.[qw-]+)+)(q/)?".replace(/q/g, decodeURIComponent("%" + "5C")))[1] : "";
    return (h && h != location.host) ? "&ft_ifb=1&ft_domain=" + encodeURIComponent(h) : "";
}());
var ftV_4678289 = {
        pID: "4678289",
        width: "300",
        height: "600",
        params: {
            ftx: window.ftX,
            fty: window.ftY,
            ftadz: window.ftZ,
            ftscw: window.ftContent,
            ft_custom: window.ftCustom,
            ft_id: window.ftID || "",
            ft_idEnabled: window.ftIDEnabled || "",
            ftOBA: window.ftOBA,
            ft_domain: ((ftDomain || "")
                .match(RegExp("&ft_domain=([^&$]+)", "i")) || ["", ""])[1],
            ft_ifb: ((ftDomain || "")
                .match(RegExp("&ft_ifb=([^&$]+)", "i")) || ["", ""])[1],
            ft_agentEnv: window.mraid || window.ormma ? "1" : "0",
            ft_referrer: encodeURIComponent(window.ft_referrer),
            cachebuster: window.ftRandom
        },
        winVars: {
            ftClick_4678289: window.ftClick_4678289,
            ftExpTrack_4678289: window.ftExpTrack_4678289,
            ft300x600_OOBclickTrack: window.ft300x600_OOBclickTrack
        },
        DTimeout: 1E3,
        GTimeout: 1E3
    },
    ◇ftPProc = function(d) {
        var c = this;
        d = JSON.parse(JSON.stringify(d));
        var☆ f = [],
            l = function(a, b) {
                b = "undefined" === typeof b || isNaN(b) ? 1 : parseInt(b, 10);
                a = a || "";
                for (var e = 0 <= b ? b : 0; e--;) a = encodeURIComponent(a);
                return

LÖSE DEN CODE X a
}, h = function(a) {
        a = a.constructor == Array ? a : [];
        for (var b = 0; b

Dieser Code heißt anscheinend Code X oder was auch immer. Danke schon mal in voraus.

AnonymousX63

PC, Internet, IT, programmieren, JavaScript, Codierung, Webdesign
1 Antwort
KnowHow1001
15.05.2020, 14:45
Mit Bildern
Mit Links

Basic HTML Kästchen positionieren?

Hey.

Also ich weiß, dass es bei HTML divs gibt die sozusagen Blöcke sind die man mit Eigenschaften versehen kann via CSS.

nun wollte ich ein einfaches web layout gestalten aber scheitere daran, dass ich divisions einmal rechtsbündig und einmal linksbündig zentriere mit nem abstand dazwischen

wie ihr sehen könnt habe ich es dann zusammen gepfuscht bekommen sodass die abstände halbwegs passen.

gibt es da einen besseren zugang ? Bitte nur Tipps will selbst auf die Lösung kommen :)

bin auch schon am Überlegen den Code komplett neu zu schreiben :)

habe euch ein bild vom layout gemacht. dachte eigentlich ich mache für jedes kästchen eine eigene div umgeben von einer master div welche die komplette breite bestimmen soll.

und darin dann eben die einzelnen divs entweder zentrieren oder rechts / links

nur weil ich eben 2 kästchen in einer reihe habe dachte ich daran es mit einem table zu lösen und in der tr dann eben 2x TD damit die divs nebeneinander sein können

nicht geklappt. hab eigentlich schon so ziemlich alles probiert. divs hinzufügen, entfernen und über css habe ich versucht einzelne elemente zu manipulieren etc.

haut leider nicht hin.

Was meint ihr zu den bilder crop und größen veränderung. ich weiß man könnte es mit photoshop auf die entsprechende größé trimmen aber ich wollte es mit html/css schaffen :)

habe auch versucht den code Schön zu machen als "Lesbar", was hält ihr davon?

HTML

http://pastie.org/p/2vfSJIRfb5QSHBNQciATWO

Header CSS

http://pastie.org/p/6wEHhhZQWKYwwfC2RSxof3

Mainstyle CSS

http://pastie.org/p/5gFxKIEBpI0f5dlimjen9X

Footer CSS

http://pastie.org/p/5oUkLA58gIJ8cgWjw6gGTq

lg

Bild zum Beitrag
Computer, HTML, programmieren, CSS, Webdesign
3 Antworten

Meistgelesene Beiträge zum Thema Webdesign
Mehr meistgelesene Fragen zu Webdesign