zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Kleines Problem mit Bildern und rahmen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 08.06.2014, 21:51
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.06.2014
Beiträge: 13
reyman1988 befindet sich auf einem aufstrebenden Ast
Standard Kleines Problem mit Bildern und rahmen

Hallo, ich bin derzeit dabei mich in Flexbox rein zu arbeiten.

Ich bin auch schon nah an meinem Endresultat, jedoch stört mich genau eine Sache.

Ich habe hier einmal den CSS und HTML Code zu folgenden Bild.

>>> Screenshot by Lightshot <<<


Und zwar schimmern die rahmen der kleinen 32x32 bilder durch den Rahmen durch. Was kann ich machen damit die Bilder hinter den Rahmen gehen bzw hinter die Box ?


Code:
.wrapper {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;   
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  font-weight: bold;
  text-align: center;
}

.wrapper1 
{
  height:flex;
  background:black;
  display:-webkit-flex;
  display:flex;
  border-style: solid;
  border-width: 1px;
}


.container {
  height:flex;
  background:black;
  display:-webkit-flex;
  display:flex;
}

.Questheader1
{
  background: black;
  color: white;
  width: 50px;
  align-items: center;
}

.Questheader2
{
  background: black;
  color: white;
  align-self:auto;
  flex: 1;
}

.QuestSzene {
  background:dimgray;
  width:auto;
  flex:2 200%;
  text-align: center;
  border:groove 1px #000000;
  border-top-left-radius:8px;
  border-bottom-left-radius:8px;
  border-top-right-radius:8px;
  border-bottom-right-radius:8px;
}

.QuestNummer {
  background: rgba(225,99,71,0.7);
  width:200px;
  text-align: center;
  border:groove 1px #000000;
  border-top-left-radius:8px;
  border-bottom-left-radius:8px;
}

.QuestName {
  background:palegreen;
  flex:2 100%;
  align-items: center;
  text-align: center;
  border:groove 1px #000000;
}

.QuestAufgabe {
  background:green;
  flex:2 100%;
  align-items: center;
  text-align: center;
  border:groove 1px #000000;
}

.QuestBelohnung {
  background:dodgerblue;
  text-align: center;
  flex:2 100%;
  align-items: center;
  max-height: 100px;
  text-position:center;
  border:groove 1px #000000;
}

.QuestBesonderheiten {
  background:gold;
  flex:2 100%;
  text-align: center;
  text-position:center;
  border:groove 1px #000000;
  border-top-right-radius:8px;
  border-bottom-right-radius:8px;
  
}

.Test1 {
    justify-content: center;
    width: auto;
    height: 18px;
    -webkit-transition: width 1s; /* For Safari 3.1 to 6.0 */
    transition: height 1s;
}

.Test1:hover {
    height: 70px;
}
Und das hier der HTML Code:

Code:
<div class="wrapper1">
<div class="Questheader1">Quest</div>
<div class="Questheader2">QuestName</div>
<div class="Questheader2">Aufgabe</div>
<div class="Questheader2">Belohnung</div>
<div class="Questheader2">Besonderheiten</div>
</div>
<div class="wrapper1">
<div class="QuestSzene">4) Valhalla-Aufnahmezeremonie ab lvl 1</div>	
</div>
<div class="container">
  <div class="QuestNummer">1</div>
    <div class="QuestName">Herzlichen Glückwunsch zur Aufnahme in die Valhalla Schule</div>
    <div class="QuestAufgabe">Gehe bitte zu Anthony Bestra.</div>
    <div class="QuestBelohnung">100 EXP</div>
    <div class="QuestBesonderheiten"></div>
</div>
<div class="container">
    <div class="QuestNummer">2</div>
    <div class="QuestName">Einführung in die Valhalla Schule und ein Neuanfang</div>
    <div class="QuestAufgabe">Gehe bitte zu Ceridwen.</div>
    <div class="QuestBelohnung">100 EXP</div>
    <div class="QuestBesonderheiten"></div>
</div>
<div class="container">
    <div class="QuestNummer">3</div>
    <div class="QuestName">Grundlagentest</div>
    <div class="QuestAufgabe">Erziele 3 Double Bogey oder besser auf CT Park Public.</div>
    <div class="QuestBelohnung">1.000 EXP | 100 NG</div>
    <div class="QuestBesonderheiten">Die Bogeys müssen nicht in einer Runde gespielt werden.</div>
</div>
<div class="container">
    <div class="QuestNummer">4</div>
    <div class="QuestName">Tränke</div>
    <div class="QuestAufgabe">Gehe bitte zu Meriel.</div>
    <div class="QuestBelohnung"><div class="Test1">300 EXP <br>[[Datei:Thors_Trank_10.png]][[Datei:Lokis_Trank_10.png]][[Datei:Odins_Trank_10.png]][[Datei:Vidars_Trank_10.png]]</div></div>
    <div class="QuestBesonderheiten">Die Items sind Charbezogen.</div>
</div>
<div class="wrapper1">
    <div class="QuestSzene">(10) Anfängerträining ab lvl 1</div>	
</div>
<div class="container">
    <div class="QuestNummer">5</div>
    <div class="QuestName">Ceridwens Privatunterricht I, Alfheim</div>
    <div class="QuestAufgabe">Erziele 3 Double Bogey oder besser auf Alfheim.</div>
    <div class="QuestBelohnung">1.500 EXP | 150 NG</div>
    <div class="QuestBesonderheiten">Die Bogeys müssen nicht in einer Runde gespielt werden.</div>
</div>
<div class="container">
    <div class="QuestNummer">6</div>
    <div class="QuestName">Golfbälle</div>
    <div class="QuestAufgabe">Gehe bitte zu Freya.</div>
    <div class="QuestBelohnung"><div class="Test1">300 EXP <br>[[Datei:Ball-Spielball-1K1G.png]] Fußball 2er,3er,4er</div></div>
    <div class="QuestBesonderheiten">Die Items sind Charbezogen.</div>
</div>
<div class="container">
    <div class="QuestNummer">7</div>
    <div class="QuestName">Potters Eifersucht</div>
    <div class="QuestAufgabe">Gehe bitte zu Ceridwen.</div>
    <div class="QuestBelohnung">200 EXP</div>
    <div class="QuestBesonderheiten"></div>
</div>
<div class="container">
    <div class="QuestNummer">8</div>
    <div class="QuestName">Ceridwens Privatunterricht II, Sosori</div>
    <div class="QuestAufgabe">Erziele 6 Double Bogey oder besser auf Sosori.</div>
    <div class="QuestBelohnung">2.500 EXP | 250 NG</div>
    <div class="QuestBesonderheiten">Die Bogeys müssen nicht in einer Runde gespielt werden.</div>
</div>

<div class="container">
    <div class="QuestNummer">9</div>
    <div class="QuestName">Potters Entschuldigung</div>
    <div class="QuestAufgabe">Gehe bitte zu Potter.</div>
    <div class="QuestBelohnung">200 EXP | 50er N2.0</div>
    <div class="QuestBesonderheiten">Die Items sind Charbezogen.</div>
</div>
<div class="container">
    <div class="QuestNummer">10</div>
    <div class="QuestName">Gegen die Erschöpfung</div>
    <div class="QuestAufgabe">Gehe bitte zu Meriel.</div>
    <div class="QuestBelohnung"><div class="Test1">1.000 EXP <br>[[Datei:Energienektar.png]][[Datei:Rosmarinnektar.png]][[Datei:Kamillennektar.png]]</div></div>
    <div class="QuestBesonderheiten">Die Items sind Charbezogen.</div>
</div>
<div class="container">
    <div class="QuestNummer">11</div>
    <div class="QuestName">Ceridwens Privatunterricht III, NamChon CC</div>
    <div class="QuestAufgabe">Erziele 6 Double Bogey oder besser auf NamChon CC.</div>
    <div class="QuestBelohnung">30.000 EXP | 3.000 NG</div>
<div class="QuestBesonderheiten">Die Bogeys müssen nicht in einer Runde gespielt werden.</div>
</div>
<div class="container">
    <div class="QuestNummer">12</div>
    <div class="QuestName">Kleidung</div>
    <div class="QuestAufgabe">Gehe bitte zu Fricka.</div>
    <div class="QuestBelohnung"><div class="Test1">1.000 EXP <br>[[Datei:Frickas_blaue_Doppelvisier_Kappe_2000.png]][[Datei:Frickas_grüner_Lederhandschuh_2000.png]][[Datei:Frickas_grüne_Sportschuhe_2000.png]]</div></div>
    <div class="QuestBesonderheiten">Die Items sind Charbezogen.</div>
</div>
<div class="container">
    <div class="QuestNummer">13</div>
    <div class="QuestName">Ceridwens Privatunterricht IV, Midas Valley</div>
    <div class="QuestAufgabe">Erziele 6 Double Bogey oder besser auf Midas Valley.</div>
    <div class="QuestBelohnung">30.000 EXP | 3.000 NG</div>
    <div class="QuestBesonderheiten">Die Bogeys müssen nicht in einer Runde gespielt werden.</div>
</div>
<div class="container">
  <div class="QuestNummer">14</div>
    <div class="QuestName">Levelaufstieg - Lvl 21</div>
    <div class="QuestAufgabe">Erreiche Level 21.</div>
    <div class="QuestBelohnung">1.000 EXP | 50er N2.0</div>
    <div class="QuestBesonderheiten">Die Items sind Charbezogen.</div>
</div>
  <div class="wrapper1">
<div class="QuestSzene">4) Valhalla-Aufnahmezeremonie ab lvl 1</div>	
</div>
  <div class="container">
  <div class="QuestNummer">15</div>
    <div class="QuestName"></div>
    <div class="QuestAufgabe"></div>
    <div class="QuestBelohnung"></div>
    <div class="QuestBesonderheiten"></div>
</div>
Ich hoffe ihr könnt mir helfen

MFG

reyman
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 09.06.2014, 01:52
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.372
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

In deinem HTML sind keine Bilder.
Bitte hochladen oder in jsfiddle nachbauen. (Keine Ausreden)
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 09.06.2014, 16:37
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.06.2014
Beiträge: 13
reyman1988 befindet sich auf einem aufstrebenden Ast
Standard

So ich habe mal ein Bild mit eingefügt.

Hier kann man sehen das der Rahmen des Bildes über dem Rahmen der Box durchscheint.

Edit fiddle - JSFiddle
Mit Zitat antworten
  #4 (permalink)  
Alt 09.06.2014, 16:44
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.372
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

Ah, du baust eine Tabelle, ohne eine Tabelle zu benutzen.

Wo keine Tabelle benutzt werden sollte benutzen alle Tabellen, da wo eine benutzt werden sollte, benutzt sie keiner.

Es sollte helfen ein simples overflow-hidden darzustellen oder die Zeilenhöhe und die Zellenhöhe anzupassen.
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
  #5 (permalink)  
Alt 09.06.2014, 16:52
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.06.2014
Beiträge: 13
reyman1988 befindet sich auf einem aufstrebenden Ast
Standard

Öm ja ich finde das Design einfach schön und daher bin ich seid ein paar Tagen an Flexbox dran.

Ist es schlimm das ich das so mache ? Oder gibt es da deutlich einfachere oder bessere lösungen ?

Ich habe deshalb Flexbox gewählt da die Tabelle auf unserer Wikipedia Seite nicht mit Transition kombinierbar ist.

Hast du da eventuell eine andere Lösung wie man ein ähnliches Design ohne Flexbox kreiert ?



Und vielen dank für den Tipp, es hat geholfen.

Geändert von reyman1988 (09.06.2014 um 16:55 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 09.06.2014, 20:51
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 12.11.2010
Ort: Bad Langensalza
Beiträge: 733
gabischatz ist in Verruf geraten
Standard

height:flex; gibt es aber nicht.
Schönes Beispiel.
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
kleines Problem im IE7 Serpico CSS 11 11.08.2011 20:26
Problem mit Rahmen aus IMGs um einen Container Vadril CSS 2 15.10.2010 11:54
Links mit Bildern, Rahmen trotz border:none fidel CSS 7 16.07.2006 20:38
kleines layout problem andrea_r CSS 5 25.11.2005 17:46
Rahmen Problem krakos CSS 1 19.03.2005 05:18


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:50 Uhr.