Grafiken am Browser-Rand ausrichten [Archiv]

Drehrumbumm

2004-10-09, 19:34:15

Hallo,
ich will gerade eine kleine Bildergalerie erstellen und habe an ein Layout gedacht, bei dem die Grafik (800x600) zentriert in der Mitte des Bildes ist und rechts unten die Buttons für die Navigation sind
(siehe Anhang).

Nur, wie kann ich die Grafiken so ausrichten, dass sie immer rechts unten sind, egal bei welcher Auflösung? (bei <1024 sollten am besten Scrollbalken erscheinen, damit die Buttons nicht in die Grafik reinrutschen o.s.
-wenn das net geht, est es nicht so schlimm, kenne keinen der mit 800x600 rumsurft und die Page ist nur für private Zwecke)

Danke für helfende Tips,
Dreh

ps:
ich nutze nur den Editor, zum schreiben
MS-IE+Opera zum testen und Selfhtml bei Unklarheiten

Henrik

2004-10-09, 20:04:58

Mom, ich schreib dir mal ne Beispielseite

edit: gehe eben Abend essen, mache gleich weiter
hab bisher das hier

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Author" content="Drehrumbumm">
<meta name="description" content="Drehrumbumms Bildergalerie">
<style type="text/css">

</style>
<title>Drehrumbumm Bildergalerie</title>
</head>
<body>
<div id="titelzeile"><h2>Herzlich Willkommen auf Drehrumbumms Homepage</h2></div>

<div id="

Drehrumbumm

2004-10-09, 20:56:31

Hey, das find ich cool! :)

Vom Design her, sieht's gut aus (was man bisher sagen kann), die Farben werd ich halt wahrscheinlich noch ändern.

Jetzt geh ich erstmal noch weg, schau aber heute nacht oder morgen wieder rein.

Vielen Dank soweit und
schönen Gruß,
Dreh

ps:
Guten Appetit ;)

Henrik

2004-10-09, 22:06:11

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Author" content="Drehrumbumm">
<meta name="description" content="Drehrumbumms Bildergalerie">
<style type="text/css">

</style>
<title>Drehrumbumm Bildergalerie</title>
</head>
<body>
<div id="titelzeile"><h2>Herzlich Willkommen auf Drehrumbumms Homepage</h2></div>

<div id="bildnummer">Bild 1/ka</div>
<div id="bildcontainer"><img src="foto1.jpg" alt=""></div>
<div id="navigation">
<a href="index.html"><img class="symbol" src="foto1.jpg" alt="Zurück" title="Zurück"></a>
<a href="seite2.html"><img class="symbol" src="foto1.jpg" alt="Home" title="Home"></a>
<a href="index.html"><img class="symbol" src="foto1.jpg" alt="Vorwärts" title="Vorwärts"></a>
</div>

<p>
<a href="http://validator.w3.org/check?uri=referer"><img style="height:31px; width:88px;" src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01!"></a>
<span style="font-size:10pt; margin-left:5px;">© 2004 by Drehrumbumm</span>
</p>
</body>
</html>

Was nervt, ist das die verlinkten Bilder alle den Rahmen drumherum haben.
Wenn du statt "strict" "transitional" nimmst, kannst du in den img-Tag noch "border=0" (ohne Anführungszeichen) reinsetzten.
"border:none" als CSS will irgendwie nicht :|
Vorschläge?

Aqualon

2004-10-09, 22:31:50

Den Border kannst du in CSS per border:0px ausschalten.

Aqua

Henrik

2004-10-09, 22:33:52

Den Border kannst du in CSS per border:0px ausschalten.

Aqua

Hatte ich auch schon probiert, funktioniert nicht (Firefox 0.91).

Aqualon

2004-10-09, 22:47:47

Hatte ich auch schon probiert, funktioniert nicht (Firefox 0.91).
Hast du das auch dem img zugewiesen?

img { border:0px; }

Damit sollte es mit allen moderneren Browsern klappen (getestet mit Mozilla 1.7.3, IE6, Firefox 0.10.1).

Aqua

Henrik

2004-10-09, 22:54:20

Hast du das auch dem img zugewiesen?

img { border:0px; }

Damit sollte es mit allen moderneren Browsern klappen (getestet mit Mozilla 1.7.3, IE6, Firefox 0.10.1).

Aqua

:eek:

Ich hatte es in den img.symbol-Tag geschrieben, aber direkt in das Element funzt es :D

img {width:800px;
height:600px;
border:0px;
}

Henrik

2004-10-09, 23:07:26

Btw, ich würde dir noch empfehlen, den ganzen CSS Kram als Stylesheet auszulagern.
Der Code müsste dann folgendermaßen aussehen:

<link rel="stylesheet" type="text/css" href="stylesheet.css">

<style type="text/css">

</style>

Die Datei "stylesheet.css" muss natürlich auch existieren. Es reicht, einfach alles, was vorher zwischen den Style-Tags stand, in die .css-Datei zu schreiben.

In der HTML-Datei steht also nur noch folgender Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Author" content="Drehrumbumm">
<meta name="description" content="Drehrumbumms Bildergalerie">

<link rel="stylesheet" type="text/css" href="stylesheet.css">
<style type="text/css">

</style>

<title>Drehrumbumm Bildergalerie</title>
</head>
<body>
<div id="titelzeile"><h2>Herzlich Willkommen auf Drehrumbumms Homepage</h2></div>

<div id="bildnummer">Bild 1/ka</div>
<div id="bildcontainer"><img src="foto1.jpg" alt=""></div>
<div id="navigation">
<a href="index.html"><img class="symbol" src="zurueck.jpg" alt="Zurück" title="Zurück"></a>
<a href="seite2.html"><img class="symbol" src="home.jpg" alt="Home" title="Home"></a>
<a href="index.html"><img class="symbol" src="vorwaerts.jpg" alt="Vorwärts" title="Vorwärts"></a>
</div>

<p>
<a href="http://validator.w3.org/check?uri=referer"><img style="height:31px; width:88px;" src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01!"></a>
<a href="http://jigsaw.w3.org/css-validator/"><img style="height:31px; width:88px;" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!"></a>
<span style="font-size:10pt; margin-left:5px;">© 2004 by Drehrumbumm</span>
</p>

<p>

</body>
</html>

In der .css-Datei steht das:

/* Drehrumbumms Bildergalerie - externes Stylesheet*/
/* Diese Datei muss im gleichen Verzeichnis wie die HTML-Datei abgelegt werden. */
/* Wenn du die HTML-Dateien in einen anderen Ordner legen willst, musst du das im <link rel="stylesheet" type="text/css" href="stylesheet.css"> Bereich deutlich machen./*
/* Um in ein tieferes Verzeichnis zu wechseln, schreibst du einen Punkt vor das Verzeichnis, z.B. "href="./stylesheet.css" (ohne Anführungszeichen)*/
/* Um in ein zwei Stufen tiefers Verzeichnis zu wechseln, schreibst du zwei Punkte vor das Verzeichnis.*/
/*Greetz*/
/*_3dfx_rulez*/

body {font-family:tahoma,sans-serif;
font-weight:bold;
font-size:14pt;
background-color:#cccccc;
}

img {width:800px;
height:600px;
}

img.symbol {width:50px;
height:50px;
}

#titelzeile {background-color:#000045;
width:100%;
color:#ff6600;
text-align:center;
border:1px solid #ffc800;
margin-bottom:20px;
padding-bottom:10px;
}

h2 {margin-bottom:5px;
}

#bildcontainer {background-color:#cccccc;
width:100%;
border:1px solid #ffc800;
text-align:center;
}

#bildnummer {background-color:#000045;
width:100%;
color:#cccccc;
border:1px solid #ffc800;
text-align:center;
padding-top:3px;
padding-bottom:3px;
}

#navigation {background-color:#000045;
width:100%;
height:60px;
border:1px solid #ffc800;
margin-top:20px;
text-align:right;
padding-top:5px;

}

img:link {text-decoration: none;
border-color:transparent;
border:width:0px;
}
img:visited {text-decoration: none;
border-color:transparent;
border:width:0px;
}
img:hover {text-decoration:none;
border-color:transparent;
border:width:0px;
}