| Autor |
Nachricht |
hupfball
Threadersteller
Dabei seit: 06.03.2006
Ort: -
Alter: 50
Geschlecht: 
|
Verfasst Di 01.08.2006 13:39
Titel Bequemes CSS-Layout |
  |
|
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.
|
|
| |
  |
 |
javaFreak
Dabei seit: 01.07.2006
Ort: NRW
Alter: -
Geschlecht: 
|
Verfasst Di 01.08.2006 13:58
Titel
|
|
|
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!
|
|
| |
|
|
|
Anzeige
|
|
|
xitrix
Dabei seit: 04.10.2005
Ort: Detmold
Alter: 101
Geschlecht:
|
Verfasst Di 01.08.2006 14:47
Titel
|
|
|
|
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
|
|
| |
 |
|
mcbethy
Dabei seit: 02.12.2002
Ort: Hamburg
Alter: 41
Geschlecht:
|
Verfasst Di 01.08.2006 15:00
Titel
|
|
|
| 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 15:02, insgesamt 2-mal bearbeitet
|
|
| |
|
|
hupfball
Threadersteller
Dabei seit: 06.03.2006
Ort: -
Alter: 50
Geschlecht:
|
Verfasst Di 01.08.2006 15:59
Titel
|
|
|
| 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! 
| 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?
|
|
| |
|
|
beeviZ
Dabei seit: 30.09.2002
Ort: -
Alter: -
Geschlecht:
|
|
| |
|
|
mcbethy
Dabei seit: 02.12.2002
Ort: Hamburg
Alter: 41
Geschlecht:
|
Verfasst Di 01.08.2006 17:28
Titel
|
|
|
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. 
|
|
| |
|
|
hupfball
Threadersteller
Dabei seit: 06.03.2006
Ort: -
Alter: 50
Geschlecht:
|
Verfasst Mi 02.08.2006 10:48
Titel
|
|
|
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!
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Website mit festen Layout in dynamisches Layout umbauen
[CSS Layout] An Fenstergröße anpassendes Layout
Probleme mit Layout - div im layout height="100%"
CSS Layout
CSS-Layout.. wie?
css layout
|
|
Willkommen auf dem Portal für Mediengestalter
