Beiträge von archaja

Danke, war genau das, was ich wollte. display:inline-block kannte ich noch nicht. Wieder was dazu gelernt!

Hallo!

Ich möchte gerne einen Rahmen um einen Text machen. So weit kein großes Problem ABER:

Ich möchte dass der Rahmen keine festgelegte Größe hat und auch nicht die ganze Box ausfüllt, sondern sich nach der Textlänge ausrichtet.
D.h. als Beispiel, wenn ich schreibe:

"Ich bin hier" ist mein rechter und linker Rahmenrand z.B. 10px weg vom Text. Und wenn ich schreibe "Ich bin aber noch viel mehr hier!" ist der rechte und linke Rahmenrand eben von diesem (natürlich längeren) Text rechts und links 10px weg.
Geht das?
Schon mal danke im voraus.

Yep! Perfekt!

Jetzt klappt es genau so, wie ich wollte.
Hast sogar meine Farbe genau getroffen

Problem gelöst. Daumen hoch!
Danke!

Hallo!

Habe über eine Box einen transparenten Bereich geschaffen:

#mainbox {
margin: auto;
margin-top: 0px;
width: 50%;
background-color: #F27B24;
opacity: 0.8;
border: 1px grey solid;
padding: 10px;
overflow: auto;
z-index:1;

}

Wenn ich nun in diesem Bereich Bilder einbinde, bekommen sie ebenfalls diese Transparenz. Das möchte ich aber nicht.
Habe die Bilder mit einem Zoombefehl versehen (bei MouseOver wird das "Vorschaubild" dann groß). Bei diesen großen Bildern sieht die Transparenz richtig schlecht aus!
Versuchte schon, bei diesen Style-Angaben für den Bilderzoom mit opacity: 1; weiter zu kommen, ging aber nicht.

Wie kann ich Bilder in einer Box mit Transparenz intransparent machen?

Danke für die Hilfe

Hallo!
Nachdem bplaced.net nicht funktioniert hat (keine Antwortmail) hab ich jetzt folgende Adresse:

http://homepagetest.netau.net/
Falls so ein Werbeding erscheint, muss man rechts oben leicht ausserhalb des Werbebanners licken.

Viel mehr Quellcode gibt es übrigens nicht. Und die Ursache meines Wunsches ist deshalb noch dem Quellcode nicht zu entnehmen, weil ich nicht weiß, wie ich´s machen soll....

Grüße
archaja

Hallo!
Folgendes Problem:
Wie im Bild zu sehen ist, liegen die Navigation (Drop Down) und der Maintextblock nebeneinander, statt untereinander.
Wie kann man das beheben?
Möchte gerne am Ende auch das DropDown zentriert haben, weiß aber nicht, ob mein Code ausreicht dafür.
Mein CSS-Code:

body {
font: normal 100.01% Helvetica, Arial, sans-serif;
font-weight:bold;
font-size:medium;
background-image: url("pics/feuer2.jpg");
min-width: 40em; /* Mindestbreite verhindert Anzeigefehler in modernen Browsern */
text-align: center;

/* navigation */

#nav {
width:40em;
margin:auto;

}
#nav ul{ list-style-type:none; margin: 0; padding: 0; }
#nav li { float:left; padding:0; margin:0;}
#nav li a { width:150px; display:block; text-align:center; color:#000; margin-right:5px; height:35px; line-height:35px; text-decoration:none; font-size:80%; border:1px solid #ccc; }
#nav li a:hover { color:#f00; }
#nav ul ul { display:none; position:absolute; z-index:999; }
#nav li li { float:none; }
#nav li li a { background:#EBE7E6!important; text-align:left; height:auto; line-height:1; width:auto; padding:8px 20px 8px 22px; border:1px solid #D0D0D0; border-top:none; margin-right:0; }
* html li li { display:inline; } /* IE6 Bugfix... */

/* mainbox */

#mainbox {
margin: auto;
margin-top: 230px;
width: 415px;
background-color: #F27B24;
opacity: 0.8;
border: 1px grey solid;
padding: 20px;
overflow: auto;
}

Hallo!
Habe jetzt das Design etwas geändert. Aber das Problem bleibt. Jetzt wird der linke Rand des Sliders zentriert wird. Warum auch immer.
Ich habe verschiedene Einstellungen versucht. Aber es ändert sich nichts. Im Augenblick habe ich folgenden Code:

<style type="text/css">
.next {
position: absolute;
margin: 0 auto;
top: 0;

opacity: 0;
filter:alpha(opacity=0);
}

.one {
position: absolute;
margin: 0 auto;
top: 0;

opacity: 0;
filter:alpha(opacity=0);
}
#meinFader {
position: top0;
margin: 0 auto;
}
</style>

So sieht es jetzt aus!

Hallo!

Danke für die Tips.

Kläuschen:
Mit "text-align:center" passiert nichts. Ich habe jetzt mal folgendes versucht, da passiert wenigstens etwas, aber nicht das, was ich will.

<div>
<div align="center">
<p id="meinFader">
<img src="pics/x1.jpg" class="one">
<img src="pics/x2.jpg" class="next">
<img src="pics/x3.jpg" class="next">
<img src="pics/x4.jpg" class="next">
<img src="pics/x5.jpg" class="next">
<img src="pics/x1.jpg" class="next">
<img src="pics/x2.jpg" class="next">
<img src="pics/x3.jpg" class="next">
<img src="pics/x4.jpg" class="next">
<img src="pics/x5.jpg" class="next">
</div>
<script type="text/javascript">
javascript:next();
</script>

</div>

Jetzt positioniert es mir den Slider ganz rechts keine Ahnung, warum!

Hallo WebHolz

Wenn ich "margin: 0 auto;" hier einsetze:

<style type="text/css">
.next {
position: absolute;
top: 0;
left: 100;
opacity: 0;
filter:alpha(opacity=0);
}

.one {
position: absolute;
top: 0;
left: 0em;
opacity: 0;
filter:alpha(opacity=0);
}
#meinFader { position: top; }
</style>

oder auch "position: absolute;" ersetze kommt nix gescheites bei raus. Es werden nur die einzelnen Sliderbilder plötzlich untereinander angeordnet, statt übereinander.

Hallo!

Versuche gerade ein eingebundenes Java-Script zu positionieren. Es ist ein Band am oberen Rand, bei dem Bilder wechseln. Siehe Anhang.
Möchte gerne, dass Kopf und Text genau übereinander sind und nicht versetzt, wie im Augenblick.

Ich bekomme aber dieses Band nicht positioniert! Hier ist der Code, der in der HTML-Seite drin ist, und der meiner Meinung nach die Postitionierung festlegen müsste:

<style type="text/css">
.next { position: absolute; top: 0; left: 100; opacity: 0; filter:alpha(opacity=0); }
.one { position: absolute; top: 0; left: 0em; opacity: 0; filter:alpha(opacity=0); }
#meinFader { position: top; }
</style>

Das gesamte Script ist unten aufgeführt.

Leider bewegt sich gar nix, wenn ich andere Werte eingebe. Weiß mir nicht mehr zu helfen. Mir ist auch unklar, warum ich das nicht ins CSS
reinbekomme. Aber wenn ich das text/css wegmache und .next und alles weitere ins CSS schreibe, funktioniert gar nichts mehr. Uff.

Wer kann mir helfen?

<script type="text/javascript">
function fade(step) {
var imgs = document.getElementById("meinFader").getElementsByTagName("img");

step = step 0;

imgs[counter].style.opacity = step/80;
imgs[counter].style.filter = "alpha(opacity=" + step + ")"; //

step = step + 2;

if (step <= 80) {
window.setTimeout(function () { fade(step); }, 1);
} else {
window.setTimeout(next, 4000);
}
}

function next() {
var imgs = document.getElementById("meinFader").getElementsByTagName("img");

if (typeof(counter) != "number") {
counter = 0;
}

counter++;

if (counter < imgs.length) {
fade();
}
};
</script>

<style type="text/css">
.next { position: absolute; top: 0; left: 100; opacity: 0; filter:alpha(opacity=0); }
.one { position: absolute; top: 0; left: 0em; opacity: 0; filter:alpha(opacity=0); }
#meinFader { position: top; }
</style>

<title>Willkommen bei ArchajA</title>
<!--Ende Bildwechsel Head-->

</head>

<body>

<!-- Titelbild -->
<div>
<div>
<p id="meinFader">
<img src="pics/x1.jpg" class="one">
<img src="pics/x2.jpg" class="next">
<img src="pics/x3.jpg" class="next">
<img src="pics/x4.jpg" class="next">
<img src="pics/x5.jpg" class="next">
<img src="pics/x1.jpg" class="next">
<img src="pics/x2.jpg" class="next">
<img src="pics/x3.jpg" class="next">
<img src="pics/x4.jpg" class="next">
<img src="pics/x5.jpg" class="next">
<script type="text/javascript">
javascript:next();
</script>
</div>
<!-- ende Titelbild -->

Eigentlich dürfte ja nur die

Hallo!
Sorry für die späte Antwort. Ich hatte keine Nachricht bekomme und jetzt erst nachgeschaut

Du schreibst:

Zitat von Dodo

Meines Wissens ist es derzeit nicht möglich, etwas über einem Applet zu positionieren. Adobe hat für Flash schon etwas implementiert. Weder Sun, noch Oracle haben sich diesem Problem angenommen.

Ist es zwingend erforderlich, dass es ein Applet ist? Was ist denn da zu sehen?

Aber zumindest in FF ist die Lytebox ÜBER dem Applet. Dieses ist das Darius-Water-Pic. Wenn man mit der Maus über das Bild fährt, zerfließt es kurz wie wenn es unter einer bewegten Wasseroberfläche läge. Netter Effekt. Aber wenn da eine Lösung nicht möglich ist, muss ich vielleicht auf den Unterseiten, die eine Lytebox enthalten und Youtube Videos darauf verzichten. Danke für den Hinweis, sonst hätte ich womöglich noch ewig rumprobiert.

Hallo!

Habe festgestellt, daß IE mal wieder Probleme macht.
Habe auf meiner Seite ein Logo eingebaut mit dem Applet "Darius water pic" (http://www.durius.com/104.asp).

Nun habe ich auf manchen Unterseiten lytebox (http://lytebox.com/) eingebaut um einige Fotos per Mausklick zu vergrößern und sozusagen eine kurzzeitige Diashow einzublenden.

Im Firefox funktioniert es prächtig, aber IE8 hält mein Logo immer im Vordergrund.

Ich habe mal zwei Fotos gemacht, um das zu verdeutlichen!

In SeitenfehlerBild1 sieht man den Ursprungszustand, in Bild2 dann, daß das Logo nicht verschwindet, sondern vor dem Bild ist, was natürlich
unerwüscht ist.

Hier mein HTML für das Logo:

<div id="fixiertoben">
<td>
<APPLET archive="DuriusWaterPic.jar" width="306" height="177" align="middle" code="DuriusWaterPic.class">
<PARAM name="image" value="pics/logoinvers2.jpg">
<PARAM name="dotsize" value="5">
<PARAM name="ndotsize" value="5">
<PARAM name="dim" value="4">
<PARAM name="noise" value="0">
<PARAM name="mouse" value="1">
<PARAM name="delay" value="0">
<PARAM name="reg" value="43752326">
</APPLET>
</td>
</div>

<div id="fixiertobenR">
<td><img src="pics/schwarz-r.jpg" alt="Das Logo von ArchajA" titel="Das Logo von Archaja" border="0"> </td>
</div>

Hoffe, habe mein Problem klar genug gemacht und die nötigen Infos angegeben.

Wer die Seite ansehen will: archaja.de

Danke

Yeah, das funktioniert. Ich hab jetzt auf die Schnelle nur gesehen, daß Du in der css Datei oben "@charset "utf-8";" eingesetzt hast. Das kenne ich noch nicht, werde mich mal damit beschäftigen.

Jedenfalls erst mal vielen Dank für die Hilfe!!!

Na, na, mal ganz sachte. Wie Dir vielleicht auch aufgefallen ist, zeigt er jetzt andere Fehler an. plötzlich gefällt ihm das l in align=left nicht und die 1 bei vspace. Bißchen komisch. Und helfen tun die Korrekturen auch nicht.

Hallo!

Na, das kann ja ein ganz nützliches Tool sein (auch wenn ich keine Ahnung habe, was ihm an <id="kopfzeile"> nicht gefällt). Aber leider nicht bei meinem Problem. Habe jetzt die Sachen verbessert (und noch einen weiteren Fehler gefunden) aber keine Veränderung. Scheint ein hartnäckiges Biest zu sein, dieser Fehler.

Interessant finde ich, daß es nur Probleme mit dem unteren Rand gibt, daß aber die linke Begrenzung akzeptiert wird. Ich habe es auch schon mit einem #Inhalt #bild { Teil probiert. Weiß aber nicht recht, was ich da reinschreiben soll, damit es funzt. Komisch, der Text fließt ja auch nicht raus.

archaja

Hallo sejuma!

Das läßt sich machen!

http://maerkreis.ma.ohost.de/

Danke

Hallo!

Habe gerade ein ganz eigenartiges Problem (finde ich).

Ich habe eine css gemacht: (bringe hier nur die relevanten Sachen )
- sie ist im Anschluß unten zu sehen.

Wenn ich nun Bilder integriere, kann es mir passieren, daß sie am unteren Rand meiner Inhalts-Box herausfließen, wie auf dem Bild zu sehen ist (Anhang).

Ich habe schon alles mögliche versucht, bringe das Bild aber nicht dazu, im Rahmen zu bleiben.

Kann mir jemand helfen?

Danke

/* DATEI: labyrinth.css */

body {
font: normal 100.01% Helvetica, Arial, sans-serif;
color: black;
background:url(pics/hintergrund.jpg); background-repeat:no-repeat; background-attachment:fixed;
background-position: left
min-width: 40em; /* Mindestbreite verhindert Anzeigefehler in modernen Browsern */

}

html {
padding: 0;
}

body {
margin: 0;
margin-right: 0.5em;
padding: 0;
}

/* für feste Kopfzeile */

#fixiertkopf {
position: absolute;
top: 0.1em; left: 0em;
width: 97%;
font-size: 1.5em;
color: #FFFFFF;
margin: 0.5em; padding: 0.3em;
text-align: center;
background-color:#0000BF;
border: 2px ridge gray;
font-weight:bold;
}

html>body #fixiertkopf { /* nur fuer moderne Browser! */
position: fixed;
}

#kopfzeile {
font-size: 1em;
margin: 0 0 1.2em; padding: 0;
}

/* für Textinhalt */

#Inhalt {
margin-left: 17em;
padding: 0 1em;
border-left: 2px ridge gray; border-top: 2px ridge gray; border-right: 2px ridge gray; border-bottom: 2px ridge gray;
background-color: papayawhip;
background-repeat: repeat; background-attachment:fixed; background-position:center
}

* #Inhalt { /* versteckt vor Netscape 4 */
margin-left: 17em;
padding: 0 1em;
border-left: 2px ridge gray; border-top: 2px ridge gray; border-right: 2px ridge gray; border-bottom: 2px ridge gray;
background-color: papayawhip;
background-repeat: repeat; background-attachment:fixed; background-position:center
}

#Inhalt h2 {
font-size: 1.2em;
margin: 2em 5% 2em;
color: maroon;
border-bottom: 1px solid silver;
}

#Inhalt p {
font-size: 1,5em;
margin: 1em 0.5em;
text-align:justify;
color: maroon;
}

#Inhalt #Fusszeile {
font-size: 0.9em;
margin: 8em 0 5 0;
padding: 0.1em;
text-align: center;
background-color: #FFFFFF; border: 1px solid silver;
}

h1 {
font-size: 1.5em;
color: maroon;
margin: 0.5em; padding: 0.3em;
text-align: center;
background-color: #FFFFFF;
border: 2px ridge gray;
}

h5 {
font-size: 1.5em;
margin: 0.5em; padding: 1em;
text-align: center;
background-color: #white;
border: none;
}

Hallo!

Nehme alles zurück. Habe einen Kopierfehler gemacht, wie man oben sehen kann. Blöde Hektik!
Es funktioniert! Vielen Dank, war genau das, was ich wollte.

archaja

Hallo!

oben-unten. Das möchte ich gerne. Von dem her ist der erste Link genau richtig. Aber es funzt nicht. Ich habe mir das jetzt in Opera und in Firefox angeschaut, aber der Text: "Hier steht mehr zu den Hyperlinks" ist immer sichtbar. Ich habe dann mal meinen Link rein und das Bild das ich möchte:

<title>Links mit zusätzlichen Informationen</title>
<style type="text/css">
p,div .info{
<html><head>
<title>Links mit zusätzlichen Informationen</title>
<style type="text/css">
p,div .info{
font-family:Verdana;
font-size:12px;
color:#000000;
font-weight:normal;
}
div a {
display:block;
float:left;
margin-right:15px;
width:100px;
text-align:center;
}

a .info{visibility:hidden;}

a:hover .info{visibility:visible;}
</style>

</head><body>

<div>
<a href="start.html">Hyperlink 1
<span class="info">

</span></a>

<a href="#">Hyperlink 2
<span class="info">

Hier steht mehr zu Hyperlink 2</span></a></p>
<a href="#">Hyperlink 3
<span class="info">

Hier steht mehr zu Hyperlink 3</span></a>
<a href="#">Hyperlink 4
<span class="info">

Hier steht mehr zu Hyperlink 4</span></a>
</div>

</body>
</html>

Aber es geht nicht. Dabei ist es genau das, was ich will.

Gruss Archaja

Hallo!
Bin noch nicht wirlich weiter. Was verstehst Du unter "url_des_hoverbildes"? Ich habe den Bildnamen eingegeben und es auch mit einem Grafiklink versucht. Tat beides nicht.
Es ergibt sich auch die Frage, wo sich das Bild positioniert (es sind ja keine "Ortsangaben" vorhanden.
Danke. P.S. Habe Deine Seite besucht, sieht schick aus. Aber Du bist Deiner Zeit ganz schön voraus, wenn Du Dich seit dem 24.12.2006 mit Webdesign beschäftigst!archaja,

Hallo!

Ich möchte eine Navigation machen mit normalen HTML-Textlinks. Aber als Besonderheit hätte ich gerne bei Mouseover ein kleines Bild, das UNTER dem Textlink erscheint (so wie man mit HTML die Farbe des Textlinks bei Mousover verändern kann). Wie realisiere ich so etwas? Oder weiß jemand schon eine fertige Navigation, die diese Idee realisiert?.

Danke!

archaja