XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Wie bekomme ich das Layout hin? (http://xhtmlforum.de/showthread.php?t=73943)

Chizzo 20.10.2019 22:05

Wie bekomme ich das Layout hin?
 
Liste der Anhänge anzeigen (Anzahl: 1)
Hallo zusammen,

ich würde gerne eine Seite mit einem zweispaltigen Layout bauen. Das soll Blogähnlich aufgebaut werden. Also der aktuellste Artikel oben links, rechts daneben der zweitaktuellste. Links drunter dann der dritte, rechts drunter der vierte etc...

Ich bin noch Anfänger und frage mich ob es bessere Methoden gibt, als diese mit "divs" zu lösen?

Und wie erreiche ich es, dann das Layout bei kleinen Bildschirmen nicht mehr nebenbeinander, sondern untereinander angezeigt wird?

Und gibt es die Möglichkeit diesen "divs" auch feste Höhen zuzuweisen? Am Besten auch Prozentual angepasst an jeden Bildschirm.

Anbei ein Beispielbild und der CSS-Code.

Besten Dank im Voraus!

Code:


* {
            margin: 0;
            padding: 0;
        }
               
                html * {
            box-sizing: border-box;
        }
       
       
    header {
            width: 100%;
            max-width: 1200px;
            padding: 0px;
            margin: 0 auto;
                        margin-bottom: 2em;
            height: 100%;
            background-color: white;
            color: #FF0015;
            text-align: right;
        }


        #titelbild img {
            width: 100%;
            max-width: 1200px;
            vertical-align: bottom;
            border-top: 1px solid #BE000C;
        }
       
                nav {
                        cursor: pointer;
                }
               
               
        nav>ul {

            width: 100%;
            max-width: 1200px;
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;

        }


        nav li {

            width: 100%;
            max-width: 1200px;
            border: 1px solid #BE000C;
            border-left: none;
            border-right: none;
            font-family: Arial;
            padding: 0;
            font-size: 1.5rem;
            flex: 1 1 0%;

        }



        @media (min-width: 45em) {
            nav>ul {
                flex-direction: row;
            }
            nav li {
                flex: 1;
                font-size: 1em;
            }
        }

        nav a {


            display: block;
            padding: 0.4em;
            text-decoration: none;
            font-weight: bold;
            text-align: center;
            color: #BE000C;

        }

        nav li[aria-current] a {
            background-color: #BE000C;
            color: white;
            font-family: Arial;
        }
       
           

        nav a:focus,
        nav a:hover,
        nav li[aria-current] a:focus
        nav li[aria-current] a:hover {
            background-color: #BE000C;
            color: white;
        }
       
        nav li[aria-current] a:focus,
        nav .submenu li a{
            color: #BE000C;
            background-color: white;
        }
       
        nav li a:hover,
        nav li:hover .submenu {         
            color: white;
            background-color: #BE000C;
        }
       
       
        nav .submenu li[aria-current] a {
            color: white;
            background-color: #BE000C;
        }
   
       
       

        /*    submenu navigation links      */

       
        nav > ul > li {
            position: relative;
        }
       
       
        nav .submenu {
            position: absolute;
            visibility: hidden;
            width: 100%;
            height: 0;
            z-index: 1000;
        }

        nav .submenu li {
            display: block;
            border-top: none;
            /* width: 15em; */
        }

        /**    Show the submenu on hover, focus    **/

        nav li:hover .submenu,
        nav li:active .submenu,
        nav li:focus .submenu {
            visibility: visible;
            height: auto;
            background-color: white;
            border-right: 1px solid #BE000C;
            border-left: 1px solid #BE000C;
            border-top: 1px solid #BE000C;
                       


        }
       
                i{
float: right;  }
       


 body * {
            box-sizing: border-box;
        }
               
#Listex {
        color: #BE000C;
}


       
       
        body {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
                        padding: 1em;
            height: 100%;
            background-color: white;
        }
       
        body a,
        body a:visited {
            color: #BE000C;
            text-decoration: none;
        }

               

                #inhalt p {
                        margin-bottom: 1em;
                        width: 80%;
                }

        p {
            font-family: Verdana;
            font-size: 1em;
            line-height: 120%;
        }
       
        h2 {
            text-decoration: none;
                        padding-bottom: 1em;
                }
}

        #inhalt {

            background-color: white;
                       
        }
       
        nav {

            background-color: white;
        } 



      aside#banner-rechts {
                        color: grey;
                        margin-left: 1em;
            background-color: white;
                        float:right;
                        text-align: left;
                        width: 20%;
                       
}
       
        aside#banner-rechts img{
            width: 100%;
                        float: right;
                        border: 1px solid black;
            }
               
               



        figure a {
            text-decoration: none;
            color: blue;

        }

        figure a:visited {
            color: blue;
        }

        figure a:hover {
            text-decoration: underline;
        }

        #Werbung img {

            align: right;

        }
               
                #Baustelle {
                        margin-top: 1em;
                }
       
        #Baustelle img {

        width: 25%;
                display: block;
                margin: 0 auto;
}
       
        footer {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            background-color: white;
        }
       
        footer p {
            text-align: right;
            color: #BE000C;
            display: none;
        }
       
       

}

body ul {
        margin-bottom: 1em;
}


#inhaltlinks {
        color: #BE000C;
        float: left;
        outline: 1px solid #BE000C;;
        width: 49%;
}

#inhaltrechts {
        color: #BE000C;
        float: right;
        outline: 1px solid #BE000C;;
        width: 49%;
}


cloned 21.10.2019 08:56

CSS ohne HTML ist recht sinnlos, aber hier mal ein kurzes Beispiel:

Copy-paste diesen Code auf zB jsfiddle.net um das mal anzuschauen.
Alternativ kannst du natürlich auch display: grid verwenden.
Ist hier vielleicht sogar besser, aber ich bin nun mal schneller ein Beispiel mit flexbox zu erstellen.
Code:


<div class="articles">
  <div class="article">
    Eins
  </div>
  <div class="article">
    Zwei
  </div>
  <div class="article">
    Drei
  </div>
</div>


* {
  box-sizing: border-box;
}
.articles {
  display: flex;
  flex-wrap: wrap;
}

.article{
  flex: 0 0 50%;
  border: 1px solid red;
  min-height: 20vh;
}

@media (max-width: 500px) {
  .article {
    flex: 0 0 100%;
  }
}



Alle Zeitangaben in WEZ +2. Es ist jetzt 13:08 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2020, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2019