Anfänger-Frage: Navigationszeilen-Höhe

Hallo,
bin endlich dabei, gründlich nach Anleitung vorzugehen und CSS zu lernen! Nun komme ich aber allein nicht weiter und bitte um Hilfe. Die Steuerungsleiste in mir zu hoch, ich hätte sie gern schmaler. Habe alles mögliche probiert, aber es gelingt nicht. Kann mir bitte jemand sagen, was ich tun muß, damit sie schmaler wird (also nicht in der Breite, sondern in der Höhe)???

Dies ist der Quellcode im index-Ordner:

Startseite      
Anmeldung      
Büro      
Das Team      
Fahrzeuge      
Gästebuch      
Kontakt

Dies ist der Quellcode im Style-ORdner:

#steuerung {
background: white;
text-align: center;
margin: 30px 70px 10px 30px;
border-width: thick;
border-style: groove;
border-color: blue;
padding-top: 0px;
padding-bottom: 0px;
}

Für Hilfe in gaaaaanz einfachen Worten wäre ich sehr dankbar!

Viele Grüße, Gaby

Moin.

Die Margin-Angabe von div#steuerung wird auf das p-Element vererbt; somit müsstest Du die Margin-Angaben für dieses neu setzen. Beispielsweise mit

#steuerung p {
margin: 0
}

Aber wenn Du Dich eh mit dem Thema beschäftigst:

  • das div-Element ist überflüssig. Ein div-Element fasst mehrere Tags zusammen, doch hier gibt es nur das p-Tag (die a-Tags sind Inhalt des p-Tags und somit für das div irrelevant).
  • Tabellenlayout ist nicht mehr nötig; arbeitere darauf hin, das Layout über CSS zu gestalten (und nicht über Tabellen oder sinnlose divs)

Viel Spaß und viel Erfolg.

Grüße
Leo

Hallo,

Dies ist der Quellcode im index-Ordner:

da hab ich noch was dran auszusetzen, was die letzte Antwort unnütz macht. Bevor man mit CSS anfängt, muss man HTML beherrschen, sonst wird man immer wieder - so wie hier und jetzt auch - doppelte Arbeit machen.

Soll heißen:

  1. Tabellenlayout? Weg damit. HTML ist nicht für das Aussehen, weder für Layout noch für Design, zuständig, sondern nur für die Semantik.
  1. Ist hier überflüssig, wie schon gesagt wurde, denn bedeutet „Gruppe mehrerer Elemente“.
  1. Ist hier falsch ausgezeichnet. Du hast ein Menü, ein Menü ist aber eine Liste von Links. Du hast Deinem Menü die Bedeutung „Textabsatz“ gegeben, das passt ja nicht, wie Du zugeben musst. Zeichne Dein Menü also als Liste aus.

  2. Dadurch ändert sich die CSS-Lösung natürlich ein bisschen, weil Du jetzt andere Elemente hast. Deswegen mein Rat für Anfänger: Immer mit dem Inhalt anfangen, dann diesen semantisch sinnvoll auszeichnen und erst dann das Aussehen machen.

Für Hilfe in gaaaaanz einfachen Worten wäre ich sehr dankbar!

Das Thema ist nicht so gaaaaaanz einfach, dass man da immer die passenden Worte findet. Und was für mich gaaaaaaanz einfach ist, bereitet Dir vielleicht Probleme. Daher: Wenn noch Fragen sind, einfach nachfragen und nicht verzweifeln!

Liebe Grüße,
-Efchen

  1. Ist hier falsch ausgezeichnet. Du hast ein Menü, ein Menü
    ist aber eine Liste von Links. Du hast Deinem Menü die
    Bedeutung „Textabsatz“ gegeben, das passt ja nicht, wie Du
    zugeben musst. Zeichne Dein Menü also als Liste aus.

Hallo Ihr Beiden,
vielen Dank für Ihre Mühe!
Meine ursprüngliche Frage hatte ich schon selbst gelöst, nun tauchen durch eure Antworten neue auf. Puh! Ist das schwierig!

Die Tabelle hatte ich auch inzwischen schon selbst heraus genommen.

Auf die div’s möchte ich nur ungern verzichten, weil ich keine Alternative weiß bislang! Die Anleitung, nach der ich jetzt vorgegangen bin - CSS Tutorial - (ungefähr 5. Versuch mit Anleitungen) ist die erste, mit der ich klar komme! Und die benutzt div’s.

Und das mit dem verstehe ich hier jetzt nicht. Ich hatte es benutzt, um einen Abstand zu schaffen. Dass ich damit nun auch wieder irgendetwas steuere, war mir gar nicht klar. Außerdem weiß ich auch hier keine Alternative!

Vielleicht bin ich ja einfach zu blöde für CSS… oder zu ungeduldig, haha!

Vielen Dank!
Grüße, Gaby

Auf die div’s möchte ich nur ungern verzichten, weil ich keine
Alternative weiß bislang! Die Anleitung, nach der ich jetzt
vorgegangen bin - CSS Tutorial - (ungefähr 5. Versuch mit
Anleitungen) ist die erste, mit der ich klar komme! Und die
benutzt div’s.

Und das mit dem verstehe ich hier jetzt nicht. Ich hatte
es benutzt, um einen Abstand zu schaffen. Dass ich damit nun
auch wieder irgendetwas steuere, war mir gar nicht klar.
Außerdem weiß ich auch hier keine Alternative!

nein , aber da konzept ist ein anderes.

Stell dir mal folgendes vor

erst bist du mal ein browser

und danach

dann bist du eine suchmaschine

Webseite :
ein kunde kommt und möchte eine Zeitungsseite erstellen lassen mit 6 artikel und einem zentralem menu .
Zahlungsart : pro abruf durch user, robot, sonstige ausgabegeräte.
Verbreitung : Weltweit, alle spachen !

als erstes bin ich mal ein anfänger user eines webseitenprogramm (drag and drop).
-> Neue Seite.
-> Hintergrund schwarz
-> Layout (kopfbereich, links menue, rechts kontent)
-> kopfbereich hintergrundfarbe, textblock rein, riesenschrift „webseitenname“.
-> 6 unterseiten erstellen, und zum menu hinzufügen
-> für jeder unterseite
----> Eine textbox mit Grosser Schrift als Artikeltietel
----> Eine weitere textbox mit datum
----> noch eine textbox mit dem Artikeltext.
----> am ende noch ne textbox mit der adresse des autoren

das ergebnis kann unterschiedlich ausfallen je nach generator.

aber eines wird schon problematisch wenn man nur textboxen nehmen würde, denn in HTML gibt es schon TAGS die dafür eine bedeutung haben.

 Fetter Text 


[Der Artikel](artikel_1.html) 
[Der Artikel 2](artikel_2.html) 
[Der Artikel 3](artikel_3.html) 
[Der Artikel 4](artikel_4.html) 
[Der Artikel 5](artikel_5.html) 
[Der Artikel 6](artikel_6.html) 


 Der Artikel über 
 Geschrieben steht was geschrieben steht , zu meiner [homepage](http://beispiel.de/artikel_6.html) 

 am 23.23.2333 
 von
Keule Keule
Keulenweg
Telefon: 4454444
[homepage](http://beispiel.de/artikel_6.html) 

so der generator nimmt also für jeden layout abschnitt ein div eine box, für abschnitte nacheinader, gruppiert es diese und macht einzelne div boxen , für jeden text ein p und für das menu einfach nur a links und für untereinander einfach divboxen ,
sind so unformatierbar.

du als BROWSER, siehst jetzt genau das was oben beschrieben wurde.
alles fein , alles kein problem, immerhin keine langsamen tabellen renderungen, schon mal als div boxen und im textfluss gefloatet.

der SEHENDE user, kann klicken und sieht das links wohl das menu für die artikel ist, rechts der kontent wo dann wohl eine adresse ist und ein link zur homepage der person im artikel, sowie eine homepage zum authoren.

als SUCHMASCHINE ,
suche ich erstmal vergeblich nach einer überschrift.
es gibt viele links den ich folgen kann, 6 realtive und 2 externe.
aber es gibt text auf der seite , absätze , mach ich draus ne kurz info, und mit … so von jedem etwas . Dann klapper ich die links ab.

als nicht sehender , habe ich erstmal 8 links auf der seite, was wohl eine überschrift sein soll wird erst klar wenn mir mein ausgabegerät mindestens die schriftgrösse mit ausgiebt , am besten ich lass mir erstmal alle schriftgrössen der seite presentieren, damit ich weiss was wohl eine überschrift ist. Naja, nachdem ich gemerkt hab das 2 von den links mich ganz woandershin tragen, hab ich ,nach langem zuhöhren der vielen textpassagen, rausgefunden das danach wohl die adresse des authors ist und der link wohl zu seiner homepage führt.

ok nun mal die ziemlich gleiche seite in eher für alle und mit semantik

 Fetter Text 

Der Artikel

Der Artikel 2

Der Artikel 3

Der Artikel 4

Der Artikel 5

Der Artikel 6

Der Artikel über
Geschrieben steht was geschrieben steht , zu meiner homepage
am 23.23.2333
von
Keule Keule
Keulenweg
Telefon: 4454444
homepage

sieht gleich aus, aber schon die suchmaschine erfährt mehr, die wichtigen titel z.b. die ordnung auf der webseite , adresse , menu , eigentlich hat sich alles verbessert, ups, der sehende hat davon keinen vorteil , sowas aber auch, aber mein Netbook, was das menu ausliesst und mir als gesondertes toucfeld presentiert, das das sieht die vorteile sofort, mein adressbook, copiert auch gleich die Adressinfos, ja mein adressbuch kann auch html und solange ich das bisschen semantik was da ist, genutzt wird … etc etc…

wie du siehst kann man in sehr sehr vielen variationen informationen anbieten. Es liegt am verbraucher was er wie brauch, halten sich alle an die festgelegten standard und ihre bedeutung, kann eigentlich nichts schief laufen, alle können dieselbe informations gleichgut (machmal sogar viel besser) nutzen, weder browser noch auge noch irgentwas sollte an dem inhalt was verändern. Alle Artikel informationen sind in einem Div, der webseitentitel ist die oberste überschrift, der Artikel Titel ist also drunter gegliedert .

ok am ende sach ich nur, lass ein dritten ein inhaltsverzeichniss von den verschiedenen versionen machen. Es sind zwar nur 6 Artikel, aber sow wie das html bei der ersten version ist, wird man es wohl manuel machen müssen, und nun stellen wir usn unsere 300 seiten lange doktorarbeit vor, die wir noch mal eben mit einem inhaltverzeichniss versehen wollen, viel spass schon mal.
Bei der 2 version html würde allerdings ein netter wer-weiss-was’ler dir eben einen link zur kösung geben, weil das gibt es schon, das ist standart , da weiss jeder, h1 > h2 > h3 > p , adresse , menu :smile:

brauchen wir noch was um HTML auszuzeichnen und uns von unserem auge zu trennen und einfach die semantik nehmen und schauen wie man der darstellung beim browser herr wird :smile:

ich hoffe du begreifst wie vielfälltig das leben sein kann, aber wie eindeutig es sein sollte.

szmmctag

1 Like

Hallo

Auf die div’s möchte ich nur ungern verzichten, weil ich keine
Alternative weiß bislang! Die Anleitung, nach der ich jetzt
vorgegangen bin - CSS Tutorial - (ungefähr 5. Versuch mit
Anleitungen) ist die erste, mit der ich klar komme! Und die
benutzt div’s.

Dein Ansatz sieht ja vereinfacht gesehen erst mal so aus:

....
....

Der Hinweis, den die anderen meinten, ist, dass das p-Tag oder das div-Tag hier überflüssig ist. Ein div gruppiert mehrere unabhängige HTML-„Blöcke“ (nicht ganz korrekt bezeichnet, aber für die Anschauung…), sofern man es braucht. An dieser Stelle aber brauchst du es nicht, denn du hast innerhalb deines div nur ein einziges Element, nämlich das p-Tag (zwar mit weiterem Inhalt, aber das ist hier egal).

Deine Variante ist syntaktisch nicht falsch, aber eines der Tagpaare also komplett überflüssig. Das ist, als würdest du ein Paket packen und dieses Paket noch einmal in ein Paket gleicher Größe stecken. Doppelte Verpackung sozusagen, was hier keinen Sinn ergibt.

Also besser so:

....
....

oder so:

....
....

oder, wie Efchen schon vorschlug, besser gleich als Liste. Ich kann hier leider keine Liste richtig mitgeben, weil das w-w-w meinen Quelltext immer wieder falsch umwandelt, aber schau mal hier, da gibt’s entsprechende Beispiele:
http://de.selfhtml.org/css/layouts/navigationsleiste…

Und das mit dem verstehe ich hier jetzt nicht. Ich hatte
es benutzt, um einen Abstand zu schaffen.

Abstände steuerst du dann über deine CSS-Regel, z.B.

#steuerung {
 margin-top: 0.5em;
 margin-bottom: 0.5em;
}

Für das p-Tag ist ein bestimmter Abstand zwar schon voreingestellt, aber du kannst die Gestaltung der ID #steuerung definieren, wie du magst, und damit dem p-Tag, dem div-Tag oder dem ul-Tag (je nach Beispiel oben) mitgeben, wie es sich verhalten soll.

Gruß
Anja

Hi Anja,
vielen Dank für deine so nette Mühe! Aber leider funktioniert alles nicht… ich könnte in den Computer beißen! Habe exakt nach der Anleitung bei selfhtml die Liste erstellt, alternativ nach einem dicken Wälzer zum Thema CSS nochmal die Liste versucht - die Aufzählungspunkte verschwinden aber nicht. Nichts zu machen.

Auch habe ich das Logo exakt so definiert wie im ersten Entwurf, wo es zentriert sitzt. Jetzt bleibt es links kleben, egal, was ich tue… Zum Heulen!

#kopf {
text-align: center;
padding-bottom: 5px;
padding-top: 0px;
margin: 5px 70px 7px 30px;
background: white;
border-width: thin;
border-style: solid;
border-color: blue;

}

#ul#navi {
margin: 0; padding: 0;
}

ul#navi li {
margin: 0; padding: 0;
float: left;
width: 30%;
color: black;
background: blue;
list-style: none;
}

verzweifelte Grüße, Gaby
P.S. ausserdem merke ich grad in der Vorschau, dass der hierher kopierte Quelltext nicht korrekt übernommen wird…

Hallo Gaby,

Auf die div’s möchte ich nur ungern verzichten, weil ich keine
Alternative weiß bislang! Die Anleitung, nach der ich jetzt
vorgegangen bin - CSS Tutorial - (ungefähr 5. Versuch mit
Anleitungen) ist die erste, mit der ich klar komme! Und die
benutzt div’s.

da meine Anfänge mit html und css noch nicht sooo lange her sind, kann Dir eventuell folgender Tipp helfen:
wenn Du mehreren Elementen Dein Layout zuweisen willst, legst/gruppierst Du sie mit Hilfe eines div’s
z.B. hier kommt Dein Text in kleiner Schrift rein
An der Stelle wäre es nicht richtig, es so zu schreiben

Moin,

Puh! Ist das schwierig!

Nur nicht den Mut verlieren :smile:

Auf die div’s möchte ich nur ungern verzichten, weil ich keine
Alternative weiß bislang!

Ich mag dieses Wort „Alternative“ nicht. Das klingt so, als würdest Du eine andere Lösung suchen, nur um auf divs zu verzichten. So ist es ja nicht. Du wendest HTML lediglich falsch an.

Die Anleitung, nach der ich jetzt
vorgegangen bin - CSS Tutorial - (ungefähr 5. Versuch mit
Anleitungen) ist die erste, mit der ich klar komme! Und die
benutzt div’s.

Ein CSS Tutorial sollte sich hauptsächlich auf CSS beschränken und nicht irgendwelche HTML-Tags setzen. Denn HTML ist eine andere Baustelle. CSS baut auf einem vollständig fertigen HTML-Code auf, CSS sorgt nicht dafür, dass Tags gesetzt werden. Welche Tags man setzt, hängt allein vom Inhalt ab!

Und das mit dem verstehe ich hier jetzt nicht. Ich hatte
es benutzt, um einen Abstand zu schaffen.

Dafür ist es aber nicht da. Grundsätzlich ist HTML gar nicht dazu da, irgendeine Optik zu erzeugen. Und im Speziellen bedeutet „Textabsatz“, d.h. wenn Dein Inhalt ein Textabsatz ist, dann packst Du ihn in ein Text Text Text ein.

Dass ich damit nun
auch wieder irgendetwas steuere, war mir gar nicht klar.

Weil Dir das Wissen fehlt, dass HTML dazu da ist, den Inhalt logisch auszuzeichnen (=> Semantik).

Außerdem weiß ich auch hier keine Alternative!

Das heißt ja nicht, dass es keine gibt.

Vielleicht bin ich ja einfach zu blöde für CSS… oder zu
ungeduldig, haha!

Eher ungeduldig. CSS funktioniert nur, wenn die Basis aus HTML stimmt. Und da fehlt Dir noch das grundlegende Wissen. Du solltest anfangen, HTML zu verstehen. Wenn das einmal klappt, dann ist CSS relativ leicht.

Liebe Grüße,
-Efchen

Hallo nochmal,

Habe exakt
nach der Anleitung bei selfhtml die Liste erstellt, alternativ
nach einem dicken Wälzer zum Thema CSS nochmal die Liste
versucht - die Aufzählungspunkte verschwinden aber nicht.
Nichts zu machen.

Das hat auch nichts mit HTML zu tun! Wenn Du Dein Menü semantisch korrekt als Liste auszeichnest, dann verwendest Du dafür
. Die Listenpunkte mit - , da drin dann wahrscheinlich . Fertig.
Wie das im Browser aussieht, ist für HTML irrelevant!

Das musst Du verinnerlichen. Bei der Auszeichnung mit HTML kommt es auf das Aussehen absolut nicht an!

Das zu verstehen ist der erste Schritt zum Verständnis. Ohne das wird Dir alles unglaublich schwierig und unlogisch vorkommen. Und Du wirst immer Dinge mit HTML versuchen, für die HTML gar nicht gedacht ist.

Die Listpunkte bekommt Du dann mit CSS weg: list-style-type:none;

Auch habe ich das Logo exakt so definiert wie im ersten
Entwurf, wo es zentriert sitzt. Jetzt bleibt es links kleben,
egal, was ich tue… Zum Heulen!

Wie schon gesagt, Du solltest mit dem Inhalt anfangen, diesen dann semantisch korrekt auszeichnen und erst dann das Aussehen machen.
Das ist einfacher so!

Liebe Grüße,
-Efchen