mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 07:19 Benutzername: Passwort: Auto-Login

Thema: [CSS] Kleines CSS-Problem vom 25.09.2008


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> [CSS] Kleines CSS-Problem
Seite: 1, 2, 3, 4  Weiter
Autor Nachricht
DamnSimple
Threadersteller

Dabei seit: 12.08.2006
Ort: Siegen
Alter: -
Geschlecht: Weiblich
Verfasst Do 25.09.2008 07:38
Titel

[CSS] Kleines CSS-Problem

Antworten mit Zitat Zum Seitenanfang

Hallo,

ich hab's nun geschafft das Layout einigermaßen in HTML+CSS umzusetzen, allerdings habe ich noch ein paar kleine Probleme.

1. Wie bekomme ich es hin, das der Content und die rechte Zusatzspalte immer gleich lang mit der Navigationsspalte ist?
2. Wie schaffe ich es, das die Höhe des gesamten Designs mindestens 100% der Browserhöhe einnimmt und sich nur falls mehr Text da ist verlängert?

Danke schonmal im vorraus.

Hier die Seite
  View user's profile Private Nachricht senden
xBe

Dabei seit: 03.06.2006
Ort: Mönchengladbach
Alter: 34
Geschlecht: Männlich
Verfasst Do 25.09.2008 08:14
Titel

Re: [CSS] Kleines CSS-Problem

Antworten mit Zitat Zum Seitenanfang

Es wäre von Vorteil wenn du den Code hier postest, dann brauchen wir un s nicht wund suchen, wo was steht ect. Lächel

Zudem wirst du einiges über die Suiche finden...

100% height


mfg xBe
  View user's profile Private Nachricht senden
Anzeige
Anzeige
DamnSimple
Threadersteller

Dabei seit: 12.08.2006
Ort: Siegen
Alter: -
Geschlecht: Weiblich
Verfasst Do 25.09.2008 08:24
Titel

Antworten mit Zitat Zum Seitenanfang

Height 100% habe ich schon versucht, da tut sich garnichts.

Hier ist der HTML-Code
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html lang="de">
<head>
   <meta http-equiv="content-type" content="text/html; charset=utf-8">
   <meta name="description" content="Helmus Metzgerei [Inhaber Herbert Kremer]"></meta>
   <link rel="shortcut icon" href="img/favicon.ico" />
   <title>Helmus Metzgerei [Inhaber Herbert Kremer]</title>
   <style type="text/css" media="screen">   @import "style.css"; </style>
</head>
<body>

<div id="container">


   <div id="header">

      <div id="head_left">
      test 1...2...3...
      </div>

      <div id="head_content">
      test 1...2...3...
      </div>

      <div id="head_right">
      test 1...2...3...
      </div>

   </div>


   <div id="content">
   
      <div id="co_left">
      
         <ul id="navi">

            <li><a href="index.html" target="_self" title="Home" alt="Home">Home</a></li>
            <li><a href="team.html" target="_self" title="Das Team" alt="Das Team">Das Team</a></li>
            <li class="unter">Die Metzgerei</li>
            <li><a class="unter" href="produktion.html" target="_self" title="Die Produktion" alt="Die Produktion">&#xB7;   Die Produktion</a></li>
            <li><a class="unter" href="laden.html" target="_self" title="Der Laden" alt="Der Laden">&#xB7;   Der Laden</a></li>

            <li><a href="angebote.html" target="_self" title="Angebote" alt="Angebote">Angebote</a></li>
            <li><a href="auszeichnungen.html" target="_self" title="Auszeichnungen" alt="Auszeichnungen">Auszeichnungen</a></li>
            <li><a href="impressum.html" target="_self" title="Impressum" alt="Impressum">Impressum</a></li>
            <li><a href="feedback.html" target="_self" title="Feedback" alt="Feedback">Feedback</a></li>
         </ul>
         
      </div>

      <div id="co_content">
      test 1...2...3...
      </div>

      <div id="co_right">
      test 1...2...3...
      </div>
   
   </div>


   <div id="footer">

      <div id="foot_left">
      test 1...2...3...
      </div>

      <div id="foot_content">
      test 1...2...3...
      </div>

      <div id="foot_right">
      test 1...2...3...
      </div>

   </div>


</div>

</body>
</html>


Hier ist der CSS-Code
Code:

body {
   background-image: url(img/bg.gif);
   background-repeat: repeat;
   margin-top: 0px;
   font-family: Verdana, Lucida Grande, Tahoma, Trebuchet MS, sans-serif;
   font-size: 11px;
}

#container {
   margin: 0 auto;
   width: 900px;
   z-index: 1;
}

#header {
   width: 900px;
   height: 120px;
   background-color: white;
   z-index: 1;
}

#head_left {
   width: 200px;
   height: 120px;
   float: left;
   background-color: #fff;
   border-left: 1px white solid;
   border-bottom: 1px white solid;
   z-index: 1;
}

#head_content {
   width: 546px;
   height: 120px;
   float: left;
   background-color: #0d6380;
   border-left: 1px white solid;
   border-right: 1px white solid;
   border-bottom: 1px white solid;
   z-index: 1;
}

#head_right {
   width: 150px;
   height: 120px;
   float: left;
   background-color: #0099cc;
   border-right: 1px white solid;
   border-bottom: 1px white solid;
   z-index: 1;
}

#content {
   width: 900px;
   height: 100%;
   background-color: white;
   z-index: 1;
}

#co_left {
   width: 200px;
   height: auto;
   min-height: 100%;
   padding: 0px;
   float: left;
   background-color: #0099cc;
   border-left: 1px white solid;
   border-bottom: 1px white solid;
   z-index: 1;
}

#co_content {
   width: 506px;
   height: auto;
   min-height: 100%;
   float: left;
   padding: 20px;
   background-color: #efefef;
   border-left: 1px white solid;
   border-right: 1px white solid;
   border-bottom: 1px white solid;
   z-index: 1;
}

#co_right {
   width: 150px;
   height: auto;
   min-height: 100%;
   float: left;
   background-color: #0099cc;
   border-right: 1px white solid;
   border-bottom: 1px white solid;
   z-index: 1;
}


#footer {
   clear: both;
   width: 900px;
   height: 120px;
   z-index: 2;
}

#foot_left {
   width: 200px;
   height: 120px;
   float: left;
   background-color: #0099cc;
   border-left: 1px white solid;
   z-index: 2;
}

#foot_content {
   width: 546px;
   height: 120px;
   float: left;
   background-color: #0d6380;
   border-left: 1px white solid;
   border-right: 1px white solid;
   z-index: 2;
}

#foot_right {
   width: 150px;
   height: 120px;
   float: left;
   background-color: #0099cc;
   border-right: 1px white solid;
   z-index: 2;
}

 ul#navi {
    font-size: 11px;
    float: left; width: 200px;
    margin: 0 0 100%; padding: 0;
  }
  ul#navi li {
    list-style: none;
    margin: 0; padding: 0;
    border-bottom: 1px white solid;
  }
 
  ul#navi li.unter {
    list-style: none;
    margin: 0; padding: 0;
    border-bottom: 1px white solid;
    display: block;
    padding: 10px;
    font-weight: bold;
    color: white;
    background-color: #0d6380;
  }
 
  ul#navi a {
    display: block;
    padding: 10px;
    font-weight: bold;
    color: white;
    text-decoration: none;
  }
  ul#navi a:link {
    background-color: #0d6380;
    color: white;
    text-decoration: none;
  }
  ul#navi a:visited {
    background-color: #0d6380;
    color: white;
    text-decoration: none;
  }
  ul#navi a:hover {
    background-color: #0099cc;
    color: white;
    cursor: help;
    text-decoration: none;
  }
  ul#navi a:active {
    background-color: #0d6380;
    color: white;
    text-decoration: none;
  }
  ul#navi a.unter {
    display: block;
    padding: 10px;
    color: white;
    text-decoration: none;
  }
  ul#navi a.unter:link {
    background-color: #0099cc;
    color: white;
    text-decoration: none;
  }
  ul#navi a.unter:visited {
    background-color: #0099cc;
    color: white;
    text-decoration: none;
  }
  ul#navi a.unter:hover {
    background-color: #efefef;
    color: #666666;
    cursor: help;
    text-decoration: none;
  }
  ul#navi a.unter:active {
    background-color: #0099cc;
    color: white;
    text-decoration: none;
  }


Ist nicht so perfekt, bin noch am üben.
  View user's profile Private Nachricht senden
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Do 25.09.2008 08:31
Titel

Antworten mit Zitat Zum Seitenanfang

ich sehe nirgends das du die höhe deines wrappers auf 100% stellst.
  View user's profile Private Nachricht senden
DamnSimple
Threadersteller

Dabei seit: 12.08.2006
Ort: Siegen
Alter: -
Geschlecht: Weiblich
Verfasst Do 25.09.2008 08:33
Titel

Antworten mit Zitat Zum Seitenanfang

Ich hatte's aber schonmal probiert, lokal und es hat nichts genutzt.
  View user's profile Private Nachricht senden
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Do 25.09.2008 08:34
Titel

Antworten mit Zitat Zum Seitenanfang

dann zeig doch mal wie du das gemacht hattest.
  View user's profile Private Nachricht senden
konsumkünstler

Dabei seit: 05.06.2005
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Do 25.09.2008 09:02
Titel

Antworten mit Zitat Zum Seitenanfang

wurde hier nicht schon alles gesagt?

http://www.mediengestalter.info/forum/4/css-3-spaltiges-3-zeiliges-layout-zentriert-114412-1.html
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
DamnSimple
Threadersteller

Dabei seit: 12.08.2006
Ort: Siegen
Alter: -
Geschlecht: Weiblich
Verfasst Do 25.09.2008 09:19
Titel

Antworten mit Zitat Zum Seitenanfang

konsumkünstler hat geschrieben:
wurde hier nicht schon alles gesagt?

http://www.mediengestalter.info/forum/4/css-3-spaltiges-3-zeiliges-layout-zentriert-114412-1.html


Besonders weitergeholfen hat mir das auf jeden Fall nicht.
  View user's profile Private Nachricht senden
 
Ähnliche Themen Kleines CSS-Problem
kleines CSS Problem
kleines Javascript problem
Kleines Website Problem
kleines flash problem
Kleines vBulletin/JS/IE Problem
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2, 3, 4  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.