Hallo,
es war so einfach... Fehler ist gefixt was die Div Boxen angeht.
Jedoch bleibt das Problem mit dem Hintergrund bestehen.
Gruß
Gruosh
Hallo,
es war so einfach... Fehler ist gefixt was die Div Boxen angeht.
Jedoch bleibt das Problem mit dem Hintergrund bestehen.
Gruß
Gruosh
Hi,
ich bin neu hier und auch neu im Bereich HTML/CSS.
Aktuell beschäftige ich mich mit Bootstrap und habe zwei Probleme.
1. Ich habe eine Div Klasse, welche ein Background - Image lädt. Jedoch wird dies nicht vollständig dargestellt.
In der Bootstrap Doku habe ich nur den Eintrag gefunden: http://v4-alpha.getbootstrap.com/content/images/ jedoch bringt dieser mir nichts für den Background (so verstehe ich es jedenfalls)
2. Meine div Boxen sind warum auch immer unterschiedlich groß. Ich habe "container-fluid" verwendet.
vorab schonmal Dank!
Grundsätzlich wären ein paar Worte noch von euch cool ob das so "sauber" ist oder ob ich mir direkt einen schlechten Stil angewöhne.
[Blockierte Grafik: http://www0.xup.in/exec/ximg.php?fid=17528229]
Hinweis: Ich verwende eine eigene CSS und die bootstrap.css (alpha 6)
h1, h2, h3, h4, h5, h6 { margin: 0 0 35px; font-weight: 700; letter-spacing: 1px;}hr { margin-top: -20px; margin-bottom: 20px; margin-left: 650px; margin-right: 650px; border: 0; border-top: 1px solid #eee;}.intro {background: url(/img/antwhite.jpg) no-repeat; background-size: cover; height:100%;}.intro-welcome { text-align: center; margin-left: -15px; margin-right: -15px;}.intro-text { font-size: 26px}.about { text-align: center; color: #FFFFFF; background-color: #2C3E50; margin-left: -15px; margin-right: -15px;}.about-text { font-size: 26px;}.contact { text-align: center; color: #FFFFFF; background-color: #008000; margin-left: -15px; margin-right: -15px;}.contact-text { font-size: 26px;}.service { text-align: center; color: #FFFFFF; background-color: #008000; margin-left: -15px; margin-right: -15px;}.step1-text {font-size: 20px;}.glyphicon { border: 2px solid #FFFFFF; border-radius: 50%; display: inline-block; font-size: 60px; height: 140px; line-height: 140px; text-align: center; vertical-align: middle; width: 140px;}.reference { text-align: center; color: #FFFFFF; background-color: #bababa; margin-left: -15px; margin-right: -15px;}.footer { padding: 50px; text-align: center; color: #FFFFFF; background-color: #000000; margin-left: -15px; margin-right: -15px;}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS --><link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<!-- WebAmeise CSS --><link rel="stylesheet" type="text/css" href="css/webameise.css">
<title>WebAmeise - eCommerce</title>
</head><body><!-- Navigation --><div class="intro"><div class="container-fluid"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12"> <nav class="navbar navbar-toggleable-md navbar-light"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#"> <img src="/assets/brand/bootstrap-solid.svg" width="30" height="30" alt=""> </a> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="nav navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Menüpunkt 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Menüpunkt 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Menüpunkt 3</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Menüpunkt 4</a> </li> </ul> </div> </nav> </div> </div>
<!-- Navigation --><!-- Intro Seite --><div class="intro-welcome"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12"> <h1>Lalalala</h1> <p class="intro-text">lallaallala lalalalal lalallalalal lalaalla lalala</p> </div> </div></div></div><!-- Intro Seite --><!-- About --><div class="about"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12"> <h1>Über lalalal</h1> <p class="about-text">lallaallala lalalalal lalallalalal lalaalla lalala <br> lallaallala lalalalal lalallalalal lalaalla lalala® System.</p> </div> </div></div><!-- About --><!-- Service --><div class="service"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12"> <h1>Service</h1> <hr> </div> <div class="row"> <div class="col-xs-1 col-sm-1 col-md-3 col-lg-2 col-xl-3"> <span class="glyphicon glyphicons-490-handshake" aria-hidden="true"></span> <h4>Schritt 1</h4> <p class="step1-text">lallaallala lalalalal lalallalalal lalaalla lalala</p> </div> <div class="col-xs-1 col-sm-1 col-md-3 col-lg-2 col-xl-3"> <span class="glyphicon glyphicon-cloud" aria-hidden="true"> </span> <h4>Schritt 2</h4> <p class="step1-text">lallaallala lalalalal lalallalalal lalaalla lalala</p> </div> <div class="col-xs-1 col-sm-1 col-md-3 col-lg-2 col-xl-3"> <span class="glyphicon glyphicons-490-handshake" aria-hidden="true"></span> </span> <h4>Schritt 3</h4> <p class="step1-text">lallaallala lalalalal lalallalalal lalaalla lalala</p> </div> <div class="col-xs-1 col-sm-1 col-md-3 col-lg-2 col-xl-3"> <span class="glyphicon glyphicon-cloud" aria-hidden="true"> </span> <h4>Schritt 4</h4> <p class="step1-text">lallaallala lalalalal lalallalalal lalaalla lalala</p> </div> </div> </div></div><!-- Service --><!-- Reference --><div class="reference"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12"> <h1>lalalala</h1>
</div> </div><!-- Reference --><!-- Contact --><div class="contact"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12"> <h1>Kontakt zum lalalal</h1> <div class="form-group row"> <label for="company-input" class="col-xs-5 col-sm-5 col-md-5 col-lg-5 col-xl-5 col-form-label">Firma</label> <div class="col-xs-7 col-sm-7 col-md-7 col-lg-7 col-xl-7"> <input class="form-control" type="text" value="" id="company-input"> </div> </div> <div class="form-group row"> <label for="name-input" class="col-xs-5 col-sm-5 col-md-5 col-lg-5 col-xl-5 col-form-label">Name</label> <div class="col-xs-7 col-sm-7 col-md-7 col-lg-7 col-xl-7"> <input class="form-control" type="text" value="" id="name-input"> </div> </div> <div class="form-group row"> <label for="phone-input" class="col-xs-5 col-sm-5 col-md-5 col-lg-5 col-xl-5 col-form-label">Telefon</label> <div class="col-xs-7 col-sm-7 col-md-7 col-lg-7 col-xl-7"> <input class="form-control" type="tel" value="" id="phone-input"> </div> </div> <div class="form-group row"> <label for="email-input" class="col-xs-5 col-sm-5 col-md-5 col-lg-5 col-xl-5 col-form-label">Email</label> <div class="col-xs-7 col-sm-7 col-md-7 col-lg-7 col-xl-7"> <input class="form-control" type="email" value="" id="email-input"> </div> </div> <button type="submit" class="btn btn-primary">Absenden</button> </div> </div></div><!-- Contact --><!-- Footer --><footer><div class="footer"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12"> <h2>Copyright © lalalala 2017</h2> </div> </div></div></footer><!-- Footer --></div></body>
<!-- jQuery (wird für Bootstrap JavaScript-Plugins benötigt) --><script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script><script src="js/bootstrap.js"></script></html>
HTML-Seminar.de - mit Videos zum schnellen Lernen, wie man eine Website selbst erstellt.