zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Positionierung eines span mit Hintergrund

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 17.09.2007, 14:47
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.09.2007
Beiträge: 11
macmensa befindet sich auf einem aufstrebenden Ast
Standard Positionierung eines span mit Hintergrund

Hi @all...

ein Newbie ist unter euch mit der grossen Hoffnung hier vielleicht Rat und Hilfe zu finden.

Vorweg: Ich habe vor ca. 4 Wochen angefangen meine erste eigene Homepage zu basteln. Bis dato waren weder HTML noch sonst irgendwelche Programmierkenntnisse vorhanden. Habe dann durch viel lesen im Internet mir versucht so einige Dinge autodidaktisch beizubringen. Meine Grundgerüst für die Homepage bildet dabei das Programm Netobjects Fusion10.0. Vor diesem Hintergrund bitte ich fehlerhafte Deklarationen, falschen Code oder Unwissenheit zu entschuldigen.

Nun aber zu meinem Problem:

Ich versuche gerade meine aktuelle Startseite Weltraum Visionen mit CSS aufzupeppen.

Dazu habe ich hier den aktuellen Versuch online gestellt, der verdeutlicht, was ich erreichen will CSS Startseite

Mittlerweile dreht sich der Code bereits vor meinen Augen und es will einfach nicht so funtkionieren wie ich mir das vorstelle. Habe auch bereits mit <span> experimentiert, padding, margin, display:inline, etc, etc, etc.... Auch viel gelesen zu den Hacks, Problemen der Darstellung im IE, das Firefox es eigentich richtig macht, Doctype, usw. Aber wahrscheinlich fehlen mir nach 4 Wochen Homepage immer noch rudimentäre Kenntnisse.

Hier aber nun erstmal mein selbst kreiirter CSS-Code:

Zitat:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<style type="text/css">

img {
border:none;
}

#box{
display:block;
border:0px solid #999999;
clear:both;
}

#box a #box a:visited {
border:0px solid #999999;
background:none;
}

#box span {
position:absolute; top:280px; left:200px;
text-decoration:none;
display:inline;
}

#box span a {
text-decoration:none;
}

#box span p {
font-family: "agency fb";verdana, arial, "sans-serif";
font-size:18px;
font-style:normal;
font-weight:normal;
text-align:left;
color:#C0SBA894;
text-decoration:none;
height:230px;
width:250px;
padding:15px;
background:url("../assets/images/schatten250x230.gif");
background-repeat:no-repeat;
background-position:top left;
overflow:visible;
float:left;
display:none;
}

#box a:hover span p {
display:inline;
}

#box a:hover {
text-decoration:none;
}

</style>
Das Bild der Startseite ist ein komplettes jpg, welches als Hintergrund im Layout positioniert ist. Nun habe ich transparente gifs an die entsprechenden Stellen der Seite über dem Hintergrund positioniert und ihnen einen Link zugewiesen, da "hover" ja nur mit Links funktioniert. Hier exemplarisch der Code eines dieser transparenten gifs:

Zitat:
<div id="box" class="span"><a href="./observatorium.html">

<img id="Bild15" height="200" width="290" src="../assets/images/a_trans240x175_2.gif" border="0" alt="Observatorium" title="Observatorium" >

<span><p><strong>Observatorium</strong><br><br>
Der nächtliche Blick an den Himmel.Was sehen wir dort eigentlich? Wie können wir uns dort orientieren? All das möchte ich hier im laufe der Zeit vorstellen...</p></span>

</a>
Soweit so gut.... Wie man auf der experimentellen Seite sehen kann funktioniert es vom Prinzip ungefähr so wie es sollte. Ich kann den span positionieren wo ich möchte und auch das Hintergrundbild wird dargestellt.

Schaut man sich die Seite mit dem IE an, so wird auch das padding wie gewünscht umgesetzt, aber im Firefox leider nicht. Faszinierender Weise werden auch im IE die beiden span bei Gedanken und Science Fiction nicht ausgeführt dafür aber im Firefox. Warum auch immer, weil sie unter der ersten Ebene liegen??? Und egal was ich im Firefox tue, die Schrift wird immer breiter als das Hintergrundbild.

Meine laienhafte Vermutung ist, das es irgendwie mit Block und Inline Elementen zusammenhängt, da der span ja eigentlich keine Breite haben darf, oder? und das <p> wiederum innerhalb des span liegt?

Ich suche zwar nun sicherlich einen Rat, wie ich das realisieren kann, aber noch vielmehr versuche ich seit Tagen verzweifelt hinter die Logik zu kommen die dahinter steht um sie auch für die Zukunft zu verstehen. Aber aktuell sehe ich nur noch schwarz....

Ratlose Grüsse und Dank im vorraus..... Mac
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 17.09.2007, 15:44
Benutzerbild von kadees
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 22.06.2004
Ort: in Baden (nicht Schwaben)
Beiträge: 792
kadees wird schon bald berühmt werden
Standard

Hallo,
bitte lies dir mal Für Fragende, für Antwortende durch, das ist der zweitoberste Threat hier im CSS-Forum.
Zitat:
Validiere sowohl dein (X)HTML als auch dein CSS selbst. Maschinen können viele Fehler effizienter finden.
HTML: [Invalid] Markup Validation of http://www.weltraum-visionen.de/html/cssstart.html - W3C Markup Validator
(deutsche Version: HTML / XHTML / XML / WML Validator)

CSS: W3C CSS Validator results for http://www.weltraum-visionen.de/html/cssstart.html

---

Zitat:
Meine laienhafte Vermutung ist, das es irgendwie mit Block und Inline Elementen zusammenhängt, da der span ja eigentlich keine Breite haben darf, oder? und das <p> wiederum innerhalb des span liegt?
<span> darf als Inlineelement keine Blockelemente wie <p>, <hx>e tc. enthalten!
__________________
Gruss Dieter

Vegetarier essen meinem Essen das Essen weg.
Und unsere Norweger sind reine Karnivoren.

selfhtml | css4you | jendryschik | styleworks | Webdesign mit XHTML und CSS
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 17.09.2007, 17:21
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.09.2007
Beiträge: 11
macmensa befindet sich auf einem aufstrebenden Ast
Standard

Holla die Bergfee....!

Ich habe das ganz dumpfe Gefühl, das die Seite nur aus Fehlern zu bestehen scheint, wenn ich deinen Links folge...

Nur sind diese ganzen Fehler zum Teil Böhmische Dörfer für mich... Es hapert schon daran, das ich keine Möglichkeit finde, den von NOF generierten Doctype zu ändern. Oder kann man das im body nochmals zusätzlich definieren? Überschreibt eine neue vorangestellte Doctype Deklaration die nachfolgend von NOF definierte Version?

Ansonsten hoffe ich doch erstmal, das ich den Ansprüchen von "Für Fragende, Für Antwortende" gerecht geworden bin...?!

Wie gesagt, deine Links haben mich nur darin bestätigt, das ich definitiv etliche Fehler habe, aber wie ich sie nun Step-by-Step beseitigen kann bin ich leider noch nicht wirklich näher gekommen...

Und ganz ab davon scheint ja trotz der Fehler meine eigentliche Absicht dessen was ich erreichen will schon zu 90% zu funktionieren, wie auf der Testseite ersichtlich. Zumindest die grundlegenden Funktionen die ich erreichen möchte...

Gruss Mac
Mit Zitat antworten
  #4 (permalink)  
Alt 17.09.2007, 19:18
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.09.2007
Beiträge: 11
macmensa befindet sich auf einem aufstrebenden Ast
Standard

Kurze eigene Ergänzung....

Nach einigem grübeln und probieren, sagt mir Link 1 nun das die Seite validate ist... Der zweite Link enthält zwar noch ein paar Fehler, aber ich hoffe die vernachlässigen zu können, da sie mir nicht wirklich etwas sagen... Aber validate ist es nun....

Einer Lösung bin ich aber leider immer noch nicht näher gekommen...

Gruss Mac
Mit Zitat antworten
  #5 (permalink)  
Alt 17.09.2007, 19:37
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 06.06.2006
Beiträge: 188
hubert17 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
<div id="box" class="span"><a href="./observatorium.html">

<img id="Bild15" height="200" width="290" src="../assets/images/a_trans240x175_2.gif" border="0" alt="Observatorium" title="Observatorium" >

<span><p><strong>Observatorium</strong><br><br>
Der nächtliche Blick an den Himmel.Was sehen wir dort eigentlich? Wie können wir uns dort orientieren? All das möchte ich hier im laufe der Zeit vorstellen...</p></span>
<span> einmal als element und einmal als class="span"! ist das überhaupt zulässig? zumindestens in deinem css ist kein #span zu sehen. was soll die klasse bewirken?

rené
Mit Zitat antworten
  #6 (permalink)  
Alt 17.09.2007, 19:49
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.09.2007
Beiträge: 11
macmensa befindet sich auf einem aufstrebenden Ast
Standard

Durch das korrigieren der Fehler hat sich der Code mittlerweile etwas verändert....

a) habe ich nun 5 eindeutige ID aufgemacht box -box5 und das <p> komplett entfernt...
b) <span> als klasse funtkioniert und wird mir auch nicht als Fehler angeprangert... ich nutze das span um den enthaltenen Text bei a:hover ein- bzw. auszublenden....

die unterschiedlichen darstellungen FF und IE sind aber immer noch vorhanden... Und im IE werden mir die Inhalte (span) nur einmal angezeigt bei hover... danach nicht mehr.... seltsam....

Neue CSS Definitionen:

Zitat:
<style type="text/css">

img {
border:none;
}

#box {
display:block;
border:0px solid #999999;
clear:both;
}

#box a #box a:visited {
border:0px solid #999999;
background:none;
}

#box span {
position:absolute; top:280px; left:200px;
text-decoration:none;
display:inline;
}

#box span a {
text-decoration:none;
}

#box span {

font-family:"agency fb", verdana, arial, sans-serif;
font-size:18px;
font-style:normal;
font-weight:normal;
text-align:left;
color:#BDB177;
text-decoration:none;
height:230px;
width:250px;
padding:15px;

background:url("../assets/images/schatten250x230.gif");
background-repeat:no-repeat;
background-position:top left;
overflow:visible;
float:left;
display:none;
}

#box a:hover span {
display:inline;
}

#box a:hover {
text-decoration:none;
}
</style>
(PS: der kürze wegen nun nur die erste CSS ID... box2-box5 sehen identisch aus... Und hier der aktuelle html Code:

Zitat:
<div id="box" class="span"><a href="./observatorium.html">

<img id="Bild15" height="200" width="290" src="../assets/images/a_trans240x175_2.gif" border="0" alt="Observatorium" title="Observatorium" ><span><strong>Observatorium</strong><br><br>
Der nächtliche Blick an den Himmel.Was sehen wir dort eigentlich? Wie können wir uns dort orientieren? All das möchte ich hier im laufe der Zeit vorstellen...</span>

</a>
</div>
Ratlose Grüsse.... Mac
Mit Zitat antworten
  #7 (permalink)  
Alt 18.09.2007, 13:41
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 06.06.2006
Beiträge: 188
hubert17 befindet sich auf einem aufstrebenden Ast
Standard

hast du es schonmal bei selfhtml versucht
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Problem mit Hintergrund + Positionierung deepy (X)HTML 2 27.07.2010 11:33
Hintergrund Positionierung luckyfella73 CSS 0 18.03.2010 18:37
Navigation verschwindet im IE6 emti CSS 4 12.05.2009 15:01
a:hover span: Positionierung geht vom falschen Element aus! Crizzo CSS 6 19.07.2007 17:25
Div Orientierung Leonidus CSS 22 30.05.2007 17:05


Alle Zeitangaben in WEZ +2. Es ist jetzt 06:48 Uhr.