Ergebnis 1 bis 3 von 3

Thema: CSS divbox in divbox

  1. #1
    HTML Newbie
    Registriert seit
    06.09.2016
    Beiträge
    7
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Ausrufezeichen CSS divbox in divbox

    Einen Guten Morgen Euch allen

    Es geht um folgendes:

    1.Ich habe in einer Divbox eine weitere Divbox, meine Frage lautet nun wie kann ich diese mittig zentrieren, so dass ich wenn sich der Browser verschiebt die zentrierte Divbox(text321/322) fest verankert ist und sich nicht frei mit bewegt?

    2.Wie plane ich mein Layout am effektivsten bezüglich der breiten und Höhengestaltung, mit Pixel, Prozent oder Em Angaben?

    Hier einmal der Quelltext:

    <!DOCTYPE html>


    <html lang="de" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="/layout.css" />
    <title></title>
    </head>
    <body>
    <div id="fundament">


    <div id="header">
    <h1>Test</h1>
    </div>


    <div id="navigation">

    </div>


    <div id="text1">


    </div>


    <div id="text2">


    <div id="text21">
    <h3>Gewissenhaft</h3>
    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
    </div>


    <div id="text22">
    <h3>Leistungsstark</h3>
    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
    </div>


    <div id="text23">
    <h3>Individuell</h3>
    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
    </div>


    </div>


    <div id="text3">
    <div id="text31">
    <h3>test</h3>
    </div>
    <div id="text32">
    <div id="text321">
    <h3>test</h3>
    </div>
    <div id="text322">
    <h3>test</h3>
    </div>
    </div>

    </div>


    <div id="footer">


    </div>


    </div>


    </body>
    </html>

    CSS:

    body
    {
    background-color:white;
    font-size:100%;
    margin:0em;
    padding:0em;
    width:100%;
    height:100%;
    font-family:Arial;

    }


    #fundament {
    width:100%;
    height:100%



    }
    /*Kopfbereich*/
    #header {
    width:100%;
    height:150px;
    background-color:white;


    }


    /*Navigation*/
    #navigation {
    width:100%;
    height:30px;
    font-size:1.2em;
    color:dimgrey;
    text-align:right;
    background-color:#144C4D;


    }


    /*Erster Haupttextbereich*/
    #text1 {
    width:100%;
    height:550px;
    background-color:white;


    }


    #text2 {
    width:100%;
    height:480px;
    background-color:#144C4D;
    text-align: center;

    }


    #text21 {
    width:20%;
    height:30%;
    background-color:white;
    position:absolute;
    top:840px;
    left:40%;
    border-radius: 20px;




    }


    #text22 {
    width:20%;
    height:30%;
    background-color:white;
    position:absolute;
    top:840px;
    left:100px;
    border-radius: 20px;
    }


    #text23 {
    width:20%;
    height:30%;
    background-color:white;
    position:absolute;
    top:840px;
    right:100px;
    border-radius: 20px;
    }


    #text3 {
    width:100%;
    height:650px;
    background-color:white;
    text-align: center;
    }


    #text31 {
    width:40%;
    height:45%;
    background-color:#144C4D;
    position:absolute;
    top:1340px;
    left:100px;
    border-radius: 20px;


    }


    #text32 {
    width:40%;
    height:45%;
    background-color:#144C4D;
    position:absolute;
    top:1340px;
    right:100px;
    border-radius: 20px;



    }


    #text321 {
    width:80%;
    height:155px;
    background-color:white;
    position:absolute;
    bottom:40px;
    right:80px;
    border-radius: 20px;


    }


    #text322 {
    width:80%;
    height:155px;
    background-color:white;
    position:absolute;
    top:40px;
    right:80px;
    border-radius: 20px;


    }
    /*Endleiste*/
    #footer {
    width:100%;
    height:100px;
    background-color:dimgrey;


    }

    Herzliche Grüße

    Anevay
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Geändert von Anevay (06.09.2016 um 09:16 Uhr)

  2. #2
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    460
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: CSS divbox in divbox

    Auf absolute Positionierung solltest du verzichten. Für Textboxen ist die Höhenangabe auch nicht optimal. Suche mal nach FLEXBOX.

    Beispiel
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    
    <style>
    * {
     margin:0;
     padding:0;
     list-style:none;
    }
    
    body {
     background:#333;
    }
    /*Kopfbereich*/
    header {
    background:#ddd;
    }
    
    article {
     background:#ada;
    }
    /*Navigation*/
    nav {
    background:#dea;
    }
    
    /*Endleiste*/
    footer {
    background-color:#eee;
    }
    
    
    .flex { display: flex; background:#ede;}
    .col_100 { flex-basis:100%;padding:10px; margin:10px;}
    .col_50  { flex-basis:50%; padding:10px; margin:10px;} 
    .col_33  { flex-basis:33%; padding:10px; margin:10px;} 
    
    </style>
    
    <title>Test</title>
    
    
    </head>
    <body>
    <div id="page">
    
    
    <header>
    <h1>Homepage</h1>
    </header>
    
    
    <nav>
    <h2>Navigation</h2>
    </nav>
    
    
    <section class="flex col_100">
    
    
    <article class="col_33">
    <h3>Gewissenhaft</h3>
    Lorem ipsum dolor 
    </article>
    
    
    <article class="col_33">
    <h3>Leistungsstark</h3>
    Lorem ipsum dolor 
    </article>
    
    
    <article class="col_33">
    <h3>Individuell</h3>
    Lorem ipsum dolor
    </article>
    
    </section>
    
    <section class="flex col_100">
    
    
    <article class="col_50">
    <h3>Gewissenhaft</h3>
    Lorem ipsum dolor 
    </article>
    
    
    <article class="col_50">
    <h3>Leistungsstark</h3>
    Lorem 
    </article>
    
    </section>
    
    <article class="col_100">
    <h3>Leistungsstark</h3>
    Lorem ipsum dolor sit amet, 
    </article>
    
    <footer>
    <h2>Footer</h2>
    
    </footer>
    
    
    </div>
    </body>
    </html>
    Geändert von djheke (06.09.2016 um 12:33 Uhr)

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    06.09.2016
    Beiträge
    7
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: CSS divbox in divbox

    Hi,

    vielen lieben Dank! Der Tipp mit flexboxen hat mich enorm weitergebracht!

    Jetzt habe ich jedoch ein neues Problem:

    ich habe folgendes Layout erstellt: www.apenimon.org


    jetzt möchte ich dass wenn ich einen link auswähle, sich der inhalt im main container ändert, jedoch ohne dass sich die Seite aktualisiert?

    Gibt es hierfür Lösungsansätze?

    html:

    <!DOCTYPE html>


    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8" />
    <link rel="stylesheet" href="layout.css">
    <title></title>
    </head>
    <body>
    <div id="container">


    <div id="main">
    <h1>Mockup Design 0.1</h1>
    </div>


    <div id="sidebar">
    <div id="button1">
    <a href=""><a href="#">Startseite</a>
    </div>


    <div id="button2">
    <a href=""><a href="#">AIYANA</a>
    </div>


    <div id="button3">
    <a href=""><a href="#">ANEVAY</a>
    </div>


    <div id="button4">
    <a href=""><a href="#">Partner</a>
    </div>


    <div id="button5">
    <a href=""><a href="#">Unternehmen</a>
    </div>


    <div id="button6">
    <a href=""><a href="#">Community</a>
    </div>


    <div id="button7">
    <a href=""><a href="#">Registrieren</a>
    </div>


    <div id="button8">
    <a href=""><a href="#">Login</a>
    </div>


    </div>
    </div>


    <footer><a>Stand:07.09.2016</a></footer>
    </body>


    </html>

    CSS:

    body {
    background-color:#1F2525;
    font-family:Arial;
    margin: 0;
    padding: 0;
    border: 0;
    }


    #container{
    display:flex;


    }


    #main{
    order:1;
    flex:80%;
    height:700px;
    background-color:white;

    }


    #sidebar{
    order:2;
    width:150px;
    background-color:gray;
    text-align:center;


    }


    #button1 {
    overflow: hidden;

    }

    #button1 a {
    display: block;
    height: 18px;
    width:150px;


    }


    #button2 {
    overflow: hidden;


    }

    #button2 a {
    display: block;
    height: 18px;
    width:150px;


    }


    #button3 {
    overflow: hidden;

    }

    #button3 a {
    display: block;
    height: 18px;
    width:150px;


    }


    #button4 {
    overflow: hidden;


    }

    #button4 a {
    display: block;
    height: 18px;
    width:150px;


    }


    #button5 {
    overflow: hidden;

    }

    #button5 a {
    display: block;
    height: 18px;
    width:150px;


    }


    #button6 {
    overflow: hidden;


    }

    #button6 a {
    display: block;
    height: 18px;
    width:150px;


    }


    #button7 {
    overflow: hidden;

    }

    #button7 a {
    display: block;
    height: 18px;
    width:150px;


    }


    #button8 {
    overflow: hidden;


    }

    #button8 a {
    display: block;
    height: 18px;
    width:150px;


    }


    footer{
    background-color:#1F2525;
    color:white;
    text-align:center;


    }


    Herzliche Grüße

Ähnliche Themen

  1. background ist nicht über die komplette Divbox verteilt
    Von MyXoToD im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 30.09.2009, 13:13

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •