Beiträge von Simuletsplay

Simuletsplay

Habe das "Problem" gefunden.

Einfach row auf p-0 und m-0 setzen!

Simuletsplay

Hallo Zusammen!

Ich habe folgendes Problem:

Ich möchte auf einer Startseite ein Bild platzieren in dem ein Bild gezeigt wird.

Doch immer wenn ich .container-fluid nutze, dann wird auch unten eine Scrollbar generiert.

Anhand des Menüs (NavBar) kann ich sehen, dass das ein gewaltiger Unterschied ist.

Was kann ich dagegen tun?

Habe bereits versucht Padding auf 0 vom Container zu setzen.

→ Hat aber nichts gebracht

Ich nutze folgenden Quelltext:

Code

<div class="row">
    <div class="container-fluid p-0">
        <div class="card bg-dark text-white border-0 rounded-0">
          <img class="card-img mw-100" src="/img/bg/card/landing.jpg" alt="Card image">
          <div class="card-img-overlay">
            <h5 class="card-title">Titel</h5>
            <p class="card-text">Untettitel</p>
          </div>
        </div>
    </div>
</div>

Alles anzeigen

Das Bild hat die größe von 1972 x 540

→ Das ist die doppelte Größe von älteren Bootstrap-Größen!

Grüße

Ben

Simuletsplay

Ich habe jetzt etwas probiert, aber es klappt nicht

HTML

<!DOCTYPE html><html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Start | gTimes.de</title>

    <link rel="stylesheet" href="styles/main.css">

</head>
<body>




 <div id="menü-div">
      <nav role="navigation">
  <ul>
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a>
      <ul class="dropdown">
        <li><a href="#">Sub-1</a></li>
        <li><a href="#">Sub-2</a></li>
        <li><a href="#">Sub-3</a></li>
      </ul>
    </li>
    <li><a href="#">Three</a></li>
  </ul>
</nav>
   </div>








</body>
</html>

Alles anzeigen

Code

/*<----======== FONTS ========---->*/@import url('https://fonts.googleapis.com/css?family=Anton');
@import url('https://fonts.googleapis.com/css?family=Chango');
@import url('https://fonts.googleapis.com/css?family=Bangers');
@import url('https://fonts.googleapis.com/css?family=Pontano+Sans');
@import url('https://fonts.googleapis.com/css?family=Luckiest+Guy');
/*<----======== FONTS ========---->*/




body {
    margin: 0;
    padding: 0;
    font-family: verdana;
}
nav{
     width: 100%;
     margin: 0 auto;
     background: #4C4B4B;
     color: #397FDC;
}
nav ul a {
    display: block;
}
nav ul {
    width: 0 auto;
    margin: 0 auto;
    padding: 0 auto;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
nav ul li {
    background: #4C4B4B;
    display: block;
}
nav ul li :hover {
    background: #30A8AF;
}
nav ul li a {
    color: #fff;
    text-decoration: none;
    display:block;
    padding: 15px;
    font-size: 19px;
}








nav h2{
    display: block;
    background: #4C4B4B;
    color: #fff;
    text-decoration: none;
    padding: 15px;
    font-size: 18px;
    margin: 0;
    float: left;

}
#menü-div {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}




















  




ul li ul {
	background: orange;
	visibility: hidden;
    opacity: 0;
    min-width: 5rem;
	position: absolute;
    transition: all 0.5s ease;
    margin-top: 1rem;
    left: 0;
    display: none;
}




ul li:hover > ul,
ul li ul:hover {
    visibility: visible;
    opacity: 1;
    display: block;
    align-items: center;
    justify-content: center;
}




ul li ul li {
	clear: both;
    width: 100%;
}

Alles anzeigen

Simuletsplay

Ne eher nicht... eigentlich sowas, dass man den bereich öffnen und schließen kann

Aber das geht bestimmt nur mit JS oder?
Hat jemand ein template?

Simuletsplay

Hallo Zusammen!

Ich wollte fragen, wie ich das machen kann, wenn ich mein Menü (siehe unten) habe und das zu Dropdown machen möchte....

wie kann ich das in CSS umsetzen?

Code

<div id="mySidenav" class="sidenav"> 
<a href="#"><i class="fa fa-home"></i> Homepage</a> 
<hr>
<p>Allgemeines</p>
<a href="/index.php" id="aktuell"><i class="fa fa-tachometer"></i> Dashboard</a>
<a href="/datenbank/index.php"><i class="fa fa-database"></i> Datenbank</a>
<a href="/server/index.php"><i class="fa fa-server"></i> Server</a>
<a href="/dokumente"><i class="fa fa-download"></i> Downloads</a>
<a href="/msg/"><i class="fa fa-envelope-o"></i> Nachrichten</a>
<a href="/user.php"><i class="fa fa-user"></i> Benutzerkonto</a>
<a href="/termine.php"><i class="fa fa-sliders"></i> Termine</a>
</div>

Alles anzeigen

Code

.sidenav {    height: 100%;
    width: 250px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #1b222c;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}




.sidenav a,p {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 20px;
    color: #808893;
    display: block;
    transition: 0.3s;
    border-left: 3px solid #1b222c;
}




.sidenav a:hover {
    color: #5cbc7c;
    border-left: 3px solid #5cbc7c;
}

Alles anzeigen

Simuletsplay

https://simuundquex.de/footer

Simuletsplay

Was meinst du mit

Zitat

Mangels eines Onlinelinks

?

Simuletsplay

Hat jemand eine Idee?

Simuletsplay

Ja sorry für den Schreibfehler...
Ich hatte öfters mal Probleme mit dem Link+Button und habe dann nur den Button genommen....

Aber so hat man ja eine Vielfalt...

Simuletsplay

Probier es auch mal so:

HTML

<button oneclick="location.href='https://der-link.de'">Button</Button>

Simuletsplay

Moin Leute!
Ich habe bei mir das problem, dass wenn ich mein Section auf links orientiere, der hintergrund des unterliegenden Div ignoriert wird.
Die Section wird ebenfalls automatisch unter diesen Div geschoben!

Code

<div class="footer"><section class="sec-left">
	<ul>
		<li><h1>Folge uns auf</h1></li>
		<li><a href="https://twitter.com/simuundquex"><i class="fa fa-twitter"></i></a></li>
		<li><a href="https://instagram.com/simuundquexteam"><i class="fa fa-instagram"></i></a></li>
		<li><a href=""></a></li>
	</ul>
</section>




<section class="sec-left">
	<ul>
		<li><h1>Folge uns auf</h1></li>
		<li><a href="https://twitter.com/simuundquex"><i class="fa fa-twitter"></i></a></li>
		<li><a href="https://instagram.com/simuundquexteam"><i class="fa fa-instagram"></i></a></li>
		<li><a href=""></a></li>
	</ul>
</section>
<p>Copyright © 2019</p>
</div>

Alles anzeigen

Code

@import url('https://fonts.googleapis.com/css?family=Roboto');






.footer{
    width: 100%;
    height: auto;
    background-color: #2e2e2e;
    color: #fff;
    margin: 0;
    padding: 0;
}
.footer ul{
    list-style: none;
    text-align: center;
}
.footer ul li{
    padding-top: 5px;
    color: #fff;
    font-family: 'Roboto', sans-serif;
}
.footer ul li a{
    text-decoration: none;
    color: #fff
}
.footer ul li a:hover{
    text-decoration: underline;
}
.footer h1{
    margin-bottom: 0;
}
.sec-left{
    margin-left: 20px;
    width: auto;
    color: #fff;
}
.fa-twitter:hover{
    color: #00acee
}
.fa-instagram:hover{
    color: #d6249f;
    color: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
}

Alles anzeigen

Kann mir jemand helfen?

Simuletsplay

Dankeschön!

Hat super funktioniert!
[HR][/HR]Simuletsplay

Thema ist hiermit beendet!

Simuletsplay

https://codepen.io/anon/pen/JeLQda

Simuletsplay

Noch liegt die Seite bei mir lokal!

Simuletsplay

basti1012 Dein code bei codepen funktioniert bei mir nicht!

Es ist genauso wie vorher!

Simuletsplay

Wenn ich die <li> schließe, bleibt zwischen den <li> immer ein wenig Platz (schätze 1 bis 2 px)
[HR][/HR]
Nein... Bei hover soll der Text weiß bleiben

Simuletsplay

Hallo Zusammen!

Ich habe ein kleines CSS Problem:

Code

nav{     width: 100%;
     margin: 0;
     border-bottom: 3px solid #202833;
     background: #202833;
     color: #808893;
}
nav ul a {
    display: block;
}
nav ul {
    width: 0 auto;
    margin: 0;
    padding: 0 auto;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
	float: right;
	margin-right: 5px;
}
nav ul li {
    background: #202833;
    display: inline-block;
	font-family: arial;
	text-decoration: bold;
}
nav ul li :hover {
   color: #5cbc7c;
}
nav ul li a {
    color: #808893;
    text-decoration: none;
    display:block;
    padding: 15px;
}
nav ul li ul {
  overflow: hidden;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  transition: 300ms all;
  max-height: 0;
}
nav ul li ul li {
  border-bottom: 1px solid #8c1e31;
}
nav ul li:hover > ul {
  max-height: 700px;
}
#logout{
	background-color: #e05447;
	color: white;
}
#logout a{
	color: white;
}
#logout:hover{
	background-color: #9c3c33;
	color: white;
}
#logout:hover > a{
	color: white;
}

Alles anzeigen

HTML

<nav>         <ul>		    <li><a href="news.html"><i class="fa fa-envelope-open-o"><b></i> News</b></a>            <li id="logout"><a href="index.html"><i class="fa fa-sign-out"></i><b> Log-Out</b></a>				 </ul>      </nav>

Doch Wenn ich über Logout fahre (mit der Maus), wird der Hintergrund dunkelrot, aber der Text wird grün, allerdings auch nur, wenn ich mit der Maus über dem Text bin! Komisch ist dabei, dass wenn ich über den Text fahre, der grün wird, allerdings das "Icon" dazu nicht.... Aber fahre ich über das "Icon", passiert es genau andersrum: Der Text bleibt weiß und das "Icon" färbt sich...

Wäre nett, wenn mir jemand sagen kann, wo der Fehler liegt!

_____________________
MfG

Simuletsplay

PS: nicht wundern - zum schluss im CSS-Teil habe ich ein wenig herumprobiert!

Simuletsplay

Wobei?

Simuletsplay

Hallo Zusammen!

Ich habe eine kleine Frage:
Ich habe auf meinen Seiten einen Footer. Aber nicht auf jeder Seite ist der ganz unten, also es ist dadrunter immer noch platz

HTML

<div class="footer">        <div id="erklärung"><p><a href="index.hmtml">Start</a> | <a href="news.html">News</a> | <a href="clans.html">Clans</a> | <a href="games.html">Games</a> | <a href="bewerben.html">Bewerben</a> | <a href="server.html">Server</a> | <a href="team.html">Team</a> | <a href="impressum.html">Impressum</a> | <a href="kontakt.html">Kontakt</a> | <a href="datenschutz.html">Datenschutz</a></p></div>                <div id="erklärung"><p>© SimuUndQuex2018</p></div>    </div>

Code

.footer{    background-color: #2e3842;
    display: flex;
    justify-content: center;
    margin-top: 25px;
    height: auto;
    color: wite;
    display:flex;
    flex-direction:column;
    float: center;
    margin: 150 0 0 0 auto;
    border-top: 3px solid #21b2a6;
}
.footer #überschrift{
    float: center;
    margin: 0 auto;
}
.footer #erklärung{
    float: center;
    margin: 0 auto;
    text-decoration: none;
}
.footer #erklärung-2{
    float: center;
    margin: 0 auto;
    width: 1024px;
}
.footer #erklärung a{
    text-decoration: none;
    color: white;
}

Alles anzeigen

Aber wie kann ich es machen, dass der immer am Ende der Seite ist, also vom Bildschirm, aber nur wenn der Seiteninhalt zu wenig ist?

___________________________________
MfG

Simuletsplay

Simuletsplay

So... ich denke mal das Grundgerüst steht... Also die Verbindung

PHP

<form action="" method="post"><input type="text" name="test" placeholder="Text"><input type="submit" name="submit" value="Absenden!"></form><?php$mysqli = new mysqli("localhost", "mysqli", "[Ausgeblendet!]", "mysqli");if ($mysqli->connect_errno) {    die("Verbindung fehlgeschlagen: " . $mysqli->connect_error);}?>

Mit welcher Aktion muss ich weitergehen?

ich habe die Tabelle so erstellt:

________________
MfG

Simuletsplay

Beiträge von Simuletsplay

Bootstrap: Width ist größer als 100%

Bootstrap: Width ist größer als 100%

CSS Dropdown

CSS Dropdown

CSS Dropdown

CSS Elemente nebeneinander

CSS Elemente nebeneinander

CSS Elemente nebeneinander

Butoon verlinken, warum geht das nicht?

Butoon verlinken, warum geht das nicht?

CSS Elemente nebeneinander

:hover makiert Text anders

:hover makiert Text anders

:hover makiert Text anders

:hover makiert Text anders

:hover makiert Text anders

:hover makiert Text anders

PHP - Tabellenauswertung

Footer am Seitenende erstellen

PHP und MySQL Datenabfrage