Div Element immer relativ zum Viewport

Diskutiere Div Element immer relativ zum Viewport im HTML / CSS / JScript / AJAX Bereich.
Kirby_Sike

Kirby_Sike

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_Sike

Kirby_Sike

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

MoxxiManagarm

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

Kirby_Sike

xD Ich muss sagen ich habe noch einige Schwierigkeiten mit CSS xD Danke :)
 
MoxxiManagarm

MoxxiManagarm

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.
 
Kirby_Sike

Kirby_Sike

Danke für die Tipps :) Ich werde mich mal etwas mehr in die Materie einlesen :)
 
Thallius

Thallius

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

MoxxiManagarm

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
 
Thema: 

Div Element immer relativ zum Viewport

Passende Stellenanzeigen aus deiner Region:
Anzeige

Neue Themen

Anzeige

Anzeige
Oben