Buttons und Bilder

html.de-Forum HTML, XHTML & CSS
1

Hallo Community,

ich bin neu hier, ich wollte wissen wie man mehrere bilder überlappen kann, hab bisher so ein bild rein gemacht:

aber das bild geht nicht oben an die kante und nicht ganz nach links… irgendwie klappt das ganze nicht ganz sobald ich bei height 600 einstelle ist nur links ein weisser Rand, also das bild geht nicht nach links…

dazu wie kann ich ein Bild als button verwenden das wenn man drüber fährt er sich ausblendet und man ihn anklicken kann und weitergeleitet wird?

Mfg

Moritz

2

Du solltest auch CSS verwenden um die Ausgabe zu gestalten.

Um die Abstände zu entfernen:

* { margin:0;padding:0; }

Für den Button würde ich das Bild eher als Hintergrund-Bild einfügen und nicht per HTML. Dann kannst Du per hover auch das Aussehen bei Mausberührung verändern.

Siehe: https://developer.mozilla.org/de/docs/Web/CSS/background-image

Moderation: Verschoben von HTML zu CSS da es um Gestaltung geht.

3

Ich vermute mal du möchtest eine Hintergrundgrafik.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Fixed</title>
<style>
html, body {
margin:0;
padding:0;
height:100%;
}

body {
background:url(bg.jpg) no-repeat 0 0 fixed;
background-size:100% 100%; /* oder cover oder contain */
}

</style>
</head>

<body>

</body>
</html>

Zu spät.

@edit oder doch lieber so?!

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">

<style>
* {
margin:0;
padding:0;
}

img {
opacity:1;
}

a:hover img {
opacity:.1;
}
</style>

<title>Test</title>
</head>
<body>
<a href="http://www.google.de"><img src="bild.jpg" alt=""></a>
</body>
</html>
4

Habe Links und oben trotzdem den weißen balken, es ist von oben runter 1cm balken und von links ein 1cm balken… das bild geht also nicht an den rand sondern verschwindet ab dem balken

5

Zeig deinen aktuellen Quellcode bitte.

6

[CODE]

Bau & Gartenservice Wiedemann

#demo {
background-image:url(background2.jpg);
height: 480px;
width: 1980px;
background-position: -4px -0px;

}

[/CODE]

das ist nun mein Code, aber mich interessiert nun das mit dem Button, das sich das bild dann nicht verschiebt wenn ich ein Bild button einfüge, dazu wollte ich wissen wie ich ein Button mache zum anklicken nur mit schrift und sich ein rahmen aussehen hinsetzt… dazu nur ein bild als button und das man dann auf eine andere seite geleitet wird…

7 
body {
margin:0;
padding:0;
}