Technologische Grundlagen des E-Business
Freitag, 28. Februar 2014
Webdesign - CSS Code

Der CSS Code der Homepage stellt sich wie folgt dar:

 

@charset "utf-8";
/* CSS Document */

/* =======================================
 ALLGEMEINER BEREICH
======================================= */

*{
    font-family: Verdana, Arial, "Arial Black", sans-serife;
    font-size: 100%;
}

:link {
    color: #303030;
}

:visited :hover {
    color: #888888;
}

h1 {font-size: 140%;
    color: #B60F80;
    margin: 0;

}

h6 {
    font-size: 120%;
    color: #B60F80;
    margin: 0;
}
   
#wrapper {
    width: 100%;
    height: 100%;
    background-color: #F7F7F7;
}

header {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    height: auto;
}

/* =======================================
 MENÜ BEREICH
======================================= */

nav {
    background-color: #303030;
    border: 1px solid #888888;
    border-radius: 4px;
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
    color: #888;
    display: block;
    margin-top: 8px;
    margin-bottom: 8px;
    overflow: hidden;
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}

nav a:link{color: #888888;
}

  nav ul {
    margin: 0;
    padding: 0;
  }

    nav ul li {
      display: inline-block;
      list-style-type: none;
     
      -webkit-transition: all 0.2s;
      -moz-transition: all 0.2s;
      -ms-transition: all 0.2s;
      -o-transition: all 0.2s;
      transition: all 0.2s;
    }
     
      nav > ul > li > a > .caret {
        border-top: 4px solid #aaa;
        border-right: 4px solid transparent;
        border-left: 4px solid transparent;
        content: "";
        display: inline-block;
        height: 0;
        width: 0;
        vertical-align: middle;
 
        -webkit-transition: color 0.1s linear;
         -moz-transition: color 0.1s linear;
           -o-transition: color 0.1s linear;
        transition: color 0.1s linear;
      }

      nav > ul > li > a {
        color: #888888;
        display: block;
        line-height: 56px;
        padding: 0 24px;
        text-decoration: none;
      }
         
        nav > ul > li:hover {
            background-color: #B6B6B6;
        }

        nav > ul > li:hover > a {
            color: #888888;
        }

        nav > ul > li:hover > a > .caret {
            border-top-color: #888888;
        }
       
        nav ul li img {
            float: left;
            width: 16px;
            height: 16px;
            margin: 14px 5px;
            padding: 6px;
            background: #888;
            -webkit-border-radius: 25px;
            -moz-border-radius: 25px;
            border-radius: 25px;
            -webkit-transition: all .5s ease-in-out;
            -moz-transition: all .5s ease-in-out;
            -o-transition: all .5s ease-in-out;
            -ms-transition: all .5s ease-in-out;
            transition: all .5s ease-in-out;
        }
   
      nav > ul > li > div {
            background-color: #B6B6B6;
            border-top: 0;
            border-radius: 0 0 4px 4px;
            box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
            display: none;
            margin: 0;
            opacity: 0;
            position: absolute;
            width: 157px;
            visibility: hidden;
            z-index: 100;
            -webkit-transiton: opacity 0.2s;
            -moz-transition: opacity 0.2s;
            -ms-transition: opacity 0.2s;
            -o-transition: opacity 0.2s;
            -transition: opacity 0.2s;
      }

        nav > ul > li:hover > div {
          display: block;
          opacity: 1;
          visibility: visible;
        }
       
          nav > ul > li > div ul > li {
            display: block;
          }

            nav > ul > li > div ul > li > a {
                color: #888888;
                display: block;
                padding: 12px 24px;
                text-decoration: none;
            }

              nav > ul > li > div ul > li:hover > a {
                background-color: #B6B6B6;
              }
   
    nav #current img {
    background-color: #B60F80;
    }
   
/* =======================================
 CONTENT BEREICH
======================================= */
   
.content-index {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    height: 660px;
    border: 1px solid #888888;
    border-radius: 4px;
    background-image: url(images/index/bike-content.jpg);   
}

.content-index #index{
    width: 300px;
    height: auto;
    margin-right: 20px;
    margin-top: 30px;
    line-height: 2;
    float: right;
    text-align: center;   
}

        .content {
            width: 800px;
            height: auto;
            margin-right: auto;
            margin-left: auto;
            border: 1px solid #888888;
            border-radius: 4px;
            background-color: #DEDEDE;
        }

.content #uebermich-foto {
    width: 300px;
    height: auto;
    float: right;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-right: 10px;
}

.content #uebermich-text {line-height: 1.5;}

        #box {
            padding-top: 20px;
            padding-bottom: 20px;
        }
       
        #ueberschrift {margin-top: 30px;
                       margin-left: 30px;
        }
       
.content #touren {
    width: 800px;
    line-height: 1.5;
    text-align: center;
    margin-top: 30px;
    height: auto;
}

.content #touren #touren-tour1 {
    width: 150px;
    height: auto;
    margin-top: 10px;
    margin-right: 20px;
    border: 1px solid #888888;
    border-radius: 4px;
    text-decoration: none;
    padding:10px;
}

.content #touren #touren-tour2 {
    width: 150px;
    height: auto;
    margin-top: 10px;
    border: 1px solid #888888;
    border-radius: 4px;   
    padding: 10px;
    text-decoration: none;
}

.content #touren #tour {
    text-align: left;
}

.content #touren #tour-tobecontinued {
    text-align: center;
    font-size: 200%;
    margin-top: 100px;
    margin-bottom: 100px;
    font-weight: bold;
}

.content #galerie {
    width: 800px;
    line-height: 1.5;
    text-align: center;
    margin-top: 30px;
    height: auto;
}

.content #galerie #galerie-links {
    width: 150px;
    height: auto;
    margin-top: 10px;
    margin-right: 20px;
    border: 1px solid #888888;
    border-radius: 4px;
    text-decoration: none;
    padding:10px;
}

.content #galerie #galerie-rechts {
    width: 150px;
    height: auto;
    margin-top: 10px;
    border: 1px solid #888888;
    border-radius: 4px;
    text-decoration: none;
    padding:10px;   
}

.content .video {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 30px;
}

.content #kontakt { margin-top: 20px;
                    margin-left: 20px;
}

.content #kontakt #text {
    width: 350px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
}

.content #kontakt #kontakt-eingabe {margin-left: 30px;
}

.content #kontakt #eingabefeld1{
    width: 200px;
    height: 30px;
    border: thin solid #000000;
}

.content #kontakt #eingabefeld2 {    width: 320px;
                                    height: 150px;
                                    border: thin solid #000000;
}

.content #copyright {font-size: 80%;
                     margin-top: 30px;
}

footer {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #888888;
    border-radius: 4px;
    margin-top: 8px;
    text-align: center;
    background-color: #DEDEDE;
}

/* =======================================
 GALERIE BEREICH
======================================= */

.slider {box-shadow: inset 0 0 2px hsla(0,0%,0%,.2),
                0 3px 1px hsla(0,0%,100%,.75),
                0 -1px 1px 2px hsla(0,0%,0%,.1);
    width: 500px;                   
    height: 350px;                               
    margin-right: auto;
    margin-left: auto;               
    margin-top: 80px;                 
    margin-bottom: 80px;
    padding: .5em;
    background-color: #DEDEDE;       
}
   
.slider:before {box-shadow: inset 0 1px 1px 1px hsla(0,0%,100%,.2),
                inset 0 -2px 1px hsla(0,0%,0%,.4),
                0 5px 50px hsla(0,0%,0%,.25),
                0 20px 20px -15px hsla(0,0%,0%,.2),
                0 30px 20px -15px hsla(0,0%,0%,.15),
                0 40px 20px -15px hsla(0,0%,0%,.1);
    background-color: #DEDEDE;                 
    content: '';
    z-index: -1;
    margin-right: auto;                                           
    margin-left: auto;                       
    margin-top: 50px;                       
}

.slider li {
    box-shadow: 0 -1px 0 2px hsla(0,0%,0%,.03);
    list-style: none;
    position: absolute;
}

.slider input {display: none;}

.slider label {
    background-color: #111;
    border: .2em solid transparent;
    bottom: .5em;
    border-radius: 100%;
    cursor: pointer;
    display: block;
    height: .5em;
    left: 24em;
    opacity: 0;
    position: absolute;
    transition: .25s;
    width: .5em;
    visibility: hidden;
    z-index: 10;
}

.slider label:after {
    border-radius: 100%;
    bottom: -.2em;
    box-shadow: inset 0 0 0 .2em #111,
                inset 0 2px 2px #000,
                0 1px 1px hsla(0,0%,100%,.25);
    content: '';
    left: -.2em;
    position: absolute;
    right: -.2em;
    top: -.2em;
}

.slider:hover label {
    opacity: 1;
    visibility: visible;
}

.slider input:checked + label {background-color: #B60F80;}

.slider:hover li:nth-child(1) label {left: .5em;}

.slider:hover li:nth-child(2) label {left: 2em;}

.slider:hover li:nth-child(3) label {left: 3.5em;}

.slider:hover li:nth-child(4) label {left: 5em;}

.slider img {
    height: 350px;
    opacity: 0;
    transition: .25s;
    width: 500px;
    vertical-align: top;
    visibility: hidden;
}

.slider li input:checked ~ img {
    opacity: 1;
    visibility: visible;
    z-index: 10;
}

/* =======================================
 MEDIA QUERIES BEREICH
======================================= */

@media only screen
and (min-width:320px)
and (max-width:480px) {
*{font-size: 95%;}
header img {width:320px;}
header {width:320px;}   
nav {width:320px;}
.content {width:320px;}
.content-index {width: 320px;
                height: 300px;
                background-size: 320px 320px;
                padding-bottom: 20px;}
.content-index #index{margin-top: 0px;}
.content #touren #tour-tobecontinued {width:320px;
                                      margin-top: 50px;
                                      margin-bottom: 50px;}
.content #touren {width: 320px;}
.content #galerie {width: 320px;}
.slider {width:280px;
         height:186px;}
.slider:before{margin-top: auto;
               margin-bottom: auto;}
.slider img {width:280px;
             height:186px;}
.content #kontakt #text{width: 200px;}
.content #kontakt #eingabefeld2 {width: 200px;}
footer {width:320px;}
}
   
   

Im ersten Teil des CSS wurden allgemeine Informationen für das CSS festgelegt.

Im nästen Bereich wird das Menü mit samt den eingebundenen Icons formatiert. Die Farbe der Icons wird mit Hilfe der Hintergrundfarbe verändert, da die transparenten Icons in die HTML Datei eingebunden wurden.

Die unterschiedlichen Anforderungen an den Content Bereich werden als nächstes festgelegt. Der Content Bereich variiert von Seite zu Seite und somit sind auch unterschiedliche Anforderungen an das CSS gestellt.

Als vorletztes wird der Galerie Bereich formatiert.

Im letztn Abschnitt werden die Anforderungen an das CSS festgelegt falls die Homepage auf Samrtphones aufgerufen wird.

 

Weitere Links zu diesem Thema:

Webdesign - Grundgerüst

Webdesign - HTML Code

... comment

Online for 3940 days
Last update: 7. März, 14:55
status
You're not logged in ... login
menu
... home
... topics
... galleries

... ::collabor:: home
search
 
calendar
Februar 2014
Mo
Di
Mi
Do
Fr
Sa
So
 
 
 
 
 
 1 
 2 
 3 
 4 
 6 
 7 
 8 
 9 
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
 
 
 
recent updates
Bildbearbeitung - Icons
Um meine Menüleiste wie gewünscht umsetzen...
by eva katharina.hain.uni-linz (7. März, 14:55)
Bildbearbeitung - Fotos
Füt meine Homepage benötige ich zwei sehr...
by eva katharina.hain.uni-linz (7. März, 14:53)
Entwurf Homepage
Ich habe mir zwei Entwürfe für die zu erstellende...
by eva katharina.hain.uni-linz (7. März, 14:39)
Projektthema
Für den Kurs Medienproduktion hatte ich mir, wie...
by eva katharina.hain.uni-linz (7. März, 14:37)
Projektthema Überarbeitet
Da ich mich mehr und mehr mit der Erstellung meiner...
by eva katharina.hain.uni-linz (7. März, 14:31)

xml version of this page

made with antville