So ich habe heute gleich noch eine Frage. Es geht um die sogenannten" faux columns“ , also die Hintergrundgrafiken für ein
Layout mit mehreren Spalten. Und zwar würde ich gerne wissen , wie man solche halbdurchsichtige Grafiken, wie sie
auch bei einer der Beispielwebsites im Seminar genutzt wird, erstellen kann.
Falls dies zu aufwändig ist und sich zeitlich nicht lohnt würde ich gerne wissen ob man die irgendwo vorgefertigt bekommen
kann oder sich einfacher selbst helfen kann 
mfg Nita
Wofür brauchst du eine grafik? :o
Nimm doch einfach css?
background-color: rgba(R,G,B, A);
/* Undurchsichtig */
background-color: rgba(0,190,255, 1);
/* Unsichtbar */
background-color: rgba(0,190,255, 0);
/* Halb transparent */
background-color: rgba(0,190,255, 0.5);
... 
Hey,
Wolf scheint ja begriffen zu ahben was du suchst, aber kleine Empfehlung für das nächste mal: Wenn du eine so genau Vorstellung hast bzw. sogar ein Bsp hast, dann stell doch am besten einen Screenshot dazu ein
Das machst es einfacher dir zu helfen 
Kanu
Und wenns wirklich um halbtranzparente hintergrundgrafik geht... Photoshop oder Gimp hernehmen und tranzparenz runterschrauben? 
Wofür brauchst du eine grafik? :o
Die Befehle der Transparenz rgab(x,y,z, transparenz) oder auch opacity funktionieren doch meines Wissens im IE noch nicht...
oder gibt es da auch eine Möglichkeit, deinen Weg im IE anzuzeigen?
Nächstes Problem:
Wie definiere ich die Höhe dieser Bereich so, dass sie den ganzen Bereich zwischen header und footer ausnutzen?
Bei mir nutzen sie momentan nur den Bereich den sie benötigen 
[Blockierte Grafik: http://www.fotos-hochladen.net/uploads/bereichs4gjwt7m5a.png]
mfg Nita
http://beta.caniuse.com/#search=rgba
Sie werden durchaus unterstützt... x.x
Height 100%;
Oder du nutzt css flexbox
Height 100%;
Oder du nutzt css flexbox
Mit height 100% habe ich es schon probiert, hat aber leider nicht geklappt...
Auf Flexbox würde ich lieber verzichten , da es ja knapp 15% der genutzten Browser (noch) nicht
anzeigen können.
Hier einmal die Quellcodes(vereinfacht ohne Inhalt):
<!DOCTYPE html>
<html>
<head>
<title>Titel</title>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="author" content="">
<meta name="keywords" content="">
<meta name="generator" content="Webocton - Scriptly (www.scriptly.de)">
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<header>
<p id="logotext">
<strong></strong></p>
<p><a href="kontakte.html"></a>
<a href="impressum.html"></a></p></header>
<div id="wrapper">
<nav id="vertikal">
<ul><li><a href="index.html"></a></li>
<li><a href="ueber_diese_website.html"></a></li>
<li><a href="einzelteile.html"></a></li></ul></nav>
<nav id="horiziontal">
<ul>
<li><a href="index.html"></a></li>
<li><a href="ueber_diese_website.html"></a>
<ul>
<li><a href="einzelteile.html"></a></li>
<li><a href="design_verwenden.html"></a></li>
</ul>
</li>
</ul></nav>
<aside><p><b>Bildersammlung:</b>
<img src="" alt=" " title=""
width="180" height="200" />
<img src="" height="200" width="180"
alt="" />
<img src="" height="200" width="180"
alt="" /></p></aside>
<section><p></p></section>
<footer><p>........</p></footer>
</div>
</body>
</html>* {
margin: 0;
padding: 0;
}
body {
text-align: center;
background-color: #FF0000;
background-attachment: fixed;
font-family: Arial, sans-serif;
}
header, nav, footer, aside, section {
display: block;
}
#wrapper {
width: 1000px;
margin: 0 auto;
text-align: left;
}
header {
background-color: #FFDE88;
height: 150px;
width: 1000px;
margin: 0 auto;
}
header p {
text-align: right;
padding-right: 16px;
}
header a {
color: white;
}
#logotext {
padding-top: 40px;
font-size: 20pt;
color: white;
}
#vertikal {
background-color: rgba(135,113,89, 0.3);
height: 20px;
}
#vertikal ul {
list-style-type: none;
}
#vertikal li {
display: inline;
}
#vertikal a {
display: block;
width: 230px;
float: left;
text-align: center;
line-height: 20px;
color: white;
text-decoration: none;
background-color: #B4B4B4;
}
#vertikal a:hover {
background-color: #777777;
}
#horiziontal {
width: 220px;
float: left;
background-color: rgba(138,125,89, 0.8);
height: 100%;
}
#horiziontal ul {
padding-left: 2em;
padding-top: 20px;
list-style-type: none;
}
#horiziontal ul ul {
list-style-type: square;
}
#horiziontal li {
padding-bottom: 0.5em;
}
aside {
width: 230px;
float: right;
background-color: rgba(138,110,90, 0.5);
}
aside p {
margin-top: 20px;
margin-left: 10px;
}
aside img {
border:1px solid silver;
}
section {
margin-left: 215px;
margin-right: 195px;
background-color: rgba(138,120,89, 0.7);
height: 100%;
}
section h1 {
padding-top: 20px;
padding-bottom: 0.4em;
margin-left: 8px;
color: #dd9661;
}
section h2 {
color: #dd9661;
padding-top: 1em;
padding-bottom: 0.6em;
font-size: 14pt;
margin-left: 8px;
}
section p {
margin-left: 5px;
padding-bottom: 1em;
margin-left: 10px;
}
section ul {
padding-left: 3em;
margin-left: 5px;
}
section li {
padding-bottom: 0.5em;
margin-left: 5px;
}
footer {
background-color: #717070;
color: white;
text-align: center;
clear: both;
}mfg Nita
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!