Hallo zusammen,
ich habe jetzt vor ein paar Wochen angefangen mich intensiver mit dem Thema HTML zu beschäftigen. Bzw. ich bin gerade dabei eine Homepage mittels "WebEasy Professional 7.0" zu erstellen.
Damit komme ich auch klar, wird ja kein HTML-Code benötigt ;-)
Allerdings habe ich jetzt ein Problem bei einer Bildergalerie, die ich in einer extra HTML-Datei machen will.
Ich habe es jetzt soweit hinbekommen, dass das Hintergrundbild erscheint und auch im Browser so mitläuft wie ich das haben will.
Jetzt habe ich noch diesen netten Lightbox-Effekt gefunden und für eine Bildergalerie verwendet.
Das gute daran: Er funktioniert.
Das schlechte daran: Nicht so wie ich mir das vorstelle.
Und zwar stehen die zwei Bildreihen schön mittig im Browser (das ist eigentlich auch gut so) aber die kleben immer oben, egal was ich versuche.
Und eigentlich wollte ich erreichen, dass diese Bildreihen immer an der gleichen Stelle auf dem Hintergrundbild positioniert sind, so das es aussieht als wären die Bilder wirklich auf dem Hintergrund und nicht irgendwo auf einer Ebene darüber.
Der Hintergrund ist ein 1024x768px-Bild auf dem genau mittig ein 800x600px "Rahmen" steht, in dem sich alles abspielen soll (später auch mal alle Texte etc.)
Ich hab schon diverse CSS-Einstellungen für diese "Bildertabelle" versucht, aber ohne Erfolg. Und wie gesagt, hab ich auch (leider noch) nicht wirklich Ahnung von HTML und CSS.
Den folgen Code hab ich mir aus dem Internet bzw. per "Try-and-Error" zusammengebastelt:
Bin für jeden Tipp/Ratschlag/Verbesserungsvorschlag dankbar.
Gruß,
Onkel Tom
SabineP
Hallo Onkel Tom,
eigentlich mußt Du nur das
durch eine Tabellenzelle ersetzen.
vorher:
nachher:
Und das kannst Du ganz weglassen:
Uncle_Tsebe
Hallo Sabine,
vielen, vielen Dank.
Hat wunderbar geklappt *freu*
Nur so zum Verständnis:
Wenn ich z. B. einen 1024x768px großen Hintergrund habe in dem mittig ein fest definierter Platz (z. B: 800x600px) frei ist und in dem der Inhalt erscheinen soll, egal wie groß das Browserfenster ist, muss ich dann bei "Box" im CSS-Stil den "Größe"-Wert eingeben?
Bzw. wie kann ich feste "Textrahmen" bzw. "Bildrahmen" an einer, von mir definierten genauen Position, platzieren?
Dass ich z. B. sage:
Genau innerhalb dieser "Inhaltsbox" von 800x600px (welche ja auf dem größeren Hintergrund steht) soll ein Logo rechts oben, mit dem gleichen Abstand zum Rand rechts und oben, stehen.
Ich hoffe ich habe mich verständlich ausgedrückt ;-)
Vielen dank für deine/eure Geduld und Hilfe.
Gruß,
Thomas
SabineP
Hallo Thomas,
mittig ausrichten klappt mit Tabellen am einfachsten.
Hier ein Beispiel mit dem Logo oben rechts:
Uncle_Tsebe
Hallo Sabine,
hat funktioniert vielen Dank :-)
Das hab ich jetzt auch kapiert wie ich mit dieser Positionierung umgehe und kann das auch für die anderen Seiten verwenden.
Jetzt hab ich aber noch ein Problem (sorry):
Wenn ich das Logo alleine platziere kann ich das positionieren wo ich will, das passt.
Wenn ich jetzt aber diese Tabelle mit den Bildern wieder einfüge, dann steht das Logo ganz oben und die Bilder ganz unten.
Wie bekomme ich jetzt die Bildertabelle in diesen 800x600px Hintergrund mit rein, so dass das Logo rechts oben (mit definierbarem Abstand) und die Bildertabelle darunter (mit definierbarem Abstand) steht???
Bzw. wie schaffe ich da eine Art Hirarchie, so dass erst der Hintergrund mittig, dann diese "Inhaltsfläche" mit den 800x600px mittig, dann das Logo rechts oben und darüber dann dieses Bildertabelle (da diese evtl. noch erweitert werden soll) steht?
Boah, ich hab mir das einfacher vorgestellt.
Nochmals danke für deine/eure Geduld.
Ich denke wenn ich diesen Fall bzw. diese Seite verstanden hab, dann komme ich mit dem Rest auch klar.
Aber wie es halt so ist: Der Geist war willig aber das Fleisch war schwach ;-)
Ach ja, hier nun der komplette Code der Seite mit der Bildertabelle.
Merci nochmal.
Gruß,
Thomas
SabineP
Hallo Thomas,
zuerst mußt Du die Klasse tabelle bei den Thumbnails (kleine Bilder) entfernen.
class="tabelle"
Dann fügst Du die Tabelle mit den Thumbnails unter dem Logo ein:
|
Dann gibst Du die Größe Deines Logos in Pixel an (ich weiß nicht wie groß Dein Logo ist):
.Logo {
height: 100px;
width: 100px;
}
Mit top:100px; kannst Du die Tabelle dann um 100px nach unten verschieben:
.tabelle {
top:100px;
position: relative;
padding: 10px;
}
Die Anzahl der Pixel kannst Du natürlich beliebig ändern.
Uncle_Tsebe
Hallo Sabine,
vielen Dank für deine Hilfe.
Das hat jetzt geklappt.
Und ich hab es sogar hinbekommen, dass ich links, auf gleicher Höhe vom Logo, einen Navibutton eingefügt habe *freu*
Ich denke das hab ich soweit dann verstanden.
Jetzt tun sich aber neue Probleme auf:
Wie stelle ich es am Besten mit dem Seitenaufbau an?
Ein Beispiel:
Ich habe auf jeder Seite ein Hintergrundbild in der Größe 1024x768px (das soll auch immer in der Mitte vom Browser stehen (so wie es oben ja funktioniert))
Darin soll dann, genau mittig, eine 800x600px große "Inhaltsbox" sein, in der:
a - im oberen Bereich eine Navigationsleiste (750x90px, mittig)
b - darunter der restlich Inhalt (in den ich noch Bilder + Text einfügen kann) mit dem restlich verfügbaren Platz von den 800x600px
steht
Das Problem: wie stelle ich das am besten an?
Ich habs mit dem -Tag versucht
Allerdings mit dem Erfolg, dass ich nur den Hintergrund sehe.
Ich wollte die Navileiste bewusst per externe CSS-Datei einfügen, da ich so flexibler mit dem Ändern bin. Diese Leiste soll ja nachher auf allen Seiten an der gleichen Position verwendet werden.
Hintergrund bleibt auch gleich nur der Inhalt ändert sich logischerweise.
Hier der CSS-Code der Navileiste (die Größe stimmt noch nicht, da ich es erst mal mit einem einzelnen Button teste)
.Navileiste {
background-repeat: no-repeat;
background-position: center top;
height: 50px;
width: 700px;
position: absolute;
background-attachment: fixed;
z-index: auto;
}
Es ist zum Haareraufen.
Ich sitz hier über Büchern, hunderten von Internetseiten und kriegs einfach nicht gebacken.
Ich habe wohl zusehr das Photoshop-Denken.
Hintergrund-Ebene
Ebene mit Logo etc.
Ebene mit Inhalt
*pffft*
Vielen Dank schon mal im Voraus für alle Geduld und Hilfe :-)
Gruß,
Thomas
FSt
Hallo Thomas
Test
Photoshop-Denken hilft im Internet nicht wirklich, viel besser ist Excel-Denken, mit all seinen Zellen ...
Gruss
Martin
SabineP
Hallo Thomas,
die "Inhaltsbox" in der Größe 88x600 Pixel hast Du doch hier schon:
.Inhaltsbox {
height: 600px;
width: 800px;
}
Ich weiß nicht wie Deine Navigation aussehen soll und ich befürchte,
daß das Forum hier nicht dazu geeignet ist eine gesamte Webseite für Dich kostenlos zu erstellen.
Versuche es doch mal mit einem fertigen Template.
Es gibt tausende davon, die man mit Google finden kann.
>> Ich sitz hier über Büchern, hunderten von Internetseiten und kriegs einfach nicht gebacken.
HTML und CSS lernt man weder an einem Tag, noch in einer Woche und auch nicht in einem Monat.
Hier ist ein guter Anfang zum Lernen:
http://selfhtml.org/
SabineP
Hallo Martin,
ich finde Dein Code ist eine sehr gute Idee,
wenn Thomas damit leben kann,
daß .hintergrund nicht horizontal und vertikal zentriert ist
bei sehr hoher Bildschirmauflösung (größer als 1024px).
FSt
Hallo
Antwort auf:
daß .hintergrund nicht horizontal und vertikal zentriert ist bei sehr hoher Bildschirmauflösung (größer als 1024px). Kein Problem, wenn szentriert sein soll, dann würd ich einfach
.hintergrund { background: #f00 url(bg.jpg) no-repeat 0px 0px; width: 1024px; height: 768px; margin: 0 auto;}
schreiben ...
Aber ich denke auch, dass man auf diesem Beispiel aufbauen und es Schritt für Schritt komplexer ausbauen und ausschmücken kann.
Gruss
Martin
Uncle_Tsebe
Hallo Sabine
Antwort auf:
Ich weiß nicht wie Deine Navigation aussehen soll und ich befürchte,
daß das Forum hier nicht dazu geeignet ist eine gesamte Webseite für Dich kostenlos zu erstellen.
war auch nicht meine Absicht. Sorry wenn das vielleicht so rübergekommen ist.
Das Problem ist nur ich hab da ein paar tolle Ideen für die Gestaltung aber mit der Umsetzung haperts halt. Geduld ist nicht meine Stärke ;-)
Werde mich aber trotzdem in das Thema HTML und CSS einarbeiten. Hilft ja alles nichts ;-)
Auf jeden Fall habe ich jetzt, dank euch (bzw. vor allem dir Sabine), eine Basis auf die ich aufbauen kann.
Diese eine Seite mit der Bildergalerie funktioniert ja genau so wie sie soll.
Und den Rest bekomme ich auch noch irgendwie hin.
Also nochmals danke :-)
Gruß.
Thomas
|
