Womit und wie baue ich eine Homepage?

Oookay, also schreibe ich das alles in einem normalen Editor und lade es dann hoch.
Gut, vielen Dank, dann werd ich mal mein Glück versuchen.
 
Halli Hallo,

ich möchte für meine Mutter eine Webseite kreieren. Allerdings ist sie was HTML angeht, gar nicht gut bewandert - ist auch nicht weiter schlimm. Sie benutzt zurzeit Jalbum und schnell Fotoalben zu generieren. Allerdings gibt es für Drupal kein Modul, welches eine Implemtierung unterstützt. Bei Joomla geht das nur per Iframe, was aber total veraltet ist.

Kennt ihr ein Programm, wozu es ein Modul gibt, welches diese Galerie schnell und einfach in ein CMS einbinden? Bei der Masse von Bildern würde es keinen Spaß machen, diese alle einzeln hochzuladen.

Ich bin bisher noch nicht so rechtfündig gefunden. Vielleicht kennt ihr ja (vorzugsweise für Drupal) ein Modul/Plugin, welches den Upload von mehreren Dateien erlaubt.

Bis dahin,

Lady Black
 
Vermutlich brauche ich nur kurz einen Denkanstoß, weil ich vor lauter Bäumen den Wald nicht mehr sehe, aber ich komm gerade einfach nicht drauf.

Ich habe einen Container (Content) welcher sich innerhalb eines Containers (wrapper) befindet, welcher so groß wie das aktuelle Fenster ist (100% bei height und width). Nun soll Content exakt in der Mitte sein und zwar sowohl vertikal als auch horizontal. Aktuell ist der Container jedoch nur horizontal gemittelt und ich weiß nicht wieso.

So sieht der CSS-Code aktuell dazu aus. Der Wrapper ist wie gesagt auf 100% gesetzt und Innen- und Außenabstände alle vorher auf 0 gesetzt.
Code:
#content {
    width:980px;
    height:500px;
    margin:auto;
    }

Ich wäre über jede Hilfe sehr dankbar :)
 
Nachdem ich letztes Mal hier so schnell tolle Hilfe bekommen habe, bin ich hier schon wieder mit einer Frage.

Ich habe eine Navigation, welche aus 5 Listenpunkten besteht, welche nebeneinander gefloatet wurden. Zwischen den Elementen soll jeweils 1 Pixel Platz sein, am Rand (also bei den beiden äußersten) soll aber kein Pixel frei bleiben.

Habe das jetzt so gemacht, aber es macht beim 1. dennoch 1 Pixel frei und daher rutscht das letzte Element eine Zeile tiefer.

In der HTML-Datei
Code:
<div id="navigation">
<ul>
        <li id="first"><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li class="current"><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
</ul>
</div>

in der CSS-Datei:
Code:
#navigation {
    width: 979px;
    height: 40px;
    }
 
ul {
    list-style: none;
    }
 
#navigation li {
    background-color: rgba(0,0,0,0.5);
    float: left;
    margin-left:1px;
    height: 40px;
    width:195px;
    }
 
#first{
    margin-left:0px;
    }

Hat jemand eine Idee wo der Fehler liegt oder eine alternative Lösungsmöglichkeit?

Wäre echt super. Danke schonmal im Voraus :hallo:

Edit: Ich habe es jetzt vorerst mit einzelnen Klassen gelöst, aber über eine andere Möglichkeit, wie ich nicht jedem Link eine Klasse zuordnen muss, wäre ich dankbar :)
 
Zuletzt bearbeitet:
Hallo,

versuche mal die angesprochene Klasse so zu definieren:

Code:
#navigation li #first

Alternativ gibt es noch Pseudeselektoren, mit denen du das erste, letzte oder xte Element ansprechen kannst. Den ersten li-Punkt kannst du zum Beispiel so ansprechen:

Code:
#navigation li:first-child

Das letzte li so:

Code:
#navigation li:last-child
 
  • Danke
Reaktionen: Ricki
Ach diese Pseudoselektoren kannte ich noch gar nicht. Das ist ja super praktisch. Damit werde ich es mal probieren, aber heute nicht mehr.

Vielen Dank, dann kann ich ja jetzt beruhigt ins Bett gehen :D

Edit: Hat wunderbar geklappt. Vielen Dank :)
 
Zuletzt bearbeitet:
*Staub wegpuste*

Ich bin gerade an einer Webseite zugange, die barrierefrei sein soll. Daher habe ich Accesskeys für die Navigation festgelegt und auch die Tabindex-Reihenfolge eingestellt.

Ich kann jetzt auch schön durchtabben und es zeigt mir auch schön an, wo ich gerade bin (durch :focus im CSS hinterlegt). Jetzt habe ich aber Unterpunkte in der Liste, bei denen wird sowohl die Formatierung aus dem CSS geladen, als auch der klassische hellblaue Rahmen außenrum angezeigt.

Hier mal der entsprechende Auszug aus der HTML:
Code:
<ul id="navi"> 
	<li class="active"><dfn>1. </dfn>Startseite</li>
	<ul id="subnavi"> <!-- Unterpunkte der Startseite -->
		<li class="active"><dfn>1.1 </dfn>Über uns</li>
		<a href="#" tabindex="6"><li><dfn>1.2 </dfn>Aktuelles</li></a>
...
	</ul> <!-- Ende der Unterpunkte -->
	<a href="#" accesskey="2" tabindex="1"><li><dfn>2. </dfn>Jugend- und Familienhilfe</li></a>
...    
</ul>

und hier der passende CSS-Auszug:
Code:
li.active,
li.active dfn,
#navi a li:hover,
#navi a:active li,
#navi a:focus li
{
	font-style: italic;
	color: #000;
	background-color: #b6ef7d;
}

Das Problem tritt nur bei den Untermenüpunkten auf (also 1.2 usw.)

Das Ganze muss nur im Chrome laufen. Totaler Quark, aber der Rest ist für die Schulaufgabe egal (und für Fallback und co reicht auch die Zeit nicht).

Hat jemand irgendeine Idee?

Edit:
Neben einigen seltsamen Fehlern, die ich da in geistiger Umnachtung eingebaut habe, habe ich auch eine Lösung gefunden:
einfach ein outline:none bei den Focus-Elementen gesetzt und das Problem hat sich verflüchtigt. Einfacher als gedacht :D
 
Zuletzt bearbeitet:
Ah schön, dass du da noch eine Lösung gefunden hast. Noch ein Hinweis von meiner Seite aus: ei <li>-Element darf meines Wissens nach nicht innerhalb eines <a>-Tags liegen :)
 
  • Danke
Reaktionen: Ricki
Ja, das war einer der Fehler, den ich noch zusätzlich gefunden habe, als plötzlich mein first-child bei der Liste nicht mehr ging :D

Keine Ahnung was da gestern schief gelaufen ist. Ich glaub ich bin einfach Urlaubsreif :D
 
Hey ihr :)
Ich schon wieder :D

Für eine kleine Webseite wurstel ich mich gerade durch javascript. Ich habe zwar Erfahrung mit anderen Programmiersprachen, mit javascript jedoch nicht wirklich.

Ich habe nun Divs, dessen Inhalt via document.all.box1.innerHTML verändert wird.

Nun habe ich bei einem Div der Fall, dass eine Funktion per Link-Klick aufgerufen wird und dieser Funktion wird nun auch ein Wert übergeben. Das Problem ist, dass diese Funktion außen " hat und innen '. Da das ganze aber in dem innerHTML-Code steht, schließen die " natürlich automatisch den Befehl wieder. Ändere ich alles innen in ' um, dann funktioniert natürlich gar nichts mehr.

Vielleicht hab ich auch einfach eine falsche Herangehensweise?
Um was ansich geht es? Ich habe mehere Divs mit Links nebendran und je nachdem welchen Link man anklickt, wird ein anderer Text angezeigt. In einem der Divs gibt es ein Hauptbild und darunter einige Links. Beim Hovern soll das Hauptbild durch ein anderes ausgetauscht werden. Beim rausfahren soll wieder das Ursprungsbild angezeigt werden.

Ich hoffe, ich habe euch mit dem ganzen Durcheinander nicht komplett verwirrt :D Wenn gewünscht kann ich heute Abend auch mal Code-Schnippsel liefern. Aktuell kann ich nur auf eine etwas ältere Version zugreifen, die zwar auch schon das Problem hat, aber wenn, dann will ich euch schon gerne Sachen aus der neuesten Version zeigen.

Danke schonmal im Voraus :)
 
Mit JavaScript kenne ich mich leider auch nicht besonders aus, aber üblicherweise haben Programmiersprachen doch "Escape-Zeichen", die man verwendet, um so eine unerwünschte Unterbrechung eines Befehls innerhalb des Codes zu unterbinden. Oft ist das ein Backslash, also in Deinem Fall vielleicht \" oder \'.
 
Ah an so etwas habe ich noch gar nicht dacht. Das klingt nach einer sinnvollen Lösung. Werde ich morgen früh gleich mal austesten :)

Danke für den Tipp :)
 
Hm, also irgendwie klappt das nicht. Vielleicht reden wir auch aneinander vorbei.

Ich hab jetzt einfach mal ein Codebeispiel:

Code:
document.all.box1.innerHTML ="
...
<img src='img/bild.jpg' id='teambild'>
...
<a href="#" onmouseover="bildNeu('img/bild2.jpg')" onmouseout="bildNeu('img/bild.jpg')">
Text
</a>
...
";

Wenn ich es nicht in das document.all.box1.innerHTML schreibe, dann geht es natürlich ohne Probleme. Sobald ich es da natürlich rein schreibe, spinnt es wegen der Anführungszeichen rum. Mache ich nun z.B. aus bildNeu('img/bild2.jpg') das hier: bildNeu(\'img/bild2.jpg\') geht überhaupt nichts mehr. Hab ich da irgendwas falsch verstanden in der Anwendung?

Danke schonmal :)
 
Wenn ich das richtig verstehe, ist document.all.box1.innerHTML quasi der "Container", und alles zwischen =" und "; der Code, oder? Dann musst Du alle ", die innerhalb dieser beiden umschließenden Anführungszeichen kommen, mit \ versehen, also etwa so:
Code:
[COLOR="Red"]document.all.box1.innerHTML ="[/COLOR]
...
<img src='img/bild.jpg' id='teambild'>
...
<a href=[COLOR="Blue"]\"[/COLOR]#[COLOR="red"][COLOR="Blue"]\"[/COLOR][/COLOR] onmouseover=[COLOR="Blue"]\"[/COLOR]bildNeu('img/bild2.jpg')[COLOR="blue"]\"[/COLOR] onmouseout=[COLOR="blue"]\"[/COLOR]bildNeu('img/bild.jpg')[COLOR="blue"]\"[/COLOR]>
Text
</a>
...
[COLOR="red"]";[/COLOR]
 
  • Danke
Reaktionen: Ricki
Jetzt habe ich es genauso gemacht. Vorher hatte ich die ' dadurch ersetzt und die " durch ' ersetzt.

Der Code wird jetzt nicht vorher unterbrochen, wird im Dreamweaver auch alles tadellos angezeigt. Es funktioniert jetzt auch fast überall, an einer Stelle spinnt es nach wie vor rum, aber ich vermute, da ist was anderes dran schuld.

Danke schön :)
 
Ich schon wieder. Mit dem selben in grün :D

Der Code von oben funktioniert inzwischen tadellos, alles kein Problem.

Da die Webseite jetzt gerade auch für Handys optimiert wird, ist mouseover und mouseout natürlich nicht so geschickt.
Habe jetzt den mouseout-Teil komplett gelöscht und den mouseover-Teil durch onclick ersetzt. Leider funktioniert das nicht. Gibt es bei onclick irgendwas bestimmtes zu beachten?

Hier mal der Code-Auszug.

Code:
...
<a href=\"#\" onclick=\"bildNeu('img/bild2.jpg')\">
Text
</a>
...

bildNeu ist eine Funktion:

Code:
function bildNeu (bild){
 document.getElementById("teambild").src=bild;
}

Hat jemand für euch eine Idee? Javascript ist für mich sowieso ein Buch mit sieben Siegeln und ich kämpfe mich da irgendwie so ein wenig durch.

Danke schonmal :)

Edit:
Eine Kollegin hatte den goldrichtigen Tipp: wenn ich das href weglasse, dann geht es. In dem Falle brauche ich das href jetzt zum Glück nicht so dringend. Dennoch würde ich gerne wissen, wieso das denn so ist?
 
Zuletzt bearbeitet:
Ich denke es liegt daran, dass href="#" zwar sozusagen nirgendwo hin verweist, aber dennoch nach dem Ausführen der Javascript-Funktion sofort den Click-Event "sieht" und seine Default-Aktion abarbeitet.

Indem du false zurückgibst sollte es eigentlich auch gehen:
Code:
...
<a href=\"#\" onclick=\"bildNeu('img/bild2.jpg')[COLOR="Red"]; return false;[/COLOR]\">
Text
</a>
...

Aber naja, da du gar kein <a> Element brauchst, könntest du ja auch aus Eleganzgründen <span> nehmen. ;)
 
  • Danke
Reaktionen: Ricki
Achso, ich glaub jetzt hab ichs geblickt. Es verweist mich ja dann wieder auf die eigentliche Seite und dort steht als Standardbild an der Stelle eben nicht bild2 sondern bild1, darum wird das sozusagen wieder auf 0 gesetzt. Macht Sinn.

Bei mir im Code steht zwar die ganze Zeit nicht href="#", das hab ich nur jetzt zu Kürzen hier gemacht, aber da verweist es ebenso auf die selbe Seite, nur zusätzlich noch zu einer bestimmten Stelle. Aber da wird's das selbe in grün sein.

Ich habe jetzt extra weiterhin einen Anker genommen, damit es auch Screenreader richtig erkennen (klar, es geht um Bilder, aber die haben immerhin einen Alt-Text). Oder ist bei der Verwendung von JavaScript in Bezug auf Screenreader eh Hopfen und Malz verloren?
 
Das scheint irgendwie sowas wie mein Privatthread zu werden. Haha.

Ich bin seit Tagen total im Stress und dadurch scheine ich Codetechnisch irgendwie total zu verblöden. Nachdem ich gerade schon 30 Minuten den Fehler beim Viewport gesucht habe und erst dann gemerkt habe, dass ich vh und vw verwechselt habe (schon wieder!) wende ich mich beim nächsten Problem jetzt einfach an euch. Hab jetzt schon knapp 30 Minuten die Seite angeglotzt und keine Idee mehr :D

Um was geht es?
Ich hab eine Navigationsleiste in einem nav-Container. Diese Navigation besteht aus vielen Listenpunkten und Anker-Elementen. Hab die Listenpunkte nebeneinander gefloatet. Jetzt steht aber alles zu weit rechts (und nicht am Anfang des Containers). Padding ist 0.

HTML-Code (vereinfacht)
Code:
...
 <div id="wraphead">
        	<img src="Images.svg" />
       		<nav>
        		<ul>
            		<li><a href="#">eins</a></li>
               		<li><a href="#">zwei</a></li>
                	<li><a href="#">drei</a></li>
                	</ul>
       		</nav>
</div>
...

CSS (Auszug):
Code:
...
#wraphead {
	width: 75vw;
	margin: 0 auto;
}

nav ul li {
	list-style-type: none;
	list-style-position: outside;
	float: left;
	margin-right: 35px;
}
...

Irgendwelche Ideen? Will ungern mit negativem Margin-Wert rumspielen.

Grüße und schon mal Danke

Leila :)
 
Ja, das war auch meine erste Idee, es steht nur kein margin-left. :/

Das einzige margin-left im Code ist das gerade von mir einfgefügte mit dem negativen Wert. Aber das finde ich eigentlich total unsauber und dämlich :/

Seltsam.
 
Im Beispiel wird nicht ersichtlich, wozu Du margin-right brauchst, vielleicht verträgt sich das nicht mit dem Rest? Die Positionierung der DIV-Container ist sowieso immer etwas schwierig, wenn man mehrere verschachtelt hat, ich komme da immer durcheinander, vor allem, wenn man dann auch noch unterschiedliche Ränder und Abstände definiert hat. ;)
 
  • Danke
Reaktionen: Ricki
Der rechte Abstand wird gebraucht wegen des Floats. Alle Links wären ohne Margin direkt aneinander gereiht.

Der obere div (also wraphead) hab ich jetzt durch <Header> ausgetauscht. Voll vergessen gehabt, dass es das auch noch gibt. Dieser ist aber in keinem anderen Div. Also das ist alles nicht noch weiter verschachtelt sondern liegt direkt im Body.
 
Noch n Schuss ins Blaue :D
In #wraphead hast du margin: 0 auto;
Schiebt dir das auto vielleicht alles rüber?
 
  • Danke
Reaktionen: Ricki
Gute Idee. Hatte ich gestern auch überlegt. wraphead selbst gibt es so jetzt nicht mehr, das hab ich jetzt durch header ersetzt. Hat aber nichts geändert. Hab es jetzt doch einfach mit negativem Margin-Left gemacht. Bin aber für weitere Ideen offen.

Ansonsten hab ich noch eine Frage, die so zwischendurch aufgetaucht ist.
Ich habe (an ganz anderer Stelle übrigens) einen Container, der 10vw vom Rand entfernt ist. Und bei einer kleinen Auflösung 0vw. Das ganze funktioniert auch einwandfrei, jedoch erst nach einem Reload der Seite. Der Kasten selbst hat eine Breite von 80vw. Diese Breite passt sich automatisch beim Verändern der Fenstergröße an. Für den späteren gewünschten Einsatz ist das total egal, da reicht Reload vollkommen aus. Mich würde nur mal interessieren, an was es liegt. Wenn ich die Werte übrigens in 10% und 80% ändere, löst sich das Problem auch nicht.
 
huhu,

keine Ahnung, ob ich dir helfen kann, aber ich stand vor kurzem vor einem ähnlichen Problem.

html
Code:
  <nav id="menue">
    <ul>
          <li><a href="#">The Artist</a></li>
          <li><a href="#">Artwork</a></li>
          <li><a href="#">News</a></li>
          <li><a href="#">Order</a></li>
          <li><a href="#">Contact</a></li>
    </ul>
  </nav>
css
Code:
#menue {
    width: 1000px;
    text-align: left;
    -webkit-box-shadow: 0px 0px;
    box-shadow: 0px 0px;
}
.Navi { design:inline;}
#menue ul li {
    display: inline;
    margin-left: 30px;
    width: 50px;
    height: 50px;
    
}
Ich habe meiner Navigationsleiste die Klasse .Navi zugeordnet und dieser dann gesagt, sie soll ein inline Element sein.

Inline-Elemente

Inline-Elemente erzeugen keine neue Zeile und sind im normalen Textfluß immer nebeneinander angeordnet. Es sei denn, sie sind zusammen breiter als das übergeordnete Element. Dann wird eine weitere Zeile eingefügt. Inline-Elemente dürfen Text und weitere Inline-Elemente aber in der Regel keine Block-Elemente enthalten.
Inline-Elemente teilen sich in ersetzende und nichtersetzende Elemente auf. Für ersetzende Elemente wie img, input und textarea kannst du Breite und Höhe angeben, für nichtersetzende Elemente wie em und span sind diese Eigenschaften unwirksam.

Die folgenden Elemente gehören zu den Inline-Elementen:
a, abbr, acronym, b, bdo, big, br, button, cite, code, dfn, em, i, img, input, kbd, label, map, object, q, samp, script, select, small, span, strike, strong, sub, sup, textarea, tt, var

basefont, font, s, u,

quelle: http://www.css4you.de
danach ging es bei mir. ich hab sie erst nicht nebeneinander bekommen. das floaten hat mir aber auch irgendwie nicht geholfen, bin nach ner Ewigkeit dann drauf gekommen meine Navileiste als Klasse anzulegen und die als inlineobjekt. jetzt ging es irgendwie damit ^^

habe das dann mit dem floaten gelassen und es stattdessen so gelöst.
Zum floaten, hast du unten drunter das Floating wieder gecleart?




edit und bei deinem 2. Problem... was genau ist vw? das sagt mir grad nichts, vielleicht steh ich aber auch auf dem SChlauch. Hast du deine Divs in einem großen, ganzen übercontainer? bei mir hat sich mal eine gewisse anzahl von grafiken immer am falschen rand orientiert, anstatt an meinem eigentlichen Container im Innern. nachdem ich dem dann gesagt habe, dass er eigentlich in dem Hauptcontainer ist, ging das... keine Ahnung, vielleicht ist man irgendwann betriebsblind und das hilft dir xD wenn nicht, dann äh... keine Ahnung ^^
 
Zuletzt bearbeitet:
  • Danke
Reaktionen: Ricki
Hallo und Danke erstmal für den ausführlichen Post :3

Wo genau hast du die Klasse festgelegt? Bei ul? Steht in deinem HTML-Code leider nicht dabei. Und was genau bewirkt design? Display kenn ich natürlich. Inline wäre auch eine Idee. Da die ganze Liste aber gar nicht in der selben Zeile wie irgendwas anderes ist, weiß ich nicht, ob das so sinnvoll ist an der Stelle? Werde ich morgen aber mal austesten.

Am Ende ist es natürlich wieder gecleart bzw. der float gar nicht erst gemacht. Hab das nur nicht geschrieben, da das Problem auch ohne den Codeschnipsel auftritt.
Code:
nav ul li:last-child{
	float: none;
	margin-right: 0px;
}

Zum Zweiten:
vw = viewport width (das entspricht der normalen Prozentangabe).
D.h. 80% = 80vw. Jetzt fragst du dich bestimmt, weshalb ich so einen Quark mache. Es gibt nämlich auch noch vw. Das ist viewport height. Das kann man mit Prozentangaben nicht ansprechen. Ich kann also damit sagen, dass mein Bild immer 100vw breit ist (also Vollbild) und 56,25vw hoch (damit wäre es dann immer 16:9). Oder ich kann es auch komplett seltsam anwenden und sagen, dass das Bild immer halb so hoch sein soll wie mein Fenster breit. Wieso man sowas machen sollte, weiß ich zwar gerade nicht, aber man könnte es theoretisch.

Meine ganzen Divs aus diesem Fall liegen in einem Wraper und dieser hat auch eine Breite von 100%. Die Positionierung der Divs stimmt ja auch, aber erst nach einem Reload. Also wenn ich das Fenster kleiner mache, dann wird die Box zwar kleiner, geht aber nicht näher zum Rand (was sie ja bei einem Abstand von 10vw tun sollte, wenn das Fenster kleiner wird). Mach ich jetzt einen Reload, dann ist die Box näher am Rand. Und zwar auch genau so nah, wie sie sein sollte. Für den späteren Einsatz, ist es auch vollkommen in Ordnung, wenn es erst nach einem Reload geht. Mich würde nur interessieren, ob es eben generell nur bei Höhe und Breite direkt geht und bei der Positionierung nicht.

Danke nochmal :)

Leila
 
sorry! ich kam leider nicht vorher hinein.

Ich habe gerade gemerkt, dass ich gar nichts mit der Klasse gemacht habe xD hatte ich wohl vor, dann ging es aber plötzlich so, deswegen werde ich die nun löschen ^^

also ich habe folgendes gemacht:

Div erstellt, bzw bei mir ist es jetzt eine Navigation, ich erstelle das mit Dreamweaver, ich versuche es aber jetzt mal so zu erklären was ich gemacht habe, ich hoffe dir hilft das!

diese Box, in der später meiner links sein sollen, heißt
#links

Html
Code:
<nav id="links">
    <ul>
      <li><a href="#">The Artist</a></li>
      <li><a href="#">Artwork</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Order</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  
  </nav>
und nun zum CSS

erst einmal
Code:
#links {
    background-color: #FFFFFF;
    height: 100px;
    width: 450px;
}
und nun habe ich aus meinem Listelement ul li noch eine ID zugewiesen. a, also den anker hab ich dabei draußen gelassen

Code:
#links ul li {

    display: inline;
    margin-left: 30px;
    width: 50px;
    height: 50px;}
danke dir für die Erklärung unten!! :)

ich hoffe das hat dir jetzt irgendwie geholfen. Ich les mich gerade erst wieder ein, nur mit code würde ich es nicht hinbekommen, weswegen ich das mit Dreamweaver mache, wie oben schon gesagt, wenn du noch irgendetwas wissen musst, kann ich gerne versuchen die nötigen Infos aus meinem Quellcode heraus zu schreiben :)
 
Danke für deine ausführliche Antwort. Aber da haben wir glaube ich voll aneinander vorbei geredet. Ich hab schon dein Grundprinzip verstanden, wie du das gemacht hast. Ich war nur etwas irritiert, weil du von einer Klasse gesprochen hast, die im Code nicht vorkam und dachte, da fehlt noch irgendwas.

Ich mach meines auch alles im Dreamweaver. Wobei ich das ganze Code ursprünglich mal wirklich komplett gelernt habe. Im Editor. Haha, das ist echt schon ewig her. Damals war das aber mit HTML5 und CSS3 alles noch in ferner Zukunft und ich habe leider irgendwann den Anschluss verpasst und stell mich dann immer etwas doof an, wenn es um "neue" Techniken geht. Schade, dass ich es in der Schule immer noch "auf die alte Art" gelernt habe :(
 
ah okay xD ja ich dachte ich erkläre es nochmal genauer, weil ich mich bei der Klasse so vertan habe. Wie gesagt, die hab ich gar nicht eingebunden, hatte es aber so in Erinnerung :D total seltsam, ich hätte schwören können! hihi

ah super, dann reden wir zumindest irgendwie vom selben programm, das freut mich :)

ich komme ursprünglich vom GoLive und wollte nun mal umsteigen.

Ich hab auch gleich mal eine Frage, ich kapiere das, was dazu im Internet beschrieben wirdd nicht so ganz, man konnte bei GoLive das alles so einstellen, dass ich den Kopfbereich eingestellt habe, also header, logo usw und dann unter der NAvigation einen Bereich, der einfach leer war. Und wenn man dann oben auf die Links geklicckt hat, dann öffnete sich das neue fenster in diesem Feld unten drunter. Also sozusagen ne neue Site in einem Div. Geht das?

dann musste ich nämlich danach nur noch das aufbauen, was sich später in dem unteren Feld öffnen sollte...

oh man, das is jetzt so blöd beschrieben, ich hoffe man versteht überhaupt, was ich sagen will -.-


wenn das nicht geht, bau ich halt jede Seite einzeln auf.
 
Also so 100% verstehe ich nicht, was du möchtest, ich kenne aber GoLive auch nicht. Was du beschreibst, klingt aber nach Frames. Das ist ein ziemlich veraltetes und sehr verpöntes Prinzip, bei dem eine Seite im Grunde aus mehreren Einzelseiten zusammengebaut wird. Du hast dann beispielsweise eine Seite für die Navigation und diese Seite ist immer ganz oben und dann eine Seite für den Footer, diese Seite ist dann immer ganz unten usw.

Nutzt du denn für die Seite ein CMS? Normalerweise kann man da das nämlich auch einrichten, dass du sozusagen eine Vorlage hast und dann nur noch jeweils den Inhalt abändern musst. Das wäre die moderne Variante von den Frames sozusagen.

Ansonsten kann man ja auch einfach einen Code in einen anderen Code einbinden. Bin mir aber grad unsicher, ob das bei reinem HTML auch geht. Hab das bisher nur bei PHP-Seiten gemacht. Da hatte ich dann bspw. immer eine Datei mit dem Code des Headers und hab die einfach immer oben eingebunden.

Ich hoffe, ich konnte mit meinem seltsamen Geschwurbel irgendwie helfen :D
 
ja ich habe im Netz auch immer nur was gefunden, dass man das mit php machen sollte xD

cms hab ich nicht. ich habe mir damals contao gekauft, das problem war, dass ich das wegen anderer foren, die auf meinem rechner sind, nicht auf ein neues php einstellen kann und deswegen läuft nur die ganz, ganz alte variante von contao. Ich habs dann gar nicht erst versucht ... war dann blöd, dass ich es gekauft habe, aber naja -.- jetzt wollte ich mit dreamweaver voran kommen, das kalappt auch ganz gut, wollte dies nur jetzt eleganter lösen. Ich hab eigentlich alles im css eingestellt, ich muss also quasi nur immer den Code kurz kopieren und kann dann selbst eben fix bestimmte Dinge abändern, ich hab mir also ein manuelles, abgespecktes cms gebaut und komm damit klar, dachte nur ich könnte das noch etwas klüger lösen, aber dann muss es so gehen ^^

jetzt auch noch was in php zu wurschteln, ich glaube da bin ich dann überfordert :D

danke dir für die Hilfe, ich glaub du hast mich richtig verstanden :D
 
Mit php ist das zwar wirklich nur eine Zeile, aber nur deswegen das alles als php-Datei abzuspeichern, fände ich jetzt auch etwas überdimensioniert. Gerade zum Testen ist das ja auch blöd, da du dann auch entweder XAMPP oder vergleichbares brauchst oder es immer hochladen musst.

Contao kenn ich nicht. Ist das ein CMS? Wir arbeiten normal mit Typo3, was ich aber zum Code viiiieeel zu kompliziert finde und WordPress nutze ich privat häufiger. Das ist vermutlich für dein jetziges Projekt zu spät, aber das ist vielleicht für die Zukunft ganz praktisch? Kostenlos, in fünf Minuten installiert, ach was, fünf Sekunden und auch das Einbinden in den HTML-Code ist einfach. Ist zwar dann später alles PHP, aber das ist alles genau dokumentiert (auch in Deutsch) und eigentlich schnell verstanden :)
 

Hm, ich dachte Contao ist kostenlos und frei? Ist jedenfall das CMS welches ich als nächstes irgendwann in mein Angebot aufnehmen wollte. Oder zumindest mal näher unter die Lupe nehmen wollte - hab jedenfalls schon ein dickes Buch hier rumliegen.


PS. Meine erste eigene Seite hab ich 1993 mit XEmacs auf einem Instituts-Rechner geschrieben. :cool: Hahaha, und ich weiss noch, wie ich als HiWi für die Dozenten einen Schnellkurs "Das Grundgerüst einer Homepage" gehalten hab! :lol:
 
also mein contao hat was gekostet, aber ich hab mir auch das buch dafür bestellt. Auf Amazon, also das hat auf jeden Fall was gekostet :) aber ich weiß jetzt nicht, ob das Programm an sich was kostet... hmm..

@Ricki: ja ist ein cms. Vielleicht überlege ich in einigen Jahren nochmal, ich hoffe nun einfach, dass es ein Design ist, was sich lange, lange hält, was ich nun bastel :) ich habe jetzt ein Jahr gewartet, mir die einzelnen Parts in Photoshop erstellt und so. Ein Jahr lang konnte ich es mir ansehen und überlegen und satt gesehen habe ich mich immer noch nicht, nun habe ich mich entschlossen es endlich nach zu basteln und bisher klappts echt super :D




wie geht ihr denn da immer vor? Ich bin ein ziemlich visuell ausgelegter Mensch, also wenn es um Homepages geht. Ich zeichne mir alles auf, male auf Papier die Zusammenhänge, zeichne mir die Strukturen auf und wenn dann langsam was entsteht in meinem Kopf, dann mache ich mir in Photoshop ein Bild mit Ebenen. Dann baue ich alles nach :D
 
Ich gehe da immer ähnlich vor. Ich arbeite häufiger auch mit diesen Karten hier (http://uxkits.com/products/website-deck-of-cards) um die Grundstruktur zu erstellen. Dann haben wir im Büro eine Wireframe-Bibliothek für InDesign erstellt. Da kann man verschiedene Raster einfach reinziehen und hat schon verschiedene Basisblöcke z.B. für Text, Slider, Navigation usw.

Wenn dann der Grundaufbau steht, wird das ganze in InDesign erstellt und dann eben später umgesetzt. Das mache ich dann mit dem Dreamweaver.

Wobei ich sagen muss, dass es beruflich bei mir meist so aussieht, dass die Umsetzung extern erfolgt und dann auch gleich ein CMS eingebunden wird. Ich bekomme dann das rohe Theme und fülle es mit Inhalten.

Bei kleinen Projekten, wird es entweder ohne CMS von mir umgesetzt oder mit Wordpress.
 
Da ja zum Hochladen von Dateien auf den Webspace gerne FileZilla benutzt wird, wollte ich euch mal auf eine Sache hinweisen, auf die ich erst gestern - nachdem ich FileZilla seit Jahren benutze - aufmerksam geworden bin: Falls ihr den Server-Manager benutzt, und dort bei den Verbindungen Passwörter eingetragen habt, dann sind diese Passwörter ganz einfach aus der Datei sitemanager.xml auszulesen! Bis vor einigen Monaten standen die dort drin wohl sogar im Klartext! Inzwischen werden sie zwar kodiert, aber einfach mit Base64, was keinerlei Verschlüsselungsschutz bietet. (Dafür ist Base64 auch nicht gedacht.)

Ich werd FileZilla auch in Zukunft benutzen, aber ohne Passwörter speichern zu lassen.

PS. Es gibt auch eine Datei recentservers.xml - ggf. sind auch dort die zugehörigen Passwörter gespeichert. Ich hab die Datei komplett gelöscht.
 
Zuletzt bearbeitet:
Ach das machen die immer noch so?
Vor einigen Jahren, als mein alter FTP-Manager einfach nicht mehr zeitgemäß war, hatte ich kurz FileZilla worauf hin ein Technikbekannter beinahe einen Herzanfall erleiden musste. :D

Seitdem nutze ich Cyberduck :)
 
Besonders sicher sind die nicht gespeichert, das stimmt. Allerdings gilt das wohl auch für die meisten anderen Passwörter, die man so auf dem PC gespeichert hat, von daher sehe ich das nicht unbedingt als Einschränkung. Wer seinen Rechner absichern will, sollte die Festplatte komplett verschlüsseln, denn selbst wer das Passwort des Benutzerkontos nicht überwinden kann oder will, kommt jederzeit an die Daten, indem er die Festplatte ausbaut und an einen anderen PC anschließt.
 
Ja irgendwie hatte ich den Beinahe-Herzanfall dann erst gestern... Eigentlich war meine Selbsteinschätzung bisher gewesen, nicht gerade eben blauäugig durch Leben zu tappern. Zumindest was solche Dinge betrifft. ;)

Ok, man könnte auch gleich alles komplett verschlüsseln, aber ohne diese Massnahme finde ich offene Zugangsdaten (abhängig natürlich wofür) doch etwas heikler als irgendwelche mp3s oder meinetwegen sogar auch den PC-Benutzer-Zugang oder sowas.

Naja, für mich war's jedenfalls neu, und wenn man's weiss kann man das Feature ja leicht vermeiden. Ansonsten, keine Panik. :)


Cyberduck? Gleich mal anschauen, thx.
 
Zuletzt bearbeitet:
Hallo :)

Nach langer Zeit wollte ich mal wieder eine Webseite erstellen (nichts kompliziertes) und alles hat wunderbar geklappt, bis ich beschlossen habe, die Navigation in eine andere *.php-Datei auszulagern und über

<?php
include ("navi.php");
?>

in z.B. die index.php einzubinden.

Sobald ich die index.html als index.php abspeichere (also ohne die Navigation überhaupt auszulagern!), werden mir im Browser keine Umlaute mehr angezeigt bzw. stehen dort immer Kästchen mit Fragezeichen.

Die Datei index.php sieht (noch mit Navigation) so aus:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
[B]<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">[/B]
<title>Willkommen auf ...</title>
<link rel="stylesheet" type="text/css" href="abschluss.css">

</head>
<body>
<div id="wrapper">

<div id="kopf">
<h1>Willkommen auf ...</h1>
</div> <!--Ende kopf-->

<div id="menue">

<ul>
<li><h4>Allgemein</h4></li>
<li><a href="home.html">Startseite</a></li>
<li><a href="kontakt.html">Kontaktmöglichkeit</a></li>
<li><a href="abk.html">Abkürzungen</a></li>
</ul>

<hr>

<ul>
<li><h4>Anderes</h4></li>
<li><a href="hilfe.html">Hilfe in Bildern</a></li>
</ul>
</div>

<div id="inhalt">

</div><!--Ende inhalt-->

<div id="fuss"></div><!--Ende fuss-->

</div><!--Ende wrapper-->
</body>
</html>

Ich dachte immer, die dick geschriebene Zeile wäre dafür verantwortlich, dass Umlaute korrekt dargestellt werden. Solange das Format *.html ist, funktioniert es ja auch anstandslos.
Und außer dem Dateiformat habe ich nichts verändert...

Muss man bei php noch etwas anderes einfügen (und wenn ja: wo?), damit Umlaute dargestellt werden?
Google hat mir einige Ergebnisse ausgespuckt, bei denen noch mehr php verwendet wurde.
Ich hab aber schon einmal (problemlos) die Navigation ausgelagert, auch mit php und habe im "alten Quelltext" nichts hilfreiches finden können...

Weiß jemand Rat? :ohoh:
 
Zuletzt bearbeitet:
Also sobald auch nur eine Zeile php-Code dabei ist, muss die Datei auf jeden Fall auf .php enden. Die navi muss also keine php-Datei sein (solange es nur die Liste wie im Beispiel ist).

Nur mal so ins blaue geraten: Hast du sowohl bei der index als auch bei der navi den entsprechenden meta-Tag drinstehen?
 
Danke für die Antwort :)

Das Problem tritt ja leider auch unabhängig von der ausgelagerten Navi auf.

Wie geschrieben: Alleine das Ändern des Dateiformats von *.html auf *.php bringt mit sich, dass die Umlaute nicht mehr korrekt dargestellt werden.

Ich habe jetzt mal die Navi ausgelagert (in "navi.html") und den meta-Tag eingefügt (ist der da richtig oder muss noch was dazu?) und auch die index.php abgeändert:
Dasselbe Ergebnis.

index.php
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/Strict.dtd">
<html> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Willkommen auf...</title>
<link rel="stylesheet" type="text/css" href="abschluss.css">
</head>

<body>
<div id="wrapper">
<div id="kopf">
<h1>Willkommen auf ...</h1>
</div> <!--Ende kopf-->

<?php 
include ("navi.html"); 
?>

<div id="inhalt">

<p>Test text wäwöwü blä bpü bpö ?</p>

</div><!--Ende inhalt-->

<div id="fuss"></div><!--Ende fuss-->

</div><!--Ende wrapper-->
</body>
</html>

navi.html
Code:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<div id="menue">
<ul>
<li><h4>Allgemein</h4></li>
<li><a href="home.html">Startseite</a></li>
<li><a href="kontakt.html">Kontaktmöglichkeit</a></li>
<li><a href="abk.html">Abkürzungen</a></li>
</ul>

</div>

Bis auf die Umlaute wird alles korrekt angezeigt (siehe Anhang).
 

Anhänge

  • Problem.jpg
    Problem.jpg
    19,2 KB · Hits: 7
Zuletzt bearbeitet:
Wenn du ein Charset vorgibst, musst du die Datei auch in diesem Charset speichern. Notepad ++ kann das, aber wahrscheinlich auch jeder andere bessere Editor.

Auf ISO-Charsets solltest du allerdings verzichten. Die sind seit mindestens 10 Jahren überholt. UTF-8 ist der Stand der Technik und macht bei konsequenter Nutzung wesentlich weniger Probleme.
 
Meta-Angaben müssen immer im "Head"-Bereich einer Seite stehen.

Eigentlich macht das auch gar keinen Sinn, das in der Datei einzufügen, das war nur so ein Schuss ins Blaue, an was das liegen könnte. Wenn es aber eh scheinbar vom Dateiformat abhängt, klingt die Idee von sims-2-spieler sowieso sinnvoller.
 
Obwohl ich mich erst anhand der Tipps rumgooglen musste, weil ich nicht wirklich so viel Ahnung davon habe, klappt es jetzt!
(Hab die Datei mit Notepad++ geöffnet und den anderen Tag eingefügt -> Encoding -> Convert to UTF-8 und wieder gespeichert. Ich hoffe, dass war der richtige Weg :lol:)

Zumindest die obige Testseite mit dem Testtext funktioniert. Jetzt kopiere ich in diese Grundgerüst meine Inhalte und hoffe, dass es immer noch funktioniert :D

Vielen Dank!
 

Zur Zeit aktive Besucher

Zurück
Oben Unten