WBCE CMS Forum

lipstick

Mitglied

Bildhöhe Adventuresstrap light ändern

Guten morgen zusammen,

endlich habe ich wieder ein wenig Zeit mich um meine Webseite zu kümmern.
Dabei habe ich ein kleines Luxusproblem. Wie kann ich den Abschnitt unterhalb der Bilder im Header, inklusive der Menueleiste nach unten verschieben so dass die Leiste mit den Bildern höher wird.
meine Seite: www.lippenherz.de
Schönen Tag
Lena

hgs

Mitglied

Re: Bildhöhe Adventuresstrap light ändern

Hallo Lena
Die meisten Browser haben dafür ein tolles Tool an Board.
Mit F12 bekommst du die angezeigt. Wenn du dann den betroffenen bereich mit der rechten Mousetaste anklickst und auf Bereich untersuchen klickst. bekommst die css-Anweisung für diesen Bereich angezeigt.
In deinem Fall (rechter Lick auf das Headerbild)

[== CSS ==]
header #header-banner {
    height: 300px;

wenn du diesen Wert auf z.B. 500px erhöhst wird das Bild höher.
Viel Spaß beim "spielen"

---

LG Harald
"Fange nie an, aufzuhören - höre nie auf, anzufangen." Marcus Tullius Cicero (106-43 v.Chr.)

lipstick

Mitglied

Re: Bildhöhe Adventuresstrap light ändern

Hallo,

Sorry, aber leider klappt der Tipp nicht. Vielleicht hilft meine CSS.
Ich möchte dass die Navigation und der Main-Content ca. 100px nach unten geschoben wird,

Gruß
Lena

Hier meine CSS:

[== CSS ==]
/*****************************************************************************
 * BOOTSTRAP IMPROVEMENTS
 *****************************************************************************/
.alert {
  border-radius: 0; }

.form-control {
  border-radius: 0;
  box-shadow: -1px -1px 6px #E7E7E7 inset;
  border-color: #E7E7E7;
  color: #999;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  -o-transition: all .3s ease; }

.form-control:focus {
  border-color: #373737;
  box-shadow: -1px -1px 6px #E7E7E7 inset;
  color: #373737; }

.btn {
  font-family: "Roboto Condensed", sans-serif;
  text-transform: uppercase;
  border-radius: 0;
  font-weight: 700; }

.btn-primary {
  background: #373737;
  border-color: #373737; }

.btn-lg {
  padding: 10px 50px; }

.btn-primary:focus,
.btn-primary.focus,
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary,
.btn-primary:active:hover,
.btn-primary.active:hover,
.open > .dropdown-toggle.btn-primary:hover,
.btn-primary:active:focus,
.btn-primary.active:focus,
.open > .dropdown-toggle.btn-primary:focus,
.btn-primary.focus:active,
.btn-primary.active.focus,
.open > .dropdown-toggle.btn-primary.focus {
  background: #333;
  border-color: #333; }

.list-group-item {
  border-radius: 0 !important;
  border-color: #E7E7E7; }

.img-thumbnail {
  border-radius: 0;
  border-color: #E7E7E7;
  background: #E7E7E7;
  max-width: 250px;
  max-height: 150px;
  margin: 5px 10px; }

.pull-left .img-thumbnail {
  margin: 5px 15px 5px 0; }

.pull-right .img-thumbnail {
  margin: 5px 0 5px 15px; }

blockquote footer {
  height: auto; }

.table-striped > tbody > tr:nth-of-type(2n+1) {
  background: rgba(0, 0, 0, 0.05); }

.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
  border-color: #E7E7E7; }

.label {
  border-radius: 0;
  text-transform: uppercase; }

.alert {
  border: 0; }

.alert strong {
  text-transform: uppercase; }

.alert-danger {
  background: #EBCCD1; }

.alert-warning {
  background: #faebcc; }

.alert-info {
  background: #bce8f1; }

.alert-success {
  background: #d6e9c6; }

.panel,
.panel .panel-heading,
.panel-group .panel {
  border-radius: 0; }

.panel {
  box-shadow: none; }
  .panel .panel-heading {
    font-weight: 600;
    text-transform: uppercase; }

.panel-primary .panel-title > a:hover, .panel-primary .panel-title > a:focus, .panel-primary .panel-title > a:active {
  color: #53024e; }

.panel-default {
  border-color: #E7E7E7; }
  .panel-default .panel-heading {
    border-color: #E7E7E7;
    background-color: rgba(0, 0, 0, 0.05); }

a.list-group-item {
  color: #373737; }
  a.list-group-item .list-group-item-text {
    font-weight: normal; }

nav {
  text-align: center; }
  nav .pagination {
    border-radius: 0 !important;
    margin: 0; }
  nav .pagination > li > a, nav .pagination > li > span, nav .pagination > li > a:hover, nav .pagination > li > span:hover, nav .pagination > li > a:focus, nav .pagination > li > span:focus {
    color: #373737; }
  nav .pagination > li:last-child > a, nav .pagination > li:last-child > span, nav .pagination > li:first-child > a, nav .pagination > li:first-child > span {
    border-radius: 0 !important; }
  nav .pagination > .active > a, nav .pagination > .active > span, nav .pagination > .active > a:hover, nav .pagination > .active > span:hover, nav .pagination > .active > a:focus, nav .pagination > .active > span:focus {
    background-color: #53024e;
    border-color: #53024e;
    z-index: 0; }

.nav-pills > li > a {
  border-radius: 0;
  padding: 6px 12px;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 700;
  text-transform: uppercase; }

.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
  background: #373737; }

/*****************************************************************************
 * INLINE STYLING
 *****************************************************************************/
body {
  font-family: "Roboto", sans-serif;
  color: #53024e;
  line-height: 1.5em; }

h1, .h1 {
  font-size: 36px; }

h1, .h1, h2, .h2, h3, .h3,
h4, .h4, h5, .h5, h6, .h6 {
  font-family: "Roboto Condensed", sans-serif;
  text-transform: uppercase; }

a {
  font-weight: 500;
  color: #373737;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  -o-transition: all .3s ease; }

a:hover, a:focus, a:active {
  outline: 0;
  color: #53024e;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  -o-transition: all .3s ease; }

/*.link-thumbnail {
    border: 1px solid $color-gray;
    position: relative;

}

.link-thumbnail.pull-left {
    margin: 5px 15px 5px 0;
}

.link-thumbnail.pull-right {
    margin: 5px 0 5px 15px;
}

.link-thumbnail:hover, .link-thumbnail:active, .link-thumbnail:focus {
    border-color: $color-black;
    @include transition();
}*/
/*****************************************************************************
 * BODY
 *****************************************************************************/
body {
  position: relative;
  overflow-x: hidden; }
  body .background {
    background-image: url(../img/background.png);
    background-repeat: no-repeat;
    position: absolute;
    display: block;
    width: 730px;
    height: 766px;
    z-index: -1; }
  body .background-right {
    top: 50px;
    right: -300px; }

/*****************************************************************************
 * HEADER
 *****************************************************************************/
header {
  background-position: center 100px;
  background-size: cover;
  background-repeat: no-repeat; }
  header #header-top #header-logo a {
    margin: 10px 0;
    display: inline-block;
    color: #53024e;
    font-size: 2px;
    outline: 0; }
    header #header-top #header-logo a img {
      height: 40px;
      float: left; }
    header #header-top #header-logo a .title {
	height: 40px;
	line-height: 40px;
	font-size: 48px;
	font-family: "Times New Roman";
	float: left;
	margin: 0 0 0 5px;
	color: #53024E;
	font-style: oblique;
	text-decoration: none;
	font-variant: inherit;
}
      header #header-top #header-logo a .title span {
        display: block;
        margin: 15px 0;
        transition: all .3s ease;
        -webkit-transition: all .3s ease;
        -moz-transition: all .3s ease;
        -ms-transition: all .3s ease;
        -o-transition: all .3s ease; }
      header #header-top #header-logo a .title small {
        font-size: 12px;
        white-space: nowrap; }
  header #header-top #header-logo a, header #header-top #header-logo a:hover, header #header-top #header-logo a:focus, header #header-top #header-logo a:active {
    text-decoration: none; }
  header #header-top .navbar-toggle {
    border-radius: 0;
    border: none;
    padding: 0;
    margin: 23px 0; }
    header #header-top .navbar-toggle .icon-bar {
      background: #373737;
      height: 6px;
      width: 44px; }
    header #header-top .navbar-toggle .icon-bar + .icon-bar {
      margin-top: 8px; }
  header #header-right {
    margin: 35px 0; }
  header #header-banner {
    height: 350px;
    background-size: cover;
    position: relative;
    background-position: center center; }
    header #header-banner img {
      display: none; }
  header #header-slider .carousel-inner .item {
    height: 300px;
    width: 100%;
    background-size: cover;
    background-position: center center; }
    header #header-slider .carousel-inner .item .item-info {
      bottom: 10px;
      position: absolute;
      top: auto;
      width: 100%; }
      header #header-slider .carousel-inner .item .item-info .item-text {
        text-align: center;
        width: 80%;
        margin: auto; }
        header #header-slider .carousel-inner .item .item-info .item-text .h1 {
          display: inline;
          margin: 0 0 15px 0;
          line-height: 1.5em;
          font-size: 24px;
          color: #fff;
          text-shadow: 0 -1px rgba(0, 0, 0, 0.2);
          padding: 0 10px;
          box-decoration-break: clone; }
    header #header-slider .carousel-inner .item .item-info-right .item-text {
      float: right;
      text-align: right;
      margin: 0 10% 0 0; }
    header #header-slider .carousel-inner .item .item-info-left .item-text {
      float: left;
      text-align: left;
      margin: 0 0 0 10%; }
  header #header-slider .carousel-indicators {
    bottom: -50px;
    margin-bottom: 12px;
    right: 50%;
    margin-right: -30%;
    margin-left: 0;
    left: auto;
    z-index: 10;
    width: auto; }
    header #header-slider .carousel-indicators li {
      border-color: #373737;
      border-radius: 0; }
    header #header-slider .carousel-indicators li.active {
      background-color: #373737; }

/*****************************************************************************
 * NAV
 *****************************************************************************/
nav.navbar {
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-top: none;
  border-bottom: none;
  background: none;
  position: absolute;
  top: 80px;
  width: 100%;
  z-index: 1;
  height: 0;
  min-height: 0; }
  nav.navbar .navbar-collapse {
    border: none; }
    nav.navbar .navbar-collapse .navbar-nav {
      background: #fff;
      margin-top: 0;
      position: relative;
      height: auto;
      border-bottom: 6px solid #E7E7E7; }
  nav.navbar ul li {
    background-color: transparent; }
  nav.navbar ul li a {
    font-family: "Roboto Condensed", sans-serif;
    text-transform: uppercase;
    font-weight: bold !important;
    color: #373737 !important;
    font-size: 18px;
    padding: 15px; }
  nav.navbar ul li.active > a, nav.navbar ul li.active > a:hover, nav.navbar ul li.active > a:focus, nav.navbar ul li.active > a:active {
    color: #fff !important;
    background: none;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.2); }
  nav.navbar ul li.dropmenu ul {
    border-radius: 0;
    border: none;
    box-shadow: none; }
    nav.navbar ul li.dropmenu ul li {
      position: relative; }
    nav.navbar ul li.dropmenu ul li > a {
      padding: 6px 15px;
      font-weight: bold;
      color: #fff !important;
      border: none !important;
      text-shadow: 0 -1px rgba(0, 0, 0, 0.2); }
    nav.navbar ul li.dropmenu ul li > a:hover, nav.navbar ul li.dropmenu ul li > a:focus, nav.navbar ul li.dropmenu ul li > a:active, nav.navbar ul li.dropmenu ul li.open > a, nav.navbar ul li.dropmenu ul li.active > a {
      color: #fff !important;
      background: rgba(255, 255, 255, 0.2) !important; }
    nav.navbar ul li.dropmenu ul li.active > a {
      padding: 6px 15px 6px 25px; }
    nav.navbar ul li.dropmenu ul li ul {
      top: 0;
      left: 100%;
      margin-top: -5px;
      margin-left: -1px; }

/*****************************************************************************
 * SECTION PAGE
 *****************************************************************************/
section {
  margin: 5px 0; }
  section .page-header {
    padding: 15px 0;
    width: 100%;
    display: block;
    border: 0;
    margin: 0; }
    section .page-header h1 {
      margin: 0;
      border: none;
      font-size: 36px;
      font-weight: 700;
      border-left: 40px solid #000;
      padding: 0 0 0 15px;
      line-height: 40px; }
  section .page-body {
    padding: 15px 0; }
  section .aside-header {
    margin: 14px 0 0 0;
    padding: 15px 0;
    width: 100%;
    display: block; }
    section .aside-header .h3 {
      margin: 0;
      border: none;
      font-size: 24px;
      border-left: 26px solid #000;
      height: 26px;
      line-height: 26px;
      padding: 0 0 0 15px; }
  section .aside-body {
    padding: 15px 0; }
    section .aside-body .list-group {
      margin: 0; }

/*****************************************************************************
 * FOOTER
 *****************************************************************************/
footer #footer-top {
  padding: 40px;
  color: #fff;
  background: #53024e;
  text-align: center; }
  footer #footer-top p {
    margin: 0; }
  footer #footer-top hr {
    border-color: #fff; }
  footer #footer-top ul, footer #footer-top li {
    list-style: none;
    padding: 0;
    margin: 0; }
  footer #footer-top ul li {
    display: inline;
    margin: 0 10px; }
  footer #footer-top a, footer #footer-top a:hover, footer #footer-top a:focus {
    color: #fff; }
footer #footer-partner {
  text-align: center;
  background: #fff;
  height: 2px;
  padding: 20px;
  line-height: 4px; }
  footer #footer-partner p {
    margin: 0; }
    footer #footer-partner p a {
      display: inline-block;
      margin: 0 5px;
      font-size: 24px;
      text-transform: uppercase;
      color: #999; }

/*****************************************************************************
 * SMALL WIDTH (tablets, 768px and up)
 *****************************************************************************/
@media (min-width: 768px) {
  html,
  body {
    height: 100%; }

  #wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -220px;
    overflow: hidden;
    position: relative; }
    #wrap #push {
      height: 220px; }

  header {
    background-position: center 132px; }
    header #header-top #header-logo a {
      font-size: 20px; }
      header #header-top #header-logo a img {
        height: 60px; }
      header #header-top #header-logo a .title {
        line-height: 20px;
        margin: 10px 0 0 10px; }
    header #header-banner {
      height: 250px; }
    header #header-slider .carousel-inner .item {
      height: 420px !important; }
      header #header-slider .carousel-inner .item .item-info {
        bottom: 75px; }
        header #header-slider .carousel-inner .item .item-info .item-text {
          width: 75%; }
          header #header-slider .carousel-inner .item .item-info .item-text .h1 {
            font-size: 32px; }
    header #header-slider .carousel-indicators {
      bottom: 0; }

  nav.navbar {
    top: auto;
    background: rgba(255, 255, 255, 0.8);
    border-bottom: 6px solid #E7E7E7;
    margin-top: -50px;
    min-height: 56px; }
    nav.navbar .navbar-collapse .navbar-nav {
      border-bottom: none;
      background: transparent; }

  .navbar-collapse {
    padding-left: 0;
    padding-right: 0; }

  footer {
    height: 220px; }
    footer #footer-top {
      height: 140px; }
      footer #footer-top .copyright {
        text-align: left; }
      footer #footer-top ul li {
        text-align: right;
        display: block;
        margin: 0; }

  #blog .article-single article .banner {
    width: 40%; }

  blockquote {
    margin: 20px 20px 20px 50px; } }
/*****************************************************************************
 * MEDIUM WIDTH (desktops, 992px and up)
 *****************************************************************************/
@media (min-width: 992px) {
  body .background-right {
    top: 30px;
    right: -300px; }
  body .background-bottom {
    bottom: 120px;
    left: -550px; }

  header #header-banner {
    height: 300px; }
  header #header-slider .carousel-inner .item {
    height: 520px !important; }
    header #header-slider .carousel-inner .item .item-info {
      bottom: 100px; }
      header #header-slider .carousel-inner .item .item-info .item-text {
        width: 50%; }
        header #header-slider .carousel-inner .item .item-info .item-text .h1 {
          font-size: 36px; }
    header #header-slider .carousel-inner .item .item-info-right .item-text, header #header-slider .carousel-inner .item .item-info-left .item-text {
      margin: 0; } }
/*****************************************************************************
 * LARGE WIDTH (large desktops, 1200px and up)
 *****************************************************************************/
@media (min-width: 1200px) {
  body .background-right {
    top: 600px;
    right: -300px; }
  body .background-bottom {
    bottom: 120px;
    left: -550px;
    overflow: hidden; }

  header #header-slider .carousel-inner .item {
    height: 660px !important; }
    header #header-slider .carousel-inner .item .item-info .item-text .h1 {
      font-size: 44px; } }
/*****************************************************************************
 * EXTRA LARGE WIDTH (extra large desktops, 1600px and up)
 *****************************************************************************/
@media (min-width: 1600px) {
  body .background-right {
    top: 600px;
    right: -200px; }
  body .background-bottom {
    bottom: 120px;
    left: -450px; } }

/*# sourceMappingURL=style.css.map */

Beitrag geändert von lipstick (18.08.2017 21:37:41)

florian

Administrator

Re: Bildhöhe Adventuresstrap light ändern

Es gibt in der style.css 2 Stellen, an denen die Höhe des großen Bildes definiert wird, und zwar einmal in Zeile 276 und Zeile 491.
Dort kannst Du für unterschiedliche Monitorgrößen die Höhe des Bildes definieren.
Im von hgs korrekterweise dafür empfohlenen Test-Tool funktioniert das auch.
(Das ist natürlich nur eine temporäre Änderung, um es dauerhaft uz hinterlegen, musst Du die styles.css in gewohnter Weise bearbeiten.)
Vielleicht hast Du die Änderung nur an einer Stelle vorgenommen, oder die style.css wurde nicht neu geladen - einfach mal Brosercache leeren und nochmal versuchen.

---

Code allein macht nicht glücklich. Jetzt spenden!