HX3 Foren  

  HX3 Foren > Konstruktiv > Software- und Webentwicklung

Software- und Webentwicklung Planung, Programmierung und Administration
UML, JavaScript/DOM, ASP, JSP, PHP, Apache, MySQL, Python, Perl (...)

Antwort
 
Themen-Optionen Ansicht
Alt 28.07.2004, 15:13   #1 (permalink)
50 Beiträge100 Beiträge
 
Registriert seit: 25.06.2003
Beiträge: 206
Standard

Jo, mal hier eine Frage:

Es gibt ja den Befehl <center>, der dann die ganzen Sachen zentriert. (Also, dass es zw. links und rechts ist).

Jo, jetzt weiß ich aber net, wie ich das machen soll, dass das Bild nicht nur in der Mitte zw. links und rechts ist, sondern auch in der Mitte von Oben und Unten.
Man kann es ja schlecht mit
machen, da, wenn man eine andere Auflösung hat, es dann nicht mehr zentriert ist.

Hat jemand ne Idee, wie ich es am einfachsten das Bild exakt in die Mitte der Page kriege?

(Mit XHTML)
Xexano ist offline   Mit Zitat antworten
Alt 28.07.2004, 17:52   #2 (permalink)
Administrator
500 Beiträge1000 Beiträge2.500 Beiträge
 
Benutzerbild von anders^on
 
Registriert seit: 10.05.2003
Ort: Bayern™
Beiträge: 3.483
anders^on eine Nachricht über ICQ schicken anders^on eine Nachricht über Skype™ schicken
Standard

Meines Wissens existiert hierfür keine Patentlösung - allerdings kann man mit Hilfe
von background-position einen Hintergrund auch vertikal zentrieren.
Das gibt einem die Möglichkeit ein div horizental zu zentrieren (<center>) und
dann innerhalb des divs ein vertikal zentriertes Hintergrundbild zu haben.

So könnte dann zum Beispiel HTML & CSS aussehen:



Code:
HTML 
<html>
<head>
<title>Testseite</title>
<style>

body {
text-align: center; //horizontale zentrierung bei IE
}

.center {
width: 250px;
height: 100%;
margin: 0px auto; //horizontale zentrierung bei mozilla und co
background-image: url(pfad_zum_bild.gif);
background-position: middle;

}

</style>

</head>
<body>
<div class="center"></div>
</body>
</html>
Klar, dass die Breite des div vom Bild abhängt - in meinem Fall war das Bild eben
250px breit.
anders^on ist offline   Mit Zitat antworten
Alt 28.07.2004, 18:10   #3 (permalink)
Administrator 10 Jahre hx3
5000 Beiträge
 
Benutzerbild von Atomic
 
Registriert seit: 21.02.2003
Ort: Freiburg im Breisgau
Alter: 32
Beiträge: 5.139
Atomic eine Nachricht über ICQ schicken Atomic eine Nachricht über Skype™ schicken
Standard

Hey, was soll das? :maya:

XHtml, Html, CSS,.. sind alles Seitenbeschreibungs-Sprachen und keine Programmier-, oder Scriptsprachen.
Hört bitte auf dieses Forum ( Programmer's HQ) mit Design Problemen zu überhäufen.

Was hier hinein gehört sind Probleme mit von euch selbst in Arbeit befindlicher Software.

Das beginnt bei kleinen JavaScript Funktionalitäten auf eurer Website, geht über Web-Anwendungen bis hin zur 3D-Spieleprogrammierung in Hochsprachen wie C#.

*moved*

Danke für euer Verständniss.
__________________
http://webagentur-walde.de/
Atomic ist offline   Mit Zitat antworten
Alt 29.07.2004, 12:16   #4 (permalink)
50 Beiträge100 Beiträge
 
Registriert seit: 25.06.2003
Beiträge: 206
Standard

Ich stell jetzt mal mein Versuch hinein:

Code:
<html>
<head>
<title>Project Mare</title>
<style type="text/css">
h2 {color=#87CEFA; text-align=center}
body {
text-align: center; <!-- horizontale zentrierung bei IE -->
}

.center {
width: 250px;
height: 100%;
margin: 0px auto; <!-- horizontale zentrierung bei mozilla und co -->
background-image: C:\Eigene Dateien\Project Mare\Mare.jpg;
background-position: middle;

}

</style>
</head>
<body>
<div class="center"></div>
</body>
</html>

<body>
<br />
<h2> Mare Project </h2> 
<br />
<div class="center"></div>
<!-- Startseite -->
</body>
</html>
Bei mir erscheint das Bild nicht. Da fehlt sicherlich ein Befehl in der Body Zeile, aber was? ._.
Ich sehe nur die h2-Überschrift Mare Project. Es ist zwar exakt in der Mitte, jedoch kann man da auch eine Menge Leerraum zu scrollen! :komischschau: Was soll ich tun?
Gehört der Punkt vor center in der body-Zeile auch wirklich hin?
Sollen da wirklich leerzeichen zw. z.B. with: und dem Befehl?
Muss die URL des Bildes nicht in " " stehen?

(Die Page "Project Mare" war mal ein angefangenes, aber nie beendetes Projekt in Informatik; ich will das jetzt aber zuhause beenden um weiter lernen zu können!)

Außerdem: Ich wollte noch gerne das Bild verlinken (es soll ein Link sein, mithilfe von <a href="URL"> ).
Und wollte dann später, wenns funzt, noch den Trick mit dem Image Hover ausprobieren. Da möchte ich gerne wissen, wie man am leichtesten da was verändern kann. (Vorher, bei der nur mit den
dingern zentrierede-Version davon habe ich für Verlinkung einfach diesen <a href="URL"> Befehl draufpacken müssen.

@ Atomic: Is' ok das mit dem Verschieben! Ich dachte, weil man sich da mit reinem XHTML beschäftigt, dass es dann zum Programming-Forum gehört. Nicht ganz unschuldig ist auch der HTML-Thread mit dem Image Hover von Kompost, der da auch rumschwirrte.
Xexano ist offline   Mit Zitat antworten
Alt 29.07.2004, 12:24   #5 (permalink)
Administrator
500 Beiträge1000 Beiträge2.500 Beiträge
 
Benutzerbild von anders^on
 
Registriert seit: 10.05.2003
Ort: Bayern™
Beiträge: 3.483
anders^on eine Nachricht über ICQ schicken anders^on eine Nachricht über Skype™ schicken
Standard

Schau dir mal auf http://de.selfhtml.org in der CSS Referenz 'background-image'
genauer an.
anders^on ist offline   Mit Zitat antworten
Alt 29.07.2004, 15:09   #6 (permalink)
500 Beiträge1000 Beiträge
 
Registriert seit: 27.02.2003
Ort: Berlin
Alter: 29
Beiträge: 1.245
Garry eine Nachricht über ICQ schicken
Standard

Mit
Code:
div align="bottom"
oder? :komischschau:
Garry ist offline   Mit Zitat antworten
Alt 01.08.2004, 18:52   #7 (permalink)
50 Beiträge100 Beiträge
 
Registriert seit: 25.06.2003
Beiträge: 206
Standard

Das mit bottom funzt nicht.. oder ich habs falsch eingebaut!

Ich komm einfach net weiter! HILFE!
Habe 2x nen neuen Code gemacht und es funzt immer noch nicht! :eek:

Code 1:

Code:
<html>
<head>
<title>Project Mare</title>
<style type="text/css">
#Mare {
 background-image:url(C:\Eigene Dateien\Project Mare\Mare.jpg); background-repeat:no-repeat;
 background-position:30px 20px;
}

h2 {color=#87CEFA; text-align=center}
body {
text-align: center; <!-- horizontale zentrierung bei IE -->
}

</style>
</head>
<body>
<div id="Mare"></div>
<br />
<h2> Mare Project </h2> 
<br />
<!-- Startseite -->
</body>
</html>
Code 2:
Code:
<html>
<head>
<title>Project Mare</title>
<style type="text/css">
.top &nbsp; &nbsp;{ vertical-align:top; background-color:#CCCCCC; }
.middle &nbsp;{ vertical-align:middle; background-color:#DDDDDD; }
.bottom &nbsp; { vertical-align:bottom; background-color:#EEEEEE; }
</style>

</head>
<body>
<div align="center">
<table border="1">
<tr height="50%" class="top">a</tr>
<tr height="450" class="middle"><img src="C:\Eigene Dateien\Project Mare\Mare.jpg" width="740" height="450" alt="Project Mare" /></tr>
<tr height="33%" class="bottom">b</tr>
</table>
</div>
</body>
</html>
Xexano ist offline   Mit Zitat antworten
Alt 01.08.2004, 19:07   #8 (permalink)
Administrator 10 Jahre hx3
5000 Beiträge
 
Benutzerbild von Atomic
 
Registriert seit: 21.02.2003
Ort: Freiburg im Breisgau
Alter: 32
Beiträge: 5.139
Atomic eine Nachricht über ICQ schicken Atomic eine Nachricht über Skype™ schicken
Standard

Versuchen wir es mal mit Tabellen

Code:
<html>
<head></head>
<body leftmargin="0" topmargin="0">
<table bgcolor="#EFEFEF" width="100%" height="100%" cellspacing="0" cellpadding="0" border="

0">
<tr valign="middle">
<td align="center">

<img src="mein_bild.png" border="0">

</td>
</tr>
</table>
</body>
</html>
__________________
http://webagentur-walde.de/
Atomic ist offline   Mit Zitat antworten
Alt 01.08.2004, 19:44   #9 (permalink)
Administrator
500 Beiträge1000 Beiträge2.500 Beiträge
 
Benutzerbild von anders^on
 
Registriert seit: 10.05.2003
Ort: Bayern™
Beiträge: 3.483
anders^on eine Nachricht über ICQ schicken anders^on eine Nachricht über Skype™ schicken
Standard

Hab jetzt die wahrscheinlich eleganteste Lösung gefunden:

Code:
<html>

<head>
<title>xyz</title>
<style>
.bild {
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 200px;
margin-top: -150px;
margin-left: -100px;
}
</style>
</head>

<body>
<img src="bild.gif" class="bild" alt="" />
</body>

</html>
Man definiert eine absolute Position, die den linken, oberen Punkt des Bildes genau
in die Mitte des Fensters legt - da wir aber die Mitte des Bildes in der Mitte des Fensters
haben wollen müssen wir das Bild mit margin-top und margin-left um die Hälfte
seiner Größe nach links und nach oben zurückverschieben.

Klingt kompliziert, isses auch für son einfaches Problem.
Aber nur so zeigen wirklich alle Browser das Bild richtig an und der Code is gleichzeitig
w3c-konform.
anders^on ist offline   Mit Zitat antworten
Alt 01.08.2004, 22:45   #10 (permalink)
Administrator 10 Jahre hx3
5000 Beiträge
 
Benutzerbild von Atomic
 
Registriert seit: 21.02.2003
Ort: Freiburg im Breisgau
Alter: 32
Beiträge: 5.139
Atomic eine Nachricht über ICQ schicken Atomic eine Nachricht über Skype™ schicken
Standard

Stimmt.. meiner hatte Probleme mit diversen Doctype Headern.
Deshalb hab ich sie absichtlich weggelassen.
__________________
http://webagentur-walde.de/
Atomic ist offline   Mit Zitat antworten
Antwort


Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
 
Themen-Optionen
Ansicht

Forumregeln
Es ist dir nicht erlaubt, neue Themen zu verfassen.
Es ist dir nicht erlaubt, auf Beiträge zu antworten.
Es ist dir nicht erlaubt, Anhänge hochzuladen.
Es ist dir nicht erlaubt, deine 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


Kontakt - HX3.de - Archiv - Nach oben

Angetrieben durch vBulletin, Entwicklung von Philipp Dörner & Tobias



SEO by vBSEO 3.2.0 ©2008, Crawlability, Inc.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116