[erledigt] CSS-Design Windows 8

/* Nullformatierung */
body, a, div, table, tr, td, ul, li, h1, h2, h3, h4, h5, h6, h7, * {
margin: 0;
padding: 0;
border: none;
}

body {
background-color: #222222;
font-family: verdana, tahoma;
}

/* Grundgerüst */
#container {
width: 1100px;
height: 475px;
margin: 0 auto;
}

/* Navigation */
#nav_container {
width: 260px;
height: 475px;
float: left;
}
#nav_heading { display: none; }
#nav {
margin: 0;
padding: 0;
}

/* Allgemeines zu den Menüpunkten */
li.nav_element {
width: 255px;
height: 147px;
background-image: none;
display:none; margin: 0 0 17px 0;
text-align: center;
padding: 0;
}
li.nav_element.subpage {
display:block;
padding-right: 5px;
}
li.nav_element a {
height: 92px;
text-decoration: none;
padding-top: 55px;
font-size:27px;
display: block;
color: white;
}

/* Zurück-Link unten in der Navi */
#nav_Zurck {
display:block;
width: 260px;
margin: 0;
}
#nav_Zurck a {
height: 92px;
padding-top: 55px;
font-size: 31px;
}

/* Content */
#content_container {
width: 823px;
height: 475px;
float: left;
margin: 0 0 0 17px;
}
#content {
width:403px;
height: 475px;
overflow: auto;
margin: 0 17px 0 0;
float: left;
background-color: #cccccc;
}
#post_content {
width: 403px;
height: 475px;
float: left;
}

/* Unnötiges ausgeblendet */
#header_container { display: none; }
#pre_content { display: none; }
#sidebar_container { display: none; }
#counter { display: none; }

<style type="text/css"> <!--
li.nav_element { background-color: #cc9933; }
li.nav_element:last-of-type a { background-color: grey; }
#post_content { background-image: url(http://img.webme.com/pic/t/transint-test3/eins.jpg); }

li.nav_element a { color: white; }
li.nav_element a:hover { color: white; text-decoration: none; }
li.nav_element a:active { outline: none; }
//--> </style>

<style type="text/css"> <!--
li.nav_element { background-color: #cc9933; }
li.nav_element:last-of-type a { background-color: grey; }

li.nav_element a { color: white; }
li.nav_element a:hover { color: white; text-decoration: none; }
li.nav_element a:active { outline: none; }

/* Portfolio-spezifisch */
#nav_container { float: left; height: 147px; position: relative; top: 328px; width: 260px; z-index: 25; }
#content { background-color: #993333; height: 311px; overflow: auto; width: 260px; }
#content2 { height: 485px; overflow: auto; }
#content_container { float: left; height: 475px; margin: 0; position: relative; top: -147px; width: 1100px; z-index: 24; }
#post_content { display: none; }
//--> </style>
Hier kommt der Text hin, den du am Ende auf dem roten Hintergrund lesen kannst.

<!-- Jetzt brauchen wir ein neues Div für die Bilder. Erst wird #content geschlossen, dann ein neues geöffnet. //-->
<!-- Geschlossen wird es mit dem </div>, das eigentlich den #content schließt und somit schon vorhanden ist. //-->
</div>
<div id="content2">
<style type="text/css">
a.fancybox-effects-d img{
background: none repeat scroll 0 0 #FFFFFF;
margin: 0 5px 5px 0;
padding: 5px;
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.7);
}
</style>

<a class="fancybox-effects-d" href="http://dummyimage.com/700x450/ff0000/fff&text=Test-Bild.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit"><img src="http://dummyimage.com/250x140/ff0000/fff&text=Test-Bild" alt="" /></a>

<!-- Für die Bildergalerie brauchen wir etwas JavaScript //-->
<link type="text/css" href="http://seos-gallery.googlecode.com/svn/trunk/jquery.fancybox.css" rel="stylesheet" />
<script type="text/javascript" src="http://seos-gallery.googlecode.com/svn/trunk/jquery.js"></script>
<script type="text/javascript" src="http://seos-gallery.googlecode.com/svn/trunk/jquery.fancybox.js"></script>
<script type="text/javascript">
// Remove padding, set opening and closing animations, close if clicked and disable overlay
$(".fancybox-effects-d").fancybox({
padding: 0,
openEffect : 'elastic',
openSpeed : 150,
closeEffect : 'elastic',
closeSpeed : 150,
closeClick : true,
});
</script>

</div><div id="content2">

#post_content { display:none; }
#content2 { float: left; height: 475px; width: 403px; background-color: #aaaaaa; color: #eeeeee; }