zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden DIV's verschieben sich beim zoomen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 06.08.2018, 12:58
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.08.2018
Beiträge: 52
IxonTV befindet sich auf einem aufstrebenden Ast
Frage DIV's verschieben sich beim zoomen

Guten Morgen.
Ich weiß, dass ähnliche Themen bereits beantwortet wurden, allerdings konnte ich mir noch nicht helfen. Um mich ein bisschen von der normalen Navigation abzuheben, habe ich runde Bilder verwendet, auf die man klicken kann, um zur nächsten Seite zu gelangen. Wenn ich jetzt reinzoome, verschieben sich die Items nach unten (Ich habe 3 Bilder, das Rechte(mit float: left positioniert) verschiebt sich dann eine Reihe nach unten). Mein Traum wäre ja, dass alles einfach an seiner Position bleibt und die Zoomfunktion wirklich wie eine Lupe funktioniert, dh auf einen bestimmten Punkt auf der Seite vergrößert. Mittlerweile arbeite ich seit 6 Stunden nur an dieser blöden Verschiebung! Ich hab auch schon probiert eine Wrapper-div um alles zu legen, und dieser dann position: relative zu geben und width: 100vw; height: 100vh;.

Kann mir jemand bei meinem Problem helfen?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 06.08.2018, 13:24
Benutzer
neuer user
 
Registriert seit: 10.07.2018
Beiträge: 99
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

Ohne deinen Code zu sehen, wird dir wohl keiner helfen können - am Besten du postest einen Link zu Seite.
Oder falls das nicht geht hier, unter Nutzung der entsprechenden Code- Einfügefunktion, das, was du an Code (HTML und CSS) geschrieben hast.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 06.08.2018, 13:28
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.08.2018
Beiträge: 52
IxonTV befindet sich auf einem aufstrebenden Ast
Beitrag

Zitat:
Zitat von Sailor56 Beitrag anzeigen
Ohne deinen Code zu sehen, wird dir wohl keiner helfen können - am Besten du postest einen Link zu Seite.
Oder falls das nicht geht hier, unter Nutzung der entsprechenden Code- Einfügefunktion, das, was du an Code (HTML und CSS) geschrieben hast.
HTML:
Code:
<html>
	<head>
		<script type = "text/javascript" src = "header.js"> </script>
		<link href='https://fonts.googleapis.com/css?family=Chela One' rel='stylesheet'>
		<link rel="shortcut icon" href="Logo.ico" />
		<title>Aroma Café Troisdorf</title>
		<meta charset = "utf-8">
		<style type="text/css">a {text-decoration: none}</style>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href = "style.css" rel = "stylesheet" type = "text/css">
	</head>
	<body>
	<div id="wrapper">
		<div id = "banner">
			<img src="Logo.jpg" id="logo1" class="box" alt="Logo des Aroma Cafes Troisdorf Spich"/>
			<!--<ul id="navibereich" class="box">
				<li id="navi01">
					<a href="index.html">
						<img src="ButtonImg.png" width="100px" />
					</a>
				</li>
    
				<li id="navi02">
					<a href="galerie.html">
						<img src="ButtonImg.png" width="100px"/>
					</a>
				</li>
				<li id="navi03">
					<a href="ereignisse.html">
						<img src="ButtonImg.png" width="100px"/>
					</a>
				</li>
				
			</ul>-->
			<div id="navigation">
			<div class="nav">
				<a href="ereignisse.html">
						<img src="ButtonImg.png" width="200px"/>
					</a>
			</div>
			<div class="nav">
				<a href="ereignisse.html">
						<img src="ButtonImg.png" width="200px"/>
					</a>
			</div>
			<div class="nav">
				<a href="ereignisse.html">
						<img src="ButtonImg.png" width="200px"/>
					</a>
			</div>
			</div>
			
		</div>
		
		</div>
	</body>	
</html>

CSS:
Code:
body{
	background-image: url(logo.ico);
	background-size: 70% auto;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: 0px 250px;
}
#wrapper{
	position: relative;
	height: 100vh;
	width: 98vw;
}
#banner{
	height: 250px;
	width: 100%;
	background-color: rgba(120, 120, 120, 0.2);
	overflow: visible;
	
}
.box{
	float: left;
}
div.nav{
display: inline-block;
width: 200px%;
height: auto;
float: left;	
max-height: 100%;
position: relative;
bottom: 15px;
padding: 60px;

}
#navigation{
	bottom: 0px;
}
.nav a:hover{
	background-color: rgba(120, 120, 120, 0.4);
}
/*#navibereich li {
	bottom: 0px;
	width: 100px;
	position: relative;
  display: inline;          /* Listenelemente nebeneinander 
  list-style-type: none;      /* Aufzählungszeichen entfernen  
  padding: 100px 0;      
  /*border-left: 1px solid #14ede5;
  margin: 0;   
}
#navibereich img{
	bottom: 0px;
}
#navibereich a{
  text-decoration: none;         /* Unterstreichung entfernen   
  
}
#navibereich a:hover,
#startseite #navi01 a,       /* mit Komma am Ende 
#galerie #navi02 a,
#ereignisse #navi03 a{
  background-color: #00BFFF;
  background-image: url(farbverlauf.jpg);/* Hintergrundgrafik einfügen 
  background-repeat: repeat-x;           /* von links nach rechts wiederholen 
  background-position: top left;         /* oben links beginnen 
} {    /* ohne Komma am Ende 
  background-color: #EDEDF8;
  

}*/

#Timeline{
	display: block;
	float: right;
	height: 20%;
	width: 20%;
	top: 300px;
	
}

#Timeline h2{
	height: -100px;
}

#Artikel1Img{
	/*border: 10px;
	border-color: #FFFFFF;*/
	display: block;
	margin-bottom: 15px;
	margin-top: -15px;
	margin-left: auto;
	margin-right: auto;
		

}




#Artikel1{
	/*border: 1px solid #83c2f7;*/
	/*border-bottom: 1px solid #a4a4a4;*/
	background-color: #fffff;
	border-width: 0px 0px 1px 0px;
	margin-top: -15px;
}
#Artikel1 h3{
	color: black;
	font-family: Akkurat, sans-serif;
	text-align: center;
}
#info-box {
		background-color: #fffff;
        position: absolute;
        right: 0;
        top: 30%;
        top: 30%;
        width: 25%;
		
	
}
#logo1{
	max-height: 100%;
	max-width: 100%;
	
}
Tut mir leid das iel unnötiges Zeug dabei ist, was ich teils gar nicht mehr brauche. Ich bin nur gerade sehr am experimentieren und später will ich das ganze dann noch schön machen
Mit Zitat antworten
  #4 (permalink)  
Alt 06.08.2018, 13:46
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.913
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Bei so komplexen Beispielen wäre eine Seite, die auch die Grafiken enthält, ganz sinnvoll. Damit man sich anschauen kann.
Mit Zitat antworten
  #5 (permalink)  
Alt 06.08.2018, 14:45
Benutzer
neuer user
 
Registriert seit: 10.07.2018
Beiträge: 99
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

Was verstehst du unter 'reinzoomen'? ... das Browserfenster auf zB 150% stellen?
Oder meinst du die Veränderung des Displays... von zB Desktop auf Smartphone.
Mit Zitat antworten
  #6 (permalink)  
Alt 06.08.2018, 17:27
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.08.2018
Beiträge: 52
IxonTV befindet sich auf einem aufstrebenden Ast
Standard

vipesminigames.de ist die Adresse zum angucken. Mit reinzoomen meine ich "Strg und +"

Geändert von IxonTV (06.08.2018 um 19:04 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 06.08.2018, 18:20
Benutzer
neuer user
 
Registriert seit: 10.07.2018
Beiträge: 99
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

Unter vipesmingames.de ist leider nichts, was man sich anschauen könnte, außer einer Fehlermeldung
Mit Zitat antworten
  #8 (permalink)  
Alt 06.08.2018, 19:01
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.08.2018
Beiträge: 52
IxonTV befindet sich auf einem aufstrebenden Ast
Standard

Sorry, hab mich verschrieben...
Aroma Café Troisdorf
Mit Zitat antworten
  #9 (permalink)  
Alt 06.08.2018, 19:58
Benutzer
neuer user
 
Registriert seit: 10.07.2018
Beiträge: 99
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

Also ich bin da aus Layout Sicht ganz und gar nicht bei dir - ich kann keinen Vorteil für den Nutzer sehen, wenn du durch Zoomen (welcher Nutzer macht denn sowas?) dein Design kaputt machst.
Was wird passieren?
Du hast deinen Elementen eine feste Größe gegeben... irgendwann reicht der Platz nicht mehr aus und es erfolgen zwangsläufig Zeilenumbrüche. Gerade die Elemente, die mit 'float' positioniert werden, was man eh nur in ganz bestimmten Ausnahmefällen machen sollte, hüpfen dann in die nächste Zeile.
Das kannst du natürlich verhindern!
Mach mal bei
div.nav {float: none;}
und bei
#navigation {display: flex;}
Das sollte deine 3 Bilder in einer Reihe halten... hmmm... aber das sieht nicht gut aus, wenn dann unten ein horizontaler Scrollbar erscheint und die Bider aus dem Bildschirm herauswandern - auch das ist eigentlich ein NoNo, das man vermeiden sollte. Deinen Besuchern wird das bestimmt auch nicht gefallen - also ich würde schleunigst die Seite verlassen, wenn mir ein Webmaster so etwas anbietet.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 07.08.2018, 08:15
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.913
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von IxonTV Beitrag anzeigen
Sorry, hab mich verschrieben...
Aroma Café Troisdorf
da ist nichts was man sich angucken kann.
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
css 3, div container, html 5, zoomen

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Text innerhalb eines divs verschieben good CSS 2 14.08.2015 12:55
Zentrierter Mittelcontainer - Außencontainer verschieben sich beim Zoomen ... Phoenix2048 CSS 27 04.09.2014 19:54
Div's beim Scrollen horizontal verschieben insider Javascript & Ajax 2 22.06.2014 14:48
Komische Rahmen um Divs bei Zoomen mit FF auf Linux Cu Chullain CSS 0 01.09.2010 23:00
Divs relativ verschieben chris33 CSS 3 23.01.2008 19:58


Alle Zeitangaben in WEZ +2. Es ist jetzt 20:45 Uhr.