Templates & Sprachen » Navigationsleiste schmälern

01.12.2022 08:18

Sabrina Nordmann
#1 Navigationsleiste schmälern

Ich schon wieder! :D
Ich habe die Breite meines Board der meines Headers angenähert.
Nun würde ich auch gerne die Navigationsleiste entsprechend anpassen.
Könnte mir jemand verraten wie ich die Navigationsleiste in der Breite verändern kann?

Das Board habe ich über die Xobor Einstellungen geschmälert.

Beste Grüße :D

Forum Snake River → http://snake-river.xobor.de/ (Business)

Antworten

Beitrag melden

#2

01.12.2022 09:19

Gabriella
#2 RE: Navigationsleiste schmälern

Gabriella

Guten Morgen Sabrina,

hier hab ich Dir einen, allerdings für V4, gehört in die CSS, Du hast anscheinend das V6?
Sollte allerdings ebenfalls dort funktionieren.

/*Navigation anpassen*/
#navigation {
width:90%;
margin-right:auto;
margin-left:auto;
}
.menu_item a{
border-right:5px solid #857a60;
}
.submenu a{
border:none;
}

Musst einfach mit Deinen Grössen und Farbwerte probieren. Vielleicht kann Dir Mike48, oder jemand anders noch genauer sagen, wie und wohin damit.

Mit freundlichen Grüssen
Gabriella

http://www.musengarten.com/
http://www.garten-der-poesie.de/

Layout: Business

Antworten

Beitrag melden

#3

01.12.2022 10:10 (zuletzt bearbeitet: 01.12.2022 10:27)

Mike48
#3 RE: Navigationsleiste schmälern

Mike48

Hallo @Sabrina Nordmann

Hiermit müsste die Navi angepasst sein.

1
2
3
4
 
.navigation_wrap {
  width: 1260px;
margin: auto;
}
 

In dem Code für deine Beschreibung vom mir hast du noch diese HTML-Codes eingebaut.

1
 
<FONT SIZE="1" FACE="Arial, Helvetica, sans-serif">

Die machen aber Probleme da sie nicht geschlossen sind. Es fehlt überall das </font>
Das HTML Element font ist in HTML5 als missbilligt eingestuft.
Benutze dafür das css.
https://wiki.selfhtml.org/wiki/CSS/Tutor...iftformatierung

www.friends-of-xobor.de (621181 - Template kann wechsel bei Pluin Tests)
www.seniorenclub-sel-koeln.de (578865 - V6 Template)

Antworten

Beitrag melden

#4

01.12.2022 10:32

Sabrina Nordmann
#4 RE: Navigationsleiste schmälern

Sabrina Nordmann

Ach ich danke euch! Ihr seid die besten <3
dass ich das ganze im Css ändern musste war mir beinahe klar ich wusste nur nicht welches Object ich dafür ansprechen musste... >.<
Gibt es dafür irgendeine Liste oder dergleichen? Denn ich denke ich werde mit der Zeit sicher noch auf ähnliche Probleme stoßen XD

@Mike48 Danke für die Info! das werde ich die tage noch abändern :D

Forum Snake River → http://snake-river.xobor.de/ (Business)

Antworten

Beitrag melden

#5

01.12.2022 10:39 (zuletzt bearbeitet: 01.12.2022 10:47)

Mike48
#5 RE: Navigationsleiste schmälern

Mike48

Zitat von Sabrina Nordmann im Beitrag #4
Gibt es dafür irgendeine Liste oder dergleichen?

Beschäftige dich mal mit der Entwickler-Umgebung in deinem Browser.
Die ist in der Regel mit F12 zu öffnen.
Da kannst du dir mit dem Inspektor den Code anzeigen und da findest du auch die Selektoren id, name, class über die du die Elemente ansprechen kannst.
In der Konsole siehst du, ob die Seite Fehler erzeugt.

Du kannst aber auch einfach mit der rechten Maustaste im Browser auf ein Element klicken und die Option Untersuchen auswählen. Dann sollte sich auch der Entwickler öffnen und bist direkt mit dem Inspektor an der richtigen Stelle. Das geht im FireFox, Chrome, Edge.

www.friends-of-xobor.de (621181 - Template kann wechsel bei Pluin Tests)
www.seniorenclub-sel-koeln.de (578865 - V6 Template)

Antworten

Beitrag melden

#6

01.12.2022 11:16 (zuletzt bearbeitet: 01.12.2022 11:17)

Mike48
#6 RE: Navigationsleiste schmälern

Mike48

@Sabrina Nordmann
du hast auch einige div-Tags nicht geschlossen (</div).
Wenn du das mit den font-Tags machen willst, dann musst du die auch mit </font> schließen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
 
<table class="logo_infobox"  scrollbar-width: thin>
  <tr>
    <FONT SIZE="1" FACE="Arial, Helvetica, sans-serif">
      <th width=550><b>Herzlich willkommen, Fremder</b></th>
      <th width=300>Die Admins</th>
      <th>Aktuelle Neuigkeiten</th>
    </FONT>
  </tr>
  <tr>
    <FONT SIZE="2" FACE="Arial, Helvetica, sans-serif">
      <td>
        <div style="OVERFLOW: auto; WIDTH: 100%; HEIGHT: 90px">
          Text der Zelle,Text der ZelleText der ZelleText der ZelleText der ZelleText der ZelleText der
          ZelleText der ZelleText der ZelleText der ZelleText der ZelleText der ZelleText der ZelleText
          der ZelleText der ZelleText der Zelle,Text der ZelleText der ZelleText der
          ZelleText der ZelleText der ZelleText der ZelleText der ZelleText der ZelleText der ZelleText
          der ZelleText der ZelleText der
          ZelleText der ZelleText der Zelle Text der Zelle,Text der ZelleText der ZelleText der ZelleText
          der ZelleText der ZelleText der
          ZelleText der ZelleText der ZelleText der ZelleText der ZelleText der ZelleText der ZelleText
          der ZelleText der Zelle
        </div>
      </td>
      <td>
       <div style="OVERFLOW: auto; WIDTH: 100%; HEIGHT: 90px">
          Silmeria - Blid --> Link Profil <br>
          Anika    - Bild --> Link Profil
        </div>
      </td>
      <td>
        <div style="OVERFLOW: auto; WIDTH: 100%; HEIGHT: 90px">
          <b>30.11.2022</b> Forum befindet sich im Aufbau
        </div>
      </td>
    </FONT>
  </tr>
</table>
<style>
  .logo_infobox {
    border:1px solid #000000;
    width:1260px !important;
    margin:auto;
    color:black;
  }
  .logo_infobox th {
    background-color: #FFFFFF;
  }
  .logo_infobox td {
    border:1px solid #000000;
    background-color: #FFFFFF;
  }
 
.body {
  scrollbar-width: thin;          /* "auto" or "thin" */
  scrollbar-color: blue orange;   /* scroll thumb and track */
}
</style>
 

www.friends-of-xobor.de (621181 - Template kann wechsel bei Pluin Tests)
www.seniorenclub-sel-koeln.de (578865 - V6 Template)

Antworten

Beitrag melden

#7

02.12.2022 08:08

Sabrina Nordmann
#7 RE: Navigationsleiste schmälern

Sabrina Nordmann

@Mike48 ach wie lieb, dass du mir den Code gleich repariert hast, danke :DD
Sag mal kennst du eventuell auch eine Methode mit der ich die meine scrollbar verändern kann?
Ich hätte sie gerne schmaler und schwarz.

Der Css code funktioniert nicht >.<

1
2
3
4
5
6
7
 
.scroller {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
  scrollbar-color: #000000;
  scrollbar-width: thin;
}
 

PS hab das Board nochmal unter neuen Namen neu angefangen
Boardnummer 907871

Forum Snake River → http://snake-river.xobor.de/ (Business)

Antworten

Beitrag melden

#8

02.12.2022 12:24 (zuletzt bearbeitet: 02.12.2022 12:28)

Mike48
#8 RE: Navigationsleiste schmälern

Mike48

@Sabrina Nordmann
Für das V6 Template.
Wenn man eigen Boxen einrichtet, dann die class card-body vergeben wenn scrollbar sein soll.
Mit dem Eintarg werden wahrscheinlich alle Scrollbalken formatiert. Das sollte im FireFox, Chrome, Edge und Safarie funktionieren.
Die farben kannst du ja noch anpassen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
/* begin - scrollbar formatieren */
.card-body {
  scrollbar-width: thin;
  scrollbar-color: black grey;
}
/* WebKit and Chromiums */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background-color: gray;
}
 
::-webkit-scrollbar-thumb {
  background: black;
  border-radius: 5px;
}
/* end - scrollbar formatieren */
 

www.friends-of-xobor.de (621181 - Template kann wechsel bei Pluin Tests)
www.seniorenclub-sel-koeln.de (578865 - V6 Template)

Antworten

Beitrag melden

#9

02.12.2022 12:42

Mike48
#9 RE: Navigationsleiste schmälern

Mike48

@Sabrina Nordmann
Du hast zwar ein reponsives Design mit dem V6, aber die Kopfzeile mit Logo und der 3spaltigen Box ist das leider nicht.
Schau dir mal dein Forum auf einem Handy an.

www.friends-of-xobor.de (621181 - Template kann wechsel bei Pluin Tests)
www.seniorenclub-sel-koeln.de (578865 - V6 Template)

Antworten

Beitrag melden

#10

02.12.2022 14:11

Sabrina Nordmann
#10 RE: Navigationsleiste schmälern

Sabrina Nordmann

@Mike48
Mensch bist du flink XD
Also die Scrollbar ist mit diesem Code schwarz aber nicht dünner, was aber okay ist für mich. also dafür dafür <3

ich habs mir gerade mal angeschaut....der haeder passt sich nicht an >.<
ich trau mich gar nicht zufragen XD
Aber wie könnte ich das denn anpassen?

Forum Snake River → http://snake-river.xobor.de/ (Business)

Antworten

Beitrag melden

#11

02.12.2022 15:45

Mike48
#11 RE: Navigationsleiste schmälern

Mike48

Zitat von Sabrina Nordmann im Beitrag #10
Also die Scrollbar ist mit diesem Code schwarz aber nicht dünner

Welchen Browser benutzt du?
Für mein css musst du der Box die class card-body einbauen.

Das css Attribut scrollbar-color verlangt zwei Farben. Eine für den Hintergrund und eine für den Balken.
Du hast aber nur eine Farbe eingebaut.

1
2
3
4
 
.card-body {
  scrollbar-width: thin;
  scrollbar-color: black;
}
 

Richtig wäre scrollbar-color: white black ; für weißen Balken und schwarzen Hintergrund.

www.friends-of-xobor.de (621181 - Template kann wechsel bei Pluin Tests)
www.seniorenclub-sel-koeln.de (578865 - V6 Template)

Antworten

Beitrag melden

#12

02.12.2022 15:50 (zuletzt bearbeitet: 02.12.2022 15:52)

Mike48
#12 RE: Navigationsleiste schmälern

Mike48

Zitat von Sabrina Nordmann im Beitrag #10
ich habs mir gerade mal angeschaut....der haeder passt sich nicht an

Das wird etwas komplizierter.
Da sind Tabellen das falsche Werkzeug.
Das müsste man mit Bootstrap und einzelne Boxen machen.
Die würden dann je nach Fensterbreite anders angeordnet.
Ich würde das auch nicht oberhalb des Banner machen.

www.friends-of-xobor.de (621181 - Template kann wechsel bei Pluin Tests)
www.seniorenclub-sel-koeln.de (578865 - V6 Template)

Antworten

Beitrag melden

#13

02.12.2022 17:01

Sabrina Nordmann
#13 RE: Navigationsleiste schmälern

Sabrina Nordmann

@Mike48
okay dann versuche ich mich dran!
werde das erstmall üben .
Würden die Boxen über dem Logo Probleme machen? Falls nicht würde ich sie gerne dort lassen, Design technisch gefallen sie mir dort nämlich ganz gut :)

und danke für all die Mühe,
ich belästige dich nicht weiter, versprochen ^^'

Forum Snake River → http://snake-river.xobor.de/ (Business)

Antworten

Beitrag melden

#14

02.12.2022 18:32

Mike48
#14 RE: Navigationsleiste schmälern

Mike48

Die Boxen müssten aber ja nach Fensterbreite verschoben werden. Zum Beispiel 3 untereinander, oder eine hohe und daneben 2 untereinander. Ich würde das nicht schön finden wenn das über dem Banner wäre.
Das kann man mit Grid machen.
https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid

www.friends-of-xobor.de (621181 - Template kann wechsel bei Pluin Tests)
www.seniorenclub-sel-koeln.de (578865 - V6 Template)

Antworten

Beitrag melden