ich krieg die website net auf die reihe
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
ausrichten
bild
bildschirm
code
dank
design
helfen
hintergrundbild
http
ignorieren
index
inhalt
jemand
nutz
problem
tabelle
text
url
zeile
zweiten problem
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
poste am besten mal den link der Website und die probleme damit und dann sehen wir weiter
edit: poste auch was du verändert hast/haben willst, dann kann man besser nachvollziehen, wenn etwas nicht klappt und warum...
Beitrag zuletzt geändert: 24.8.2010 9:56:20 von andercross -
das ging ja schnell......
leamarfri.lima-city.de
also, meine probleme:
1. Der Text der auf dem Hintergrundbild stehen sollte, also der Inhalt, liegt dahinter.
2. selbes Problem besteht mit dem headertext
3. das hintergrundbild sollte weiter rechts sein.
Hab bestimmt die totalen idiotenfehler gemacht, is mir voll peinlich, aber alle seiten, wie selfhtml etc. haben mich nicht weiter gebracht.... -
also um mal anzufangen, das hab ich bisher gefunden:
-Das einne Bild auf der Startseite soll ja vermutlich ein hintergrundbild sein. Du hast es aber falsch gemacht ^^
so gehts richtig: http://de.selfhtml.org/html/dateiweit/hintergrundbild.htm
-Zum zweiten problem: Fertige eine tabelle an, in der einen spalte die Navigation in der anderen Der ganze rest...
Also ungefär so:
-----------------------------------------
| link | Überschrift
| link | Text
------------------------------------------
http://de.selfhtml.org/html/tabellen/index.htm
oder du fertigst ein CSS design an, aber der obere Weg geht meiner meinung nach schneller und ist einfacher. Grad erst gesehen, du hast ja ein design
. Wenn du das behalten willst kann ich dir mit dem problem net helfen, da ich nie css benutze 
-und zum letzten Problem: ein hintergrundbild erstreckt sich über die ganze fläche des Bildschirms, des brauch man net verschieben
edit: selfhtml hat doch geholfen
hoffe hab dir geholfen
mfg Daniel
Beitrag zuletzt geändert: 24.8.2010 10:54:31 von andercross -
juhu, zu 1: der text ist jetzt auf dem hintergrundbild. vielen dank.
das mit den tabellen wars jetzt dann noch net, wollt schon das design beibehalten. aber danke trotzdem.
und das bild wollt ich halt gern in der rechten spalte zentriert haben und nicht auf dem bildschirm....
aber sehr lieb, dass du mir weitergeholfen hast. bin ich ja schon etwas weiter. Und vielleicht hat noch jemand ne idee
gruß sylvia -
also zum ausrichten hilft dir der link weiter: http://de.selfhtml.org/html/grafiken/ausrichten.htm
Aber damit das Bild dann so sitzt wie du es haben willst, musst du noch ein wenig rumprobieren
Viel spaß dabei
edit: http://www.homepage-buttons.de/html-kurs/text-ausrichten.html
hier wird erklärt, wie du den text auch ausrichten kannst...
mfg Daniel
Beitrag zuletzt geändert: 24.8.2010 11:20:25 von andercross -
andercross schrieb:
also um mal anzufangen, das hab ich bisher gefunden:
-Das einne Bild auf der Startseite soll ja vermutlich ein hintergrundbild sein. Du hast es aber falsch gemacht ^^
so gehts richtig: http://de.selfhtml.org/html/dateiweit/hintergrundbild.htm
Falsch andercross.
Das ist eine bekannte Methode um hintergrundbilder zu erzeugen, die sich dynamisch der Fenstergröße anpassen.
Bitte diesen TIp ignorieren (!!!!)
andercross schrieb:
-Zum zweiten problem: Fertige eine tabelle an, in der einen spalte die Navigation in der anderen Der ganze rest...
Also ungefär so:
-----------------------------------------
| link | Überschrift
| link | Text
------------------------------------------
http://de.selfhtml.org/html/tabellen/index.htm
Bitte auch das ignorieren Tabellen sind hier total ungeeignet.
andercross: never ever nutze tabellen zur Layoutgestaltung deiner Seite (!!)
andercross schrieb:
oder du fertigst ein CSS design an, aber der obere Weg geht meiner meinung nach schneller und ist einfacher. Grad erst gesehen, du hast ja ein design. Wenn du das behalten willst kann ich dir mit dem problem net helfen, da ich nie css benutze
-und zum letzten Problem: ein hintergrundbild erstreckt sich über die ganze fläche des Bildschirms, des brauch man net verschieben
richtig ist: dieses Hintergrundbild mit dieser Methode erstreckt sich über die ganze Breite, andercross !!!
-
simuliertes schrieb:
Bitte auch das ignorieren Tabellen sind hier total ungeeignet.
andercross: never ever nutze tabellen zur Layoutgestaltung deiner Seite (!!)
Muss nicht unbedingt so sein, ich finde das viel besser, da die Website dann auch auf verrschiedenen auflösungen klappt, sogar aufm Handy ohne scrollbar ^^
simuliertes, du musst ein wenig über die standarthomepage hinausblicken, dann kann man auch aus einem angeblichen "never ever" was richtig schickes machen
Beitrag zuletzt geändert: 24.8.2010 11:26:09 von andercross -
hilfe, soviel info auf einmal......
also, text ausrichten hab ich allein hinbekommen (applaus bitte)
das mit dem bild halt noch net und der header (heißt doch so) ist auch nicht so wirklich da wo er hinsoll.... ich geh jetzt mal eure antworten nochmal durch.....
und nee, den tabellentip hab ich auch mehr oder weniger ignoriert..... habs mir angeschaut, aber das ist es noch nicht.... ich lad die seite nochmal im aktuellen zustand hoch.....
edita: @simuliertes: gut, soweit verstanden, soll alles ignorieren, irgendwelche lösungsvorschläge????? uups hat sich überschnitten, ich teste mal.....
Beitrag zuletzt geändert: 24.8.2010 11:41:29 von leamarfri -
Hier alles ausgebessert:
Jerdenfalls , so wie ich denke wie du das wolltest...
<html> <head> <title>Meine schöne neue Website</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta name="description" content="..."> <meta name="keywords" content="..."> <meta name="language" content="de"> <meta name="robots" content="index, follow"> <div id="hintergrund"> <style type="text/css"> html, body { margin:0; padding:0; width:100%; height:100%; overflow:hidden; } body { font-family:comic sans ms;margin: 0; } #bereichskopf { margin: 0 0 0 200px; background-color: #ffcc99; height: 150px; text-align: center; font-size: 1.8em; color: white; z-index: 4; } #inhalt { /* background-color: #7FD4FF; */ position:absolute; margin-left: 280px; text-align: left; padding:20px 100px 30px 200px; z-index:3; } #hintergrund { position:absolute; width:100%; height:100%; z-index:1; } #scrollbereich { position:absolute; top:0; left:0; height:100%; overflow:auto; z-index:2; background-color: #ffcc99; width: 200px; margin: 0px auto; } </style> </head> <body> <div id="bereichskopf"> <p> Leandra und Marcel sagen Hallo</p> </div> <img id="hintergrund" src="http://leamarfri.lima-city.de/My-Cuttles-Angels-733.jpg" alt="" title="" /> <div id="scrollbereich"> <ul> <li><a href="index.html"> Startseite </a></li> <li>Verlauf der Schwangerschaften</li> <ul> <li><a href="SSLea.html"> Leandra</a></li> <li><a href="SSMarcel.html"> Marcel </a></li> </li> </ul> <li>Unsere Horoskope</li> <ul> <li><a href="HoroLea.html"> Leandra </a></li> <li><a href="HoroMarcel.html"> Marcel </a></li> </li> </ul> <li>Unsere Entwicklung</li> <ul> <li><a href="EntwLea.html"> Leandra </a></li> <li><a href="EntwMarcel.html"> Marcel </a></li> </li> </ul> <li><a href="Zuhause.html"> So wohnen wir </a></li> <li><a href="Fotoalbum.html"> Zum Fotoalbum </a></li> <li><a href="Gaestebuch.html"> Gästebuch </a></li> <li><a href="Kontakt.html"> Kontakt </a></li> <li><a href="Impressum.html"> Impressum </a></li> </ul> </div> <div id="inhalt"> <p align="center"><font face="comic sans ms" color="#0000FF" size="+2"> <b>Herzlich Willkommen.</b></font></p> <p align="center"> Hier entsteht unsere neue Website.</p> <p align="center">Hier sehen wir uns bald wieder.</p> </div> </body> </html>
Ein paar worte:
Du hattest bei <img> , eine </div> rumliegen das nie geöffnet wurde.
Schau dIr die css-eigenschaften z-index und margin an.
Bei #bereichskopf hattest Du im css-code ein s vergessen
Beitrag zuletzt geändert: 24.8.2010 11:40:56 von simuliertes -
Schnucki, das ist nahezu perfekt....... kann man denn nun den "inhalt" in der rechten spalte zentrieren? und evtl. den Text des navibereichs tiefer setzten? das ist das einzige, was mir noch net gefällt.....
aber ich danke schonmal für die hilfe.... problem erkannt, problem gebannt..... Obwohl scriptly das so gar nicht mag
editha:
okay, das mit dem s hab ich gefunden, wie peinlich....
das mit margin und z-index sehe ich , aber so recht kapieren tu ich es net, abr hab damit schonmal den text da wo er hinsoll, hab margin bei inhalt auf 400 gesetzt, so ist gut, nur das hintergrundbild und der text des navibereichs wollen net wie ich, sind bestimmt männer
aber für den anfang war ich ja noch net so schlecht....
noch ne editha: jetz hab ich das mal hochgeladen und bumm das nächste prob: über dem bereichskopf ist ein weißer balken liegt das am browser? hab firefüchschen.....
Beitrag zuletzt geändert: 24.8.2010 12:11:28 von leamarfri -
Meinst du das rot umkreiste?
http://www.bilder-upload.eu/upload/33L7mRMxir0vHtU.png
Ja das ist von Firefox -
wie rot umkreist? ähm nee, habs jetzt fast schon so, wie es sein soll, bloss das bild will noch nicht..... meine güte, ich weiß schon warum leute damit geld verdienen?
-
andercross schrieb:
simuliertes schrieb:
Bitte auch das ignorieren Tabellen sind hier total ungeeignet.
andercross: never ever nutze tabellen zur Layoutgestaltung deiner Seite (!!)
Muss nicht unbedingt so sein, ich finde das viel besser, da die Website dann auch auf verrschiedenen auflösungen klappt, sogar aufm Handy ohne scrollbar ^^
simuliertes, du musst ein wenig über die standarthomepage hinausblicken, dann kann man auch aus einem angeblichen "never ever" was richtig schickes machen
Ja gut, passt schon, ich will mit Dir jetzt keine Grundsatzdiskussion über das für und wieder von tabellen-layouts führen, das würde hier den Rahmen sprengen & ist nicht Thema.
leamarfri:
Zeile 10 (im <head>-bereich):
Bitte nimm das weg das hatte ich übersehen:
<div id="hintergrund">
dann noch folgendes beim css-code von body hinzufügen (ca 22te Zeile):
body { font-family:comic sans ms; margin: 0; background-color: #ffcc99; }
Neu ist background-color: #ffcc99; und sorgt, dadurch das es bei body sthet, dafür das der gesamte Hintergrund Deiner webseite in dieser Farbe dargestellt wird.
Bei #hintergrund (ca 47te Zeile) nun folgendes:
margin-left: 200px;
Erklärung:
Dein Menue auf der linken Seite ist exakt 200px lang (bei #scrollbereich steht width 200px).
mit "margin" definierst Du einen unsichtbaren rahmen der das bild, weil es margin-left ist, 200px nach rechts "drückt".
genuaso gibt es auch margin-left ,margin-top,usw.
Die Kurzform davon ist einfach alle 4 werte hinter "margin" im uhrzeigersinn von oben (margin:oben rechts unten links= margin: 0 0 0 200px; zBsp)
Du wirst allerdings ein neues Problem haben.
Dein Hintergrundbild passt sich ja dynamisch der Auflösung des Bildschirms bzw Größe des Fensters an.
Der Text tut das nicht.
Öffne Deine webseite und ändere die Größe deines browsers oder die Auflösung deines bildschirms.
Wenn Du mit dem leben kannst was Du siehst ok, wenn nicht,
tja..
werden wir sehen.
-
moin simuliertes !
also, die vorgeschlagenen Änderungen vorgenommen. Lediglich bei hintergrund hab ich margin left auf 100 gesetzt, jetzt ist das bild da wo ich es haben wollte. War auch schon selbst auf die Idee gekommen, aber es klappte nicht, wahrscheinlich wg. <div id="hintergrund">, keine Ahnung.
EDIT: Kann mir damit nochmal jemand helfen, bitte Nja, Aber nun noch immer das Problem, mit dem repeat oder not repeat. Wie muss ich das wo setzen, damit das bild wie ein Wasserzeichen fungiert? Ich habs zwar bei selfhtml gelesen, aber ich setz es anscheinend immer an die falsche stelle.
Und ja, wenn ich die Browsergröße verändere, dann gefällt mir das nicht wirklich. Nur um das ganze im Tabellenformat zu machen, bin ich noch zu unfähig. Meine Testpersonen haben es alle so gesehen, wie ich es wollte.
Naja, ansonsten passt es ja fast schon, oder auch nicht. Wir werden sehen. Das wird wohl zum Lebensprojekt....
LG und Danke
Beitrag zuletzt geändert: 25.8.2010 14:56:24 von leamarfri -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
