Frame definieren
RavenZ
- barrierefreiheit
0 ChrisB0 RavenZ
0 jmrickson0 Gunnar Bittersmann- css
Hallihallo,
Ich möchte gerne ein Frame definieren, d.h. in der Mitte des Bildschirms ein Quadrat oder auch ein Rechteck mit Text usw. und links und rechts daneben Hintergrund halt. Das klingt jetzt sehr verwirrend, deshalb hier ein Beispiel: http://execution.gilde.in/
Evtl. noch vom oberen Bildschirmrand noch Platz lassen...
Das ganze ist hier nochmal halbwegs erläutert (http://de.selfhtml.org/html/frames/eigenschaften.htm#unveraenderbar), jedoch weiß ich nicht, wie ich die Pixel o.ä. bestimmen kann, in die der Text usw. hereinkommt.
Hoffe, ihr habt das verstanden, wenn nicht, einfach mal kurz meckern, probiers dann nochmal zu erläutern.
LG RavenZ
Hi,
Ich möchte gerne ein Frame definieren
Warum? Bist du dir der zahlreichen Nachteile von Frames nicht bewusst?
MfG ChrisB
So. Erstmal Danke für die vielen hilfreichen Posts.
Hab das auch mal wahrgenommen und es funktioniert super.
Nun habe ich aber noch eine Frage: Wie kann ich in dem letzten Beispiel den Background (außerhalb) auf ein Image machen. Ich finde nichts, wo sich das einstellen lässt - vielleicht kann mir das jemand grad schnell sagen.
Hier mein Quelltext:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>.: The-Oldschool :.</title>
<style type="text/css">
body {
color: black; background-color: white;
font-size: 100.01%;
font-family: Helvetica,Arial,sans-serif;
margin: 0; padding: 1em 0;
text-align: center;
}
div#Seite {
text-align: left;
margin: 0 auto;
width: 760px;
padding: 0;
background: #ffffff url(hintergrund.jpg) repeat-y;
border: 2px ridge silver;
}
h1 {
font-size: 1.5em;
margin: 0; padding: 0.3em;
text-align: center;
background: #fed url(background_halt.jpg) no-repeat 100% 45%;
border-bottom: 1px solid silver;
}
ul#Navigation {
font-size: 0.83em;
float: left; width: 200px;
margin: 0 0 1.2em; padding: 0;
}
ul#Navigation li {
list-style: none;
margin: 0; padding: 0.5em;
}
ul#Navigation a {
display: block;
padding: 0.2em;
font-weight: bold;
}
ul#Navigation a:link {
color: black; background-color: white;
}
ul#Navigation a:visited {
color: #666; background-color: white;
}
ul#Navigation a:hover {
color: black; background-color: #9999FF;
}
ul#Navigation a:active {
color: white; background-color: gray;
}
div#Inhalt {
margin: 0 0 1em 220px;
padding: 0 1em;
}
* html div#Inhalt {
height: 1em;
margin-bottom: 0;
}
div#Inhalt h2 {
font-size: 1.2em;
margin: 0.2em 0;
color: navy;
}
div#Inhalt p {
font-size: 1em;
margin: 1em 0;
}
p#Fusszeile {
clear: both;
font-size: 0.83em;
margin: 0; padding: 0.1em;
text-align: center;
background-color: #fed;
border-top: 1px solid silver;
}
</style>
</head>
<body>
<div id="Seite">
<center><img src="oldschool_sign.jpg">
<ul id="Navigation">
<li><a href="einfuehrung.htm">Einführung in CSS-basierte Layouts</a></li>
<li><a href="mehrspaltige.htm">Mehrspaltige CSS-basierte Layouts</a></li>
<li><a href="fixbereiche.htm">Fixe Bereiche mit CSS-basierten Layouts</a></li>
<li><a href="navigationsleisten.htm">CSS-basierte Navigationsleisten</a></li>
<li><a href="browserweichen.htm">CSS-Browserweichen</a></li>
</ul>
<div id="Inhalt">
<h2>2-spaltiges Layout mit Hintergrundgrafik</h2>
<p>In diesem Beispiel wird eine Hintergrundgrafik
zur optischen Trennung der Spalten verwendet.</p>
<p>Dies erfordert leider, dass die Breite der links stehenden Navigation
passend zur Hintergrundgrafik in 'px' angegeben wird.
Dadurch kann sich die Breite dieser Box einer Änderung des Schriftgrades
nicht anpassen.</p>
<p>Wie die links graue Hintergrundgrafik ist auch die gelbe Hintergrundfarbe
des Inhaltsbereichs dem die Seitenelemente umschließenden DIV zugewiesen.
Sowohl für die Navigation als auch für diese Inhaltsbox ist selbst
kein Hintergrund angegeben.<br>
Die durchgehende Trennung der Boxen wird somit lediglich optisch simuliert
und ist unabhängig von deren Höhe.</p>
<p>Der Kopf- und der Fußzeile wurde eine Hintergrundfarbe zugewiesen,
damit sich die optische Trennung nicht auf diese Bereiche ausdehnt.</p>
</div>
<p id="Fusszeile">© by The-Oldschool (Sum 41 RuleZ)</p>
</div>
</body>
</html>
Hier meine Seite, da könnt ihr sehen, was ich meine: http://the-oldschool.lima-city.de/
LG
Hallihallo,
Ich möchte gerne ein Frame definieren, d.h. in der Mitte des Bildschirms ein Quadrat oder auch ein Rechteck mit Text usw. und links und rechts daneben Hintergrund halt. Das klingt jetzt sehr verwirrend, deshalb hier ein Beispiel: http://execution.gilde.in/Evtl. noch vom oberen Bildschirmrand noch Platz lassen...
Das ganze ist hier nochmal halbwegs erläutert (http://de.selfhtml.org/html/frames/eigenschaften.htm#unveraenderbar), jedoch weiß ich nicht, wie ich die Pixel o.ä. bestimmen kann, in die der Text usw. hereinkommt.Hoffe, ihr habt das verstanden, wenn nicht, einfach mal kurz meckern, probiers dann nochmal zu erläutern.
LG RavenZ
Vergiss das mit den Frames, das Frame wird hier nur (warum auch immer) dazu verwendet diese Seite http://execution.kilu.de/execution/ anzuzeigen. Hat also null mit dem Design an sich zu tun.
Lies dich hier mal ein bischen ein: http://www.stichpunkt.de/css/bereiche.html
Das ist das was du suchst.
@@RavenZ:
nuqneH
Ich möchte gerne ein Frame definieren […] hier ein Beispiel: http://execution.gilde.in/
Das Frameset dort dient als Ersatz für eine <http://de.selfhtml.org/servercgi/server/rewrite.htm@title=richtige Weiterleitung> auf http://execution.kilu.de/execution/.
Du möchtest kein Frame definieren. (Deren Nachteile kannst du bei [Subotnik] und [molily] nachlesen.)
Du möchtest ein <http://de.selfhtml.org/css/layouts/mehrspaltige.htm@title=mehrspaltiges Layout>.
Qapla'