Frage 2 Logos in einer Html
- Ersteller Masterfly
- Erstellt am
Werbung:
![]()
Werbung:
![]()
Das ist der Html Code:
Und das der CSS Code:
#logo{
position: static;
width: 50%;
line-height: 160%;
text-align: left;
padding-right: 41px;
padding-left: 41px;
margin: 0 auto;
}
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
}
HTML:
<div id="logo">
<img src="Logo.png" width="100%" hight="auto">
</div>Und das der CSS Code:
#logo{
position: static;
width: 50%;
line-height: 160%;
text-align: left;
padding-right: 41px;
padding-left: 41px;
margin: 0 auto;
}
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
}
Das sind leider nur Quellcodeschnipsel, mit denen niemand etwas anfangen kann. Auch auf die zwei Logos haben wir hier keinen Zugriff. Deshalb kann ich dir nur eine allgemeine Lösung zeigen:
Code:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
<title>Logowechsel 01</title>
<meta name="description" content="HTML5, CSS3">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Um alte IE HTML5-tauglich zu machen -->
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
<style>
@media all {
/* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
display: block;
}
* {
box-sizing: border-box;
}
html {
font-size: 120%;
}
body {
padding: 0;
}
h2 {
line-height: 2.5;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/f/f3/Volkswagen_logo.svg/240px-Volkswagen_logo.svg.png");
background-repeat: no-repeat;
background-size: contain;
padding-left: 4rem;
}
}
@media only screen and (max-width: 1000px) {
h2 {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/BMW.svg/240px-BMW.svg.png");
}
}
@media only screen and (max-width: 700px) {
h2 {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/e/e0/Mercedes_benz_logo_1926.png");
}
}
</style>
</head>
<body>
<header>
<h2>header</h2>
</header>
<article>
<p>Logowechsel bei 700px und 1000px.</p>
</article>
</body>
</html>
Zuletzt bearbeitet:
Werbung:
![]()
