Div Element immer relativ zum Viewport

Kirby.exe

Top Contributor
Also ich würde gerne ein <div> Element als "main" box verwenden und diese soll immer einen gewissen Abstand zum Rand haben und zentriert sein :) Ich verstehe nicht ganz wie ich dies aber hinbekomme, wenn sich der Viewport ändert (Fenster klein skalieren, anderes gerät etc).
 

Kirby.exe

Top Contributor
Edit: Hat sich erledigt :) Hab in einem Stackoverflow post gaaaaanz weit unten gefunden :)

Edit(V.2): Es hat sich doch nicht erledigt...xD Also es ist nur responsive für die größe 500px für height und width :)

Hier ist das was ich gefunden habe :

CSS:
.main-box{
    width: 500px;
    height:500px;
    margin:0 auto;
    background-color: white;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-250px;
    margin-top:-250px;
}

Ich würde gerne dass die Box sich über die komplette Seite erstreckt. Sprich links und recht nur ungefähr 5% platz ist :) Nach unten soll keine Begrenzung existieren :)
 

MoxxiManagarm

Top Contributor
Dieses css ist gruselig was du das hast, verwende das ja nicht xD

HTML:
<!DOCTYPE html>
<html>
    <head>
        <style>
            .mainbox {
                background-color: red;
                height:500px;
                margin-left: 5%;
                margin-right: 5%;
            }
        </style>
    </head>
    <body>
        <div class="mainbox">MAINBOX</div>
    </body>
</html>
 

MoxxiManagarm

Top Contributor
Ich muss sagen ich habe noch einige Schwierigkeiten mit CSS xD

Am Anfang kann es schwierig sein. Aber eigentlich ist es in den Grundzügen nur ein "Layout", wie man es aus Java (LayoutManager) kennt. Zusätzlich werden ein paar Styles (Farbe, Aignment, Schriftgröße etc.) mit reingemischt. Meistens fallen Neulingen die Styles leicht und haben so ihre Schwierigkeiten mit dem Layout. Das Layout wird über den display Parameter definiert. Die gängisten sind z.B. block, grid, flex und table. Wenn du dich mit denen ein bissl beschäftigst, dann bist du schon gut. Padding und Margin gehen mit allen Layouts gängig einher.
 

Thallius

Top Contributor
Dieses css ist gruselig was du das hast, verwende das ja nicht xD

HTML:
<!DOCTYPE html>
<html>
    <head>
        <style>
            .mainbox {
                background-color: red;
                height:500px;
                margin-left: 5%;
                margin-right: 5%;
            }
        </style>
    </head>
    <body>
        <div class="mainbox">MAINBOX</div>
    </body>
</html>

Verstehe ich nicht. Das Dinge ist ja jetzt immer 500px Hoch. Was hat das mit gleichem Abstand zu tun? Und was für einen Abstand überhaupt? Zu allen vier Seiten oder nur recht/links so wie es bei dir ist?
 

MoxxiManagarm

Top Contributor
Die 500px habe ich einfach übernommen, als Beispielhöhe der Komponente. Kirby ging es, glaube ich, vorrangig um links und rechts und der ist durch den margin gegeben
 
Ähnliche Java Themen

Ähnliche Java Themen

Neue Themen


Oben