Probleme mit meiner Feature List

User1 · 12. Februar 2017

Hallo Leute,

ich mache für einen Kumpel sein Projekt so ein bisschen das Mädchen für alles und verwalte so auch die Webseite und versuch da bisschen Content rein zu bringen. Leider funktioniert es nicht so ganz wie ich mir das vorgestellt habe.

Hier die Seite wo Ihr seht, wie es eigentlich aussehen soll und mit genau dem selben Code funktioniert, wie ich Ihn auf der Seite eingefügt habe:
http://warhawksexile.de/test.html

Und hier auf der Startseite seht ihr, wie es aussieht eingebunden:
http://warhawksexile.de

Wisst ihr, wie ich das beheben kann? Achso und ich sehe gerade, dass der mittlere das linke und rechte etwas überlappt - kann ich das überlappende irgendwie verringern? Das ist eigentlich eine Preis Promo List die ich mit meinen geringen HTML und CSS Kenntnissen angepasst habe.

Tom · 12. Februar 2017

Vermutlich kommt dir da das Box-Sizing in die Quere, erhöhe die Breite:

CSS

.server-list {
    width: 830px;
}

dann passt das.

Ansonsten wäre es besser wenn du die Anzeige auf ein Flexbox-Layout umbaust, wenn ich das richtig sehe dann fehlt dir auch mindestens ein Clearfix, aber ich bin mir nicht sicher ob es da in der Suite noch was in der Richtung gibt, müsstest du also selbst was bauen.

User1 · 13. Februar 2017

Okay - ich habe erstmal gesehen, dass du das Plugin Layout Extension raus gebracht hast - sehr schönes Teil! Habe damit erstmal meine Feature List aufgebessert. Ich habe jetzt einfach mal diesen vorgefertigten Mist verworfen und mit Hilfe von w3schools mir was neues gebastelt.

Jetzt hab ich aber ein Problem.

Meine Startseite besteht aktuell aus 4 Boxen:
Box 1: Hero-Image mit eigenen CSS Deklarationen:

CSS

//font awesome Default Avatar in User Menu
#userMenu > a::before {
    background-color: rgba(0, 0, 0, 0);
    color: $wcfHeaderMenuLink;
    font-family: FontAwesome;
    font-size: 28px;
    line-height: 32px;
    padding: 5px 2px;
}
#userMenu > a::before {
    content: "\f2be";
}
#userMenu > a > img {
    display: none;
}


body[data-page-id="62"] {
    // Box-Styling mit Hintergrund über die gesamte Breite
    .boxesHero {
        background-image: url('/images/background.jpg');
        background-size: cover;
        display: flex;
        min-height: calc(100vh - 50px);
    }
    // logo und breadcrumbs ausblenden
    .pageHeaderLogo,
    .pageNavigation {
        display: none !important;
    }
	//ContentHeaderTitle ausblenden
	.contentHeaderTitle {
		display: none;
	}
    // Anpassung, damit kein leerer Raum dargestellt wird
    .pageHeaderFacade > .layoutBoundary {
        padding: 0 !important;
    }
    @include screen-md-down {
        // Darstellung des mobilen Logos erzwingen
        .pageHeaderLogo,
        .pageHeaderLogoSmall {
            display: block;
        }
    }
}


//PageHeaderLogo, PageHeaderLogo Global ausblenden
.pageHeaderLogo .pageHeaderLogoLarge { display: none; }

Alles anzeigen

Box 2: Meine Feature Liste (Unterstützt durch Layout Extension):

HTML

<div class="gridLayout row">
					<div class="gridBox col-md-4">
						<div class="gridBboxContent gridBboxIcon gridBoxContentJustify">
							<div class="gridBboxContentHeroIcon filled">
								<span class="icon icon64 fa-gears"></span>
								<h2 class="gridBoxTitle">Server</h2>
							</div>
							<p>Unsere leistungsfähige Infrastruktur ermöglicht es uns, euch für den Exile Server beste Performance und höchste Zuverlässigkeit zu bieten. Unsere Server werden von unserem qualifizierten Server Team betreut und gewartet um Ausfallzeiten so niedrig wie möglich zu halten.</p>
						</div>
					</div>
					<div class="gridBox col-md-4">
						<div class="gridBboxContent gridBboxIcon gridBoxContentJustify">
							<div class="gridBboxContentHeroIcon filled">
								<span class="icon icon64 fa-handshake-o"></span>
								<h2 class="gridBoxTitle">Team</h2>
							</div>
							<p>Durch unser qualifiziertes und kompetentes Team können wir schnellen Support zu fast jeder Uhrzeit bieten und uns um eure Anliegen kümmern! Unsere Entwickler sind stehts bemüht, euch regelmäßig neue Missions und Features bieten zu können. Somit ist Spielspaß garantiert!</p>
						</div>
					</div>
					<div class="gridBox col-md-4">
						<div class="gridBboxContent gridBboxIcon gridBoxContentJustify">
							<div class="gridBboxContentHeroIcon filled">
								<span class="icon icon64 fa-comments"></span>
								<h2 class="gridBoxTitle">Community</h2>
							</div>
							<p>Nicht nur unser kompetentes Team steht euch jederzeit zur Verfügung, bei Fragen oder Problemen rund um das Überleben auf der Insel gibt es im Forum viele Mitglieder die sehr Neulings-Freundlich sind. Wir alle waren mal die Frischlinge und wissen wie es ist, einen Anfang finden zu müssen.</p>
						</div>
					</div>	
				</div>
				<div class="gridLayout row">
					<div class="gridBox col-md-4">
						<div class="gridBboxContent gridBboxIcon gridBoxContentJustify">
							<div class="gridBboxContentHeroIcon filled">
								<span class="icon icon64 fa-facebook"></span>
								<h2 class="gridBoxTitle">Social Media</h2>
							</div>
							<p>Auch wir wollen mit der Zeit gehen und haben eine eigene Facebook Seite, auf der wir stets die neusten Infos ankündigen - somit braucht ihr nicht Stundenlang im Forum nach News suchen, sondern könnt tagtäglich unsere News sehen sobald ihr auf Facebook geht!	</p>
						</div>
					</div>
					<div class="gridBox col-md-4">
						<div class="gridBboxContent gridBboxIcon gridBoxContentJustify">
							<div class="gridBboxContentHeroIcon filled">
								<span class="icon icon64 fa-heart-o"></span>
								<h2 class="gridBoxTitle">Vote für uns</h2>
							</div>
							<p>Um einen Server nach vorne zu bringen, wird nicht nur ein stabiler Server, ein gutes Team und viel Arbeit benötigt - Nein - wir benötigen unter anderem die Hilfe unserer Spieler! Wenn auch du möchtest, dass wir immer wieder mal neue Frischlinge auf die Insel bekommen gib doch einfach jeden Tag einen Vote für uns ab :)</p>
						</div>
					</div>
					<div class="gridBox col-md-4">
						<div class="gridBboxContent gridBboxIcon gridBoxContentJustify">
							<div class="gridBboxContentHeroIcon filled">
								<span class="icon icon64 fa-gavel"></span>
								<h2 class="gridBoxTitle">Demokratie pur!</h2>
							</div>
							<p>Viele kennen es - man kommt auf einen Server, bekommt schnell mit wie ein Admin seine Rechte ausnutzt und die Meinung der Spieler ignoriert wird. Das ist anders bei uns! Wenn wir Ideen zu neuen Features haben, führen wir im Forum immer wieder Umfragen durch und lassen die Mehrheit entscheiden, was wir euch für Features bieten!</p>
						</div>
					</div>	
				</div>


        <hr class="boxContentSeparator">
        <center><p>Erfahre mehr über uns und <a href="http://warhawksexile.de/register/">tritt noch heute unserer Community bei!</a></p></center>

Alles anzeigen

Box 3: Eine kleine Listung im Stile einer Preisliste

HTML

<style>


@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600);


.columns-serverlist {
	font-family: 'Open Sans', sans-serif;
    box-sizing: border-box;
    float: left;
    width: 33.3%;
    padding: 8px;
}


.listing {
    height: auto;
    list-style-type: none;
    border: 1px solid #000000;
    border-radius: 40px;
    margin: 0;
    padding: 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}


.listing:hover {
    box-shadow: 0 12px 20px 0 rgba(139, 0, 0, 1)
}


.listing .header {
    background-color: #111;
    color: white;
    font-size: 23px;
    border: none;
    border-radius: 40px;
}


.listing li {
    border-bottom: 1px solid #8B0000;
    padding: 20px;
    text-align: center;
}


.grey {
    border: none;
    border-radius: 40px;
    }


.button-serverlist {
    background-color: #292b2e;
    border: none;
    border-radius: 40px;
    color: #f9f9f9;
    padding: 10px 37px;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
}


@media only screen and (max-width: 600px) {
    .columns-serverlist {
        width: 100%;
    }
}
</style>


<div class="columns-serverlist">
  <ul class="listing">
    <li class="header">Gameserver</li>
<li><strong>Server IP:</strong> 89.163.145.211</li>
<li><strong>Server Port:</strong> 2302</li>
<li><strong>Aber vergiss die Mods nicht! Ohne diese kannst du nicht bei uns Spielen. Wie du diese installierst findest du in der Anleitung über den Button.</strong></li>
    <li class="grey"> <a href="#" class="button-serverlist">Anleitung</a></li>
  </ul>
</div>


<div class="columns-serverlist">
  <ul class="listing">
    <li class="header" style="background-color:#8A0808">Deine Stimme zählt!</li>
    <li><strong>Hast du heute eigentlich schon </li>
    <li>für unseren Server gevotet?</li>
    <li>Nein, hast du nicht?<br /><br />
    Na dann aber schnell bevor es zu spät ist!</strong></li>
    <li class="grey"><a href="#" class="button-serverlist">Vote jetzt!</a></li>
  </ul>
</div>


<div class="columns-serverlist">
  <ul class="listing">
    <li class="header">Teamspeak</li>
<li><strong>Server IP:</strong> 89.163.145.211</li>
<li><strong>Server Port:</strong> 9987</li>
<li>Schnell verbinden?...<br /><br />
Ohne viel klicken?...</li>
    <li class="grey"><a href="#" class="button-serverlist">VERBINDEN</a></li>
  </ul>
</div>

Alles anzeigen

Und die Box 4, die Probleme macht - Aktuell ist Text drinne - normalerweise wollte ich da Gametracker Banner rein packen:

HTML

<div class="gridLayout row">
					<div class="gridBox col-md-6">
						<div class="gridBboxContent gridBboxIcon gridBoxContentJustify">
							<div class="gridBboxContentHeroIcon">
								<span class="icon icon96 fa-question"></span>
							</div>
							<p>We have seen some unacceptable instances where international journalists have been kicked out We have seen some unacceptable instances where international journalists have been kicked out We have seen some unacceptable instances where international journalists have been kicked out</p>
						</div>
					</div>
					<div class="gridBox col-md-6">
						<div class="gridBboxContent gridBboxIcon gridBoxContentJustify">
							<div class="gridBboxContentHeroIcon">
								<span class="icon icon96 fa-meh-o"></span>
							</div>
							<p>We have seen some unacceptable instances where international journalists have been kicked out We have seen some unacceptable instances where international journalists have been kicked out We have seen some unacceptable instances where international journalists have been kicked out</p>
						</div>
					</div>
				</div>

Alles anzeigen

Zu sehen auf: http://warhawksexile.de

Jemand ne Idee was es sein kann? Wenn ich nicht ganz falsch liege, sollte Box 4 eigentlich eine zwei Spalten Reihe sein, mit gleich breiten Abmessungen unter der Box 3 - was dabei raus kommt sieht man ja. Finde aktuell aber auch keine Fehler in den Codes.

User1 · 13. Februar 2017

Ich glaube ich habe den Fehler gefunden - wenn ich in Chrome über "Elements" "display: flex" auf "display: inline-flex" für "row" setze, sieht es so aus wie es müsste. Aber ich glaube das wird über das Plugin gesetzt - oder?

Habe es jetzt erstmal gelöst, indem ich auf meiner Startseite unter Inhalt als HTML folgendes eingefügt habe:

Probleme mit meiner Feature List

cls-design

Informationen

Demoinstallationen

Hilfe