Beiträge von CuzImCloud

CuzImCloud · 24. März 2018

basti1012

Ich nutze Bootstrap Grid System.

Da mich Media Queries echt zu hart nerven.

CuzImCloud · 23. März 2018

Hat keiner eine Idee?

...

CuzImCloud · 23. März 2018

Guten Tag,

derzeit nutze ich Bootstrap zum erstellen meiner Seite. Ich habe von Bootstrap die Klasse "col-md-3" verwendet um 4 Modals von Bootstrap in 1 Reihe zu haben.

Das sieht derzeit so aus:

[Blockierte Grafik: https://abload.de/img/col.msd-38opfk.png]

Mir passt das soweit auch ganz gut so.

Jedoch weiß ich nicht wie ich die Abstände zwischen den Dingern verringern kann.

Derzeit habe ich 4 Modals welche so aussehen:

Code

<div class="col-md-3">
                    
        <button type="button" class="btn btn-info btn-lg" style="outline: 0" data-toggle="modal" data-target="#myModal3">Designer</button>

        <!-- Modal -->
        <div id="myModal3" class="modal fade" role="dialog">
          <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title-dzn">Voraussetzungen für den<span> Designer:</span> Rang:</h4>
              </div>
              <div class="modal-body" style ="text-align: left">
                <p class="standard">Standard Voraussetzungen:</p>
                <hr>
                <p>➥ Mindestalter: 14 Jahre</p>
                <p>➥ Du musst TeamSpeak3 & Discord besitzen. [PFLICHT]</p>
                <p>➥ Ein Mikrofon mit guter Qualität</p>
                <p>➥ Aktivität auf dem Netzwerk und TeamSpeak3 Server</p>
                <p>➥ Du musst Geistliche Reife besitzen.</p>
                <p>➥ Du musst gut mit dem Team zusammenarbeiten können.</p>
                <hr>
                <br>
                <p class="rangintern">Rang Spezifische Voraussetzungen:</p>
                <hr>
                <p>➥ Vorkenntnisse im Designen besitzen.</p>
                <p>➥ Aktivität beim Designen auf dem Server.</p>
                <p>➥ Du musst eigene Ideen und viel Kreativität besitzen.</p>
                <hr>
                <br>
                <p class="geweckt">Wir haben deine Interesse geweckt? Dann Bewirb dich jetzt bei uns!<p>
              </div>
              <div class="modal-footer">
                <center><button type="button" class="btn btn-default" data-dismiss="modal">Verlassen</button></center>
              </div>
            </div>

          </div>
        </div>
      </div>

Alles anzeigen

das habe ich 4x untereinander im Code.

Jtz frage ich hier mal ob jmd weiß wie ich die Abstände zwischen den Modals verringern kann. So das die Modals trotzdem Mittig zentriert sind.

Hoffe mir kann jmd helfen

Gruß!

CuzImCloud · 22. März 2018

Habe es leider noch nicht verstanden wenn ich ehrlich bin.

Verstehe das nicht mit den Größen..

CuzImCloud · 22. März 2018

Wie bereits gesagt verstehe ich das ganze nicht.

CuzImCloud · 22. März 2018

Ich hatte mir @media durchgelesen aber verstehe das nicht.

CuzImCloud · 22. März 2018

basti1012

Der Button hat sich eben verschoben, habe den jtz eine neue Höhe gegeben. Und jtz sieht es gut aus.

m.scatello

Wie soll ich den bitte die Größen für andere Bildschirme wählen? Ich weiß ja nicht wie das aussieht dann.

CuzImCloud · 22. März 2018

Und wie kann ich die Seite für jede Bildschrimgröße anpassen? Ich meine ich kenne nicht alle größen und die Auswirkung auch nicht.

CuzImCloud · 22. März 2018

kann man den Button tiefer setzen? In dem @Media bereich?

CuzImCloud · 21. März 2018

Ja ich habe es ja bereits mit @media versucht und soweit auch hinbekommen. Jedoch wird 1 Button leicht verschoben. Wie kann ich dies Ändern?

https://abload.de/img/buttonbou7v.png

CuzImCloud · 21. März 2018

Hey

Ich habe da mal eine Frage zu meiner Seite.

Undzwar benutze ich 2 Bildschirme. 1 Großen 1 Kleinen. Auf dem Großen sieht die Seite Super aus auf der anderen naja etwas doof halt:

[Blockierte Grafik: https://abload.de/img/komischr0u0g.png]

Wegen den Bildern muss ich die Seite nach Links ziehen und dann entsteht das...

Kann man das irgendwie fixen? Das sich das automatisch auf jeden Bildschirm anpasst?

Hoffe mir kann jemand Helfen.

Gruß!

CuzImCloud · 17. März 2018

basti1012

Ja genau, jedoch klappt das iwie beim neuen Teil nicht.

CuzImCloud · 17. März 2018

Damit ich es nicht später schreiben muss:

Hier ist meine Ganze Klasse:

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="utf-8">

<!-- Hier sind die Webseiten Daten -->
      <title>Home | *****.de</title>
      <link rel="shortcut icon" type="image/x-icon" href="img/start/favicon.png">
      <meta name="author" content="CuzImCloud">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">

      <link href="css/home.css" rel="stylesheet">
    <link href="css/geheim.css" rel="stylesheet">

<!-- Hier sind die CSS Datein -->
      <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
      <link href="css/animate.css" rel="stylesheet">

<!-- Hier sind die verschiedenen Schriftarten -->
      <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
      <link href="https://fonts.googleapis.com/css?family=Rammetto+One" rel="stylesheet">
      <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Serif" rel="stylesheet">

    </head>


    <body>

<section id="banner">

  <h2 class="animated zoomIn">Willkommen auf *****!</h2><br />
  <div class="animated zoomIn">
  <p2>Es sind derzeit <span style="color: red;" data-playercounter-ip="*****">0</span> Spieler auf unserem Server!</p2></div>

  <br /><br />


    <div class="ts3"><a href="ts3server://*****"><p style="font-family: Oswald; font-size: 25px;">*****</p></a></div>
    <div class="mc"><p class="animated-text" style="font-family: Oswald; font-size: 25px;">*****</p></div>
</section>
<br /><br /><br /><br /><br />

<div class="navigation">
<p>Navigation</p>
</div>
<hr style="width: 30%;"></hr><br />

<div class="balken">
<br />
<div id="content">




<div class="forum">
<img src="img/forum.png" style="margin-right: 110px;"  />
</div>
<p class="geheim">GleichZeitig_YT</p>

<div class="team">
<img src="img/bild2.png" style="margin-right: 110px;" />
</div>

<div class="bewerben">
<img src="img/bewerben.png" style="margin-right: 110px;" />
</div>

<div class="teamspeak">
<img src="img/ts3.png" style="margin-right: 110px;" />
</div>

<div class="discord">
<img src="img/discord.png" />
</div>
</div>
<br />
</div>
</body>
</html>

Alles anzeigen

Ich habe verschiedene Klassen wie "teamspeak, discord etc"

Da dies nur Bilder sind möchte ich gerne das man sobald man auf eines der Bilder Hovert, ein Text erscheint Unter der Div Klasse "Balken" spricht wenn ich auf das Logo "Forum" gehe soll UNTER dem Balken mittig zentiert "Server Forum" stehen. Bei Teamspeak halt "Server TeamSpeak" etc.

CuzImCloud · 17. März 2018

Wäre nett wenn du meine Datei nehmen kannst und nicht die aus einem anderen Thema!

Code

<div class="navigation">
<p>Navigation</p>
</div>
<hr style="width: 30%;"></hr><br />

<div class="balken">
<br />
<div id="content">


<div class="test">
<img src="img/forum.png" alt="" border="0"  style="margin-right: 110px;" > </div>

</div>
<br />
</div>

<p class="geheim">GleichZeitig_YT</p>

Alles anzeigen

So funktioniert das leider nicht.

Die "p" Klasse muss unten sein.

CuzImCloud · 17. März 2018

Ich habs sogar in meinem Code gezeigt ... das das sein soll sobald ich über Bild Hover.

https://jsfiddle.net/6qvh7oz4/3/

So sollte es sein, sobald ich über das Bild Hover soll der Text erscheinen, klappt aber nicht!

Beim Link funkt es nicht, aber soweit ich weiß ist das der Code dafür

CuzImCloud · 17. März 2018

Bei mir funktioniert das nicht.

Ich teste es bereits sehr lange.

Und Tipp, ist es sinvoll fgeheim auf 0 zu setzen und sobald ich über fgeheim, den ich derzeit nicht sehe zu Hovern?

Möchte gerne das ich sobald ich auf das Bild Hover fgheim angezeigt bekomme.

Und das funktioniert bei mir nicht!

Gruß!

CuzImCloud · 17. März 2018

1. Doch das geht auch. (Hover Text)

Hatte das schonmal nur funkt es jetzt grad nicht wie ich es möchte.

2. Mit Opacity funkt es auch nicht.

CuzImCloud · 17. März 2018

Guten Tag, habe da eine Frage. Undzwar hatte ich ein mal ein ähnliches Thema dazu.

Es geht darum das sobald ich über etwas Hovere, ein Text angezeigt werden soll.

Dies geht soweit auch, aber da ich den Text gern woanders habe möchte habe ich es so gemacht:

Code

<div class="navigation">
<p>Navigation</p>
</div>
<hr style="width: 30%;"></hr><br />

<div class="balken">
<br />
<div id="content">


<div class="forum">
<img src="img/forum.png" style="margin-right: 110px;"  />
</div>
</div>
<br />
</div>

<p class="fgeheim">TEST</p>

Alles anzeigen

Meine CSS sieht zudem so aus:

Code

.fgeheim {
  display: none;
  color: white;
}
.forum img:hover~ .fgeheim {
  display: block;
}

Kann mir jemand erklären wieso das nicht klappt?

Gruß!

CuzImCloud · 15. März 2018

djheke

Ja hab die Weiterleitung gerade nochmal anders gemacht. Ich werde die eben nochmal Umleiten und dann kannst du es nochmal versuchen.

basti1012

Schonklar das das in den Head kommt. Habe ich ja auch gemacht, sonst würde das bei der ZahlenIP ja nicht angezeigt werden.

Aber damit mir schnell geholfen wird:

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="utf-8">

<!-- Hier sind die Webseiten Daten -->
      <title>Home | GleichZeitig.eu</title>
      <link rel="shortcut icon" type="image/x-icon" href="img/start/favicon.png">
      <meta name="description" content="GleichZeitig.eu">
      <meta name="author" content="CuzImCloud">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Hier sind die CSS Datein -->
      <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
      <link href="css/animate.css" rel="stylesheet">
      <link href="css/start/index.css" rel="stylesheet">
      <link href="css/indexnav.css" rel="stylesheet">

<!-- Hier sind die verschiedenen Schriftarten -->
      <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
      <link href="https://fonts.googleapis.com/css?family=Rammetto+One" rel="stylesheet">


    </head>

Alles anzeigen

CuzImCloud · 15. März 2018

Also. Wenn ich mich im Browser über die Zahlen IP Verbinde, sieht das so aus:

[Blockierte Grafik: https://abload.de/img/funktg5rja.png]

Man sieht das Oben ein Favicon ist und dort steht "TS3View | GleichZeitig.eu" und man sieht die Zahlen IP!

Wenn ich mich nun mit der Domain Verbinde, sieht das so aus:

[Blockierte Grafik: https://abload.de/img/funktnetmfpwp.png]

Man sieht gut das Oben KEIN Favicon ist und dort nur die Domain steht und unten ebenfalls die Domain womit ich mich Verbinde.

Ich weiß nicht woran das liegt.

Hoffe ich habe es jetzt etwas besser erklärt!

Gruß!

Beiträge von CuzImCloud

Bootstrap col-md-3

Bootstrap col-md-3

Bootstrap col-md-3

Automatisch Anpassen

Automatisch Anpassen

Automatisch Anpassen

Automatisch Anpassen

Automatisch Anpassen

Automatisch Anpassen

Automatisch Anpassen

Automatisch Anpassen

Hover Text

Hover Text

Hover Text

Hover Text

Hover Text

Hover Text

Hover Text

Titel und Favicon

Titel und Favicon