[ERLEDIGT] Wie zentriere ich <div> Tag + padding-left:120px;

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Curzon

Neues Mitglied
26 März 2019
2
0
1
36
Hallo, sitze schon den halben Tag daran und finde keine passende Lösung. Sorry, bin noch noch ganz am Anfang mit HTML. Bin eigentlich vb, c++ Entwickler.

Habe folgenden Code:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
    <title>TEST Website</title>
    <meta charset=UTF-8>
    <meta name="description" content="Test"/>
    <meta name="keywords" content="Test">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link href="style.css" type="text/css" rel="stylesheet">
    <link rel="icon" href="img/icon.png">
<style>

</style>
</head>
<body>
<ul>
    <img src="img/arty.png" class="mnu_img" alt="Arty">
    <br>
    <li><a href="#xxx" target='_self'>xxx</a></li>
    <li><a href="#xxx" target='_self'>xxx</a></li>
    <li><a href="#xxx" target='_self' class='mnu_links'>xxx</a></li>
    <li><a href="#xxx" target='_self'>xxx</a></li>
    <li><a href="#xxx" target='_self'>xxx</a></li>
    <br>
    <li><a href="#xxx" target='_self'>xxx</a></li>
    <br>
    <li><a href="#xxx" target='_self'>xxx</a></li>
    <li><a href="#xxx" target='_self'>xxx</a></li>
</ul>
<div style="width:700px; margin-left: 210px; margin-top:12px;">
    <img src="img/main.png" align="middle" alt="Arty" width="700px">
    <br>
    <div>xxxxxxxxxxxxxxxxxx<a href="xxx" target="_blank"><span style="color:blue;">xxx</span></a></span></div>
    <br>
    <h1 style="">DUMDUMDUM</h1>
</div>
</body>
</html>
und noch die CSS:

CSS:
html {
    background-color: #white;
}
@viewport {
   width: device-width;
}
body {
    background-image: url(img/background.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-attachment:fixed;
    background-color: white;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    line-height: 1;
    font-size: 14px;
    font-family: Helvetica, Arial, sans-serif;
    text-rendering: optimizeLegibility;
}
a {
    outline: none;
    color: blue;
    text-decoration:none;
}
a:hover {
    color: blue;
    text-decoration:underline;
}
.mnu_links {
    color: red;
}
.mnu_img {
margin-left: 12px;
}
ul {
  list-style-type: none;
  margin: 0;
  padding-right: 210px;
  padding: 0;
  width: 200px;
  position: fixed;
  height: 100%;
  overflow: auto;
}
li a.active {
  background-color: #F5DA81;
  color: white;
}
li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #555;
  color: white;
}
h1 {
    font-size: 16px;
    margin-top: 10px;
    margin-bottom: 10px;
}
h3 {
    margin-top: 10px;
    margin-bottom: 10px;
}
p {
    margin-top: 0px;
}
img {
    display: block;
    height: auto;
}

@media screen and (max-width: 768px) {
    body {

    }
    .div-no-mobile {
    display:none
    }

    .div-only-mobile {
    display: block;
    }
}
Ich versuche jetzt den Inhalt (also die Webseite selbst, zu zentrieren). Dabei will ich, dass das Menü links quasi eine Begrenzung hat. Soll quasi beim Verändern der Webbrowser-Größe, der Inhalt nicht ins Menü rein. Brauche also quasi: <div: center + padding-left: 210px;> für die Hauptseite/-inhalt wie stelle ich das an? Habe den ganzen Vormittag gegoogelt, aber nichts brauchbares gefunden.
Ich danke euch im Voraus für Tipps
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.311
263
83
66
Ich verstehe dich so, dass das Haupt-Div eine maximale Breite von 700px haben soll und in dem freien Raum rechts vom Menü zentriert sein soll. Da gibt es mehrere Möglichkeiten. Ich bin mal den konventionellen Weg gegangen und habe das position: fixed; beibehalten:
Ein Div mit margin-left entspr. Breite des Menüs; dieses als Flexitem so, dass es den verbleibenden Platz ausfüllt.
Darin ein main-Container mit max-width: 700px; und mit margin: auto; zentriert.
Code:
<!DOCTYPE html>
<html lang="en">

<head>
    <title>TEST Website</title>
    <meta charset=UTF-8>
    <meta name="description" content="Test" />
    <meta name="keywords" content="Test">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link href="style.css" type="text/css" rel="stylesheet">
    <link rel="icon" href="img/icon.png">
    <style>
        html {
            background-color: white;
        }

        @viewport {
            width: device-width;
        }

        body {
            display: flex;
            background-image: url(img/background.jpg);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-attachment: fixed;
            background-color: white;
            margin-left: auto;
            margin-right: auto;
            margin-top: auto;
            line-height: 1;
            font-size: 14px;
            font-family: Helvetica, Arial, sans-serif;
            text-rendering: optimizeLegibility;
        }

        main {
            max-width: 700px;
            margin: 0 auto;
        }

        #main-outer {
            flex: 1;
            margin-left: 210px;
            margin-right: 10px;
            margin-top: 12px;
        }

        main img {
            width: 100%;
        }

        a {
            outline: none;
            color: blue;
            text-decoration: none;
        }

        a:hover {
            color: blue;
            text-decoration: underline;
        }

        .mnu_links {
            color: red;
        }

        .mnu_img {
            width: 100%;
        }

        ul {
            flex: 0 0 200px;
            list-style-type: none;
            margin: 0;
            padding-right: 210px;
            padding: 0;
            width: 200px;
            position: fixed;
            height: 100%;
            overflow: auto;
        }

        li a.active {
            background-color: #F5DA81;
            color: white;
        }

        li a {
            display: block;
            color: #000;
            padding: 8px 16px;
            text-decoration: none;
        }

        li a:hover {
            background-color: #555;
            color: white;
        }

        h1 {
            font-size: 16px;
            margin-top: 10px;
            margin-bottom: 10px;
        }

        h3 {
            margin-top: 10px;
            margin-bottom: 10px;
        }

        p {
            margin-top: 0px;
        }

        img {
            display: block;
            height: auto;
        }

        @media screen and (max-width: 768px) {
            .div-no-mobile {
                display: none
            }

            .div-only-mobile {
                display: block;
            }
        }
    </style>
</head>

<body>
    <ul>
        <img src="images/dia0.jpg" class="mnu_img" alt="Arty">
        <br>
        <li><a href="#xxx" target="_self">xxx</a></li>
        <li><a href="#xxx" target="_self">xxx</a></li>
        <li><a href="#xxx" target="_self" class="mnu_links">xxx</a></li>
        <li><a href="#xxx" target="_self">xxx</a></li>
        <li><a href="#xxx" target="_self">xxx</a></li>
        <br>
        <li><a href="#xxx" target="_self">xxx</a></li>
        <br>
        <li><a href="#xxx" target="_self">xxx</a></li>
        <li><a href="#xxx" target="_self">xxx</a></li>
    </ul>
    <div id="main-outer">
        <main>
            <img src="images/dia1.jpg">
            <br>
            <div>xxxxxxxxxxxxxxxxxx<a href="xxx" target="_blank"><span style="color:blue;">xxx</span></a></span></div>
            <br>
            <h1 style="">DUMDUMDUM</h1>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
            dolore
            magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
            kasd
            gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
            sadipscing
            elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
            vero eos et
            accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
            dolor sit
            amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
            labore
            et
            dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
            clita kasd
            gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

            Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
            feugiat
            nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
            augue duis
            dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
            nibh
            euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

            Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
            commodo
            consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel
            illum
            dolore eu
            feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
            delenit
            augue duis dolore te feugait nulla facilisi.

            Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer
            possim
            assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
            laoreet
            dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
            suscipit
            lobortis nisl ut aliquip ex ea commodo consequat.

            Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
            feugiat
            nulla facilisis.

            At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
            est
            Lorem
            ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
            invidunt ut
            labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
            rebum. Stet
            clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
            consetetur
            sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et
            et
            invidunt
            justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est
            Lorem ipsum
            dolor sit amet. Lorem ipsum dolor sit amet, consetetur
        </main>
    </div>
</body>

</html>
Da gibt es noch einen kleinen Mangel in der Form, dass <img>, <br> etc. nicht als Inhalt von ul valide sind. Kann man leicht beheben, indem man ein nav-Tag darum herum legt.
 
Zuletzt bearbeitet:

Curzon

Neues Mitglied
26 März 2019
2
0
1
36
GENAU DAS!!!!! Vielen dank. Wie gesagt, bin noch ganz am Anfang mit HTML/CSS. Habe erst vor 2 Tagen angefangen :) Bin in der Softwareentwicklung für Windows eigentlich... :)))
 
Werbung: