Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
CSS <div> Formatierung - Position
#1
Hallo,

ich verzweifle gerade ein wenig an der Formatierung meiner Container.

Code:
<div style="margin-left: 15%; padding: 66px 16px; height: 100%;">

    <div class="mainIssue">

        <div class="issueInfo">

            <div class="floating-box">Sub Topic<br>Bla</br><br>Bla</br><br>Bla</br><br>Bla</br><br>Bla</br><br>Bla</br></div>
            <div class="floating-box">Current Topic<br>Bla</br></div>
            <div class="floating-box">Date<br>Bla</br></div>
            <div class="floating-box">Status<br>Bla</br></div>
            <div class="floating-box">Deadline<br>Bla</br></div>
            <div class="floating-box">Measures<br>Bla</br></div>
            <div class="floating-box">Actions taken<br>Bla</br></div>
            <div class="floating-box">Item No.<br>Bla</br></div>
            <div class="floating-box">Responsible<br>Bla</br></div>

        </div>

        <div class="btncontainer">

            <div class="btns"> </div>
            <div class="btns"> </div>
            <div class="btns"> </div>

        </div>

    </div>

</div>
So sieht das HTML aus.
Habe einen Hauptcontainer, der die ganze Seite einnimmt, bis auf Header und Sidebar.
Dann habe ich einen Container für die Aufgabe.
Dieser Container ist in zwei Hauptbereiche unterteilt.
-Bereich 1 Issue Infos
-Bereich 2 Button Container
Problem: Der Button Container haut nach unten ab, ähnlich clear:left, wenn ich die Browserfenstergröße verkleinere.
Ziel ist eigentlich, dass die Buttons immer Rechts oben bleiben, im Idealfall sich an die Höhe des Aufgabencontainers anpassen.
CSS dazu sieht folgendermaßen aus:
Code:
body {
    margin: 0;
}

div.mainIssue {

   width:100%;
   padding:3px;
   border: 1px solid black;
   border-radius: 10px;
   display:inline-block;
}

div.floating-box {

   float: left;
   width:100px;
   max-height:50px;
   margin: 3px;
   overflow:auto;
   padding:2px;
   border: 1px solid black;  
   text-align:center;
   font-size:14px;
}

div.issueInfo{
  border: 1px solid black;
  display:inline-block;
  margin: 0px 55px 0px 0px;
  position:relative;
}

div.btncontainer{
  border: 1px solid black;
  padding:5px;
  width:22px;
  right:5px;
  float:right;
  position:static;
}

div.btns{
  width:16px;
  height:16px;
  border:1px solid black;
  margin:2px;
}

Über ein paar Tipps würde ich mich freuen.

Grüße

Mathieu
Zitieren
#2
Hallo

Wenn du durch CSS-Angaben wie width- oder height in die vom Browser berechneten Vorgaben eingreifst musst du dafür sorgen, dass sie auch passen.

Wenn die beiden Container #issueInfo und #btncontainer zu breit werden rutschen sie untereinander. Wobei das zuletzt im Quelltext genannte nach unten rutscht. Das ist das ganz normale Browserverhalten.

Du kannst also den Container #btncontainer in den Quelltext vor dem Container #issueInfo schreiben. Dann bleibt #btncontainer in der Browseransicht immer vor dem Container #issueInfo.

Wenn die beiden immer nebeneinander stehen sollen musst du die Breiten im CSS so anpassen, dass sie nebeneinander in den übergeordneten Container passen. Wenn du CSS3 verwendest ist dafür calc sehr hilfreich.


Zitat:im Idealfall sich an die Höhe des Aufgabencontainers anpassen

Dafür kann ab CSS3 das Flexbox-Modell verwendet werden. Allerdings musst du dich dann von von float und position trennen, die du aber wohl 'eh nicht korrekt anwendest. Das lässt sich aus deinen Quellcodeschnipseln aber nur vermuten. So sollte float zum Beispiel nie ohne ein zugehöriges clear verwendet werden. Und in den position-Angaben sehe ich in deinem CSS keinen Sinn.

Gruss

MrMurphy
Zitieren
#3
Hallo,

danke für die Rückmeldung.
Ja, das kann gut sein, dass meine Anwendung eher Laienhaft erscheint, was daran liegt, dass ich ein Laie bin und gerade die ersten Schritte auf diesem Gebiet mache.
War noch nicht bei den Flexbox System. Habe es mir soeben angeschaut und werde es mal auf mein Problem anwenden, danke für den Tipp.

Grüße

Mathieu
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste