Website erstellen

Smalltalk
Benutzeravatar
Patsche
Beiträge: 3255
Registriert: 21.06.2013 01:47:54
Lizenz eigener Beiträge: MIT Lizenz
Wohnort: /home/10001101001

Re: Website erstellen

Beitrag von Patsche » 05.02.2015 14:39:26

ctwx hat geschrieben:Deine Haupt-CSS-Datei hast du mittels <link rel="stylesheet" media="screen" href="style.css" type="text/css" /> eingebunden; ohne eine media-screen-Angabe, wie du es bei der anderen Datei gemacht hast. Diese wird also IMMER eingelesen und ausgewertet, und deine andere CSS-Datei, die du mittels <link rel="stylesheet" media="only screen and (max-width: 1000px)" href="style-1000.css" /> wird nur eingebunden, so lange die Breite unter 1000px ist.
Habe das jetzt dahingehend geändert:

Code: Alles auswählen

<link rel="stylesheet" media="only screen and (min-width: 1001px)" href="../style.css" type="text/css" />
<link rel="stylesheet" media="only screen and (max-width: 1000px)" href="../style-1000.css" type="text/css"/>
ctwx hat geschrieben:Schau mal hier: https://img.bi/#/EvPbcPf!GnWlNhqKu8xNCS ... YZSZpkY0d9 Dadurch habe ich den Fehler erst gefunden. :D
Gefixxt. Habe in Zeile 22 geguckt gehabt. ;)
Revod hat geschrieben:Was dem Kopfbereich angeht, sage denen die ihr Name über das ganze Monitor Fenster verteilen haben wollen auf die Art sich wie vor dem Kopf gestossen die Besucher fühlen.
Habe jetzt den Kopfbereich verkleinert. Ist das so okay?

Benutzeravatar
Revod
Beiträge: 3788
Registriert: 20.06.2011 15:04:29
Lizenz eigener Beiträge: MIT Lizenz

Re: Website erstellen

Beitrag von Revod » 05.02.2015 17:44:46

Patsche hat geschrieben:.....
Revod hat geschrieben:Was dem Kopfbereich angeht, sage denen die ihr Name über das ganze Monitor Fenster verteilen haben wollen auf die Art sich wie vor dem Kopf gestossen die Besucher fühlen.
Habe jetzt den Kopfbereich verkleinert. Ist das so okay?
Ich finde nun das sieht echt um Längen viel besser aus, weil das Ganze nicht unbedeutend auf das Auge wirkt durch das "riesiege" Kopfbereich.

Doch was denkst Du und dem Auftraggeber über meine Aussage, seht ihr es ähnlich wie ich bezüglich das Kopfbereich (Aus meiner Sicht ruhig ca. 15% in der Höhe noch verringern, dich das wirklich das was ich gerne mag, muss nicht für andere gelten)? :)

Die Ränder der Unterteilung finde ich es noch etwas zu grob / dick, ca. 2 bis Maximum 3 px Maximum, inkl. Schattierung sollten ausreichend sein. Die Horizontale Linie, dort wo sie sich mit dem oberen Rand der Navigation treffen verdoppelt die die Stärke dadurch zusätzlich. Nun kommt die Style Frage / Bedürfnisse.

Eine <hr /> kann man zwar stylen wird aber nicht von jedes Browser unterstützt, bei Opera z. B. werde Style ganz anders als im FF, W-Explorer und andere (ich selber style nur für den FF- Iceweasel- Palemoon, wer was anderes nutzt ist selber Schuld :twisted: ).

Den obersten Rand der Navigation würde ich durchsichtig stylen und die Senkrechten angrenzend zur horizontale Linie setzen, das geht wenn man das obere Rand mit 0px definiert. Die Ränder sollten in der Sicht gleich aussehen, Farbe und Form. Stell Dir vor Du kaufst ein Auto der die Umrandung der Fenster bei jedes Fenster ganz anders aussehen würde?

Gesichtsbuch, Twitter und YouTube würde ich den linkes Abstand gleich wie die der Linksliste setzen, oder die Links mehr nach links verschieben und die Umrandung passend dazu schmälern.

Im Quelltext sehe ich zwischen den <p> die <br> hast Du schon gewusst, dass die <p> die Zeilenumbrecher sind, die man auch im css stylen kann?

Code: Alles auswählen

p,text1
{ margin-top: 20px;  margin-botom: 0px; }
Auf die Weise brauchst Du keine <br> zwischen de Syntax, die sind für nur innerhalb eines längeres Text um Abschnitte zu erzeugen gut., 2 <br><br> zwischen Textblock 1 und 2. innerhalb eine <p>, Zelle, <div> usw. :wink:

Jaaah sauber, mit "justify" Style fängt es sogar an ganz professionell zu werden. :D :THX:

PS: Habe soeben in der Seite, elektroarbeiten.html auf die grünen Titel in der Liste klicken wollen. Titel würde ich nur fett stylen, h4, 5, bis h6 sollte passen und anbei mit schwarze Farbe belassen.

Du hast es in einer Liste gepackt, weil die Aufzählung in horizontaler Form wegen des Bild rechts die zu viel Platz raubt. Anders modellieren. Mit Ebenen arbeiten im css und das bild passen in das Kopfbereich, oben rechts mit den gleichen Abstände wie jetzt platzieren. Die senkrechte Aufzählung raubt nach unten auch zu viel Platz weg. Stell Dir vor Du hättest 20 Aufgabenbereiche zum auflisten? Eine HTML Liste kann man auch horizontal stylen. :)
Systemd und PulseAudio, hmmm, nein danke.

Benutzeravatar
Patsche
Beiträge: 3255
Registriert: 21.06.2013 01:47:54
Lizenz eigener Beiträge: MIT Lizenz
Wohnort: /home/10001101001

Re: Website erstellen

Beitrag von Patsche » 05.02.2015 19:21:52

Wenn ich die Punke nebeneinander stelle mit beispielsweise

Code: Alles auswählen

display: inline-block
Dann sind komischerweise keine Aufzählungszeichen mehr vorhanden.

Code: Alles auswählen

li.artikel {
text-align: left;
list-style-type: square;
display: inline-block
}
Oder mache ich was falsch?

Edit:
Ah, es geht mit

Code: Alles auswählen

float: left;
Aber ich finde das viel unübersichtlicher. Dann muss das Auge erstmal die Aufzählungspunkte erfassen. Untereinander ist es irgendwie klarer.

Benutzeravatar
Revod
Beiträge: 3788
Registriert: 20.06.2011 15:04:29
Lizenz eigener Beiträge: MIT Lizenz

Re: Website erstellen

Beitrag von Revod » 05.02.2015 21:25:05

Zeig Mal... verlinken

Du könntest im Html

Code: Alles auswählen

<li> Inhalt... </li>
das

Code: Alles auswählen

<li> - Inhalt... </li>
oder das

Code: Alles auswählen

<li> | Inhalt... </li>
davor setzen, Leerschläge werden dann mit dem Browser dargestellt und allenfalls müssen es angepasst werden, entweder eins weg, oder mit,

&nbsp;

ergänzt werden.

Ganz klar, eine Liste als einzelnes Objekt sollte auch immer wie eine Liste aussehen, doch wo und wann macht es die Senkrechte Variante Sinn bezogen auf die Darstellung hin?

Man sollte es immer aus dem gesamtes Erscheinungsbild betrachten und entsprechend anpassen / angepasst stylen.

Edit:

Habe die elektroarbeiten.html Datei soeben angesehen.

- Der Titel, Menu innerhalb der Links Zelle- Navigation oben gänzlich weg lassen. Ich denke jeder Surfer kann die Links vom Text unterscheiden, wenn diese eine andere Farb Hervorhebung haben.

- Da Facebook um dre px nach rechts schieben.

- Die Zelle Navigation befindet sich Richtung links versetzt zum Gesamt Bild, siehe / vergleiche dazu rechtes Rand Abstand zum Browser Fenster hin

- Das Text Inhalt der Seite selbst ist zu knapp an der Navigation Zelle ran, angrenzend / berührt dessen Rand, das Main ca. um 10px nach rechts schieben (Minim. weil die Navigation um ca. 5 px nach rechts geschoben wird).

- Das rechte grüne Bild oben würde ich um 35% verkleinern, oder zumindest einheitlich verkleinern, so dass es in der Höhe des Kopfbereiches übereinstimmend wird.

- Habe soben die zweite und die anderen Listen gesehen, nun versteh ich warum die Seite so lang ist. Hier würde ich feine 1px starke <hr /> oberhalb und unterhalb der Liste setzen und die Liste als "float left" stylen. Natürlich die Breite der <hr /> einheitlich nicht vergessen zu stylen. Das wäre doch auch eine Idee für die erste Liste, wobei nur eine <hr /> unterhalb der Liste setzen, weil Du oben bereits eine hast.

Jaja, Übung macht den.... :mrgreen:
Systemd und PulseAudio, hmmm, nein danke.

Benutzeravatar
Patsche
Beiträge: 3255
Registriert: 21.06.2013 01:47:54
Lizenz eigener Beiträge: MIT Lizenz
Wohnort: /home/10001101001

Re: Website erstellen

Beitrag von Patsche » 05.02.2015 22:35:40

Revod hat geschrieben:Das Text Inhalt der Seite selbst ist zu knapp an der Navigation Zelle ran, angrenzend / berührt dessen Rand, das Main ca. um 10px
Habe es etwas weiter reingerückt. Ich arbeite allerdings ohne px, sondern mit Prozentwerten ;)
Revod hat geschrieben:Das rechte grüne Bild oben würde ich um 35% verkleinern, oder zumindest einheitlich verkleinern, so dass es in der Höhe des Kopfbereiches übereinstimmend wird.
Stimme ich zu. Wirkt jetzt etwas riesig im Vergleich zum schmaleren Header und zusammengerücktem Vavigatinsfeld.
Revod hat geschrieben: Da Facebook um dre px nach rechts schieben.
Wüsste ich jetzt nicht genau, wie ich das mache, da dort einfach alle 3 Bilder hintereinander verlinkt sind. Das liegt eventuell einfach am Bild. Mal sehen.
Revod hat geschrieben:Die Zelle Navigation befindet sich Richtung links versetzt zum Gesamt Bild, siehe / vergleiche dazu rechtes Rand Abstand zum Browser Fenster hin
Stimmt. Aber warum?
Das Navigationsfeld:

Code: Alles auswählen

nav {
box-shadow: 0px 0px 5px 3px green;
float: left;
margin: 0px;
}
Das Symbol rechts:

Code: Alles auswählen

aside {
float: right;
margin: 0px;
}
Habe schon keinen Rand gelassen mit margin. Ich glaube das liegt am auslaufenden Schatten von der Navibox. Ich könnte evetuell die Navibox ein Stück in die Mitte holen. Wobei das padding ja durch den float unterbunden wird. Wenn ich die Box versuche mit padding-left ein stück in die Mitte zu rücken, dann wird das Navifeld nur wieder breiter.

Benutzeravatar
Revod
Beiträge: 3788
Registriert: 20.06.2011 15:04:29
Lizenz eigener Beiträge: MIT Lizenz

Re: Website erstellen

Beitrag von Revod » 06.02.2015 00:17:57

Ok Prozente finde auch ich gut, somit der Brwoser, je nach Monitor es entsprechend verringert / vergrössert.
- Dann solltest Du es um 3 bis 4% die Linke leere Spalte von der Browseransicht aus nach rechts hin erhöhen, Minim. Gucke soeben mit meine PrivatPC 33" Widescreen Monitor.

- Rechtes Bild oben ist klar

- Setze vor dem <a vom Facebook Link das &nbs;&nbsp; rein, genau so → &nbs;&nbsp;<a href="..." (ist ein wenig geschummelt, weil Du diese 3 Links einheitlich im "padding" und ohne eine "Tagbekleidung" getrennt hast). Das sind die kleinen Detail, die ich einmal im css Zusammenhang erwähnt hatte. :wink:
Patsche hat geschrieben:.....
Revod hat geschrieben:Die Zelle Navigation befindet sich Richtung links versetzt zum Gesamt Bild, siehe / vergleiche dazu rechtes Rand Abstand zum Browser Fenster hin
Stimmt. Aber warum?
Das Navigationsfeld:

Code: Alles auswählen

nav {
box-shadow: 0px 0px 5px 3px green;
float: left;
margin: 0px;
}
Das Symbol rechts:

Code: Alles auswählen

aside {
float: right;
margin: 0px;
}
Habe schon keinen Rand gelassen mit margin. Ich glaube das liegt am auslaufenden Schatten von der Navibox. Ich könnte evetuell die Navibox ein Stück in die Mitte holen. Wobei das padding ja durch den float unterbunden wird. Wenn ich die Box versuche mit padding-left ein stück in die Mitte zu rücken, dann wird das Navifeld nur wieder breiter.
Nun, das wird manchmal eine schwierige Rechnung, % te und Margins-Px

Das Symbol rechts: < Was meinst Du mit "Das Symbol rechts" und wo, Nav, Main? Wozu float-right?

Code: Alles auswählen

aside {
float: right;
margin: 0px;
}
(Achtung, habe das css Block von oben nach unten versetzt) Anstatt

Code: Alles auswählen

nav {
box-shadow: 0px 0px 5px 3px green;
float: left;
margin: 0px;
}
würde ich

Code: Alles auswählen

nav {
box-shadow: 0px 0px 5px 3px green;
list-style: none;
margin-top: 0px; margin-bottom: 0px; margin-left: 10px; margin-right: 0px;
}
"margin-left: 10px;" einfach um zu sehen um wie viel sich das ganze Menu nach rechts schiebt. Wenn es zu viel wäre kannst Du es auf 6- oder 4px um ändern.

Wegen des Padding Style, vermutlich auf 20px definiert, würde ich die anderen "margin" weg lassen. Man kann auch "padding-top" usw. verwenden, also oben unten links rechts einzeln im Abstand definieren. Glaube das ist auch der Fehler, das der Titel, Menu: nun zu weit nach rechts steht.

Das Symbol rechts:

Code: Alles auswählen

aside {
float: right;
margin: 0px;
}
Sehe den ganzes css nicht, doch habe das Gefühl das "margin: 0" widerspricht die "padding" Abstand Definition, wenn ich Deine Aussage über Padding wofür Du es verwendest richtig verstanden habe. Padding = Abstand innerhalb einer Zelle, Nav usw. zum Inhalt | Margin = Abspand zum nächst naheliegender dritt Objekt, Objekt 1 = <||||> Objekt 2 = <ooo> und die ||| - ooo wäre das Inhalt, als reines Beispiel.

Das grüne Schatten tuts nichts zu Sache.
Systemd und PulseAudio, hmmm, nein danke.

Benutzeravatar
Revod
Beiträge: 3788
Registriert: 20.06.2011 15:04:29
Lizenz eigener Beiträge: MIT Lizenz

Re: Website erstellen

Beitrag von Revod » 06.02.2015 02:09:22

So langsam wirds doch... :) :THX:

Nun nur noch den Style der Listen im Inhalt überdenken die Links "Kiste" passend nach rechts schieben- darin noch das Titel "Menu:" und das Facebook Symbol gut 4 px nach rechts, dann ist vieles ok.

Was hälst Du davon die Umrandung der Links mit einen sehr starkes Grün und einen 1px. breites Rand ohne Schatten, und dafür das Untergrund der "Nav" mit einen sehr schwaches Grün zu belegen? Kann es hier nur mit der Schrift zeigen, als Hintergrundfarbe: HINTERGRUNDFARBE < hier

beinahe durchsichtig, auf einer Fläche kann es stärker wirken, eventuell, einfach Farbmischer, GColor2 beanspruchen. :)
Systemd und PulseAudio, hmmm, nein danke.

Benutzeravatar
Patsche
Beiträge: 3255
Registriert: 21.06.2013 01:47:54
Lizenz eigener Beiträge: MIT Lizenz
Wohnort: /home/10001101001

Re: Website erstellen

Beitrag von Patsche » 06.02.2015 10:34:34

Revod hat geschrieben:Setze vor dem <a vom Facebook Link das &nbs;&nbsp; rein, genau so → &nbs;&nbsp;<a href="..."
Das bewirkt leider nichts.
Revod hat geschrieben:würde ich

Code: Alles auswählen

nav {
box-shadow: 0px 0px 5px 3px green;
list-style: none;
margin-top: 0px; margin-bottom: 0px; margin-left: 10px; margin-right: 0px;
}
Das list-style. Gehört das dort hin? Habe das ja schon für li mit der Klasse "navigation" deklariert. Bei mir sieht es jetzt so aus:

Code: Alles auswählen

nav {
box-shadow: 0px 0px 5px 3px green;
float: left;
margin-top: 0px; margin-bottom: 0px; margin-left: 5px; margin-right: 0px
}
Vielen Dank für die Hilfe. Macht echt Spaß, auch wenn es noch viele Fallstricke gibt. Machst du so etwas beruflich, oder haste das privat erlernt?

Edit:
Ich lass das mal in Bodenbelag stehen ;)
-> http://patsche2014.cwsurf.de/html/boden ... eiten.html

Benutzeravatar
Revod
Beiträge: 3788
Registriert: 20.06.2011 15:04:29
Lizenz eigener Beiträge: MIT Lizenz

Re: Website erstellen

Beitrag von Revod » 06.02.2015 13:25:57

Bin am "kleinen" Notebook, 13.3" Monitor und muss sagen hast diese Nacht es doch nigekreigt. Macht einen sehr gutes Eindruck als gesamtes Erscheinungsbild. Auch das Menü "Spalte" konntest Du im Abstand links einheitlich nach rechts schieben.

Nur noch die Details..... :mrgreen:

Schwer wiegendes Fehler: :mrgreen: Du hast Dir tatsächlich wunde Augen angetan, weil der zwingende Abstandhalter,

& < das ist richtig, so

Geschrieben hast, &nbs;&nbsp < das ist falsch.Der erste = richtig, dem zweiten fehlen am Anfang das & und am Ende das p und das Strichpunkt, dem dritten fehlt am Ende das Strichpunkt, daher erscheint es vor dem Facebook Link.

Ja, ffrüher bis vor ca. 2 Jahren. Heuer bieten viele Hoster das Website Modul gratis an und den meisten empfehle ich diesen Tool, wenn es um eine "Visitenkarte" oder "mien Katze, meine Familie usw" geht. 0815 sind relativ rasch erzeugt und für aufwendigere Web will den Aufwand keiner bezahlen. War früher in mein PC- Support Angebot :wink:

Zum stylen habe ich irgend wie dafür einen "glückliches" Auge dafür.

Ein Tipp

Hier das Menu
------------------------> hier das Inhalt Titel
------------- ----------> hier der Listen Titel
------------- ----------> Ab hier die Liste
-------------
------------

Nei:

Hier das Menu
------------------------> hier das Inhalt Titel
------------- ----------> ab hier 1px feines <hr /> und <div class="detailliste">
------------- ----------> hier der Listen Titel
------------- ----------> horizintale Liste
------------- ----------> ab hier </div und 1px feines <hr /> gleich breit wie das obige
------------- ----------> hier ein einze
------------- < 6. Link
------------

Und das bei jede Liste im Inhalt

Für horizontale Aufzählung brachst dafür nur einen <li></li> Tag und das auch nur wegen des bereits definiertes Textstyle :wink:

HR Linien lassen sich auch im css stylen, die Breite und Abstand zum linkes Rand praktisch gleich wie der Nav Platz.

Zu viel leeres Platz zwischen Text und nächstes Titel, im Inhalt würde ich mehr als 2 Zeilen in der Höhe leer lassen.
Systemd und PulseAudio, hmmm, nein danke.

herbst
Beiträge: 1
Registriert: 09.06.2015 21:30:31

Re: Website erstellen

Beitrag von herbst » 09.06.2015 21:34:08

Hallo zusammen! Ich suche auch nach einfachen Möglichkeiten, eine eigene Webseite zu erstellen. Ich habe gehört, dass man fertige Vorlagen benutzen kann. Ist das wirklich leicht?

Benutzeravatar
Luxuslurch
Moderator
Beiträge: 2091
Registriert: 14.09.2008 09:41:54

Re: Website erstellen

Beitrag von Luxuslurch » 09.06.2015 22:14:28

Hallo herbst,

willkommen im Forum!

"leicht" ist natürlich eine Definitionsfrage. Und "Vorlagen" gibt es für die verschiedenen im Thread besprochenen Möglichkeiten, eine Website zu erstellen. Am besten stellst du konkrete Fragen zu der einen oder anderen Software in einem eigenen Thread. Dieser hier ist jetzt schon recht lang.
Debian Stable.
Der Mod spricht rot.

Benutzeravatar
lampone
Beiträge: 2
Registriert: 09.06.2015 21:35:21

Re: Website erstellen

Beitrag von lampone » 09.06.2015 22:22:20

Das besprochene Thema ist für mich auch interessant.Ich beschäftige mich schon lange mit der Frage, wie ich meine Homepage erstellen kann. Übrigens habe ich vor kurzem eine Seite gefunden, die Vorlagen anbietet. [Werbelink entfernt] Hat jemand Erfahrungen damit? Herzliche Grüße
Zuletzt geändert von Cae am 09.06.2015 23:19:55, insgesamt 1-mal geändert.
Grund: Werbung entfernt und Beteiligte (herbst und lampone) gesperrt

Benutzeravatar
Revod
Beiträge: 3788
Registriert: 20.06.2011 15:04:29
Lizenz eigener Beiträge: MIT Lizenz

Re: Website erstellen

Beitrag von Revod » 09.06.2015 22:26:49

Luxuslurch hat geschrieben:...Dieser hier ist jetzt schon recht lang.
... und sehr aufschlussreich. :)

Auch von mir, willkommen ins Forum.

Wir wissen nicht was Du darüber alles schon weisst, mit welche Anwendungen Du bisher gearbeitet hast und ob Du Dich mit dem Quellcode auskennst, eben, ... leicht ist eine Definitionsfrage.

Mein Vorschlag, am besten liest Du den Thread durch, notierst Dir was nicht klar ist und danach folgst Du den Rat von Luxuslurch :wink:

@lampone

War für ca. 1 Min. auf den Web drauf und rasch wieder zu geklickt. Es gibt Hostangebote mit einen Webseiten Tool und mit Vorlagen, die unter Umstände gar besser sind als die von Deinen Link.
Systemd und PulseAudio, hmmm, nein danke.

herrZiegler
Beiträge: 6
Registriert: 23.04.2015 00:49:51

Re: Website erstellen

Beitrag von herrZiegler » 10.06.2015 10:30:42

Revod hat geschrieben:@wanne so viele...? :D

Hab noch eins,

http://www.w3.org/Amaya/

wenn jemand zu Recht damit kommt. Hatte es vor Jahren getestet... für vieles sehr gut.
Naja heutzutage sollte HTML 5 schon unterstützt werden genauso wie CSS3.

Da würde ich von dem Teil eher abraten und zu einer neueren Variante greifen.

Gruß

Benutzeravatar
Revod
Beiträge: 3788
Registriert: 20.06.2011 15:04:29
Lizenz eigener Beiträge: MIT Lizenz

Re: Website erstellen

Beitrag von Revod » 10.06.2015 12:44:47

Was soll ich sagen? Du hast Recht und ... sollte... ist relativ, bezüglich wann es nötig ist und wann nicht.

Zu dem,
Revod hat geschrieben:...
wenn jemand zu Recht damit kommt. Hatte es vor Jahren getestet... für vieles sehr gut.
[/quote]
... mein Satz sich möglicherweise eher um die Syntax zu erzeugen und dann sie sich anzusehen bezog, damit erst Mal "HTML Neulinge" eine Vorstellung auf die Art bekommen.

Mir geht es um das Verstehen, wenn Jemand sich wirklich beschäftigen will und nicht "a la dreamweaver code zu müllen" Methode. :)

... und Du siehst ... vor Jahren... :wink:

HTML-5 und CSS-3 wurde in diesen Thread sicher ein paar Mal erwähnt.
Systemd und PulseAudio, hmmm, nein danke.

amarena
Beiträge: 3
Registriert: 11.02.2017 23:24:35

Re: Website erstellen

Beitrag von amarena » 31.05.2017 12:23:22

In der heutigen Zeit ist jeder in der Lege, eine Webseite zu erstellen. Mit Homepage-Baukästen kann man das verwirklichen.

DeletedUserReAsG

Re: Website erstellen

Beitrag von DeletedUserReAsG » 31.05.2017 12:47:22

Hallo Bot o/

Benutzeravatar
TRex
Moderator
Beiträge: 8038
Registriert: 23.11.2006 12:23:54
Lizenz eigener Beiträge: MIT Lizenz
Wohnort: KA

Re: Website erstellen

Beitrag von TRex » 31.05.2017 13:21:20

Tschüss Bot \o
Jesus saves. Buddha does incremental backups.
Windows ist doof, Linux funktioniert nichtDon't break debian!Wie man widerspricht

Antworten