Anfänger-Frage: Border in einem Border

[Aragonal]

Hallo,

ich möchte in einige Border noch einige andere Border, die als Navigation dienen. Also in einem großen Border sind mehrere kleine mit dem Text "Home" "Zweite Seite". Und noch einige andere. Das Problem ist, dass ich die Border nicht in einen reinbekomme. Über Css klappt das bei mir nicht. Könnte mir jemand helfen?

Ein Bild sagt mehr als 100 Worte, auch wenn es kein schönes ist xD

[florian0]

Das is jetzt keine besonders aussagekräftige Problembeschreibung. Woran hängts denn genau? Überlagern sich die Border nicht?

[Aragonal]

Yep, genau das ist mein Problem

EDIT: Hast vielleicht ein Code, wo sich 2 Border überlagern? Würde mir wahnsinnig helfen. Vielleicht noch wie man sie im anderen Border noch richtig positioniert?

[florian0]

Es gibt zwei Möglichkeiten das ganze zu Lösen.

<div class="outer">
  <div class="inner">
    My Div
  </div>
</div>

Die erste, und meiner Meinung nach sauberste ist: Einfach keine doppelten Border anzeigen :P

 Spoiler

Beispiel:

.inner {
  padding: 50px;
  border: 1px solid;
  border-top: 0;
  
  margin: 0px 10px 10px 10px
}

.outer {
  border: 1px solid;
}

Oder, zweiteres, das Element mit negativen Margin in eine Richtung ziehen:

 Spoiler

Beispiel:

.inner {
  padding: 50px;
  border: 1px solid;
  
  margin: 0px 10px 10px 10px;
  
  margin-top: -1px;
}

.outer {
  border: 1px solid;
}

[Aragonal]

Danke dir! Ich versuch es mal.

Hey,

funktioniert einwandfrei. Eine Frage:
1. Bei der Positionierung: Wenn ich den Outer-Border ändere(Width und Height), muss ich ständig die Margin ändern. Das dauert dann einiges an Zeit bis es passt. Gibt es da einen Trick, nicht raten zu müssen, sondern irgendwie mit einem Mal so anpasst, dass es immer noch die gleiche Form hat, wie vorher?

<div class="outer">
  <div class="home">
    Home
  </div>
  
  <div class="ZweiteSeite">
    Home
  </div>
</div>

.home {
  padding: 5px;
  border: 3px solid;
  text-align: center;
  margin: 0px 620px 10px 10px;
  
  margin-top: -3px;
  
}

.ZweiteSeite {
  padding: 5px;
  border: 3px solid;
  text-align: center;
  margin: 0px 620px 10px 500px;
  
  margin-top: -3px;
  
}

.outer {
	margin: auto;
  border: 3px solid;
  width: 700;
  height: 900;
}

Die zweite Seite wird automatisch einen unter Home gestellt nicht daneben..

Hier auch das Problem, das ich oben in Frageform formuliert habe . Ich danke dir für deine Zeit, die du nutzt, um mir zu helfen

EDIT: Das erste Problem gelöst. Margin Top muss um 40 angehoben werden. Das mit dem Raten, also wie die Margin verändert werden muss bei Veränderung des outer Borders nicht oder bei Veränderung der Position meines Home Kasten

[#Metho]

Ich verstehe ehrlich gesagt nicht ganz, was du suchst. Ich habe dir mal ein Beispiel gemacht, wie ich das ganze verstehe:

[Mad0ck]

Ich verstehe deine Frage auch nicht wirklich.
Hauptsächlich die 2te nicht ^^

Aber das mit dem " rumprobieren " , wird dir nicht erspart bleiben. Sowas kommt mit der Zeit ins Gefühl wie viel du wo ändern musst ,dass es ca stimmen könnte.

Du könntest jedoch auch nicht mit festen Werten, sondern % arbeiten.
Dann würden sich die Elemente immer prozentual an den Bildschirm / Zoomfaktor anpassen.

Wobei es da auch einige bessere Methoden gibt. Aber für den Anfang würde dies so wie du es aktuell machst eigentlich reichen.