Verwandte Themen

bryth265
06.10.2023, 10:57
Frage wurde 1 Mal erneut gestellt
Hilfe für c# code mit HTML &CSS in Blazor?

Hallo, ich möchte eine WetterApp programmieren mit Blazor und sitze jetzt schon 4 Tage an dem Problem mit C#, da ich keine Ahnung habe wo ich anfangen soll und generell neu bin und nicht ganz vertraut bin. Ich habe die WetterApp mit JavaScript programmiert, allerdings soll ich C# verwenden und nicht JavaScript deshalb brauch ich eure Hilfe! Kann mir wer dabei helfen einen C# Code zu schreiben, welcher dasselbe macht wie mein javaScript-Code:

1. Ich möchte das mein "SeachrIcon-Button" aus einem HTML-Code als Suchbutton fungieren kann, womit ich die einzelnen Städte suchen kann, damit mir dabei dann die Wetterdaten angezeigt werden.

2.

Ich möchte, dass dann die Bilder der zu den jeweiligen Wetter vorkommnissen angepasst werden, also die Wetter Daten sollen in der Console angezeigt werden aber nicht auf dem Display

Hier mein Html Code:

<body class="backgroundimage">


  <div class="card">
      <div class="search">
          <button><img src="/images/SuchIcon.png"></button>


              <input type="text" placeholder="Search" spellcheck="false" />
        
      
      </div>
  </div>
    
     
  <div class="weather"> 
      <div class="center margin-top">
      <img src="images/image1.png" width="200" height="200" style="opacity: 1" class="weather-icon" />
      </div>


     <div>
          <h1 class="temp">22°c</h1>
     </div>
      
      
      <div class="center">
          <h2 class="city center margin-top">New York</h2>
      </div>


          <hr class="hr1 line1" />

          <div id="imagesMain">
              <img src="/images/image1.png" width="75" height="75" class="imageline " />
              <img src="/images/image1.png" width="75" height="75" class="imageline " />
              <img src="/images/image1.png" width="75" height="75" class="imageline " style="margin-left: 5px; margin-right: -5px;" />
              <img src="/images/image1.png" width="75" height="75" class="imageline " style="margin-left: 12px; margin-right: -10px;" />
              <img src="/images/image1.png" width="75" height="75" class="imageline " style="margin-left: 2px; margin-right: -14px;"/>


          </div>

          <div>
           
              <p style="color:black;" class="line0 title margin-left ">Monday</p>
              <p style="color:black;" class="line0 title margin-left ">Tuesday</p>
              <p style="color:black;" class="line0 title margin-left ">Wednesday</p>
              <p style="color:black;" class="line0 title margin-left ">Thursday</p>
              <p style="color: black;" class="line0 title margin-left ">Friday</p>
             
           
          </div>

          <hr class="hr1 line" />

      <div class ="details">
          <div class="col">
              <img src="images/humidity.png"/>
              <div>
                  <p class="speed">Humidity</p>
                  <p class="humidity">50%</p>
                  
              </div>
          </div>
          <div class="col">
              <img src="images/wind.png" />
              <div>
                  <p class="speed">Wind Speed</p>
                  <p class="wind">15 km/h </p>
                 
              </div>

          </div>

      </div>
  </div>
  
   </body>

Im unteren Kommentar werd ich die restlichen Codes posten
HTML, CSS, JavaScript, C Sharp
1 Antwort
bryth265
05.10.2023, 16:29
WetterApp mit HTML, Css und C# über Blazor Server App?

Hallo undzwar bin ich neu in C# und möchte über die Blazor Server App eine Wetter-App programmieren, allerdings fehlt mir dazu noch der Code, da ich nicht weiß wie ich anfangen soll. Ich möchte dass mein "SearchIcon" welcher in HTML hinterlegt ist als suchbutton fungiert, damit ich die Städte suchen kann und über API möchte ich, dass mir dann die jeweiligen Temperaturen angegeben werden. Kann mir wer helfen und gegebenenfalls einen Code dafür geben.

Hier mein HTML code:

<body class="backgroundimage">

  <div class="card">

    <div class="search">

      <button><img src="/images/SuchIcon.png"></button>

     <input type="text" placeholder="Search" spellcheck="false"/>

      

    

     

    </div>

  </div>

    

    

  

  <div class="weather"> 

    <div class="center margin-top">

    <img src="images/image1.png" width="200" height="200" style="opacity: 1" class="weather-icon" />

    </div>

    <div>

      <h1 class="temp">22°c</h1>

    </div>

     

     

    <div class="center">

      <h2 class="city center margin-top">New York</h2>

    </div>

      <hr class="hr1 line1" />

      <div id="imagesMain">

        <img src="/images/image1.png" width="75" height="75" class="imageline "

        <img src="/images/image1.png" width="75" height="75" class="imageline "

        <img src="/images/image1.png" width="75" height="75" class="imageline " style="margin-left: 5px; margin-right: -5px;"

        <img src="/images/image1.png" width="75" height="75" class="imageline " style="margin-left: 22px; margin-right: -5px;"

        <img src="/images/image1.png" width="75" height="75" class="imageline " style="margin-left: 5px; margin-right: -14px;"

      </div>

      <div>

       

        <p style="color:black;"class="line0 title margin-left ">Monday</p>

        <p style="color:black;"class="line0 title margin-left ">Tuesday</p>

        <p style="color:black;"class="line0 title margin-left ">Wednesday</p>

        <p style="color:black;"class="line0 title margin-left ">Thursday</p>

        <p style="color: black;"class="line0 title margin-left ">Friday</p>

        

        

      </div>

      <hr class="hr1 line" />

    <div class ="details">

      <div class="col">

        <img src="images/humidity.png"/>

        <div>

          <p class="speed">Humidity</p>

          <p class="humidity">50%</p>

           

        </div>

      </div>

      <div class="col">

        <img src="images/wind.png" />

        <div>

          <p class="speed">Wind Speed</p>

          <p class="wind">15 km/h </p>

          

        </div>

      </div>

    </div>

  </div>

   

 

</body>

hier mein Css code:

.backgroundimage {

  background-image: url('../images/sun_background.png');

  background-attachment: fixed;

  background-repeat: no-repeat;

  background-size: cover;

}

.cloud-background {

  background-image: url('../images/cloud.png');

  /* Füge hier die gewünschten Hintergrundbilderigenschaften hinzu */

}

.card {

  width: 90%;

  max-width: 470px;

  color: #fff;

  margin: 10px auto 0;

  border-radius: 20px;

   

   

}

.search{ 

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: space-between;

}

.search input{

  border: 0;

  outline: 0;

  background: #ebfffc;

  color: #555;

  padding: 10px 25px;

  height: 60px;

  border-radius: 30px;

  flex: 1;

  margin-right: 16px;

  font-size: 18px;

}

.search button{

  border: 0;

  outline: 0;

  background: #ebfffc;

  border-radius: 60%;

  width: 60px;

  height: 60px;

  cursor: pointer;

}

.weather-icon{

   

  margin-bottom: -30px;

}

.weather h1 {

  font-size: 80px;

  font-weight: 500;

  color: floralwhite;

}

.weather h2 {

  font-size: 40px;

  font-weight: 400;

  margin-top: -10px;

  color: floralwhite;

}

.details {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 0 20px;

  margin-top: 50px;

  

}

.col {

  display: flex;

  align-items: center;

  text-align: left;

  margin-top: 150px;

  

}

  .col img {

    width: 20px;

    margin-right: 20px;

    margin-bottom: 70px

  }

.humidity, .wind{

  font-size: 28px;

  margin-top: -6px;

  color: floralwhite;

}

.speed{

  font-weight: bold;

}

.temp {

  margin-bottom: 20px;

  display: flex;

  justify-content: center;

}

.search button img{

  width: 55%;

}

.center {

  display: flex;

  justify-content: center;

  

}

.top-left{

  display: flex;

  justify-content:left 

}

.top-left

{

  margin-left: 10px;

}

.margin-top{

  margin-top: 20px;

}

.hr1 {

  width: 390px;

  height: 2px;

  color: black;

}

.line{

  margin-bottom: -100px;

  margin-top: 10px;

}

.line1{

  margin-top: 30px;

  margin-bottom: -20px;

}

.line0{

  margin-top: 70px;

  margin-bottom: -90px;

  font-size: 14px;

  font-weight: bold;

  color: black;

}

.imageline {

  margin-top: 5px;

  margin-bottom: -90px;

   

}

.imagesMain {

  padding: 0;

  margin-left: auto;

  margin-right: auto;

  margin-top: 20px;

  text-align: center;

}

  .imagesMain img {

    height: 400px;

    width: 300px;

    vertical-align: middle;

  }

.title {

  display: inline-block;

  color: lightgray;

}

.margin-left{

  margin-left: 14px;

}

Internet, App, HTML, CSS, Code, Programmiersprache, Webentwicklung
1 Antwort
Bubsch913
01.10.2023, 23:26
Mit Links
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
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
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
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
Gojosatoru383
17.08.2023, 21:53
Mit Bildern
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;
}

Bild zum Beitrag
HTML, Webseite, CSS, HTML5, Programmiersprache, Webdesign, Webentwicklung
6 Antworten

Meistgelesene Fragen zum Thema CSS
Mehr meistgelesene Fragen zu CSS