Responsives Webdesign

Nun habe ich endlich meinem selbstgebauten WordPress-Theme ein "responsives Webdesign" spendiert, sodass die Webseite auch auf Geräten mit kleinem Display (z.B. Smartphones, Tablets) zu sehen ist, ohne immer horizontal scrollen zu müssen. Das Layout ist jetzt auf größeren Desktops 3-spaltig. Bei einer Bildschirm-, bzw. Displaybreite unter 992px springt die linke Sidebar ganz nach rechts und befindet sich dann über der rechten Sidebar. Das Layout ist dann nur noch 2-spaltig. Bei noch kleinerem Display, unter 720px, springen beide Sidebars unter den mittleren Bereich und das Layout ist einspaltig.

Das Grund-Layout in HTML und die dazugehörige CSS-Datei sehen so aus:

<!DOCTYPE html>
<!--[if IE 8]><html id="ie8" dir="ltr" lang="de-DE"><![endif]-->
<!--[if !(IE 8)]><!-->
<html dir="ltr" lang="de-DE">
<!--<![endif]-->

<head>
<meta charset="utf-8">
<title>Lorem ipsum</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" /> 
<meta name="viewport" content="width=device-width,initial-scale=1.0" /> 
</head>

<body>

<div id="header">
	<div class="wrap">
	<h1>Lorem ipsum</h1>
	</div>
</div>

<div id="nav-main">
	<div class="wrap">
	<a href="#">Startseite</a>
	<a href="#">Seite 2</a>
	<a href="#">Seite 3</a>
	</div>
</div>	

<div id="main">

	<div class="wrap">

	<div id="primary">
		<div class="post">
		<h2><em>Artikel-Überschrift</em></h2>
		<p>Lorem ipsum</p> 
		</div>
	</div>

	<div id="secondary">
		<div class="widget">
		<p class="widget-title">Lorem1</p>
		<p>Lorem ipsum</p>
		</div>
	</div>

	<div id="tertiary"> 
		<div class="widget">
		<p class="widget-title">Lorem2</p>
		<p>Lorem ipsum</p>
		</div>
	</div>

	</div>

</div>

<div id="footer">
	<div class="wrap">
	<p class="site-credits">Footer<br /></p>
	</div>
</div>

</body>
</html>

...und hier die dazugehörige CSS-Datei:

*{
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-top: 0;
}
html{
    font-size: 62.5%;
}
html,
body{
    height: 101%;
}
body{
    font-family: Arial,Helvetica,sans-serif;
    font-size: 160%;
    font-weight: 400;
    color: #444;
    background-color: #eee;
}
img{
    max-width: 100%;
    height: auto;
}
#ie8 img{
    width: auto;
}
strong{
    color: #555;
}
.wrap{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}
.wrap:after{
    content: "";
    display: table;
    clear: both;
}
#header{
    background-color: #884D99;
    height: 77px;
}
#nav-main{
    border-top: 1px solid #ab8bb4;
    background-color: #44264c;
    margin: 0;
    padding: 8px 0px 6px 0px;
    padding: 0.8rem 0rem 0.6rem 0rem;
}
#nav-main div.wrap{
    text-align: center;
}
#nav-main div.wrap a{
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    margin: 0 8px 0 8px;
    margin: 0 0.8rem 0 0.8rem;
    padding: 4px;
    padding: 0.4rem;
    line-height: 200%;
}
#nav-main div.wrap a:hover{
    background-color: #a192a5;
    color: #000000;
}
#main{
    margin: 7px 4px 4px 4px;
    margin: 0.7rem 0.4rem 0.4rem 0.4rem;
}
h1,
h2{
    color: #6F328B;
    margin: 0 0 10px 0;
    margin: 0 0 1rem 0;
    padding: 0 0 2px 0;
    padding: 0 0 0.2rem 0;
    text-shadow: 2px 2px 1px #ccc;
    font-weight: 700;
    border-bottom: 1px dotted #ccc;
}
h1,
h2{
    font-size: 20px;
    font-size: 2rem;
    line-height: 30px;
    line-height: 3rem;
}
#secondary,
#tertiary,
#primary div.post{
    border-radius: 4px;
    border-radius: 0.4rem;
    border: 1px solid #cbcbcb;	
}
#secondary,
#tertiary,
#primary{
    max-width: 800px;
    margin: 0 auto;
}
.post{
    margin: 0 0 2px 0;
    margin: 0 0 0.2rem 0;
    padding: 13px 20px 12px 16px;
    padding: 1.3rem 2rem 1.2rem 1.6rem;
	background-color: #fff;
}
.post p{
    text-align: justify;
    margin-bottom: 6px;
    margin-bottom: 0.6rem;
    line-height: 22px;
    line-height: 2.2rem;
    font-size: 15px;
    font-size: 1.5rem;
}
ul{
    margin: 0 0 10px 0;
    margin: 0 0 1rem 0;
    padding: 0 18px 0 24px;
    padding: 0 1.8rem 0 2.4rem;
}
li{
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 24px;
    line-height: 2.4rem;
}
#secondary,
#tertiary{
    width: 100%;
    background-color: #fff;
    padding: 5px 0 10px 0;
    padding: 0.5rem 0 1rem 0;
}
#secondary ul,
#tertiary ul{
    color: #999;
    list-style: square;
    margin-top: 10px;
    margin-top: 1rem;
    padding: 0 18px 0 24px;
    padding: 0 1.8rem 0 2.4rem;
}
#secondary ul li,
#tertiary ul li{
    line-height: 28px;
    line-height: 2.8rem;
}
#secondary{
    margin: 0 0 4px 0;
    margin: 0 0 0.4rem 0;
}
.widget{
    margin: 8px 8px 12px 8px;
    margin: 0.8rem 0.8rem 1.2rem 0.8rem;
    padding: 0;
}
p.widget-title{
    font-size: 15px;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 10px 0 0 0;
    margin: 1rem 0 0 0;
    padding: 2px 0 1px 5px;
    padding: 0.2rem 0 0.1rem 0.5rem;
    color: #8A58A1;
    background-color: #e4e4e4;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 1);
}
#footer{
    background-color: #000;
    padding: 20px 0;
    padding: 2rem 0;
    clear: both;
}
#footer .site-credits{
    text-align: center;
    font-size: 12px;
    font-size: 1.2rem;
}
#footer .site-credits a{
    color: #999;
}
@media screen and (min-width:760px) {
#main{
        margin: 7px 4px 6px 4px;
        margin: 0.7rem 0.4rem 0.6rem 0.4rem;
    }
#nav-main div.wrap a{
        line-height: 150%;
    }
#primary{
        float: left;
        width: 75%;
        padding-right: 0;
    }
.post{
        margin: 2px 5px 2px 0px;
        margin: 0.2rem 0.5rem 0.2rem 0rem;
    }
#secondary,
#tertiary{
        float: right;
        clear: right;
        width: 25%;
    }
#secondary{
        margin: 0px 0px 8px 0px;
        margin: 0rem 0rem 0.8rem 0rem;
    }
}
@media screen and (min-width:992px) {
#main{
        margin: 7px 4px 6px 4px;
        margin: 0.7rem 0.4rem 0.6rem 0.4rem;
    }
#primary{
        float: left;
        margin-left: 20%;
        width: 60%;
        padding: 0;
    }
.post{
        margin: 2px 5px 2px 5px;
        margin: 0.2rem 0.5rem 0.2rem 0.5rem;
    }
h1,
h2{
        line-height: 24px;
        line-height: 2.4rem;
    }
#secondary{
        float: left;
        margin: 0 0 0 -80%;
        width: 20%;
        clear: none;
    }
#tertiary{
        float: right;
        width: 20%;
        clear: none;
    }
}
 

Galerien / Präsentationen...

city001-sidebar

link-icon002 Galerien-Übersicht...

Kategorien

Alle Artikel

(Inhaltsverzeichnis)

link-icon002 alphabetisch geordnet...

link-icon002 nach Datum geordnet...

soziale Netzwerke...

"Cogniclip" ist auch auf folgenden sozialen Netzwerken vertreten:

Cogniclip auf Twitter Cogniclip auf Google+
 

Per RSS Beiträge abonnieren:

RSS-Feed von Cogniclip
 

Kalender

Juli 2017
M D M D F S S
« Feb    
 12
3456789
10111213141516
17181920212223
24252627282930
31