mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Sa 21.01.2017 07:23 Benutzername: Passwort: Auto-Login

Thema: Bequemes CSS-Layout vom 01.08.2006


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Bequemes CSS-Layout
Seite: 1, 2  Weiter
Autor Nachricht
hupfball
Threadersteller

Dabei seit: 06.03.2006
Ort: -
Alter: 43
Geschlecht: Weiblich
Verfasst Di 01.08.2006 12:39
Titel

Bequemes CSS-Layout

Antworten mit Zitat Zum Seitenanfang

Hallo,

obwohl ich mir schon 20 Beiträge zu diesem Thema angeschaut habe, bin ich noch nicht auf die Lösung meines Problems gekommen. Ich bin noch ziemlicher CSS-Neuling. Und zwar:

- der rosa Kasten (#text) soll, wenn mehr Text enthalten ist als in den umfassenden #content-Container paßt, letzteren nach unten vergrößern, so daß es eine einheitliche untere Kante gibt und

- das Hintergrundbild im Navi-Kasten (#naviunter) immer bis an die untere Kante vom #content-Container reicht.

http://www.natamorphose.de/tests/kastentest.html

und hier ist das zugehörige CSS:

Code:
#content { color: #036; font-size: 12px; font-family: helvetica; line-height: 16px; background-color: white; text-align: left; width: 780px; top:10px; height: 550px; z-index: 0; overflow: visible; margin: 0 auto; padding: 0; border-width: 0; }
#text { color: #002851; font-size: 11px; font-family: helvetica; line-height: 14px; background-color: fuchsia; position: relative; z-index: 1; overflow: hidden; margin: 0; padding: 15px; border-width: 0; }
.texte { color: #036; font-size: 12px; font-family: helvetica; line-height: 12px; text-align: left; border-width: 20px; }
#bild { top: 0; width: 256px; height: 166px; z-index: 15; float: right; clear: right; margin-bottom: 20px; margin-left: 20px; }
#navi { color: #707173; font-size: 12px; font-family: helvetica; background-image: url(images/navi-verlauf.png); background-repeat: repeat-y; text-decoration: none; position: absolute; top: 150px; left: 0; width: 155px; height: 99%; z-index: 1; }
#naviunter { color: #707173; font-size: 12px; font-family: helvetica; background-image: url(images/navi-verlauf.png); background-repeat: repeat-y; text-decoration: none; position: relative; width: 155px; z-index: 2; float: left; padding: 0; border-width: 0; }
a:link { color: #707173; font-size: 12px; font-family: helvetica; text-decoration: none; }
a:hover { color: #002851; font-size: 12px; font-weight: bold; text-decoration: none; }
.clear-left {clear:left;font-size:1px;}
.bild { float: right; margin: 0 0 15px 15px; padding: 0; }


Auch über andere Anregungen zu meinem Code bin ich sehr dankbar!

Gruß,
Hupfball

P.S.: Übrigens möchte ich mich bei allen hier Beteiligten herzlich bedanken! Das Forum hat mir schon eine Menge geholfen.
  View user's profile Private Nachricht senden
javaFreak

Dabei seit: 01.07.2006
Ort: NRW
Alter: -
Geschlecht: Männlich
Verfasst Di 01.08.2006 12:58
Titel

Antworten mit Zitat Zum Seitenanfang

ich hoff mal, du willst den contentbereich nicht in pink lassen!?
man weiß ja garnicht, welche Elemente die einzelnen css-klassen editieren. poste mal den quellcode dazu!
ansonsten zu dem Banner im Header: die Grafik ist von schlechter Qualität!
  View user's profile Private Nachricht senden
Anzeige
Anzeige
xitrix

Dabei seit: 04.10.2005
Ort: Detmold
Alter: 93
Geschlecht: Männlich
Verfasst Di 01.08.2006 13:47
Titel

Antworten mit Zitat Zum Seitenanfang

ist eigentlich easy. legste einfach in den content container die grafik von der linken navi leiste als hintergrundgrafik rein und lässt sie per "repeat y" in der vertikalen kacheln. so ist der immer auf der höhe des contents. mehr brauchste eigentlich nicht
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
mcbethy

Dabei seit: 02.12.2002
Ort: Hamburg
Alter: 33
Geschlecht: Weiblich
Verfasst Di 01.08.2006 14:00
Titel

Antworten mit Zitat Zum Seitenanfang

javaFreak hat geschrieben:
ich hoff mal, du willst den contentbereich nicht in pink lassen!?

Der ist wahrscheinlich nur zur Veranschaulichung pink.


Ein wirkliches CSS-Layout ist das ja auch gar nicht, weil du das auch mit Hilfe von Tabellen layoutest.
Im Übrigen wird irgendwo ein <div>-Container nicht geschlossen und die Navigation ließe sich auch bequemer mit einer Liste umsetzen/formatieren. Sparst du schon eine Menge Quelltext, der darüber hinaus auch übersichtlicher wird.

Wie du ein reines CSS-Layout umsetzt, wird auf verschiedenen Seiten erklärt. Einige bieten zudem kostenlose Downloads einer CSS-Struktur.

Zum Beispiel: http://css.fractatulum.net/beispiele.htm


Zuletzt bearbeitet von mcbethy am Di 01.08.2006 14:02, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden
hupfball
Threadersteller

Dabei seit: 06.03.2006
Ort: -
Alter: 43
Geschlecht: Weiblich
Verfasst Di 01.08.2006 14:59
Titel

Antworten mit Zitat Zum Seitenanfang

Zitat:
legste einfach in den content container die grafik von der linken navi leiste als hintergrundgrafik rein


Danke, xitrix:, für den Tip! Super, daß du trotz deines hohen Alters noch im Forum mitmischst! *Thumbs up!*

Zitat:
ich hoff mal, du willst den contentbereich nicht in pink lassen!?


Ich wußts, daß sowas kommt. Ich wußts.

Zitat:
die Navigation ließe sich auch bequemer mit einer Liste umsetzen


Das werd ich mal ausprobieren!

AAABER: wie kriege ich die Abschlußkante unten hin?
  View user's profile Private Nachricht senden
beeviZ

Dabei seit: 30.09.2002
Ort: Dortmund
Alter: 23
Geschlecht: Männlich
Verfasst Di 01.08.2006 15:37
Titel

Antworten mit Zitat Zum Seitenanfang

unbedingt mal zu gemüte führen:
http://meiert.com/de/publications/articles/20060326/
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
mcbethy

Dabei seit: 02.12.2002
Ort: Hamburg
Alter: 33
Geschlecht: Weiblich
Verfasst Di 01.08.2006 16:28
Titel

Antworten mit Zitat Zum Seitenanfang

Hier mal eine Variante mit reinem CSS und nicht überlappenden <div>-Containern.

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Entwurf</title>
<style type="text/css">
<!--
body {
   margin:0;
   padding:20px;
   font-size: 12px;
   font-family: arial,helvetica,sans-serif;
   line-height: 16px;
   text-align:left;
}

.box1 {
   position:relative;
   background: url(images/navi-verlauf.png);
   background-repeat: repeat-y;
   width:780px;
   min-height:500px;
   margin:auto;
   border-bottom:1px solid #999999;
}

#header {
   width:780px;
   height:150px;
   background: url(images/header.jpg) no-repeat;
}

#header span {
   display:block;
   width:625px;
   height:58px;
   position:absolute;
   top:91px;
   left:155px;
   background:#999999 url(images/kanzlei.jpg) no-repeat;
}

.box2 {
   color:#000000;
   background-color:transparent;
   margin:0;
   float:left;
   width:150px;
   height:400px
}
.box2 ul {padding-left:10px;list-style:none;margin-left:20px;margin-top:50px;font-weight:bold;}
.box3{
   margin-left:180px;
   margin-right:10px;
   padding:5px;
}

a      { color: #707173; font-size: 12px; font-family: helvetica; text-decoration: none; }   
a:link           { color: #707173; font-size: 12px; font-family: helvetica; text-decoration: none; }
a:hover      { color: #002851; font-size: 12px; font-weight: bold; text-decoration: none; }
.clear-left   { clear:both;font-size:1px;}
.bild       { float: right; margin: 0 0 15px 15px; padding: 0; }

-->

</style>
</head>
<body>

<div class="box1">
<div id="header"><span></span></div>
  <div class="box2">
    <ul>
     <li><a href="#">Kanzlei</a></li>
      <li><a href="#">Nummer</a> 1<br />
        Strafrecht<br />
        Sonstiges Recht<br />
        Anderes Recht<br />
        Unrecht</li>
      <li><a href="#">Nummer 2</a></li>
      <li><a href="#">Nummer 3</a></li>
      <li><a href="#">Nummer 4</a></li>
      <li><a href="#">Nummer 5</a></li>
      <li><a href="#">Nummer 6</a></li>
      <li><a href="#">Nummer 7</a></li>
      <li><a href="#">Nummer 8</a></li>
    </ul>
   </div>

   <div class="box3">
   <p><span class="bild"><img src="images/Bild-Kanzlei.jpg" alt="" height="166" width="256" /></span>Ein blinder blinder Blindtext ein blinder Ein blinder blderEin bblinder Blindtext ein blinder blinderEin blinder blinder Blindtext ein blinder blinderEin blinder blinder Blindtext ein blinder blinderblinder blinder Blindtext ein blinder blinderEin blinder blinder Blindtext ein blinder blinderblindern blinder blinderEin blinder blinder Blindtext ein blinder blinderEin blinder blinder Blindtext ein blinder blinderblinderEin blinder blinder Blindtext ein blinder Ein blinder blinder Blindtext ein blinder blinderEin blinder blinder Blindtext ein blinder blinderEin blinder blinder Blindtext ein blinder blinderEin blinder blinder Blindtext ein blinder blinderblinder blinder Blindtext ein blinder blinderEin blinder blinder Blindtext ein blindeBlindtext ein blinder blinderEin blinder blinder Blindtext ein blinder blinderblinder blinder Blindtext ein blinder blinderEin blinder blinder Blindtext ein blinder blinderblindern blinder blinderEin blinder blinder Blindtext ein blinder blinderEin blinder blinder Blindtext ein blinder blinderblinderEin blinder blinder Blindtext ein blinder Ein blinder blinder Blindtext ein blinder blinderEin blinder blinder Blindtext ein blinder blinderEin blinder blinder BlindtBlindtext ein blinder blinderEin blinder blinder Blindtext ein blinder blinderblinder blinder Blindtext ein blinder blinderEin blinder blinder Blindtext ein blinder blinderblindern blinder blinderEin blinder blinder Blindtext ein blinder blinderEin blinder blinder Blindtext ein blinder blinderblinderEin blinder blinder Blindtext ein blinder Ein blinder blinder Blindtext ein blinder blinderEin blinder blinder Blindtext ein blinder blinderEin blinder blinder Blindtext ein blinder blinderEin blinder blinder Blindtext ein blinder blinderblinder blinder Blindtext ein blinder blinderEin blinder blinder Blindtext ein blinder blinderblindertext ein blindBlindtext ein blinder blinderEin blinder blinder Blindtext ein blinder blinderblinder blinder Blindtext ein blinder blinderEin blinder blinder Blindtext ein blinder blinderblindern blinder blinderEin blinder blinder Blindtext ein blinder blinderEin blinder blinder Blindtext ein blinder blinderblinderEin blinder blinder Blindtext ein blinder Ein blinder blinder Blindtext ein blinder blinderEin blinder blinder Blindtext ein blinder blinderEin blinder blinder Blindtext ein blinder blinderEin blinder blinder Blindtext ein blinder blinderblinder blinder Blindtext ein blinder blinderEin blinder blinder Blindtext ein blinder blinderblindertext ein blindext ein blinder blinderEin blinder blinder Blindtext ein blinder blinderblinder blinder Blindtext ein blinder blinderEin blinder blinder Blindtext ein blinder blinderblindertext ein blindr blinderblindertext ein blinder blinderEin blinder blinder Blindtext ein blinder blinderEin blinder blinder Blindtext ein blinder blinderblinderEin blinder blinder Blindtext ein blinder Ein blinder blinder Blindtext ein blinder blinderEin blinder blinder Blindtext ein blinder blinderEin blinder blinder Blindtext ein blinder blinderEin blinder blinder Blindtext ein blinder blinderblinder blinder Blindtext ein blinder blinderEin blinder blinder Blindtext ein blinder blinderblinder</p>
   </div>
</div>
</body>
</html>


Das sieht dann so aus (vorausgesetzt man bastelt sich einen Header zusammen):




Und das war die Grundlage: http://css.fractatulum.net/sample/layout11_2.htm


Ich hatte nix zu tun. Ooops
  View user's profile Private Nachricht senden
hupfball
Threadersteller

Dabei seit: 06.03.2006
Ort: -
Alter: 43
Geschlecht: Weiblich
Verfasst Mi 02.08.2006 09:48
Titel

Antworten mit Zitat Zum Seitenanfang

Mannomann mcbethy, ich bin völlig geplättet. Vielen vielen Dank für den Code! Ich steige zwar noch nicht komplett durch, warum das auf diese Weise klappt, aber ich konnte noch einige Änderungen vornehmen, die funktionieren. So langsam wirds genau das, was ich wollte.

In dem #header span habe ich doch noch eine Tabelle eingebaut, damit ich mit kleineren Bildern arbeiten kann. Ist das Teufelszeug?

http://www.natamorphose.de/tests/kastentest_css.html


Code:
body { margin: 0; padding: 20px; font-size: 12px; font-family: arial, helvetica, sans-serif; line-height: 16px; text-align:left; }

.box1 {
   position: relative;
   background: white url(images/navi-verlauf.png) repeat-y;
   width: 780px;
   min-height: 500px;
   margin: auto;
   border-bottom: 1px solid #999999;
}

#header { background-image: url(images/header.jpg); background-repeat: no-repeat; background-attachment: scroll; background-position: 0 0; text-align: right; width: 780px; height: 150px; }
#header p { color: white; font-size: 11px; font-family: helvetica; font-weight: normal; position: relative; top: 2px; right: 10px; }
#header span { font-family: helvetica; background-image: url(images/titel-verlauf.png); background-repeat: repeat-y; background-attachment: scroll; background-position: 0 0; display: block; width: 625px; height: 58px; position: absolute; top: 91px; left: 155px; }

.box2 {
   color: #000000;
   background-color:transparent;
   margin: 0;
   float: left;
   width: 150px;
   height: 400px
}

.box2 ul { color: #666; font-size: 12px; padding-left:10px; list-style:none; margin-left:20px; margin-top:50px; font-weight:normal; line-height: 24px; text-decoration: none; }

.box3 { margin-left: 180px; margin-right: 10px; padding: 5px; }

a      { color: #707173; font-size: 12px; font-family: helvetica; text-decoration: none; }   
a:link           { color: #707173; font-size: 12px; font-family: helvetica; text-decoration: none; }
a:hover      { color: #002851; font-size: 12px; font-weight: bold; text-decoration: none; }
.clear-left   { clear:both;font-size:1px;}
.bild       { float: right; margin: 0 0 15px 15px; padding: 0; }


Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Entwurf</title>
      <link href="styles1.css" rel="stylesheet" type="text/css" media="all" />
      <style type="text/css"><!--
--></style>
</head>


<body  bgcolor="#CCD4DC">

<div class="box1">
<div id="header">
            <span> 

               <table width="625" border="0" cellspacing="0" cellpadding="0" align="left">
                  <tr>
                     <td align="right" bgcolor="#666666" height="14"><p>hehehe</p></td>
                  </tr>
                  <tr>
                     <td><img src="images/titel-kanzlei.png" alt="" height="44" width="161" border="0"/></td>
                  </tr>
               </table>

            </span>
   </div>
   
  <div class="box2">
    <ul>
     <li><a href="#">Kanzlei</a></li>
      <li><a href="#">Nummer</a> 1<br />
        Strafrecht<br />
        Sonstiges Recht<br />
        Anderes Recht<br />
        Unrecht</li>
      <li><a href="#">Nummer 2</a></li>
      <li><a href="#">Nummer 3</a></li>
      <li><a href="#">Nummer 4</a></li>
      <li><a href="#">Nummer 5</a></li>
      <li><a href="#">Nummer 6</a></li>
      <li><a href="#">Nummer 7</a></li>
      <li><a href="#">Nummer 8</a></li>
    </ul>
   </div>

   <div class="box3">
   <p><span class="bild"><img src="images/Bild-Kanzlei.jpg" alt="" height="166" width="256" /></span>Ein blinder blinder Blindtext ein blinder Ein blinder blderEin bblinder Blindtext ein blinder blinderEin blinder blinder Blindtext ein blinder blinderEin blinder blinder Blindtext ein blinder blinderblinder blinder Blindtext ein blinder blinderEin blinder blinder Blindtext ein blinder blinderblindern blinder blinderEin blinder blinder Blindtext ein blinder blinderrEin blinder blinder Blindtext ein blinder blinderblinderEin blinder blinder Blindtext ein blinder Ein blinder blinder Blindtblinder Blindtext ein blinder Ein blinder blinder Blindtext ein blinder blinderEin blinder blinder Blindtext ein blinder blinderEin blinder blinder Blindtext ein blinder blinderEin blinder blinder Blindtext ein blinder blinderblinder blinder Blindtext ein blinder blinderEin blinder blinder Blindtext ein blinder blinderblindertext ein blindext ein blinder blinderEin blinder blinder Blindtext ein blinder blinderblinder blinder Blindtext ein blinder blinderEin blinder blinder Blindtext ein blinder blinderblindertext ein blindr blinderblindertext ein blinder blinderEin blinder blinder Blinin blinder blinderblindern blinder blinderEin blinder blinder Blindtext ein blinder blinderrEin blinder blinder Blindtext ein blinder blinderblinderEin blinder blinder Blindtext ein blinder Ein blinder blinder Blindtblinder Blindtext ein blinder Ein blinder blinder Blindtext ein blinder blinderEin blinder blinder Blindtext ein blinder blinderEin blinder blinder Blindtext ein blinder blinderEin blinder blinder Blindtext ein blinder blinderblinder blinder Blindtext ein blinder blinderEin blinder blinder Blindtext ein blinder blinderblindertext ein blindext ein blinder blinderEin blinder blinder Blindtext ein blinder blinderblinder blinder Blindtext ein blinder blinderEin blinder blinder Blindtext ein blinder blinderblindertext ein blindr blinderblindertext ein blinder blinderEin blinder blinder Blindtext ein blinder blinderEin blinder blinder Blindtext ein blinder blinderblinderEin blinder blinder Blindtext ein blinder Ein blinder blinder Blindtext ein blinder blinderEin blinder blinder Blindtext ein blinder blinderEin in blinder blinderblindern blinder blinderEin blinder blinder Blindtext ein blinder blinderrEin blinder blinder Blindtext ein blinder blinderblinderEin blinder blinder Blindtext ein blinder Ein blinder blinder Blindtblinder Blindtext ein blinder Ein blinder blinder Blindtext ein blinder blinderEin blinder blinder Blindtext ein blinder blinderEin blinder blinder Blindtext ein blinder blinderEin blinder blinder Blindtext ein blinder blinderblinder blinder Blindtext ein blinder blinderEin blinder blinder Blindtext ein blinder blinderblindertext ein blindext ein blinder blinderEin blinder blinder Blindtext ein blinder blinderblinder blinder Blindtext ein blinder blinderEin blinder blinder Blindtext ein blinder blinderblindertext ein blindr blinderblindertext ein blinder blinderEin blinder blinder Blindtext ein blinder blinderEin blinder blinder Blindtext ein blinder blinderblinderEin blinder blinder Blindtext ein blinder Ein blinder blinder Blindtext ein blinder blinderEin blinder blinder Blindtext ein blinder blinderEin dtext ein blinder blinderEin blinder blinder Blindtext ein blinder blinderblinderEin blinder blinder Blindtext ein blinder Ein blinder blinder Blindtext ein blinder blinderEin blinder blinder Blindtext ein blinder blinderEin blinder blinder Blindtext ein blinder blinderEin blinder blinder Blindtext ein blinder blinderblinder blinder Blindtext ein blinder blinderEin blinder blinder Blindtext ein blinder blinderblinder</p>
   </div>
</div>
</body>
</html>


Viele Grüße!
  View user's profile Private Nachricht senden
 
Ähnliche Themen [CSS Layout] An Fenstergröße anpassendes Layout
css layout
CSS Layout
CSS Layout
CSS Layout
CSS-Layout.. wie?
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  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.