• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

9 Grafiken mittig absolut zentrieren

frankbackes

Neues Mitglied
Hallo,

Mein Name ist Frank, ich bin ein aboluter Neuling was HTML angeht und versuche mich an der Startseite meiner Homepage welche doch etwas komplexer ausfällt.

Es soll folgendes resultat dabei rauskommen:

=========
O O

( )

O O
O
== == ==


Die Obere Lininen stellen ein Titel in Grafikfrom dar, darun sind 2 Kreise die Grafiken darstelen welche auf der gleichen Zeile sind und mit den beiden drunter befindlichen kreisen ein Rechteckbilden. In der Mitte soll eine Ovale Form sein. Drunter ist wieder ein Kreis der eine Grafik darstellt. dann kommen noch mal die 3 einzelnen grafiken.

Die Anordnung so herzustellen dass egal welcher Zoom im Brower eingestellt ist die Grafikgrupierung immer genau mittig und gleichgross bleibt (bis natürlich ein Bestimmter Zoompunkt überschrittenwird da geht selbst Postion:fixed mit).

Dazu soll dann noch in der mittleren nennen wir es Blase jeweils eine Art Tooltip angezeigt werden je nachdem über welche der 4 Kreise man hovert. Das ist jedoch erst später dran ich erwähne es nur damit falls mir jemand helfen will das gegebenfalls mit bedenkt und eventuel ein Konflikt imvorfeld bedenkt da ich das eh nicht kann weil meine Kenntnisse gleich null sind.

Ich habe ein HTML erstellt soweit meine kenntnisse es zulassen
Das sieht dann so aus : Absolut mittig

Das wäre schon fast die Lösung nur dass sobald ich nun die Buchstaben aus den "überflüssigen" Zellen erntfernen das ganze sich verstellt und dann nicht mehr so aussieht wie ich mir das wünsche.

Es wäre super wenn einer von den erfahreneren hier mir ein Stück von seinem Wissen geben könnte.

Vielen lieben dank

MfG Frank
 
Hallo,


Ich habe ein HTML erstellt soweit meine kenntnisse es zulassen
Das sieht dann so aus : Absolut mittig

Das wäre schon fast die Lösung nur dass sobald ich nun die Buchstaben aus den "überflüssigen" Zellen erntfernen das ganze sich verstellt und dann nicht mehr so aussieht wie ich mir das wünsche.

Das ist schon deshalb falsch, weil du Tabellen verwendest. Versuche doch erst einmal, ein einziges Element mittig zu positionieren, bevor du dich an komplexere Aufgaben wagst. Für die absolute Browsermitte gibt es hier ein Tutorial

Absolute centering a div with CSS

Soll es hingegen lediglich um die horizontale Mitte gehen, reicht ein margin:auto im CSS.
 
Hallo,

Danke dir für den Verweis, ich wusste nicht nach was ich suchen soll. Mir war klar dass es nicht mit Tabellen gemacht werden soll da das ja die alte Schule ist. Ich lerne aber gerade erst HTML und habe noch nicht ganz verstanden wie das mit dem CSS funktioniert desswegen hatte ich es erst so gemacht aber ich werde mich bemühen es so zu machen wie die Anleitung es einem erklärt.

Danke dir schon mal.

MfG Frank
 
Ich habe mir das ganze durchgelesen und was denkst du wenn ich ein Div als postion:absolute mache dann ein Bild rein und in dem Bild per map die einzelnen Bereiche hotlinke? Das würde es doch vereinfachen?
MfG Frank
 
Würde es, aber wenn du anständige Seite bauen willst, dann wirst du um einer tiefergehende Beschäftigung mit HTML und CSS nicht herunkommen.
 
Nicht falsch verstehen ich will nicht nur planschen, ich will Tiefseetauchen. Ich bin halkt nur gerade mit Schwimmflügel unterwegs und lerne im 10 cm Becken. Desswegen bin ich dankbar wenn man mir mehr details geben kann wie man es dann alternativ machen könnte mittels CSS und HTML damit ich sehen kann und verstehen kann wie man es richtig macht. Paralel dazu lerne ich es natürlich Schritt für schritt.

Danke dir

MfG Frank
 
Dann fang mit einem einfachen HTML-Gerüst an und baue es Schritt für Schritt aus.

HTML:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Box</title>
    <style type="text/css">
        body {
            background: #777;
            margin: 0;
        }
        #box {
            margin: 0 auto;
            background: white;
            width: 800px;
            height: 800px;
        }
    </style>
</head>
<body>
    <div id="box">
        Hier kommen die Grafiken rein.
    </div>
</body>
</html>
 
Danke dir,

(Irgendwie funktioniert das mit den Benachrichtigungen per mail nciht wenn man sich auf irgendeiner Seite im Forum aufhällt, habe keine Mail erhalten für deine Antwort)
Code:
[COLOR=#800080]<style type=[COLOR=#0000FF]"text/css"[/COLOR]>[/COLOR]
Bedarf das nun eine .css Datei die den Style definiert (Dezentralisiert) oder ist das alles im html drin (centralized)?

Entschuldige für diese Frage aber bin noch nicht bei CSS angekommen in dem Unterlagen die ich Lese ist nur grob mal drauf eingegangen worden zu begin.

Danke

MfG Frank
 
In diesem Fall benötigst du keine externe CSS-Datei. Das ist ein im Head angelegter Style-Container mit Anweisungen für den Body und das Div box. Wenn du die Werte dort veränderst oder neue hinzufügst, kannst du sehen, wie sich die Änderungen auf die Ausgabe im Browser auswirken.
 
Ich habe nun mal getestet mit einem jpeg als grafik
*Link entfernt*

das ist aber oben bündig sprich es wird oben angeheftet wenn ich auszoome.

Dessweiteren soll das um das DIV herum nicht grau sondern schwarz wie das Bild sein damit man denkt es wäre überall aber immer zentriert.

MfG Frank
 
Zuletzt bearbeitet:
Ich hatte ein Grundgerüst geschrieben, das du weiter ausbauen kannst, und wie man etwas absolut mittig positionierst, steht in dem gestern verlinkten Tutorial. Bei den paar CSS-Anweisungen im Style-Container sollte es nicht so schwer sein, herauszufinden, welche davon für die Hintergrundfarbe verantwortlich ist.

Suchst du hingegen jemanden, der die Seite für dich scripted, dann wäre das ein Fall für die Jobbörse.
 
Nein ich suche das nicht, sondern ich habe in dem von dir geschriebenen code nicht sehen können welche Zeile Grau definiert. Aber mir ist gerade aufgefallen dass das unter Box steht UND unter body, sorry da es als Hexa dezimal da steht ist es mir nicht aufgefallen. Sorry hatte einen Langen Tag auf der Arbeit aber ich versuchs weiter mit dem Align. Das mit dem hintergrund hat ja geklappt wie du jetzt im oberen link siehst

Danke und entschuldigung nochmal.

Edit:

Ich habe nun rum versucht wie verrückt ich verstehe nicht warum diese Blaue box bestehen bleibt und sobald ich in der style.css wrap weg mache oder in der html div Wrap entferne.
Code:
div id="wrap"><div id="box"></div></div>
was bezweckt der?
 
Zuletzt bearbeitet:
Du hast mehrere Fehler in dem Code.

- Meta Tags, Title und Style-Container gehören in den Head
- IDs dürfen nicht doppelt vergeben werden.
 
Du sagst IDs dürfen nicht doppelt vergeben werden beziehst du dich da auf wrap und box? denn die sind ja genau so in der Anleitung aber gegeben. Wo was hinkommt lerne ich erst das ist genau das was man wissen muss damit es klappt, ich hoffe ich bekomme das hin.

Danke dir
 
Die ID box verwendest Du doppelt. Und das wird so sicher in keiner Anleitung stehen - wenn doch: wegwerfen.

Ein weiterer Fehler sind die <div>-Elemente im <head>. Die dürfen doch nicht stehen. Weg damit.
 
AHHHH jetzt benimmt es sich (Fast) richtig also Zentriert .

Wenn du das Dokument noch mal aufrufst *Link entfernt* und dann Zoom auf 100% mittels CTRL + 0 dann runter zoomst mittels CTRL + Scroll down dann sieht man dass es nur die linke obere Ecke ist die immer im zentrum bleibt jedoch nicht das zentrum der Grafik. Was eigentlich mehr meine Idee war. Dessweiteren wenn ich auf zoom 100% bin liegt es unten an und hat oben einen Rand ich finde den Parameter nicht um diesen Rand zu entfernen.

Warum muss ich immer noch den
Code:
<div id="wrap">
drin lassen? Wenn ich ihn raus nehme dann zentriert sich die Grafik oben am oberen Rand was eigentlich schon besser ist aber immer noch nicht absolut zentral.
 
Zuletzt bearbeitet:
Du hast immer noch Fehler in deinem Quellcode. Bitte schau dir endlich die Grundlagen an. Wir können dir hier nicht alles beibringen und vorkauen. Du musst endlich den Zusammenhang zwischen CSS-Eigenschaften und den HTML-Elementen erkennen. Und wieso welche CSS-Eigenschaft so wirkt wie sie wirkt.

Ein paar Beispiele von deinen Fehlern:
* Schreibfehler im CSS-Code
* ein <div> wird nicht geschlossen

Deine offensichtlichen Verständnisprobleme:
* Zusammenhang zwischen absoluter Positionierung und der Darstellung
* vertikale Zentrierung kennst Du offenbar nicht

Tipp: verzichte auf jegliche absolute Positionierung außer Du weißt haargenau wie Du sie richtig anwendest.

Wenn Du deine Seite sowohl horizontal als auch vertikal zentrieren willst, findest Du im Netz viele Vorlagen. Z.B. diese hier:
Horizontale und vertikale Zentrierung mit CSS
 
Danke aber nur zur info in deinem Link Absolute centering a div with CSS wird der div geschlossen:
Code:
<div id="center">My custom content</div>
und auch in deinem neuen link wird der div geschlossen
Code:
<div id="center">
< p>
Ich bin ein vertikal und horizontal zentrierter Container.
Meine Höhe und Breite sind fest definiert.
< /p>
< /div>


Ich werde hier nicht die Hilfe finden die meinem jetztigen Wissensstand angemessen ist, ihr seit viel zu fortgeschritten als dass ihr verstehen könntet wie durcheinander das alles auf einen wirkt.

Ich danke dir für deine Bemühungen.

Auf wiedersehn

MfG Frank
 
Zuletzt bearbeitet:
Hallo,

wieso entfernst du denn den Link aus deinem Text?
Dann können andere Leute dir gar nicht mehr helfen, da sie ja den Quelltex nicht mehr haben.

Könntest du bitte den Link wieder hereineditieren?

Gruß
Janm
 
Hallo,

Weil ich das dokument aus dem Dropbox rausgenommen hatte und keinen toten Link stehen lassen wollte. Dann hier nochmal:
https://dl.dropbox.com/u/2280004/Index.html
Ich habe inzwischen auch ein 2 angefangen das ähnlich ist aber der Fricca Methode folgt Horizontale und vertikale Zentrierung mit CSS
bin da aber noch etwas verwirrt weil es selbst bei copy paste bei mir anders verhällt als im Beispiel. Der Inhalt der grünen Box wird links ausgerichtet statt mittig in der box.

MfG Frank
 
Zurück
Oben