nicht angemeldet
Boxen werden nicht angezeigt
Gunnar Bittersmann
Matthias ScharwiesHi zusammen
Zurzeit bin ich gerade dabei, meine Home-Seite zu überarbeiten; die bisherige Darstellung ist eigentlich nur ein Grundgerüst für alle Seiten. Dieses Grundgerüst besteht aus 4 Boxen:
- Dem Header
- Einer Left-
- einer Content-
- und einer RightBox
In der Contentbox habe ich ein bisher als Grafik angezeigtes Logo durch CSS/HTML ersetzt:
<p id="Titelbox1"> Willkommen auf den Seiten von</p> <!-- id=txtEins <div></div>-->
<p id="Titelbox2"> roase.ch </p > <!--<div></div> id=txtZwei-->
<p id="Titelbox3"> Rogers Oase im Internet</p> <!--id=txtDrei <div</div>-->
Das CSS dazu:
#Titelbox1{
position:absolute;
height: 50px;
width: 50%;
font-style:italic;
font-size:1.5em;
vertical-align:25px;
border:none;
margin-top: 25px;
margin-left:15%;
margin-bottom:20px;
padding-top: 0;
pading-left : 0;
color: yellow;
text-shadow:
1px 1px red,
2px 2px red,
3px 3px red;
top: 0; left: 0;
transition: all 0.3s ease-out;
}
#Titelbox2{
position:absolute;
height: 50px;
width: 50%;
font-style:italic;
font-size:3em;
text-align:center;
border: solid 3px yellow;
border-radius: 50px;
background-color:blue;
margin-top: 90px;
margin-left:25%;
margin-right:25%;
padding-top:2px;
padding-bottom:30px;
color: yellow;
text-shadow:
1px 1px red,
2px 2px yellow,
3px 3px red;
top: 0; left: 0;
transition: all 0.3s ease-out;
}
#Titelbox3{
position:absolute;
height: 50px;
width: 40%;
font-style:italic;
font-size:1.5em;
border: none;
margin-top: 200px;
margin-left:50%;
margin-right:10%;
color: yellow;
text-shadow:
1px 1px red,
2px 2px red,
3px 3px red;
top: 0; left: 0;
transition: all 0.3s ease-out;
}
Diese drei Boxen werden soweit innerhalb der contentbox richtig dargestellt. Nun folgt ein Inhaltsverzeichnis, bzw. erstmal dessen Überschrift, welche ich auch in einer Box darstelle, um von "H1" unabhängig zu sein. Und jetzt beginnt mein Problem. Als erstes habe ich in der Contentbox eine Box "Eisenbahn". Die wird korrekt angezeigt und soll noch weitere Boxen enthalten, wie "Normalspurbahn" oder "Schmalspurbahn" etc. Dabei wird mir die Eisenbahnbox korrekt erstellt, von den andern beiden fehlt jede Spur. Ich habe die Eisenbahnbox auch schon mal soweit verkleinert, dass Elemente dahinter sichtbnar werden müssten - nichts. Alles, was mir auf jeden Fall angezeigt wird, sind die Texte, die sich in den Boxen befinden sollten. Das HTML:
<div id="Eisenbahn">Eisenbahnen
<div id="Normalspur">Normalspurbahnen
<ul class="homemenue">
<li><a href="#">Gotthardgiganten</a></li>
<li><a href="#">Französischer Dampf am Gotthard</a></li>
<li><a href="AufromantischerSpur1.html">DVZO - Auf romantischer Spur1</a></li>
<li><a href="BischofzellerRosenwochen.html">Mit Dampf an die Bischofszeller Rosenwochen</a></li>
<li><a href="BahnhofsfestWattwil.html">Bahnhofsfest Wattwil</a></li>
</ul> <!-- -->
</div>
<div id="Schmalspurbahn">Schmalspurbahnen
<ul class="homemenue">
<li><a href="#">100 Jahre Säntisbahn</a></li>
<li><a href="DasWaldenburgerJuwel.html">Das Juwel vom Waldenburgertal</a></li>
</ul> <!-- -->
</div>
<div id="Bergbahn">Berg- und Zahnradbahnen
<ul class="homemenue">
<li><a href="#">Die Rigibahn</a></li>
<li><a href="#">Rosa und die RHB</a></li>
</ul> <!-- -->
</div>
</div> <!-- Abschluss-diy Eisenbahn -->
Das CSS:
#Eisenbahn {
position:absolute;
width : 90%;
height: 40px;
font-style:italic;
font-size:1.5em;
margin-top: 295px;
margin-left: 5%;
margin-right: 5%;
padding-top: 15px;
pading-left : 15px;
background-color: aqua;
color: yellow;
border: solid 1px blue;
border-radius: 20px;
} <!-- float: left; $00FAA80C;-->
#Normalspur {
position:absolute;
display: inline-block;
float: left;
width : 65%;
height: 80px;
color: yellow;
font-style:italic;
font-size:1.5em;
margin-top:10px;
margin-left: 30%;
margin-right: 5%;
background-color: red;<!--$00FAA80C; -->
border: solid 1px red;
border-radius: 20px;
} <!-- float: left; margin-right: 2%;-->
#Schmalspurbahn {
position:absolute;
position:absolute;
width : 65%;
height: 80px;
font-style:italic;
font-size:3em;
display: inline-block;
border: solid 2px yellow;
border-radius: 20px;
background-color: red;<!--$00FAA80C; -->
color: yellow;
font-style:italic;
font-size:1.5em;
margin-top:300px;
margin-left: 7%;
margin-right: 5%;
}
Ich habe schon versucht, CSS-Anweisungen aus einer meiner Titelbox zu verwenden - mit dem selben Ergebnis.
Das Box-Modell habe ich - hoffentlich genügend - studiert, bin allerdings der Meinung, dass ich da vorerst nichts finde, was mir meinen Fehler klarmacht. Insbesodere desshalb, weil die Anzeige der Titelboxen ja problemlos funktioniert. Ach ja: Ich sollte noch erwähnen, dass der Body mit Position:relative formatiert ist. Alles andere ist absolut positioniert. Wo im gezeigten Quelltext abweichungen vorhanden sind: die stammen aus Versuchen, dem Fehler auf die Spur zu kommen. Was machhe ich falsch?
Gruss Delbor
-
Das ist alles schön und gut. Aber wer soll denn aus Deinem Code das Originaldokument nachbauen? Stell das bitte irgendwo online und gib uns die Adresse.
-
Das ist alles schön und gut. Aber wer soll denn aus Deinem Code das Originaldokument nachbauen? Stell das bitte irgendwo online und gib uns die Adresse.
Dazu habe ich meines Wissens leider keine Möglichkeit. Meine Webseite läuft zurzeit auf einer vom Hoster bereitgestellten Anwendung, die keine Downloadseite m.W. bereitstellt.
Gruss Delbor
-
@@delbor
Das ist alles schön und gut. Aber wer soll denn aus Deinem Code das Originaldokument nachbauen? Stell das bitte irgendwo online und gib uns die Adresse.
Dazu habe ich meines Wissens leider keine Möglichkeit.
Doch, hast du. Es gibt Plattformen wie CodePen und Dabblet.
LLAP 🖖
--
“I love to go to JS conferences to speak about how to avoid using JavaScript. Please learn CSS & HTML to reduce your JS code bloat.” —Estelle Weyl
-
-
-
Hallo
Das Box-Modell habe ich - hoffentlich genügend - studiert
Leider nicht. Sonst würdest du die Finger von "position: absolute" lassen. Genau dadurch entstehen deine Probleme.
Du solltest "position: absolute" löschen und für das Layout gedachte Lösungen wie Flexbox verwenden.
Gruss
MrMurphy
-
Hallo
Das Box-Modell habe ich - hoffentlich genügend - studiert
Leider nicht. Sonst würdest du die Finger von "position: absolute" lassen. Genau dadurch entstehen deine Probleme.
Du solltest "position: absolute" löschen und für das Layout gedachte Lösungen wie Flexbox verwenden.
Gruss
MrMurphy
Hi MrMurphy
Die Flexbox habe ich tatsächlich bisher ziemlich überflogen - ich hol das mal nach...
Gruss Delbor
-
Servus!
Du solltest "position: absolute" löschen und für das Layout gedachte Lösungen wie Flexbox verwenden.
In unserem Wiki:
Gruss Delbor
Herzliche Grüße
Matthias Scharwies
--
Es gibt viel zu tun: ToDo-Liste-
[Vollzitat entfernt]
Hi Matthias Danke für deine Links! Ich hab mir diese schon angesehen, bzw. besser angesehen. In den vergangenen Tagen hab ich mich zum einen durch die Wikis gewühlt und mir eine Lesezeichen-Liste angelegt. Das hatte auch zur Folge, dass ich gewisse Beiträge wie eben den über die Flexboxen zu flüchtig überflogen habe.
Noch sehe ich mich in Sachen CSS und HTML als Anfänger und frage mich daher, ob ich da was einigermassen kluges Beitragen kann. In Sachen Javascript trifft das sowieso zu, denn da hab ich noch gar nichts gemacht. Aber wenn ich mal das Gefühll hab, etwas nicht ganz so blödes beitragen zu können, werde ich mich melden.
Gruss Delbor
-
Servus!
Hi Matthias Danke für deine Links!
Noch sehe ich mich in Sachen CSS und HTML als Anfänger und frage mich daher, ob ich da was einigermassen kluges Beitragen kann.
Ich bin ganz offen: auf vielen Seiten gibt es Tippfehler und stilistische Mängel, die man (oft) ohne Fachkenntnisse berichtigen kann.
Genauso hilfreich ist eine Rückmeldung, was du nicht gefunden hat, bzw. mit welchen Suchbegriffen oder an welchen Stellen du gesucht hast. Interne Verlinkungen sind ein Thema, das permanent verbessert werden kann und wohl niemals fertig wird.
Aber wenn ich mal das Gefühll hab, etwas nicht ganz so blödes beitragen zu können, werde ich mich melden.
Herzlich willkommen in der Community!
Herzliche Grüße
Matthias Scharwies
--
Es gibt viel zu tun: ToDo-Liste
-
-
-
-