zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Wie bekomme ich das Layout hin?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 20.10.2019, 23:05
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.10.2010
Beiträge: 6
Chizzo befindet sich auf einem aufstrebenden Ast
Standard Wie bekomme ich das Layout hin?

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%;
}
Angehängte Grafiken
Dateityp: png Inhalt.png (2,8 KB, 7x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 21.10.2019, 09:56
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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%;
  }
}
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Bekomme das Layout nicht hin Kuchipatchi CSS 5 15.03.2011 16:21
Layout! bekomme es nicht hin bitte hilfe designfreak CSS 3 12.09.2007 12:24
Wie bekommt man dieses Layout hin? ComLar CSS 11 12.08.2007 20:29
Ich kriege mein CSS Layout nicht hin :( ConiKost CSS 6 17.02.2006 13:54


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:29 Uhr.