2016-05-04 5 views
0

Ich habe ein Problem .. Ich würde für das Banner mit dem Browser vergrößert werden, aber nicht den Inhalt des Körpers. Also dachte ich nicht der Körper Inhalt erlauben zu erweitern, würde ich die folgenden Medien Abfrage tun:Ist es möglich, das Banner im Körper nicht auszurichten?

@media (min-width:1281px){ 
    #homepage .carousel .carousel-caption { 
     left:auto; 
     right:auto; 
     max-width:1263px; 
     margin-left:70px; 
    } 
    /*.footer-links{ 
     margin:auto; 
     max-width:1263px; 
    } 
    .bodyPages{ 
     margin:auto !important; 
     max-width:1263px !important; 
    } 
    #searchForm{ 
     margin:auto !important; 
     max-width:1263px !important; 
    } 
    }*/ 
    /*.content-wrapper{ 
     margin:auto; 
     max-width:1263px !important; 
    } 
    .carousel-wrapper{ 
     max-width:100%; 
    }*/ 
    body{ 
     max-width:1263px !important; 
     margin:auto; 
    } 
    :not(.carousel-inner img){ 

    } 
    .carousel-inner img { 
     height: auto; 
     width: 100%; 
    } 
} 

UPDATE 2:

<cfoutput> 
<cfinclude template="inc/html_head.cfm" /> 
<body id="#$.getTopID()#" class="#$.createCSSHook($.content('menuTitle'))#" data-spy="scroll" data-target=".subnav" data-offset="50"> 
    <!--- <cfinclude template="inc/navbar.cfm" /> ---> 
    <!--- Navbar's display below is set to absolute position ---> 
    <cfinclude template="inc/navbar_ap.cfm" /> 
    <div id="resizable-section"> 
     <!--- 
      The Carousel/Slideshow 
      Refer to the theme's contentRenderer.cfc for details on this method and its arguments/options 
      NOTES: 
       * This theme is designed for Mura 6.1+ 
       * Only content items with an 'Associated Image' will be rendered 
       * You can control the crop of the carousel image by using the custom defined 'carouselimage' image size // 'carouselimage' 
     ---> 
     <!--- #$.dspCarouselByFeedName(
      feedName='Slideshow' 
      , showCaption=true 
      , cssID='myCarousel' 
      , size='carouselimage' 
      , interval=5000 
      , autoStart=true 
     )# ---> 
      #$.dspCarouselByFeedName(
      feedName='Slideshow' 
      , showCaption=true 
      , cssID='myCarousel' 
      , size='custom' 
      , interval=10000 
      , autoStart=true 
     )# 
      <div class="container-fluid bodyPages"> 
       <div class="row"> 
         <!-- expanded width of the following section. --> 
         <!--<section class="col-lg-8 col-md-8 col-sm-12 col-xs-12 content">--> 
         <section class="col-lg-offset-1 col-lg-10 col-md-12 col-sm-12 col-xs-12 content" id="home-content"> 
         <!--- The content ---> 
          #$.dspBody(
           body=$.content('body') 
           , pageTitle='' 
           , crumbList=false 
           , showMetaImage=false 
          )# 
          <!--- Display Objects assigned to display region 2 (Main Content) ---> 
          #$.dspObjects(2)# 
         </section> 
          <aside class="col-lg-3 col-md-4 col-sm-12 col-xs-12">--> 
          <!--- Display Objects assigned to display region 3 (Right Column) ---> 
          <!--#$.dspObjects(3)#--> 
         <!--</aside>--> 
       </div><!--- /.row ---> 
       <cfinclude template="inc/footer.cfm" /> 
      </div><!-- /.container --> 
    </div><!-- /.resizable-text --> 
<cfinclude template="inc/html_foot.cfm" /> 

+0

Ich sehe Sie verwenden Mura. Ein paar Dinge aus dem Code, den du gepostet hast. Erstens, wenn Sie die 'dspCarouselByFeedName()' Methode mit einer Größe von custom ', size = 'custom' aufrufen, glaube ich, dass Sie auch die Breite und Höhe angeben müssen. Ansonsten verwende eine vordefinierte Größe innerhalb von Mura. Zweitens verwenden Sie Bootstraps 'container-fluid' Klasse. Dies bewirkt, dass sich Ihr Textinhalt bei der Größenanpassung des Browsers "bewegt". Es ist _fluid_ und nutzt die gesamte Browserbreite. Wenn Sie das nicht wollen, dann benutzen Sie einfach die 'container' Klasse. Ich habe Ihre Frage ein paar Mal gelesen und bin mir immer noch nicht sicher, was ... –

+0

Sie sind danach. Versuchen Sie, das Karussellbild mit der Größe des Browsers zu skalieren? Oder versuchen Sie die Größe des Inhaltstexts zu ändern? Können Sie bitte in Ihrer Frage klären - [Bearbeiten] –

+0

@ Miguel-FDer Inhalt der Seite, dh die Links, Text, Fußzeile usw. bleibt in der Mitte, ohne die Größe zu ändern, wenn der Browser die Größe ändert. Aber das Karussell, ich möchte es erweitern, wie der Browser erweitert –

Antwort

0

Ich glaube, das Problem, das Sie haben ist weil Sie eine maximale Breite für den gesamten Körper festlegen und Ihr Banner innerhalb des Körpers ist. Das bedeutet, dass Ihr Banner niemals größer als die von Ihnen angegebene maximale Breite von 1263px sein kann.

Anstatt die Größe des gesamten Körpers zu ändern, müssen Sie einen Wrapper für Ihren Inhalt erstellen. Sie müssen auch einen Wrapper für Ihr Banner erstellen.

Hier einige HTML:

<body> 

<div class="banner"> 
    Banner Content goes here 
</div> 


<div class="content-wrapper"> 
    Page content goes here 
</div> 


</body> 

und einige CSS:

body {width:100%;} 

.content-wrapper { 
    max-width:1263px; 
} 

.banner-wrapper { 
    width:100%; 
} 
+0

Ich habe so etwas versucht, aber es funktioniert nicht. Die Körperabschnitte beginnen sich in verschiedenen Positionen zu bewegen. Der Grund, warum ich den Körper ins Visier genommen habe, ist, dass ich zu jeder Seite der Website gehen und die Klasse oder ID hinzufügen müsste. Auf diese Weise ist es sauber und einfach. –

+0

Nun, die Art und Weise, die ich Ihnen gegeben habe, ist der richtige Weg, um ein Website-Layout einzurichten. Es macht Dinge leichter zu verstehen und zu modifizieren. Platziere deinen HTML-Code jedoch in deinem Beitrag, damit ich leichter sehen kann, was wirklich passiert. –

+0

ist es in Coldfusion. Immer noch herausfinden, wie es funktioniert. Will es bald posten –

Verwandte Themen