Suppenzauber Test

by bombo

HTML

<div id="previews">
    <div id="weekPreview">
        <div id="weekPrefix">
            <h5>
                Mein Angebot für Sie ..
            </h5>
        </div> <!-- end of weekPrefix -->
        <div id="weekTable">
            <div id="current" class="week">
                <h4><span>.. diese Woche (16. Mai - 21. Mai)</span></h4>
                <ul>
                    <li>
                        <a href="" title="Klassische Erbsensuppe">
                            <span>Erbsensuppe</span>
                        </a>
                        <span class="charge">&euro; 3,00</span>
                    </li>
                    <li>
                        <a href="" title="Tomatensuppe">
                            <span>Tomatensuppe</span>
                        </a>
                        <span class="charge">&euro; 3,00</span>
                    </li>
                    
                    <li>
                        <a href="" title="Rinderkraftbrühe Celestine mit Kräuterpfannkuchenstreifen">
                            <span>Rinderkraftbrühe Celestine</span>
                        </a>
                        <span class="charge">&euro; 3,00</span>
                    </li>
                </ul>
            </div>  <!-- end of current -->
            <div id="next" class="week">
            
                <h4><span>.. nächste Woche (23. Mai - 28. Mai)</span></h4>
                <ul>
                    <li>
                        <a href="" title="Klassische Erbsensuppe">
                            <span>Erbsensuppe</span>
                        </a>
                        <span class="charge">&euro; 3,00</span>
                    </li>
                    <li>
                        <a href="" title="Klassische Graupensuppe">
                            <span>Graupensuppe</span>
                        </a>
                        <span class="charge">&euro; 3,00</span>
                    </li>
                    <li>
           ...

CSS

/* CSS Document */

.dateNav {
    text-decoration: none;
    float: right;
    font-size:1.2em;
}

a.dayChange:link {
    color: black;
}
a.dayChange:visited {
    color: black;
}
a.dayChange:hover {
    color: #666;
}
a.dayChange:active {
    color: #666;
}


* {
  padding: 0;
  margin: 0;
  font-size: 100.01%
}

html, body {
  height: 100%;
}

body {
  background-image: url('../img/bg.gif');
  font-family: Verdana, Arial, sans-serif;
}

#previews {
  width: 300px;
  float: right;
  padding: 0 10px 0 0;
  z-index:1000;
  font-size: 80%;
}

.location img {
  display: block;
  margin: 8px auto;
  border: 1px solid #392a1c;
}

.charge {
  display: inline-block;
  margin-left: auto;
  font-style: italic;
}

#previews > div {
  position: relative;
  z-index:100;
  border: 1px dotted #aaa;
  background: #fff;
  margin: 10px 0;
}

#previews > div h5 {
  background-color: #966f4a;
  color: white; 
  padding: 1px 2px 2px 2px;
}

#previews > div h4 {
  padding: 3px;
  margin: 3px;
}

#previews > div h4 span:first-child {
  font-weight: normal;
  text-decoration: underline;
  font-style: italic;
}

#previews ul {
  display: inline-block;
  list-style: inside none;
  margin: 5px 0 5px 10px;
}

#previews li { 
  margin: 4px 0px 4px 10px;
  font-weight: bold;
}

#previews li a {
  display: inline-block;
  width: 200px;
}

#previews li a:link, #previews li a:visited {
  color: black;
  text-decoration: none;
}

#previews li a:hover, #previews li a:active {
  text-decoration: underline;
  color: white;
}

#previews li:hover {
  color: white;
  background: #392a1c;
}

#tomorrow {
  display: none;
}

.location p {
  margin: 10px;
}

.locName {
  font-weight: bold;
}

.locStreet {
  letter-spacing: 1px;
  font-style: italic;
}

JavaScript

function toggleTomorrow (event) {
    alert(event);
    return false;
}