Hilfe in sachen CSS

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

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

basti1012 · 8. Mai 2019

zu 1. kann ich mit deinen jetzigen Code nicht nachvollziehen, und auf den Bild auch nicht sehen.

zu 2. zb so

Code

.top-head h1 {
      background-image:url(link-zum-bild.png);
       background-repeat:repeat;
}

zu 3. meinst du die ?

Code

.fa-shopping-cart,
.fa-exchange,
.fa-bell-o{
  font-size:200%;
}

zu 4. Da du bootstrap nutzt kann ich da dazu erstmal nix sagen weil ich nicht weiß wie weit die da eigene möglichkeiten nutzen. Normalerweise würde ich zu Flexbox raten .

Wie es jetzt aussieht ist es doch auf der ganzen Seite gestreckt.

Oder redest du von den inneren Teil ?

Am besten wäre wenn du einen Link zur Seite posten würdest.

So kann man dir nicht richtig helfen. ( ich zumindest ).

Notfalls könntest du auch einen codepen fertig machen. Wichtig ist da nur das man den html Code postet der im Browser ankommt .Weil deine geposteter Code ist ganz anders wie auf den Bild zu sehen.

EDIT ZU 1

ich glaube du meinst das

Code

.search:hover input, 
.search input:focus { 
    width: 200px; 
    margin-left: 0px;
    background: #d0d0d0;
 }

wenn du da den Background weg machst ist der Hintergrund weiß.

Falls du das nicht meinst dann mußt du das mal zeigen bzw anders erklären.

Germanikus · 8. Mai 2019

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

Hilfe in sachen CSS

Jetzt mitmachen!

Teilen