JQUERY CSS background-position?

Hallo

Per Input will ich die Position vom Hintergrundbild verändern.

Mir ist aufgefallen das es bei einer Seite(Page) nur Vertikal und bei einer anderen Seite(Page) nur Horizontal funktioniert. Der Code ist bei beiden seiten gleich(Copy&Paste)

Beim Quellcode in Chrome(Windows) und Safari(Mac) wird es angezeigt, das zb. background-position-y: 40% verändert wurde. Aber das Bild bewegt sich nicht. Egal ob ich 4(%) oder 7000(%) eingebe.

https://codepen.io/BudSpenser/pen/dwmNjz

Bei Codepen funktioniert nur vertikal. Wieso?

HTML

  <body>
    <li id="" class="ff-home-image-container1 desktop">
    </li>
    <div class="image-editor-position">
      <b>Image Position</b><br>
      <input type="number" id="image_horizontal_edit1" value="" placeholder="Horizontal">
      <input type="number" id="image_vertical_edit1" value="" placeholder="Vertical"><br><br>
    </div>
  </body>

CSS

.desktop {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 0;
  padding-top: 65%;
  background: url("https://www.w3schools.com/css/img_forest.jpg") no-repeat center center;
  background-size: cover;
  display: block;
  background-position-X: 100%;
  background-position-Y: 0%;
  background-attachment: fixed;
  text-align: center;
}

JS

$(document).ready(function () {       
$('#image_horizontal_edit1').keyup(function () { image_horizontal = $('#image_horizontal_edit1').val(); $('.desktop').css('background-position-x',image_horizontal+'%'); });
$('#image_vertical_edit1').keyup(function () { image_vertical = $('#image_vertical_edit1').val(); $('.desktop').css('background-position-y', image_vertical+'%'); });
});
Website, HTML, CSS, JQuery
1 Antwort
CSS HTML Menü band drop down verschiebung?

könnt ihr mir vielleicht hier mal helfen. ich will nicht dass die menü leiste mit kommt wenn ich auf einen text raufkomme.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>Titel</title>
 </head>
 <body>
   <div>
<ul>
    <li><a>Über Uns</a>
  <ul>
      <li><a href="#">Team</a></li>
      <li><a href="#">Geschichte</a></li>
      
     </ul></li>
    <li><a>Produkte</a>
     <ul>
       <li><a href="#">Headset</a></li>
       <li> <a href="#">Kamera</a></li>
      <li><a href="#">Speicher</a></li>
     </ul>
    </li>
    <li><a>News</a>
     <ul>
      <li><a href="#">Diese Woche</a></li>
      <li><a href="#">Neue Produkte</a></li>
      <li><a href="#">Events</a></li>
     </ul></li>
    
</ul></div>
    
    
   <style>
@import url('https://fonts.googleapis.com/css?family=B612');
</style> 
   <style>
     body {
       background-color: #353b48;
       font-size: cover;
       font-family: 'B612', sans-serif;
       text-align: center
     background-size: cover}
     ul { padding: 0px;
        margin: 0px;
        list-style: none;
       text-align: center;
        
     }
     ul li{
       
       width: 400px;
       height: 29px;
       background-color: #192a56;
       color:white;
       display: block;
       display:inline-block;
       
       font-size: 20px;
       line-height: 40px;
       display:inline-block; 
       opacity: .8;}
      
     ul li a{
     text-decoration: none;
     color:white;
     display: block;
     text-align: center}
     ul li a:hover{
       background-color: darkblue;
     }
     ul li ul li{
       display: none;
       border: 2px solid grey;
       width: 400px;
       height: 40px
     }
     ul li:hover ul li
     {display:block;}
      
   </style>
 </body>
</html>
HTML, CSS, webseiten erstellen, Webseitenerstellung
1 Antwort
Html und css Menü am Handy anzeigen wie am Pc?

Ich möchte gern, dass mein Menü auf dem Smartphone genauso aussieht, wie am PC:

Wie müsste ich den Code dann verändern?

HTML:

<div id="menu">
   <ul>
       <li class="topmenu">
           <a href="">Text</a>
           <ul>
               <li class="submenu"><a href="">Text</a></li>
               
           </ul>
       </li>
       <li class="topmenu">
           <a href="">Text</a>
           <ul>
               <li class="submenu"><a href="">Text</a></li>
               <li class="submenu"><a href="">Text</a></li>
           </ul>
       </li>
       <li class="topmenu">
           <a href=""> Text</a>
           <ul>
               <li class="submenu"><a href="">Text</a></li>
               <li class="submenu"><a href="">Text</a></li>
           </ul>
   
       </li>
         <li class="topmenu">
           <a href=""></a>
       
   
       </li>
         <li class="topmenu">
           <a href=""> </a>
           <ul>
            
           </ul>
   
       </li>
         <li class="topmenu">
           <a href=""> </a>
           <ul>
               
           </ul>
   
       </li>
         <li class="topmenu">
                     <a href="Link zu Instagram">
<i class="fa fa-instagram" style="font-size: 105%; " > </a></i>
          
       </li>
   
</div> 

CSS:

   #menu {
    left:0;
top:0;
width:100%;
height:7%;
background: #5A7481;
z-index:4;
position: fixed;
   }
   #menu ul {
       list-style-type:none;
       list-style-image:none;
       margin:0;
       padding:0;
  
   }
   #menu li.topmenu {
       float:left;
       margin-top: 0%;
  padding-top: 0.%;
  padding-left: 0%;
  padding-right:15%;
   }
   .topmenu a {
       float:left;
       width:100%;
       text-align:center;
   }
   .topmenu ul{
       display:none;
   }
   .topmenu a, .submenu a{
       padding:10%;
       color:white;
       font-weight:bold;
       text-decoration:none;
       background-color:#5A7481;
       margin:0;
   }
   .submenu a{
       font-size:90%;
      
       position:relative;
       
   }
   #menu a:hover, .topmenu.on a {
       color:white;
       background-color:#5A7481 !important;
   }
   .topmenu:hover ul {
       display:block;
       z-index:500;
   }
Computer, HTML, programmieren, CSS, HTML Code, Informatik, css-code, CSS-Menü
1 Antwort
Zwei Modals "in Reihe schalten" - wie geht's richtig?

Moin,

für ein aktuelles Projekt möchte ich auf einen vom Nutzer über den Signup-Button abgesendeten Modal mit einem weiteren Modal reagieren. Allerdings poppt dieses nach Absenden des ersten Modals nur für einen Bruchteil einer Sekunde auf und schließt sich im Anschluss wieder. Hat jemand eine Idee, wie ich das beheben kann?

html-Snippet:

<div>
	<a class="am-button"><img src="img"></a>
	<a class="am-button" id="modalAddAccountOpen"><img src="img"></a>
	<div class="am-modal-addaccount" id="modalAddAccount">
		<div class="am-modal-addaccount-content">
			<span class="am-modal-addaccount-close" id="modalAddAccountClose" title="Verwerfen">×</span>
			<p>Benutzer hinzufügen</p>
			<form action="inc/signup.inc.php" method="POST">
				<input class="am-modal-addaccount-input" type="text" name="signup-first" placeholder="Vorname">
				<input class="am-modal-addaccount-input" type="text" name="signup-last" placeholder="Nachname">
				<input class="am-modal-addaccount-input" type="text" name="signup-email" placeholder="E-Mail-Adresse">
				<input class="button" type="submit" name="signup-submit" id="modalShowAccountOpen" value="Hinzufügen">
			</form>
		</div>
	</div>
	<script type="text/javascript" src="js/accountmanagement/modalAddAccount.js"></script>
	<div class="am-modal-showaccount" id="modalShowAccount">
		<div class="am-modal-showaccount-content">
			<span class="am-modal-showaccount-close" id="modalShowAccountClose" title="Schließen">×</span>
			<p>Test</p>
			<form>
				<input class="button" type="submit" id="modalShowAccountClose" value="Schließen">
			</form>
		</div>
	</div>
	<script type="text/javascript" src="js/accountmanagement/modalShowAccount.js"></script>
</div>

Der relevante CSS-Snippet:

.am-modal-addaccount{
	position: fixed;
	display: none;
	z-index: 3;
}

.am-modal-showaccount{
	position: fixed;
	display: none;
	z-index: 3;
}

Der js-Code:

var modalAddAccountOpen = document.getElementById('modalAddAccountOpen');
var modalAddAccount = document.getElementById('modalAddAccount');
var modalAddAccountClose = document.getElementById('modalAddAccountClose');

modalAddAccountOpen.onclick = function(){ modalAddAccount.style.display = "block"; }

modalAddAccountClose.onclick = function(){ modalAddAccount.style.display = "none"; }

var modalShowAccountOpen = document.getElementById('modalShowAccountOpen'); var modalShowAccount = document.getElementById('modalShowAccount'); var modalShowAccountClose = document.getElementById('modalShowAccountClose');

modalShowAccountOpen.onclick = function(){ modalShowAccount.style.display = "block"; }

modalShowAccountClose.onclick = function(){
	modalShowAccount.style.display = "none";
}

LG

Website, HTML, programmieren, CSS, JavaScript, JS, html5, CSS3
1 Antwort
Menü über kompletten oberen Rand?

Ich bin gerade dabei ein Menü zu programmieren, und habe keine Ahnung, wie ich es hinbekomme, dass das Menü den kompletten oberen Rand ausfüllt.

Das hier steht in meiner HTML Datei:

<div id="menu">
   <ul>
       <li class="topmenu">
           <a href="">Menü 1</a>
           <ul>
               <li class="submenu"><a href="">Unterpunkt 1.1</a></li>
               <li class="submenu"><a href="">Unterpunkt 1.2</a></li>
           </ul>
       </li>
       <li class="topmenu">
           <a href="">Menü 2</a>
           <ul>
               <li class="submenu"><a href="">Unterpunkt 2.1</a></li>
               <li class="submenu"><a href="">Unterpunkt 2.2</a></li>
           </ul>
       </li>
       <li class="topmenu">
           <a href="">Menü 3</a>
           <ul>
               <li class="submenu"><a href="">Unterpunkt 3.1</a></li>
               <li class="submenu"><a href="">Unterpunkt 3.2</a></li>
           </ul>
       </li>
  <li class="topmenu" >
           <a href="">Menü 1</a>
   </ul>
</div> 
und das in meiner css Datei:
   #menu {
       font-size:10px;
       position:fixed;
  top: 0;
  left: 0;
  
   }
   #menu ul {
       list-style-type:none;
       list-style-image:none;
       margin:0;
       padding:0;
   }
   #menu li.topmenu {
       float:left;
       margin-top: 0px;
  padding-top: 0px;
  padding-left: 0px;
  padding-right:0px;
   }
   .topmenu a {
       float:left;
       width:120px;
       text-align:center;
   }
   .topmenu ul{
       display:none;
   }
   .topmenu a, .submenu a{
       padding:15px;
       color:white;
       font-weight:bold;
       text-decoration:none;
       background-color:#985905;
       margin:0;
   }
   .submenu a{
       font-size:12px;
       width:120px;
       position:relative;
       
   }
   #menu a:hover, .topmenu.on a {
       color:white;
       background-color:#BF7818 !important;
   }
   .topmenu:hover ul {
       display:block;
       z-index:500;
   }

Wie muss ich den Code verändern, damit das Menü die ganze obere Leiste ausfüllt?

HTML, CSS, HTML CSS, CSS-Menü
3 Antworten
css/html Boxen auf Prozentwerten (nicht statischen Pixelwerten), ohne dass Inhalte sich überlagern, wenn Browserfenster verkleinert wird?

Hallo,

bin ziemlich unbedarft und versuche mir eine Seite anzupassen.

Das Problem: ich habe links eine Box, in der das Menü ist und rechts eine große Box, in der Vorschaubilder sind. Wenn ich das Browserfenster kleiner mache, rutscht irgendwann die Schrift aus dem Menü (linke Box) unter die Vorschaubilder der rechten Box und wird von ihnen verdeckt. Erst wenn das Browserfenster ganz schmal wird, springt die rechte Box eine Ebene tiefer als die linke box, sodass sie sich nicht mehr überlagern.

Ich weiß, ich könnte die linke Boxposition auf feste Pixelwerte statt Prozentwerte umschalten, aber dann skaliert die Position der rechten Box nicht mehr je nach Größe des Browserfensters, was ich ziemlich schön finde. Die Boxpositionen wären damit statisch.

Gibt es eine Möglichkeit, die Skalierung der Boxen nach Prozent beizubehalten, aber etwas einzufügen, dass die rechte Box eine Ebene tiefer springt, sobald die Vorschaubilder dem Menütext zu nahe kommen, sodass keine Überlagerung mehr stattfindet?

Danke!

(Nebenbei habe ich noch ein Problem: Bildunterschifttext der nur bei vergößerten Bildansichten auftaucht wird unterstrichen dargestellt, obwohl text-decoration: none; eingetragen ist. Ich möchte diese Unterstreichung nicht. )

Noch eine abstrakte Darstellung der Boxpositionen mit den CSS Parametern.  

Computer, Technik, HTML, CSS, Technologie
1 Antwort
Dropdown menu javscript erstellen?

Hi

Ich hab folgenden Code und weiß nicht wie ich ein Dropdown menu erstellen kann, dass mana uf den Button drückt und die von mir angegebene Navigationsleiste als block darstellt?

HTML:
<section id="MenuBtn">
   <ul>
    <li><a href="#" class="MenuButton"><img src="Bilder-Topleiste/menu-icon.png"></a></li>
   </ul>
  </section>
 <hr>
 <header>
  <h1><b><a href="">Überschrift</a></b></h1>
  <h3 id="Subtitle">Unterschrift</h3>
 </header>
 <nav class="nav" id="DDnav">
  <ul>
   <li><a href="#">Homepage</a></li>
   <li><a href="#">Künstler</a></li>
   <li><a href="#">Kaufen/Verkaufen</a></li>
   <li><a href="#">Kontakt</a></li>
   <li><a href="#">Impressum</a></li>
  </ul>
</nav>
 CSS:
#MenuBtn{
display:none;
}
nav{
 display: block;
 background-color: white;
 height: 2.5em;
 text-align: center;
}
nav ul{
 display: block;
}
nav ul li{
 display: inline;
 margin: 0em 0.188em 0em 0.188em;
}
nav ul li a{
 color: black;
 font-size: 1.25em;
 padding: 10px;
 line-height: 1.5em;
}
@media screen and (min-width: 1030) {
 nav.nav{
  display: block !important;
 }
}
@media screen and (max-width: 1030px) {
 nav{
  display:none;
  height: auto;
 }
 nav ul li{
  display: block;
  margin: 0em auto;
 }
 #MenuBtn{
  display: block;
 }
}
Computer, Website, Technik, Webseite, CSS, JavaScript, JS, Technologie, Webdesign, Webdevelopment, Webentwicklung, dropdown menü, Spiele und Gaming
1 Antwort

Meistgelesene Fragen zum Thema CSS

Wie schreibt man in Discord farbig?

3 Antworten

CSS Bildgröße automatisch an div-Box anpassen

2 Antworten

Eine Div immer im Vordergrund, wie?

4 Antworten

Coole Gamer Namen (Fällt euch was ein)

32 Antworten

CSS Konsole öffnen

2 Antworten

wie kann ich mittels css ein bild rot färben?

4 Antworten

Mit welchem Befehl kann man ein Bild bei html mittig positionieren?

7 Antworten

CSS von beliebiger Homepage anzeigen lassen

5 Antworten

Wie kann man bei CSS eine Bombe entschärfen?

4 Antworten

CSS - Neue und gute Antworten