Div Element immer relativ zum Viewport

Kirby.exe

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).
 
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 🙂
 
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>
 
Kirby_Sike hat gesagt.:
Ich muss sagen ich habe noch einige Schwierigkeiten mit CSS xD
Zum Vergrößern anklicken....

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.
 
MoxxiManagarm hat gesagt.:
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>
Zum Vergrößern anklicken....

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?
 
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
 

Aktuelle Jobs

Neue Themen

Ähnliche Themen

Native Library Location relativ zum Projektordner, nicht relativ zum Workspace
Antworten: 9
Kommerziellen Programm unter Verwendung div. Libraries mit div. Lizenzen
Antworten: 7
JScrollpage: Viewport beim Zoomen immer relative zentrieren
Antworten: 5
Div Element auslesen
Antworten: 9
JDialog relativ zum Parent ausrichten
Antworten: 4

Zurück
Oben