Bootstrap - 1'000 und 1 Tutorial (und ich stehe auf dem Schlauch)

X_FISH

Grand Admiral Special
Mitglied seit
03.02.2006
Beiträge
4.206
Renomée
1.941
  • BOINC Pentathlon 2017
  • BOINC Pentathlon 2018
  • BOINC Pentathlon 2019
  • SETI@Home Wow!-Event 2019
  • BOINC Pentathlon 2020
  • THOR Challenge 2020
  • BOINC Pentathlon 2021
  • BOINC Pentathlon 2022
  • BOINC Pentathlon 2023
Bootstrap ist toll. Könnte vieles erleichtern. Gibt auch ganz viele Tutorials, aber ich komme nicht weiter. :D

An was ich gerade herumbastle: Einfach um mich mal damit zu beschäftigen baue ich ein Layout für einen Blog.

Mein Problem: Ich möchte Werbeflächen mit einplanen - und das klappt nicht da ich nicht mit festen Breiten arbeiten kann (vorgegebene Bannergrößen).

Falls da jemand einen Link parat hat (oder ein Beispiel) ? ich wäre sehr, sehr dankbar und würde dort dann weiterlesen.

Grüße, Martin
 
Hi,
man kann relativ viel mit Bootstrap machen, auch feste Größen sind da kein Problem.
Du musst dir halt den Grundaufbau gut überlegen und bedenken, dass der ja responsive sein soll.
Wenn Du dir den Grundaufbau definiert hast und zb. auf das Grid-Layout zurück greifst, kannst Du darin ja wieder Bilder oder Boxen mit festen Größen einbauen.
Im Grid Layout sind die Spalten in einer Row ja auch in einer fest definierten Größe und du kannst für Handy (xs), Tablets (sm), mittlere Auflösung wie 1024x768 (md) und großen Monitoren (lg) feste Bereiche definieren.

Ist schwer zu beschreiben wie Du da an die Sache ran gehst, da ich keine Ahnung habe was daraus mal werden soll. Wenn Du Interesse hast, kannst Du mir eine kurze pn schreiben, vlt mit einer Skizze wie Du dir den Seitenaufbau vorstellst und ich kann Dir dann sagen wie ich das mit Bootstrap umsetzen würde und das dann auch erläutern.

Hier mal eine Seite die ich letztes Jahr mit Bootstrap gebaut habe. http://www.kfz-druschke.de/

Grüße Darkwolf
 
Danke für das Angebot. Ich habe nächste Woche Urlaub, dann widme ich mich der Website ausgiebig und ungestört.

Setze dann einen Link rein wie weit ich gerade bin und beschreibe wo es klemmt.

Merci vorab,

Martin
 
So, habe noch ein wenig gewerkelt und die Vorschau ist hier erreichbar:

http://astra103kw.de/17/07/25/kofferraumwanne_für_den_astra_j.htm

Inhalte fehlen natürlich noch, aber es geht mir primär um die Werbeflächen rechts. Diese stehen nun artig untereinander (größte Breite und Smartphones), elegant wäre es natürlich wenn ich sie bei der mittleren Breite nebeneinander platzieren könnte (bzw. dies automatisch geschieht).

Code:
<div class="mx-auto" style="width:300px;height:250px;border:1px solid black;margin-bottom:10px;">zentriertes div</div>

Grüße, Martin
 
Hi,

naja sieht doch schon mal gut aus.

Was ich versuchen würde wären die Werbe Anzeigen dementsprechend in eine row zu packen. Das ist das schöne an einer row. Du kannst innerhalb einer col eine weitere row erzeugen mit verschachtelten cols quasi.

Also aus

Code:
                                        <div class="mx-auto text-center">				
						<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
						<!-- astra103kw 300 -->
						<ins class="adsbygoogle"
						     style="display:inline-block;width:300px;height:250px"
						     data-ad-client="ca-pub-4201885467884275"
						     data-ad-slot="5984662301"></ins>
						<script>
						(adsbygoogle = window.adsbygoogle || []).push({});
						</script>
					</div> 					
					
					<div class="mx-auto text-center">
					<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
					<!-- astra103kw -->
					<ins class="adsbygoogle"
					     style="display:inline-block;width:300px;height:250px"
					     data-ad-client="ca-pub-4201885467884275"
					     data-ad-slot="6643137850"></ins>
					<script>
					(adsbygoogle = window.adsbygoogle || []).push({});
					</script>
					</div>


Würde ich in der Art sowas machen:

Code:
				<div class="row">
				    <div class="col-md-6 col-sm-6 col-xs-12">
						<div class="mx-auto text-center">				
							<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
							<!-- astra103kw 300 -->
							<ins class="adsbygoogle"
								style="display:inline-block;width:300px;height:250px"
								data-ad-client="ca-pub-4201885467884275"
								data-ad-slot="5984662301"></ins>
							<script>
							(adsbygoogle = window.adsbygoogle || []).push({});
							</script>
						</div> 					
					</div>
					<div class="col-md-6 col-sm-6 col-xs-12">
						<div class="mx-auto text-center">
						<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
						<!-- astra103kw -->
						<ins class="adsbygoogle"
							style="display:inline-block;width:300px;height:250px"
							data-ad-client="ca-pub-4201885467884275"
							data-ad-slot="6643137850"></ins>
						<script>
						(adsbygoogle = window.adsbygoogle || []).push({});
						</script>
						</div>
					</div>
                </div>

So hast du das nochmal extra verschachtelt. Und im Falle des Smartphones würde es trotzdem untereinander angezeigt werden.
Kann sein, dass Du daran noch etwas "rumfriemeln" musst, die cols haben ja autom. 15px margin, Du könntest da jetzt noch eine extra css klasse zupacken und das mit margin: 0px!important; wieder relativieren.

Aber ich denke so in der Richtung sollte das gehen.

Grüße Darkwolf
 
Leider ist nicht der gewünschte Effekt eingetreten.

Small -> Anzeige korrekt.

Medium -> Anzeige korrekt (zwei nebeneinander, eins linksbündig darunter)

Large -> Überlappende div (die ersten beiden wobei das zweite das erste 50% überlappt)

Code:
      <div class="row">
            <div class="col-md-6 col-sm-6 col-xs-12">
                  <div class="mx-auto text-center" style="width:300px;height:250px;border:1px solid black;margin-bottom:10px;">zentriertes div 1</div>							
            </div> 
            <div class="col-md-6 col-sm-6 col-xs-12">
                  <div class="mx-auto text-center" style="width:300px;height:250px;border:1px solid black;margin-bottom:10px;">zentriertes div 2</div>							
            </div>
            <div class="col-md-6 col-sm-6 col-xs-12">
                  <div class="mx-auto text-center" style="width:300px;height:250px;border:1px solid black;margin-bottom:10px;">zentriertes div 3</div>									
            </div>
      </div>

Habe die div auch mit einem <img src> mit Breite von 300 px versehen -> gleiches Verhalten.

Das Update habe ich noch nicht hochgeladen, bastle noch herum. Stehe jedoch (wieder) auf dem Schlauch woran es nun klemmen könnte. Ist heute aber auch schon wieder reichlich spät...

Grüße, Martin
 
Zuletzt bearbeitet:
Hmm, mir fällt gerade auf, dass du für lg (large) gar keine Klassen angegeben hast.

Vielleicht hilft das ja:

Code:
      <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                  <div class="mx-auto text-center" style="width:300px;height:250px;border:1px solid black;margin-bottom:10px;">zentriertes div 1</div>							
            </div> 
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                  <div class="mx-auto text-center" style="width:300px;height:250px;border:1px solid black;margin-bottom:10px;">zentriertes div 2</div>							
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                  <div class="mx-auto text-center" style="width:300px;height:250px;border:1px solid black;margin-bottom:10px;">zentriertes div 3</div>									
            </div>
      </div>

Schau dir die Tabelle mal an: https://v4-alpha.getbootstrap.com/layout/grid/#grid-options
 
Zuletzt bearbeitet:
Wie ich's auch versuche -> das Problem bleibt bestehen. Habe auch mit anderen Werten experimentiert (welche für mich Sinn ergeben hätten) -> gleiches Problem.

Ich habe die Vorschau aktualisiert, dort siehst du das Problem der überlappenden <div>.

Grüße, Martin
 
Hmm,

ich glaube du hast da ganz einfach ein mathematisches Problem. Da deine Sidebar in col-lg-4 definiert ist.
Bei lg ist die Containergröße 960px, col-lg-4 ist quasi ein drittel der 960px (geteilt durch 12 * 4, da die 960px in 12 cols aufgeteilt sind)
Oder anders, in einem col-lg-4 stehen dir 320px zur Verfügung. Da du der Werbebox 300px feste breite gibts, wären zwei nebeneinander 600px
und das passt da leider einfach nicht rein...

Das kann man drehen und wenden wie man will, das wird wohl nicht funktionieren außer du gibst der Werbebox eine variable Breite. (width: 100%)
Wird aber glaube ich ein Problem, da die Google schon feste Größen im iframe vorgibt.

Ich glaube die Lösung ist die Boxen untereinander zu machen oder schauen ob google auch webeboxen anbietet, die schmäler sind. Dann kannst Du für lg eine extra Ausgabe basteln und andere Werbeboxen einbinden.
Dies machst du dann ugf. so:

Code:
                                <div class="hidden-lg"
                                              <div class="mx-auto text-center">				
						<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
						<!-- astra103kw 300 -->
						<ins class="adsbygoogle"
						     style="display:inline-block;width:300px;height:250px"
						     data-ad-client="ca-pub-4201885467884275"
						     data-ad-slot="5984662301"></ins>
						<script>
						(adsbygoogle = window.adsbygoogle || []).push({});
						</script>
					</div> 					
					
					<div class="mx-auto text-center">
					<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
					<!-- astra103kw -->
					<ins class="adsbygoogle"
					     style="display:inline-block;width:300px;height:250px"
					     data-ad-client="ca-pub-4201885467884275"
					     data-ad-slot="6643137850"></ins>
					<script>
					(adsbygoogle = window.adsbygoogle || []).push({});
					</script>
					</div>
                               </div>
                               <div class="visible-lg">

                                     /* Hier kommen die kleineren Werbeboxen rein die nebeneinander passen */

                               </div>


Mit der Klasse hidden-lg wird diese div, bei der "lg"-Auflösung komplett ausgeblendet, bei allen anderen jedoch dargestellt.
Mit der Klasse visible-lg bewirkst du, dass die div-Box ausschließlich bei der "lg"-Auflösung dargestellt wird.

Dies funktioniert äquivalent mit xs,sm,md und xl genauso gut auch bei (soviel ich weiß) allen anderen HTML-Elementen, also nicht nur mit div-Boxen.

Hoffe das führt etwas in die richtige Richtung und du kommst noch zu einem zufriedenstellendem Ergebnis.

Grüße Darkwolf
 
Du hast recht, ich muss die Boxen wohl immer untereinander platzieren (ohne »row«). Anders geht es nicht (zumindest nicht mit Bootstrap CSS).

Habe mit dem Layout gespielt und versucht den Umbruch zu erzwingen -> klappt nur dann wenn die rechte Spalte entsprechend breit ist.

Beim Studium von anderen Websites -> die blenden Werbung ein und aus und umgehen so die Problematik. Ob das dem Werbeanbieter jedoch gefällt wenn die Werbung mal sichtbar, mal unsichtbar ist? Nun ja, scheint wohl die einfachste (und sicherste) Lösung für das Problem zu sein.

Da bei mir die Werbung nicht der primäre Bestandteil ist, ich sie dennoch möglichst sinnvoll platzieren wollte -> war's eben ein Versuch.

Danke für's »Mitverkopfen« und die investierte Zeit,

Martin
 
Zurück
Oben Unten