Beiträge von Germanikus

Germanikus · 16. Februar 2020

Oh hab ich vergessen

Css nutze ich die 4.4.1 bootstrap.min.css

PHP

<div class="container">
    <div class="card">
        <div class="card-header">
            <div class="navi-panael">
                <div class="btn-group btn-block pull-center" style="text-align:center">
                    <a class="btn btn-large btn-primary text-white dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Bearbeiten</a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                        <a class="dropdown-item" href="">Bearbeiten</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-header">
            <div class="navi-panael">
                <div class="btn-group btn-block pull-center" style="text-align:center">
                    <a class="btn btn-large btn-info text-white btn-sm" data-toggle="tab" href="#lager">Alles</a>
<div class="">
                    <a class="btn btn-large btn-info text-white dropdown-toggle btn-sm" type="button" id="starter_deck" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="badge badge-danger"></span>&nbsp;Starter Deck</a>
                    <div class="dropdown-menu" aria-labelledby="starter_deck">
                        <a class="dropdown-item" href="">Bearbeiten</a>
                    </div>
</div>
<div class="">
                    <a class="btn btn-large btn-info text-white dropdown-toggle btn-sm" type="button" id="strucktur_deck" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="badge badge-danger"></span>&nbsp;Starter Deck</a>
                    <div class="dropdown-menu" aria-labelledby="strucktur_deck">
                        <a class="dropdown-item" href="">Bearbeiten</a>
                    </div>
</div>
                </div>
            </div>
        </div>
        <div class="card-body">
            <div class="tab-content">
                <div id="card<?php echo $edition->tb_edition_stats_id; ?>" class="container tab-pane fade"><br>
                    <table class="table table-borderless table-sm table-striped">
                        <thead class="thead-light">
                            <tr align="center">
                                <th width="100" class=""><?php echo strtoupper("Edition"); ?></th>
                                <th width="80" class=""><?php echo strtoupper("Qualität"); ?></th>
                                <th width="80" class=""><?php echo strtoupper("Seltenheit"); ?></th>
                                <th width="60" class=""><?php echo strtoupper("Auflage"); ?></th>
                                <th width="80" class=""><?php echo strtoupper("Eintrag"); ?></th>
                                <th width="40" class=""><a data-toggle="tooltip" title="Verfügbar"><?php echo strtoupper("Verf."); ?></a></th>
                                <th width="" class=""><?php echo strtoupper("Aktion"); ?></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr align="center" id="card">
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td align="left">
                                    <div class="btn-group btn-group-sm btn-block input-group mb-3 input-group-sm">
                                        <div class="input-group-append">
                                            <button class="btn btn-danger" type="submit" name="add_minus"><i class="fa fa-minus"></i></button>
                                        </div>
                                        <input type="number" class="form-control" name="add_karte_menge" min="1" max="100" value="1">
                                        <div class="input-group-append">
                                            <button class="btn btn-success" type="submit" name="add_plus"><i class="fa fa-plus"></i></button>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

Alles anzeigen

Germanikus · 16. Februar 2020

Hallo zusammen,

ich möchte folgendes in dem JS Tab als CSS ändern

die beiden Navigatoren sollen bündig am rand anschließen
auch soll die Tabelle unten an dem rand anbinden
Ausserdem soll container wo der JS liegt etwas breiter gestalltet werden

Ich hoffe ihr könnt mir da helfen

Germanikus · 9. Mai 2019

Alles klar

Danke

Germanikus · 8. Mai 2019

Ich hab es im Bild makiert
//
//
ja und auch da wo die Menüs (Event, Rechnung usw.) steht

Germanikus · 8. Mai 2019

header.php

PHP

<link href="<?php echo base_url(); ?>assets/css/ver4.x/bootstrap.temp.css" rel="stylesheet">
<link href="<?php echo base_url(); ?>assets/css/ver4.x/bootstrap.min.css" rel="stylesheet">
<script src="<?php echo base_url() ?>assets/js/ver4.x/bootstrap.min.js"></script>
<script src="<?php echo base_url() ?>assets/js/ver4.x/jquery.min.js"></script>
<style>
.show-on-hover:hover > ul.dropdown-menu {
    display: block;    
}
</style>
<div class="small-top">
    <div class="container">
        <div class="row">
            <div class="col-lg-4 date-sec">
                <div><?php echo date('Y.m.d H:i:s'); ?></div>
            </div>
            <div class="col-lg-3 offset-lg-5">
                <div class="social-icon">
                    <a target="_blank" href="<?php echo base_url(); ?>users/profil/<?php echo $this->session->userdata('username'); ?>" class="fa fa-user"> <?php echo $this->session->userdata('username'); ?></a>
                </div>
            </div>
            <!-- <div class="col-lg-3 offset-lg-5">
                <div class="social-icon">
                    <a target="_blank" href="#" class=" fa fa-facebook"></a>
                    <a target="_blank" href="#" class=" fa fa-twitter"></a>
                    <a target="_blank" href="#" class=" fa fa-google-plus"></a>
                    <a target="_blank" href="#" class=" fa fa-linkedin"></a>
                    <a target="_blank" href="#" class=" fa fa-youtube"></a>
                    <a target="_blank" href="#" class=" fa fa-vimeo-square"></a>
                </div>
            </div> -->
        </div>
    </div>
</div>
<div class="top-head left">
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-lg-4">
                <h1>Yugi-Mania<!-- <small>Sammelkarten</small> --></h1>
            </div>
            <div class="col-md-6 col-lg-3 ml-auto admin-bar hidden-sm-down">
                <nav class="nav nav-inline">
                    <div class="btn-group show-on-hover">
                        <a href="#" class="nav-link"><span class="ping"></span><i class="fa fa-shopping-cart"></i> <span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <!-- <li><a href="#">Something else here</a></li> -->
                                <!-- <li class="divider"></li> -->
                                <li>Separated link</li>
                            </ul>
                    </div>
                    <div class="btn-group show-on-hover">
                        <a href="#" class="nav-link"><span class="ping"></span><i class="fa fa-exchange"></i> <span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <!-- <li><a href="#">Something else here</a></li> -->
                                <!-- <li class="divider"></li> -->
                                <li>Separated link</li>
                            </ul>
                    </div>
                    <div class="btn-group show-on-hover">
                        <a href="#" class="nav-link"><span class="ping"></span><i class="fa fa-bell-o"></i> <span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <!-- <li><a href="#">Something else here</a></li> -->
                                <!-- <li class="divider"></li> -->
                                <li>Separated link</li>
                            </ul>
                    </div>
                </nav>
            </div>
        </div>
    </div>
</div>
<section class="top-nav">
    <nav class="navbar navbar-expand-lg py-0">
        <div class="container">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="exCollapsingNavbar2">
                <ul class="nav navbar-nav ">
                    <li class="nav-item active"> <a class="nav-link" href="<?php echo base_url(); ?>event/index">Event <span class="sr-only">(current)</span></a> </li>
                    <li class="nav-item"> <a class="nav-link" href="<?php echo base_url(); ?>rechnung/index">Rechnung</a> </li>
                    <li class="nav-item"> <a class="nav-link" href="<?php echo base_url(); ?>protokoll/index">Protokollliste</a> </li>
                    <li class="nav-item"> <a class="nav-link" href="<?php echo base_url(); ?>karte/index">Kartenliste</a> </li>
                    <li class="nav-item"> <a class="nav-link" href="<?php echo base_url(); ?>edition/index">Editionliste</a> </li>
                    <li class="nav-item"> <a class="nav-link" href="<?php echo base_url(); ?>pages/produckt_list">Producktliste</a> </li>
                    <li class="nav-item"> <a class="nav-link" href="<?php echo base_url(); ?>trade/index">Trade</a> </li>
                    <li class="nav-item"> <a class="nav-link" href="<?php echo base_url(); ?>warenkorb/index">Warenkorb</a> </li>
                    <li class="nav-item"> <a class="nav-link" href="<?php echo base_url(); ?>umsatz/index">Umsatz</a> </li>
                </ul>
                <form class="ml-auto">
                    <div class="search">
                        <input type="text" class="form-control" placeholder="suchen" />
                        <button type="submit" class="btn btn-search"><i class="fa fa-search"></i></button>
                    </div>
                </form>
            </div>
        </div>
    </nav>
</section>
<section class="section-01">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-md-12">

Alles anzeigen

Germanikus · 8. Mai 2019

Hallo zusammen,

ich habe heute angefangen meine Webseite auf dem neusten Stand zu bringen.

Nun hab ich erst mit dem Designe angefangen und ein gutes gefunden.

Aber leider behersche ich kein CSS wissen und hoffe ihr könnt mir da weiter helfen.

https://screenshots.firefox.com/iVqWKOgXiBe80GmX/127.0.0.1

Im Suchfeld ist so ein grauer kasten der weg muss.
Ich möchte im Hintergrund wo "Yugi-Mania" steht ein Bild einfügen lassen, der sich wiederholt.
Die Icons rechts möchte ich größer darstellen, so um das doppelte
Die Gesamte Seite soll sich auf dem Bildschirm erstrecken

bootstrap.temp.css

CSS

@import url("//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css");


body {
  color: #5a5a5a;
  font-family: 'Open Sans',Arial,sans-serif;
  font-size: 15px;
}
h1,h2,h3,h4,h5{
    font-family: 'Montserrat', sans-serif;
}
a, a:hover, .btn{outline:none!important;}
.btn-search{background: #FD3A13; border-color: #FD3A13; color: #fff; padding: 8px 10px}
.btn-search:hover{background: #ca1b1b; border-color: #ca1b1b}
section{padding: 30px 0; float: left; width: 100%}
.card{float: left; width:100%}
.navbar {border: medium none; float: left; margin-bottom: 0px; width: 100%;  border-radius: 0}
.title-large {font-size: 20px; margin: 10px 0 5px; line-height: 27px; color: #141517;}
.title-small { color: #141517; font-size: 16px; font-weight: 400; line-height: 23px; margin: 6px 0 0;}
.title-x-small {font-size: 18px; margin: 0px;}
.title-large a, .title-small a, .title-x-small a{color: inherit}
.banner-sec{float: left; width: 100%; background: #EBEBEB}
.card-block{padding:0 10px 10px;}
.card-text{margin: 0}
.text-time{color: #ff0000; font-weight: 600;}
.banner-sec .card-img-overlay{padding: 0; top: 3px; left: 7px; height: 20%}

header{float: left; width:100%}
.small-top{ border-bottom: 1px solid #2b2b2b;float: left; width: 100%; background: #000}
.small-top .social-icon{float: right;}
.small-top .social-icon a {border-left: 1px solid #2b2b2b; color: #ca1b1b; float: left; padding: 6px 13px;}
.small-top .social-icon a:last-child {border-right: 1px solid #2b2b2b;}
.small-top .social-icon a:hover {color:#FD3A13; text-decoration: none;}
.small-top .date-sec {font-size: 13px; font-weight: 600; float: left; margin-top: 4px; color: #898989}
.top-head{background: #141517; width: 100%; float: left; height: 100px;}
.top-head h1 {color: #fff; font-size: 36px; font-weight: 600; margin: 18px 0 0;}
.top-head small{float: left; width: 100%; font-size: 14px; color: #c0c0c0; margin-top: 5px; margin-left: 5px;}
.top-head .admin-bar {text-align: right; margin-top: 22px;}
.top-head .admin-bar a {color: #fff; line-height: 49px; position: relative; padding:0 7px;}
.top-head .admin-bar a:hover{color: #ff0000}
.top-head .admin-bar a i{margin-right: 6px;}
.top-head .admin-bar .ping {background: #ff0000; border: 3px solid #141517; border-radius: 50%; height: 14px; position: absolute; right: 3px;    top: 13px; width: 14px; z-index: 1;}
.top-head .admin-bar img {float: right; height: 50px; width: 50px; margin-left: 18px;}
.top-nav{background: #fff; padding: 0; border-bottom: 1px solid #dbdbdb}
.top-nav .nav-link {padding-bottom: 0.7rem; padding-top: 0.7rem;}
.top-nav .navbar-nav .nav-item + .nav-item{margin-left:0}
.top-nav li a{color: #141517; text-transform: uppercase; font-size: 14px; font-weight: 700; padding: 0 10px; border-bottom: 2px solid #fff}
.top-nav li a:hover, .top-nav li a:focus, .top-nav li.active a{color: #141517; border-bottom: 2px solid #FD3A13 }
.top-nav .form-control{border-color: #fff}
.navbar-toggle{background: #fff;}
.navbar-toggle .icon-bar{background:#0A2E61; }
.navbar-brand{display: none;}

.top-slider .carousel-indicators{bottom: 0}
.top-slider .carousel-indicators li{border:1px solid #000;}
.top-slider .carousel-indicators .active{background:#000;}


.side-bar .nav-tabs{border-bottom:none;}
.side-bar .nav-tabs .nav-link {color: #aeaeae; text-transform: uppercase; border: none;}
.side-bar .nav-tabs .nav-link.active, .side-bar .nav-tabs .nav-link:hover{border-bottom:2px solid #ff0000;  text-transform: uppercase; color: #222}
.sidebar-tabing .media{margin-top: 20px}
.sidebar-tabing img{width: 120px;height: 100px;}
.sidebar-tabing .title-small {line-height: 23px; margin-top: 5px; font-size: 18px}

#search {float: right; margin-top: 9px; width: 250px;}
.search {padding: 5px 0; width: 230px; height: 30px; position: relative; left: 10px; float: left; line-height: 22px;}
.search input {background: #d0d0d0; border: medium none; border-radius: 3px 0 0 3px; float: left; height: 36px; line-height: 18px; margin-left: 210px; padding: 0 9px; position: absolute; top: -3px; width: 0; -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out;}
.search:hover input, .search input:focus { width: 200px; margin-left: 0px; background: #d0d0d0;}
.top-nav .btn {position: absolute;right: 0;top: -3px;border-radius:3px;}

.banner-sec{float: left; width:100%;}
.banner-sec .news-block{margin-bottom: 20px}
.banner-sec .news-block:last-child{margin-bottom: 0px}
.banner-sec .news-des {margin-bottom: 5px;}
.banner-sec .title-large{margin: 18px 0 0}
.banner-sec .time{margin-top: 0px; font-size: 13px;}
.banner-sec .carousel-control.left, .banner-sec .carousel-control.right{background: none;}
.banner-sec .card{margin-bottom:20px;}

.section-01{float: left; width: 100%;  border-top: 1px solid #d5d5d5; border-bottom: 1px solid #d5d5d5}
.section-01 .heading-large {border-bottom: 2px solid #222; color: #222; float: left; width: 100%; padding:0 0 6px; margin:0 0 18px; text-align: left;}
.section-01 .heading-large::before, .section-01 .heading-large::after{background: transparent;}
.section-01 .heading-small {border-bottom: 2px solid #222; color: #222; float: left; margin: 7px 0 0; width: 100%; padding-bottom: 10px; font-size: 18px }
.section-01 .title-small {margin-bottom: 5px; font-size:17px }
.section-01 .news-block{border-bottom: 1px dashed #000; padding-bottom: 30px; border: none;}
.section-01 aside > .news-block{border-bottom: 1px dashed #000; padding-bottom: 19px;}
.section-01 aside > .news-block:last-child{border-bottom: none; margin-bottom: 20px}
.section-01 .card{border: none;}
.section-01 .card-block{padding: 10px 0;}
.section-01 .video-sec {float: left; margin-top: 30px; width: 100%;}
.section-01 .video-block {float: left; margin-top: 20px; width: 100%;}

.action-sec{width:100%; float:left; background:#222}
.action-box{float:left; width:100%; text-align:center;}
.action-box h2{color:#fff; font-size:20px;}

Alles anzeigen

Ich hoffe ihr könnt mir da helfen

PS.

Sry musste es unterteilen

Germanikus · 8. Mai 2019

Hallo zusammen,

ich suche eine Möglichkeit meine Homepage mit meinem Handy zu testen.

Die Webseite befindet sich auf mein PC (xampp) und würde dies mit meinem Handy ansehnlicher machen wollen.

Germanikus · 17. Januar 2018

Jaaaa jetzt gehts.

Danke

Ihr seit die besten^^

Germanikus · 17. Januar 2018

Hallo,

ich brauch mal wieder hilfe in richtung CSS^^

Ich habe in einer Tabelle eine class, der sich färben soll und den Text auch gleich mit.

Aber die Links machen da nicht mit.

Keine Ahnung was ich da Falsch mache.

Code

.karte4
    {
        background-color: #FFFF33;
        color: #00000;
        font-weight: bold;
    }
.karte4:link, .karte4:hover, .karte4:active
    {
        color: black;
    }

Germanikus · 26. September 2017

Hallo,

ich möchte eine Input vor und nach dem Feld eine Erweiterung einbauen.

Am Anfang des Inputs soll von mir ein Bild (Wie ein Smilie ) angezeit werden.

Dann halt ein Standart Input Typ Text.

Danach soll ein Button Typ Submit ein gebunden werden.

Ich hoffe ihr könnt mir da helfen.

Danke

Germanikus · 7. Juli 2017

Danke dir.

Germanikus · 7. Juli 2017

Zitat von The-Error

verseh die Frage nicht !?

Ich meine diesen grünen bereich

Wie kann ich die Höhe verkleinern, so das man ein Label größe bekommt.

Germanikus · 6. Juli 2017

Geil

Danke dir

Wie kann ich den zweiten Nav verkleinern?

Germanikus · 6. Juli 2017

Ok und kannst du das umsetzen?

Germanikus · 5. Juli 2017

Hallo,

ich wollte mal fragen, ob jemand diesen Panel basteln kann.

Ich hab das schon ein wenig versucht.

Aber ich habe keine ahnung von CSS

https://jsfiddle.net/Germanikus/jttf551a/

Ich schreib schon mal Danke an den jenigen der das schreibt

Germanikus · 21. August 2016

Hallo,
ich habe da 2 fragen
1. Wie kann ich das so umstellen, das dieser Nav-Tab auf der aufgerufene Seite bleibt, wenn ich auf F5 klicke?
- http://holdirbootstrap.de/javascript/#tabs

2. Wie kann ich Nav-Tab und dem Panel miteinander verschmelzen, so wie hier im Forum unter Profil Bearbeiten.
So das ich einen zweite Menü leiste bekomme.

Germanikus · 5. Mai 2016

Genau so.
Danke^^

Germanikus · 4. Mai 2016

Hallo,
wie kann ich die Panels mit dem folgenden Code so ausrichten wie im Anhang?

HTML

<div class="panel panel-primary">
					<div class="panel-heading">
						<h3 class="panel-title">Details</h3>
					</div>
				<div class="panel-body ">
									<div class="panel panel-primary">
										<div class="panel-heading">
											<h3 class="panel-title">Zusammenfassung</h3>
										</div>
										<div class="panel-body">
											Panel-Inhalt
										</div>
									</div>
								<div class="panel panel-primary">
									<div class="panel-heading">
										<h3 class="panel-title">Lieferadresse</h3>
									</div>
									<div class="panel-body">
										Panel-Inhalt
									</div>
								</div>
							<div class="panel panel-primary">
								<div class="panel-heading">
									<h3 class="panel-title">Adresse des Verkäufers</h3>
								</div>
								<div class="panel-body">
									Panel-Inhalt
								</div>
							</div>
						<div class="panel panel-primary">
							<div class="panel-heading">
								<h3 class="panel-title">Meine Möglichkeiten</h3>
							</div>
							<div class="panel-body">
								Panel-Inhalt
							</div>
						</div>
					<div class="bs-example" data-example-id="table-within-panel">
						<div class="panel panel-primary">
							<div class="panel-heading">Yugioh Einzelkarten</div>
								<table class="table">
									<thead>
										<tr>
											<th>#</th>
											<th>Vorname</th>
											<th>Nachname</th>
											<th>Benutzername</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<th scope="row">1</th>
											<td>Mark</td>
											<td>Otto</td>
											<td>@mdo</td>
										</tr>
									</tbody>
								</table>
						</div>
					</div>
				</div>
			</div>

Alles anzeigen

Germanikus · 19. April 2016

Hallo,
ich hab keine Ahnung, ob ich im richtigen Bereich bin.
Also zu meinem Problem.
Ich hab auf dieser Seite den Datepicker runtergeladen.
Dann hab ich die Datei datepicker.css in den CSS Ordner gelegt und bootstrap-datepicker.js in den Ordner JS.

So steht es nun auf der PHP Seite
Oben:

Zitat

PHP

<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="description" content="">
		<meta name="author" content="">
		<link rel="icon" href="../../favicon.ico">
		<title>Meine Seite</title>
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<link href="css/dashboard.css" rel="stylesheet">
		<link href="css/sticky-footer-navbar.css" rel="stylesheet">
		<link href="css/breadcrumbs.css" rel="stylesheet">
		<link href="css/datepicker.css" rel="stylesheet">
		<link href="css/mein.bootstrap.css" rel="stylesheet">
	</head>

Alles anzeigen

Unten:

Zitat

PHP

<!-- Bootstrap-JavaScript
	================================================== -->
	<!-- Am Ende des Dokuments platziert, damit Seiten schneller laden -->
	<script src="js/jquery.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/bootstrap-datepicker.js"></script>
	<!-- Nur, um unsere Platzhalter-Bilder zum Laufen zu bringen. Die nächste Zeile nicht wirklich kopieren! -->
	<script src="../../assets/js/vendor/holder.min.js"></script>
	<!-- IE10-Anzeigefenster-Hack für Fehler auf Surface und Desktop-Windows-8 -->
	<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>

Wie lass ich nun den Datepicker in einer Inpute anzeigen?

Germanikus · 19. April 2016

Genau das.
Danke

Beiträge von Germanikus

Bootstrap JS Tab - CSS

Bootstrap JS Tab - CSS

Webseite für Mobil Geräte testen

Hilfe in sachen CSS

Hilfe in sachen CSS

Hilfe in sachen CSS

Webseite für Mobil Geräte testen

Link (a href) färben

Link (a href) färben

Input Erweiterung

Bootstrap Panel wunsch

Bootstrap Panel wunsch

Bootstrap Panel wunsch

Bootstrap Panel wunsch

Bootstrap Panel wunsch

Nav-Tab + Panel

Bootstrap Panel ausrichten

Bootstrap Panel ausrichten

Bootstrap/Datepicker

Tabelle in 2 Farben darstellen