HTML/CSS Zoomen

M_McGarrett · 26. Februar 2018

Hallo community,

ich habe heute angefangen mit einer Webseite, aber sobald ich Zoome verändert sich alles.... Bilder werden verschoben beim zoomen und passt dann nicht mehr richtig...
Hier hab ich mal ein Beispiel:

Code

img#logo{
    width: auto;
    position:absolute;
    height:auto;
    border:0px;
    left:3%;
    top:1%;   
}

ich hab auch schon versucht die position auf relative zu stellen, aber trotzdem ohne erfolg... was kann ich machen?
und absolute muss es sein, da ich sonst das logo nicht über ein anderes Bild bekomme...

Hoffe mir kann einer helfen

MfG

Kaliber · 27. Februar 2018

Versuch mal das Bild als Background zu setzen:

CSS

background: url('bg.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

Edgar · 27. Februar 2018

Ich persönlich kann mit einer Live-Ansicht viel besser arbeiten, falls du eine hast, wäre es vorteilhaft.

Ansonsten kannst du die position trotzdem mal auf relative stellen und den z-index auf - sagen wir mal 10 stellen.

Mit dem z-index kannst du sozusagen mit Ebenen arbeiten, wenn zwei Elementen die position realtive, absolute oder
fixed besitzten und eines davon einen z-index von 5 und das andere 10, dann liegt das Element mit dem z-index von 10 über dem mit 5.

M_McGarrett · 27. Februar 2018

Hab jetzt beides versucht, es klappt nicht... Es bewegt sich einfach alles, Tabelle,Bilder usw...

Nochmals der ganze code:

Code

img#header{
    width: 100%;
    position:absolute;
    height:50%;
    border:0px;
    left:0%;
    top:0px;
}
img#top{
    width: auto;
    position:absolute;
    height:auto;
    border:0px;
    top:80px;
    align-items:center;
}


img#logo{
    width: auto;
    position:absolute;
    height:auto;
    border:0px;
    left:3%;
    top:1%;   
}
img#baum{
    width: 95px;
    position:absolute;
    height:95px;
    border:0px;
    left:18%;
    top:0.2%;
    z-index: 10;
}
img#bauservice{
    width: auto;
    height:auto;
    border:0px;
    left:0%;
    top:20%;
    align-items: center;
}
img#ground1{
    width: 364px;
    position:absolute;
    height:190px;
    border:0px;
    left:1.1%;
    top:36.2%;
}
table#tabelle{
    width: 100%;
    position:absolute;
    height:auto;
    border:1px solid red;
    left:0%;
    top:15%; 
    padding:10px;
    border-collapse:collapse;
}
td#erste
{
    width:400px;
    padding:20px;
    font-size:17;
    color:white;
    line-height: 1.5;

}
div#text1
{
    position:absolute;
    left:28px;
}
body{
    width: 800px;
    font-family:Verdana;


}


li {
	display: inline-block;	
	list-style-type: none;
	width: 45%;
}


img {
	padding: 0;
	margin: 0;	
	width: 100%;  /* Bild passt sich an verfügbaren Raum im li an */
}

Alles anzeigen

HTML

<html>
    <head>
        <title>Bau- und Gartenservice Wiedemann GmbH</title>
        <link href="style.css" type="text/css" rel="stylesheet"/>
        <img id="header" src="bilder/header.png" alt="header">
    </head>


<body>
    <div id="topdiv"><img id="top" src="bilder/top.png" alt="top"></div>
    <!--<img id="logo" src="bilder/logo.png" alt="logo">
    <img id="baum" src="bilder/baum.png" alt="baum">
    <img id="ground1" src="bilder/ground1.png" alt="ground1">
    <table id="tabelle"> 
        <tr> 
            <td id="erste"><img id="bauservice" src="bilder/bauservice.jpg" alt="bauservice"<br><br><br> <div id="text1">Wir informieren Sie gerne &uuml;ber unsere <br>Leistungen im Bereich Bau und erstellen<br> Ihnen ein transparntes Angebot &uuml;ber die <br>von Ihnen gew&uuml;nschten Leistungen. </td> </div>
            <td>Inhalt</td> 
            <td>Inhalt</td> 
        </tr> 
    </table>-->
</body>
</html>

Alles anzeigen

Hab nen Teil nur ausgeklammert weil ich etwas versucht habe....

Edgar · 27. Februar 2018

Damit kann ich leider nicht viel anfangen, die Bilder fehlen ja

Du kannst mal ein Bild von der Seite machen, falls diese nicht online ist, und am besten noch mal genau erklären wie es aktuell ist und wie du es aber gerne haben möchtest.

Tipp: Im Head-Bereich sollte das Bild vom Header nicht sein, sondern im Body.

Xazor · 27. Februar 2018

Ich würde generell media queries verwenden und bei den jeweiligen die Breite & Höhe anpassen, falls das Bild mal rüber rückt.

Einfach mal auf SelfHTML oder Co nachschlagen.

LoSti's World · 28. Februar 2018

ich hab damit nicht so viel erfahrung, und wie genau es nacher aussehen soll kann ich aus deinem post auch nicht entnehmen aber evtl. reicht es ja schon wenn du mit

box-sizing: border-box;
und
transform: scale(dein wert);

arbeitest..... oder mit margin vielleicht.... bin etwas überfragt

M_McGarrett · 28. Februar 2018

Problem hat sich nun gelöst... hab alles mit div boxen gemacht

HTML/CSS Zoomen

breadfish.de 12. März 2022

Ähnliche Themen

Hilfe bei Umsetzung eines Designs in HTML/CSS