Verwandte Themen

Frage
von Bubsch913
01.10.2023, 23:26
Hilfe beim html/css code?

Habe folgendes Problem, ich möchte die Website so umändern das sie für jedes gerät abrufbar ist bzw. verschiedene Display Größen.

Das ganze soll mit Flexboxen gemacht werden aber bei mir will das nicht so, unten ist mein backup code.

html:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <title>Fledermäuse</title>
    <link rel="stylesheet" href="formatieren.css">
  </head>
  <body>
    <header>
      <table>
        <tr>
          <td>
            <img src="bilder/Fledermaus_Logo.jpg" height="100" width="200" alt="Dieses Bild ist Nicht Verfügbar">
          </td>
          <td>
            <h1>Bat out of Hell</h1>
          </td>
        </tr>
      </table>
    </header>
    <nav>
        <p><a href="index.html" style="color: #b4b4b4">Start</a></p>
        <p><a href="verbreitung.html" style="color: #b4b4b4">Verbreitung</a></p>
        <p><a href="merkmale.html" style="color: #b4b4b4">Merkmale</a></p>


    </nav>
    <article>
      <h2><a href="https://de.wikipedia.org/wiki/Flederm%C3%A4use" style="color: #b4b4b4">Fledermäuse</a></h2>
      <p>
        Die <span class="fett">Fledermäuse</span> (Microchiroptera) sind eine
        <span class="magenta">Säugetiergruppe</span>, die zusammen mit den <span class="magenta">Flughunden</span> (Megachiroptera)
        die Ordnung der <span class="magenta">Fledertiere</span> (Chiroptera)
        bilden. Zu dieser Ordnung gehören die einzigen Säugetiere
        und neben den <span class="magenta">Vögeln</span> die einzigen <span class="magenta">Wirbeltiere</span>,
        die aktiv fliegen können. Weltweit gibt es rund 900 Fledermausarten.
      </p>
        Der Name bedeutet eigentlich „Flattermaus“
        (ahd. <span class="schräg">fledarmūs</span>, zu ahd. <span class="schräg">fledarōn</span> „flattern“)
    </article>
    <aside>
      <img src="bilder/Fledermaus_Skelett_Seite.jpg" width="200" alt="Dieses Bild ist Nicht Verfügbar">
    </aside>
    <footer>
      Der Inhalt dieser Webseite stammt von Wikipedia und ist vom Stand: 16. Dezember 2017, 7:25 Uhr.
    </footer>
  </body>
</html>

css:



header
{
  position: absolute		;
  top:      0px 			;
  left: 	0px				;
  width:    1200px			;
  height:   100px	 	   	;
  background-color: #3c3c3c	;
  font-family: Helvetica	;
  color: white 				;
}


nav
{
  position: absolute		;
  top: 	    100px			;
  left: 	0px		     	;
  width: 	200px			;
  height: 	550px		    ;
  background-color: #3c3c3c	;
  text-align: center 		;
  font-size: 25px			;
  font-family: Comic Sans MS ;
  color: white 				;
}


article
{
  position: absolute		;
  top: 		100px			;
  left: 	200px			;
  background-color: #616161	;
  overflow-y: scroll		;
  font-family: Arial		;
  color: white  			;
  font-size: 20px 			;
}


aside
{
  position: absolute		;
  top: 	    100px    		;
  left: 	1000px			;
  width: 	200px			;
  height: 	550px  			;
  background-color: #3c3c3c	;
}


footer
{
  position: absolute		;
  top: 		650px			;
  left: 	0px				;
  width: 	1200px			;
  height:   25px 			;
  background-color: black	;
  color: white 				;
}


.fett
{
	font-weight: bold;
}


.magenta
{
	text-decoration: underline;
	color: magenta;
}


.schräg
{
	font-style: oblique;
}
HTML, CSS, Programmiersprache
1 Antwort
Frage
von Gerunimuz
24.09.2023, 14:55
html ,medien bzw fotoslider?
<div class="slider">
<div class="slide">
<img src="bilder (1).jpg" alt="Bild 1">
</div>
<div class="slide">
<img src="bilder (2).jpg" alt="Bild 2">
</div>
<div class="slide">
<img src="bilder (3).jpg" alt="Bild 3">
</div>
   
</div>
<button class="prev" id="b1">←</button>
<button class="next" id="b2">→</button>

HIER IST DER CSS TEIL

.slider {
  display: flex;
  overflow: hidden;
  width: 100%;
  transition: transform 0.3s ease;
}
.slide {
  flex: 0 0 100%;
}
img {
  max-width: 30vw;
  height: auto;
}
#b1 {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
   
  top: 100%;
  transform: translateY(-50%);
  z-index: 1;
}
#b2 {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
   
  top: 100%;
  transform: translateY(-50%);
  z-index: 1;
}
.prev {
  left: 10px;
}
.next {
  right: 10px;
}

HIER IST DER JAVA TEIL

const slider = document.querySelector('.slider');
const prevButton = document.querySelector('.prev');
const nextButton = document.querySelector('.next');
let currentIndex = 0;
prevButton.addEventListener('click', () => {
  currentIndex = Math.max(currentIndex - 1, 0);
  updateSlider();
});
nextButton.addEventListener('click', () => {
  currentIndex = Math.min(currentIndex + 1, slider.children.length - 1);
  updateSlider();
});
function updateSlider() {
  const translateX = -currentIndex * 100 + '%';
  slider.style.transform = `translateX(${translateX})`;
}
updateSlider();

also... HALLO erstmal.. ich hab das problem dass wenn ich das nächte Bild nach rechts anpeilen will, einfach keins erscheint. das erste bild swiped nach links und ich kann es auch wieder holen. Trotzdem laden die anderen nicht :/
Bitte um seelische und physikalische unterstützung :Þ

CSS, JavaScript
1 Antwort
Frage
von ffwduerr112
21.09.2023, 19:57
WIe kann man in diesen CSS Code den Text auf einer Website mittig einstellen?

Hallo Leute,
ich hab ein problem und wollte mal nachfragen.

Ich habe diesen CSS code für meine Website genutzt.(Es soll zum Schluss eine art taskleiste mit Willkommen. über uns usw. werden )
Nur meine frage ist, wie kann man in diesen CSS Code einstellen. Dass dieser Mittig sitzt von der Website? Kann mir jemand evtl. helfn den code umzuschreiben?
das wäre der Code::

/* ----- CSS Nav Menu Styling ----- */

#cssnav {

margin: 10px 8px 4px 12px;

padding: 0px 0px 0px 0px;

width: 1050px; /* Set your width to fit your blog */

p { font-size: 18px } $(tabs.font); /* Template Designer - Change Font Type, Size, Etc */

color: $(tabs.text.color); /* Template Designer - Change Font Size */

text-align: justify;

}

#cssnav ul {

background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;

_background-image: none; /* Template Designer - Change Menu Background */

height: 20px; /* Change Height of Menu */

list-style: none;

margin: 0px;

padding: 0px;

}

#cssnav li {

float: left;

padding: 0px;

}

#cssnav li a {

background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;

_background-image: none; /* Template Designer - Change Menu Background */

display: block;

margin: 0px;

font: $(tabs.font); /* Template Designer - Change Font Type, Size, Etc */

text-decoration: none;

}

#cssnav > ul > li > a {

color: $(tabs.text.color); /* Template Designer - Change Font Color */

}

#cssnav ul ul a {

color: $(tabs.text.color); /* Template Designer - Change Color */

}

#cssnav li > a:hover, #cssnav ul li:hover {

color: $(tabs.selected.text.color); /* Template Designer - Change Font Color on Hover */

background-color: $(tabs.selected.background.color); /* Template Designer - Change Font Background on Hover */

text-decoration: none;

}

#cssnav li ul {

background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;

_background-image: none; /* Template Designer - Change Menu Background */

display: none;

height: auto;

padding: 0px;

margin: 0px;

position: absolute;

width: 200px; /* Change Width Of DropDown Menu */

z-index:9999;

}

#cssnav li:hover ul {

display: block;

}

#cssnav li li {

background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;

_background-image: none; /* Template Designer - Change Background */

display: block;

float: none;

margin: 0px;

padding: 0px;

width: 200px; /* Change Width Of DropDown Menu */

}

#cssnav li:hover li a {

background: $(tabs.selected.background.color); /* Template Designer - Change Background of Link on Hover */

}

#cssnav li ul a {

display: block;

height: auto;

margin: 0px;

padding: 10px;

text-align: left;

}

#cssnav li ul a:hover, #cssnav li ul li:hover > a {

color: $(tabs.selected.text.color); /* Template Designer - Change Text Color on Hover */

background-color: $(tabs.selected.background.color); /* Template Designer - Change Background on Hover */

border: 0px;

text-decoration: none;

}

CSS
1 Antwort
Frage
von wbg707606
21.09.2023, 14:23
Clickfunnel: Wieso funktioniert nur jedes zweite JavaScript-Element?

Ich habe in meinem ClickFunnel vier JavaScript-Elemente. Sie sind nicht direkt hintereinander, aber genau gleich gecodet.

Es handelt sich dabei um Dropdown-Elemente.

Mein Problem ist, dass das erste und dritte Element problemlos funktioniert, aber das zweite und vierte nicht. Da kommt kein Dropdown, wenn ich darauf klicke, obwohl alle Elemente gleich gecodet sind.

Woran könnte das liegen? Stehen die einander vielleicht im Weg? Ich kann es auch leider nicht anders machen, da zwischen den Elementen Bilder sind, die dazu gehören.

Hier mein Code (HTML / JS) von einem Element:

<div class="all4">
  <div class="obj">
    <button class="Produkte" style="margin-right: 1vw;">Kompressor</button>
    <div class="panel">
      <p>
        Tankinhalt: 2 × 50 Liter</br>
        Energiequelle: Honda 4Takt GX200 bleifrei</br>
        Antrieb: Riemen</br>
        Atom. Standgas: Ja</br>
        Start: Zugseil</br>
        Abgabeleistung: 490 Liter Minute bei 12 bar</br>
        Abgabeleistung: 550 Liter Minute bei 6 bar</br>
        Max. Druck: 12 bar</br>
        Abmessungen: 95cm × 51cm × 85cm (ohne Transportgriffe)</br>
        Gewicht: ca. 75 Kg</br>
        Lärm: ca. 95 Db</br>
        Garantie: 1 Jahr</br>
      </p>
    </div>
  </div>
  <script>
    var acc = document.getElementsByClassName("Produkte");
    var i;

    for (i = 0; i < acc.length; i++) {
      acc[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var panel = this.nextElementSibling;

        if (panel.style.display === "block") {
          panel.style.display = "none";
        }
        else {
          panel.style.display = "block";
        }
      });
    }
  </script>
HTML, CSS, JavaScript
3 Antworten
Frage
von Gojosatoru383
17.08.2023, 21:53
HTML projekt wie findet ihr die vorarbeit?

html:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<Header>
</Header>
<div class="input">
<main>
<form action="" method="post">
<h2>Anmeldung</h2>
<input type="email" name="Email" placeholder="Email hier eingeben" required="@" id=""> <br>
<input type="text" name="Benutzer" placeholder="Benutzer hier eingeben" required="A-z" > <br>
<input type="password" name="passwort" placeholder="password hier eingeben " id=""> <br>
<input type="submit" value="Anmelden">
<input type="reset" value="reset">
</form>
</div>
<hr>
<a href="#">Impressum</a>
<a href="#">kontakt</a>
<a href="#">Über uns</a>
</main>
<footer>
</footer>
</body>
</html>

css

body {
font-family: Arial, Helvetica, sans-serif;
color: white;
}
body{
background-color: black;
}
.input {
display: flex;
margin: 700px;
margin-top: 300px;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: 1px 1px 3px 3px white;
border-radius: 30px;
height: 300px;
width: 300px;
}
a{
font-family: Arial, Helvetica, sans-serif;
display: flex;
justify-content: center;
align-items: center;
}
a:hover{
color: green;
text-decoration-line: none;
}
input{
padding: 5px;
border-radius: 10px;
}
input[type="submit"] {
font-size: 1.0em; padding: 1px 6px;
font-family: Roboto, sans-serif;
font-weight: 100;
color: teal;
border: 1px solid silver;
background-image: linear-gradient(to top, gainsboro 0%, white 90%);
border-radius: 20px;
}
input[type="reset"] {
font-size: 1.0em; padding: 1px 6px;
font-family: Roboto, sans-serif;
font-weight: 100;
color: teal;
border: 1px solid silver;
background-image: linear-gradient(to top, gainsboro 0%, white 90%);
border-radius: 20px;
}

HTML projekt wie findet ihr die vorarbeit?
HTML, Webseite, CSS, HTML5, Programmiersprache, Webdesign, Webentwicklung
6 Antworten
Frage
von FritzboxCable
02.08.2023, 18:35
Google Search Console einzelne Unterseiten entfernen lassen?

ich habe eine Website die beispiel.de heisst aber google hat nicht nur beispiel.de indexiert sondern auch /impressum /datenschutz und /AuthorMax.
Einige unschöne Unterseiten die leider auch sehr weit hochrutschen und sogar unter der Hauptseite angezeigt werden.

Welches von den beiden muss ich auswählen und wie soll ich es eintragen ?

Muss Https:// dabei stehen und www ?
Möchte nicht ausversehen beispiel.de und alle dazugehörigen entfernen, nur 3-4 bestimmte.

Google Search Console einzelne Unterseiten entfernen lassen?
PC, Computer, Marketing, Software, Windows, Browser, Google, Hardware, HTML, IT, Webseite, programmieren, CSS, WordPress, JavaScript, Mozilla Firefox, Suchmaschine, Google Chrome, Bing, CMS, Edge, Informatik, PHP, Programmiersprache, SEO, Webdesign, Webentwicklung, Indexierung, Laravel, google search console
1 Antwort
Frage
von Navycisactor
23.07.2023, 11:17
It-Fachkräfte im Informatik Unterricht in Schulen?

Hallo,

 

Der klassische Weg um in Deutschland Lehrer zu werden ist über ein Lehramtsstudium oder mit zunächst Berufserfahrung sammeln im jeweiligen Fachbereich und dann auch mit einem Studium Berufsschullehrer werden.

 

 

Doch sind wir uns selbst mal gegenüber ehrlich welcher Fachinformatiker wird freiwillig, wenn er nicht auf den Kopfgefallen ist und 9+ Jahre Berufserfahrung hat auf das Jahresgehalt von jenseits über den 50.000,€ verzichten, um in einer unterbezahlten Lehrer Position anzufangen ?

 

 

Dieses Phänomen macht sich an den grund- und weiterbildenden Schulen [Grundschule, Realschule, Gymnasium,...] bemerkbar.

 

In den ersten Schuljahren gelten wichtigere Prioritäten wie lesen und schreiben lernen.

 

Doch aller spätestens ab der 5. Klasse werden die ersten Grundkenntnisse zum Computer vermittelt .

 

Im Unterricht wird meist mit den wichtigsten Office Programmen aus dem Hause Microsoft oder Open Office angefangen, doch dies zieht sich meiner Erfahrung nach bis zum Erhalt des Abschlusses.

 

Schüler mit Technischem Interesse erledigen die Textformatierung- oder Tabellenkalkulationsaufgabe in unter 15 Minuten und langweilen sich dann die Restliche Zeit der Unterrichtsstunde.

 

 

Und trotz des Informatikunterrichts werden IT´ler Tagtäglich zu Fehlertickets her zitiert wie z.b. mein Drucker druckt nicht, Passwort vergessen, Herr/Frau Ich-weiß-alles-besser und weiteren gerufen.

 

 

Bei uns in der Kommune hat nun ein neuer junger Bürgermeister angefangen, der sich die Digitalisierung auf die Fahne geschrieben hat.

 

Meine Idee wäre ihn an sein Wahlprogramm zu erinnern ihm von meiner damaligen Erfahrung mit Win 2000 im Jahre 2009 im Informatikunterricht  zu berichten und den späteren Erfahrungen in der weiterführenden Schule mit dem Quantensprung auf Windows 10.

Gleichzeitig möchte ich auch einen Vorschlag unterbreiten, um die Schüler für die sich stetig weiterentwickelte Computerwelt zu wappnen auch in Bezug auf das Internet [Social Media,..] und den damit verbundenen Risiken.

 

Also konkret IT-Fachkräfte planen aktiv den Unterricht gemeinsam mit den Lehrkräften, bieten außerdem eine Informatik AG an und kümmern sich um die IT-Infrastruktur der Schule.

 

 

Funfakt unser damaliges Netzwerk war so schlecht eingerichtet, dass jeder Schüler Admin Rechte am PC hatte und mit etwas Ahnung per Remote ganze Rechner herunterfahren konnte.

 

Wäre das rein rechtlich möglich das IT-Fachkräfte beratend ohne Lehrerstudium am Unterricht beteiligt sind ?

 

Bzw. der Bürgermeister das, wenn auch mit Abstimmung des KM einführen darf.

Computer, Microsoft Word, Lernen, Studium, Microsoft Excel, Schule, Microsoft PowerPoint, Netzwerk, HTML, CSS, Bildung, Java, Unterricht, JavaScript, Schüler, ASCII, Beamte, Fachinformatiker, Informatik, Informatiker, Informationstechnik, Informationstechnologie, Lehrer, Lehrerin, Pascal, Python, Team, turbo pascal, Rathaus, Bürgermeister, Fachinformatiker Systemintegration, kultusministerium, PowerShell, schulcomputer, Angular, lehren
4 Antworten

Meistgelesene Fragen zum Thema CSS
Mehr meistgelesene Fragen zu CSS