Frage Text innerhalb <div> zentrieren

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

h00

Neues Mitglied
3 April 2020
9
0
1
24
Hallo zusammen,

ich habe da ein Problem und zwar würde ich gern eine Überschrift in meinem header Zentrieren. Problem scheint zu sein, dass mein header per margin links nen Abstand hat.
Ich habe manuelles Zentrieren in meinem WYSIWYG-Programm versucht, selber per <div style=text-"align:center"> oder im CSS code per text-align, aber nichts hat geholen, bzw. der Text war immer zu weit rechts.

hier der Code für den header:

CSS:
}
.header {  
    position: fixed;
    border-bottom: 2px solid black;
    width:100%;
    height:150px;
    margin-left: 302px;
    background: teal;
    font-size:xx-large;
}
HTML:
<div class="header" style="text-align:center"><h7>TESTSCHRIFT</h7></div>
 

Sailor

Aktives Mitglied
14 Juli 2017
489
63
28
Versuche mal, die 'width' für deinen .header so anzugeben....
width: calc(100% - 302px);
Es existiert kein <h7> im HTML!
 

MrMurphy

Senior HTML'ler
28 Juli 2009
1.545
225
63
Die Angabe ändert nichts, da das genau die bereits vorhandene Breite ergibt. Zur Zentrierung (offensichtlich im Browserfenster) ist

Code:
width: calc(100% - 604px);
erforderlich. Das seltsame Konstrukt (breites Margin und trotzdem zentriert) deutet zusätzlich auf weitere Probleme hin.
 

h00

Neues Mitglied
3 April 2020
9
0
1
24
Code:
width: calc(100% - 604px);
erforderlich. Das seltsame Konstrukt (breites Margin und trotzdem zentriert) deutet zusätzlich auf weitere Probleme hin.
Ja stimmt ich wills im Browserfenster zentrieren, und die breite Margin habe ich weil ich links am Rand mein Collapsemenü habe. Bin erst Anfänger in CSS aber habe so den <div> eben verschoben bis es das Menü nicht mehr überschneidet.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.838
364
83
67
In dem Fall müsste man das Ganze im Zusammenhang betrachten können. Wenn Du es online hast, dann poste die URL. Wenn nicht, dann das HTML und CSS und kürze es ggf. um Inhalte, die für das Problem nicht relevant sind.
Wahrscheinlich gibt es bessere Möglichkeiten, als das irgend wie mit margin auszutarieren.
 

h00

Neues Mitglied
3 April 2020
9
0
1
24
Habe es nur lokal und nicht online. Bin blutiger CSS-Anfänger sind teilweise Sachen aus Tutorials, deshalb weiß ich jetzt nicht genau was "relevant" bzw. "irrelevant" sein könnte um es eleganter als mit margin zu lösen.

So soll es Aussehen: (natürlich ohne den hässlichen Streifen links)

webseite.JPG

Und die Codes dazu:

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" dir="ltr">

    <head>
         <meta charset=utf-8/>
        <title></title>
        <link rel="stylesheet" href="style.css"></link>
        <script src="https://kit.fontawesome.com/3b1e1c19f6.js" crossorigin="anonymous"></script>
       
    </head>
       
    <body>
        <div class="sidebar">
            <div class="menu">
               
                <ul>
               
                <li class="item" id="P1">
                    <a href="#P1" class="btn"><i class="fas fa-angle-down"></i>Punkt1</a>
                    <div class="smenu">
                        <a href="#">1</a>
                        <a href="#">2</a>
                        <a href="#">3</a>
                        <a href="#">4</a>
                    </div>
                </li>
               
                <li class="item" id="P2">
                    <a href="#P3" class="btn"><i class="fas fa-angle-down"></i>Punkt2</a>
                    <div class="smenu">
                        <a href="#">1</a>
                        <a href="#">2</a>
                        <a href="#">3</a>
                        <a href="#">4</a>
                    </div>
                </li>

                <li class="item" id="P3">
                    <a href="#P3" class="btn"><i class="fas fa-angle-down"></i>Punkt3</a>
                    <div class="smenu">
                        <a href="#">1</a>
                        <a href="#">2</a>
                        <a href="#">3</a>
                        <a href="#">4</a>
                        <a href="#">5</a>
                        <a href="#">6</a>
                    </div>
                </li>

                <li class="item" id="P4">
                    <a href="#P4" class="btn"><i class="fas fa-angle-down"></i>Punkt4</a>
                    <div class="smenu">
                        <a href="#">1</a>
                        <a href="#">2</a>
                        <a href="#">3</a>
                        <a href="#">4</a>
                        <a href="#">5</a>

                    </div>
                </li>

                <li class="item" id="P5">
                    <a href="#P5" class="btn"><i class="fas fa-angle-down"></i>Punkt5</a>
                    <div class="smenu">
                        <a href="#">1</a>
                        <a href="#">2</a>
                    </div>
                </li>
               
                <li class="item" id="P6">
                    <a href="#P6" class="btn"><i class="fas fa-angle-down"></i>Punkt6</a>
                    <div class="smenu">
                        <a href="#">1</a>
                       
                    </div>
                </li>
                <li class="item" id="P7">
                    <a href="#P7" class="btn"><i class="fas fa-angle-down"></i>Punkt7</a>
                    <div class="smenu">
                        <a href="#">1</a>
                        <a href="#">2</a>
                        <a href="#">3</a>
                        <a href="#">4</a>
                    </div>
                </li>


                </ul>
               
            </div>
            <div class="main">
                <div class="header"><p>UEBERSCHRIFT</p></div>
                <div class="main_content"> Inhalt</div>
            </div>
            </div>
            </body>

</html>
CSS:
*{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    list-style: none;
    text-decoration: none;
}
body{
    background: #f3f5f9;
}
.sidebar{
    position: relative;
    display:flex;
}
.menu{
    position: fixed;
    width: 300px;
    height: 100%;
    overflow: hidden;
    background: #3498db;
    border-right: 2px solid black;
}
.item{
    border-top: 1px solid #2980b9;
    overflow: hidden;
    padding: 15px 0 0 0;
}
.btn{
    display: block;
    padding: 10px 20px;
    background: #3498db;
    color: white;
    position: relative;
}
btn:before{
    content:"";
    position: absolute;
    width: 14px;
    height: 14px;
    background: #3498db;
    left: 0px;
    bottom: -7px;
    transform: rotate (45deg);
}
.btn i{
    margin-right: 10px;
}
.smenu {
    background: #333;
    overflow: hidden;
    transition: max-height 0.3s;
    max-height: 0;
}
.smenu a{
    display: block;
    padding: 16px 26px;
    color: white;
    font-size: 14px;
    margin: 4px 0;
    position: relative;
}
.smenu a:before{
    content: "";
    position: absolute;
    width: 6px;
    height: 100%;
    background: #3498db;
    left: 0;
    top: 0;
    transition: 0.3s;
    opacity: 0;

}
   
.smenu a:hover:before{
    opacity: 1;
}
.item:target .smenu{
    max-height: 20em;
}

.main_content{
    position: fixed;
    width:100%;
    height:100%;
    background:white;
    margin-left: 302px;
    margin-top: 151px;
   
}
.header {  
    position: fixed;
    border-bottom: 2px solid black;
    width:100%;
    height:150px;
    margin-left: 302px;
    background: teal;
    font-size:xx-large;
}

.header p{
    margin-left: 600px; // das ist übrigens ein frei gewählter Wert um es optisch zu verdeutlichen
}
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.838
364
83
67
Damit kann man jetzt etwas anfangen. Wie ich sehe, hast Du bei der Sidebar schon ein flex stehen, damit bist Du auf einem guten Weg.
Zunächst mal hat Du da einen falschen Doctype, die erste Zeile muss lauten:
<!doctype html>
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.838
364
83
67
Ich möchte hier ein Layout auf der Basis von flex ohne fixierte Positionierung vorstellen, wo das Menü und der Header trotzdem feststehen und immer sichtbar sind. Schau, ob es dir gefällt und versuche, es zu verstehen.
Code:
<!doctype html>
<html lang="en" dir="ltr">

<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
            font-family: sans-serif;
            list-style: none;
            text-decoration: none;
        }

        html,
        body {
            height: 100%;
        }

        body {
            background: #f3f5f9;
            display: flex;
        }

        nav {
            flex: 1;
            display: flex;
        }

        div.right {
            flex: 2;
            display: flex;
            flex-direction: column;
        }

        header {
            flex: 0 0 auto;
        }

        main {
            flex: 1;
            overflow-y: auto;
        }

        .item {
            border-top: 1px solid #2980b9;
            overflow: hidden;
            /* padding: 15px 0 0 0; */
        }

        .btn {
            display: block;
            padding: 10px 20px;
            background: #3498db;
            color: white;
            position: relative;
        }

        btn:before {
            content: "";
            position: absolute;
            width: 14px;
            height: 14px;
            background: #3498db;
            left: 0px;
            bottom: -7px;
            transform: rotate (45deg);
        }

        .btn i {
            margin-right: 10px;
        }

        .smenu {
            background: #333;
            overflow: hidden;
            transition: max-height 0.3s;
            max-height: 0;
        }

        .smenu a {
            display: block;
            padding: 16px 26px;
            color: white;
            font-size: 14px;
            margin: 4px 0;
            position: relative;
        }

        .smenu a:before {
            content: "";
            position: absolute;
            width: 6px;
            height: 100%;
            background: #3498db;
            left: 0;
            top: 0;
            transition: 0.3s;
            opacity: 0;

        }

        .smenu a:hover:before {
            opacity: 1;
        }

        .item:target .smenu {
            max-height: 20em;
        }
    </style>
    <script src="https://kit.fontawesome.com/3b1e1c19f6.js" crossorigin="anonymous"></script>

</head>

<body>
    <nav>
        <ul>
            <li class="item" id="P1">
                <a href="#P1" class="btn"><i class="fas fa-angle-down"></i>Punkt1</a>
                <div class="smenu">
                    <a href="#">1</a>
                    <a href="#">2</a>
                    <a href="#">3</a>
                    <a href="#">4</a>
                </div>
            </li>

            <li class="item" id="P2">
                <a href="#P3" class="btn"><i class="fas fa-angle-down"></i>Punkt2</a>
                <div class="smenu">
                    <a href="#">1</a>
                    <a href="#">2</a>
                    <a href="#">3</a>
                    <a href="#">4</a>
                </div>
            </li>

            <li class="item" id="P3">
                <a href="#P3" class="btn"><i class="fas fa-angle-down"></i>Punkt3</a>
                <div class="smenu">
                    <a href="#">1</a>
                    <a href="#">2</a>
                    <a href="#">3</a>
                    <a href="#">4</a>
                    <a href="#">5</a>
                    <a href="#">6</a>
                </div>
            </li>

            <li class="item" id="P4">
                <a href="#P4" class="btn"><i class="fas fa-angle-down"></i>Punkt4</a>
                <div class="smenu">
                    <a href="#">1</a>
                    <a href="#">2</a>
                    <a href="#">3</a>
                    <a href="#">4</a>
                    <a href="#">5</a>

                </div>
            </li>

            <li class="item" id="P5">
                <a href="#P5" class="btn"><i class="fas fa-angle-down"></i>Punkt5</a>
                <div class="smenu">
                    <a href="#">1</a>
                    <a href="#">2</a>
                </div>
            </li>

            <li class="item" id="P6">
                <a href="#P6" class="btn"><i class="fas fa-angle-down"></i>Punkt6</a>
                <div class="smenu">
                    <a href="#">1</a>

                </div>
            </li>
            <li class="item" id="P7">
                <a href="#P7" class="btn"><i class="fas fa-angle-down"></i>Punkt7</a>
                <div class="smenu">
                    <a href="#">1</a>
                    <a href="#">2</a>
                    <a href="#">3</a>
                    <a href="#">4</a>
                </div>
            </li>


        </ul>
    </nav>
    <div class="right">
        <header>
            <h1>UEBERSCHRIFT</h1>
        </header>
        <main>
            Lorem ipsum dolor sit amet, consetetur usw.
        </main>
    </div>
</body>

</html>
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.838
364
83
67
PS: Das Verhalten des Menüs links ist noch nicht ganz optimal: Öffnet man ein Item, taucht rechts eine zweite vertikale Scrollbar auf und es zuckt. Muss ich noch überlegen. Das Menü links scrollbar machen?
 

h00

Neues Mitglied
3 April 2020
9
0
1
24
Also bei mir tauch da keine Scrollbar auf und habe auch kein Zucken :rolleyes:

Werde mir das mal anschauen, aber das Menü sollte auf jeden Fall breiter eben 300px und die komplette linke Seite bis nach unten hin einnehmen.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.838
364
83
67
Das tritt nur auf, wenn man ein Item öffnet und der Inhalt vertikal nicht mehr in das Browserfenster passt.

Für die Breite des Memüs gibt es zwei Alternativen:

flex: 0 0 auto; dann passt sich die Breite an den Inhalt an und ändert sich nicht, wenn sich die Breite des Browserfensters ändert.

flex: 0 0 300px; dann wird die Breite fest auf 300px eingestellt und ändert sich ebenfalls nicht.
 
Zuletzt bearbeitet:

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.838
364
83
67
Die Überschrift kannst Du dann mühelos mit text-align zentrieren:
CSS:
        header h1 {
            text-align: center;
        }
 

h00

Neues Mitglied
3 April 2020
9
0
1
24
Das tritt nur auf, wenn man ein Item öffnet und der Inhalt vertikal nicht mehr in das Browserfenster passt.

Für die Breite des Memüs gibt es zwei Alternativen:

flex: 0 0 auto; dann passt sich die Breite an den Inhalt an und ändert sich nicht, wenn sich die Breite des Browserfensters ändert.

flex: 0 0 300px; dann wird die Breite fest auf 300px eingestellt und ändert sich ebenfalls nicht.
Da schein ich was falsch zu machen. Habe das unter

CSS:
        nav {
            flex: 0 0 auto (oder eben 300px);
            display: flex;
        }
haben beide aber nichts verändert.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.838
364
83
67
Hm, da liegen wir irgend wie auseinander, denn bei mir funktioniert es einwandfrei: Bei auto schließt der Text an das Menü an und bei 300px rechts leerer Raum; da müsste man dann noch etwas tun, damit das Menü die 300px auch ausfüllt.
Hier mein CSS:
CSS:
        * {
            margin: 0;
            padding: 0;
            font-family: sans-serif;
            list-style: none;
            text-decoration: none;
        }

        html,
        body {
            height: 100%;
        }

        body {
            background: #f3f5f9;
            display: flex;
        }

        nav {
            /* flex: 1; */
            flex: 0 0 auto;
            display: flex;
            overflow-y: scroll;
        }

        div.right {
            flex: 2;
            display: flex;
            flex-direction: column;
        }

        header {
            flex: 0 0 auto;
        }

        header h1 {
            text-align: center;
        }

        main {
            flex: 1;
            overflow-y: auto;
        }

        .item {
            border-top: 1px solid #2980b9;
            overflow: hidden;
            /* padding: 15px 0 0 0; */
        }

        .btn {
            display: block;
            padding: 10px 20px;
            background: #3498db;
            color: white;
            position: relative;
        }

        btn:before {
            content: "";
            position: absolute;
            width: 14px;
            height: 14px;
            background: #3498db;
            left: 0px;
            bottom: -7px;
            transform: rotate (45deg);
        }

        .btn i {
            margin-right: 10px;
        }

        .smenu {
            background: #333;
            overflow: hidden;
            transition: max-height 0.3s;
            max-height: 0;
        }

        .smenu a {
            display: block;
            padding: 16px 26px;
            color: white;
            font-size: 14px;
            margin: 4px 0;
            position: relative;
        }

        .smenu a:before {
            content: "";
            position: absolute;
            width: 6px;
            height: 100%;
            background: #3498db;
            left: 0;
            top: 0;
            transition: 0.3s;
            opacity: 0;

        }

        .smenu a:hover:before {
            opacity: 1;
        }

        .item:target .smenu {
            max-height: 20em;
        }
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.838
364
83
67
Das ist genau das, was sich aus dem HTML und CSS ergibt: Der linke Container hat sich in der Breite an den Inhalt angepasst. Jetzt kann man das Ganze noch verfeinern und an deine Vorstellungen anpassen. Du schriebst, dass das Menü 300px breit sein soll - das kannst Du durch flex: 0 0 300px; und width: 100%; für das ul darin erreichen. Und dass das Menü bis nach unten reichen soll - gib dem nav-Container die entspr. Hintergrundfarbe.
Mit diesem CSS:
CSS:
        * {
            margin: 0;
            padding: 0;
            font-family: sans-serif;
            list-style: none;
            text-decoration: none;
        }

        html,
        body {
            height: 100%;
        }

        body {
            background: #f3f5f9;
            display: flex;
        }

        nav {
            /* flex: 1; */
            flex: 0 0 auto;
            display: flex;
            width: 300px;
            background: #3498db;
        }

        nav ul {
            width: 100%;
        }

        div.right {
            flex: 2;
            display: flex;
            flex-direction: column;
        }

        header {
            flex: 0 0 auto;
        }

        header h1 {
            text-align: center;
        }

        main {
            flex: 1;
            overflow-y: auto;
        }

        .item {
            border-top: 1px solid #2980b9;
            overflow: hidden;
            /* padding: 15px 0 0 0; */
        }

        .btn {
            display: block;
            padding: 10px 20px;
            background: #3498db;
            color: white;
            position: relative;
        }

        btn:before {
            content: "";
            position: absolute;
            width: 14px;
            height: 14px;
            background: #3498db;
            left: 0px;
            bottom: -7px;
            transform: rotate (45deg);
        }

        .btn i {
            margin-right: 10px;
        }

        .smenu {
            background: #333;
            overflow: hidden;
            transition: max-height 0.3s;
            max-height: 0;
        }

        .smenu a {
            display: block;
            padding: 16px 26px;
            color: white;
            font-size: 14px;
            margin: 4px 0;
            position: relative;
        }

        .smenu a:before {
            content: "";
            position: absolute;
            width: 6px;
            height: 100%;
            background: #3498db;
            left: 0;
            top: 0;
            transition: 0.3s;
            opacity: 0;

        }

        .smenu a:hover:before {
            opacity: 1;
        }

        .item:target .smenu {
            max-height: 20em;
        }
sieht es dann so aus:
layout2.PNG
 

h00

Neues Mitglied
3 April 2020
9
0
1
24
Genauso hatte ich es gemacht, komisch. Habe jetzt deinen Code einfach Copy&paste und nun funktioniert es. Vielen Dank :cool:

endlich... :-)
 
Werbung: