Ergebnis 1 bis 10 von 10
  1. Beitrag #1
    Themenstarter
    Vice Admiral
    Special
    Vice Admiral
    Avatar von X_FISH
    • Mein DC

      X_FISH beim Distributed Computing

      Aktuelle Projekte: distributed.net (seit 2000), BOINC (seit 2017)
      BOINC-Statistiken:

    Registriert seit
    03.02.2006
    Beiträge
    618
    Danke Danke gesagt 
    4
    Danke Danke erhalten 
    18

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

    Bootstrap ist toll. Könnte vieles erleichtern. Gibt auch ganz viele Tutorials, aber ich komme nicht weiter.

    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

  2. Beitrag #2
    Commodore
    Special
    Commodore
    Avatar von Darkwolf

    Registriert seit
    04.07.2003
    Ort
    Berlin
    Beiträge
    497
    Danke Danke gesagt 
    80
    Danke Danke erhalten 
    5
    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
    P$
    Code:
    [System.Text.Encoding]::UTF8.GetString([System.Convert]::FromBase64String("NjE3Mzc0NjExMDgzNzU3MjY2Mjg2NzczNjE2OTcyMTA2Mzc1NzM=")) | % { 
        $a = $_; $s = ""; 1..($_.Length / 2) | % { $s+= [char]([int]$a.Substring($_*2-2, 2) + 36) 
    }; $s }

  3. Beitrag #3
    Themenstarter
    Vice Admiral
    Special
    Vice Admiral
    Avatar von X_FISH
    • Mein DC

      X_FISH beim Distributed Computing

      Aktuelle Projekte: distributed.net (seit 2000), BOINC (seit 2017)
      BOINC-Statistiken:

    Registriert seit
    03.02.2006
    Beiträge
    618
    Danke Danke gesagt 
    4
    Danke Danke erhalten 
    18
    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

  4. Beitrag #4
    Themenstarter
    Vice Admiral
    Special
    Vice Admiral
    Avatar von X_FISH
    • Mein DC

      X_FISH beim Distributed Computing

      Aktuelle Projekte: distributed.net (seit 2000), BOINC (seit 2017)
      BOINC-Statistiken:

    Registriert seit
    03.02.2006
    Beiträge
    618
    Danke Danke gesagt 
    4
    Danke Danke erhalten 
    18
    So, habe noch ein wenig gewerkelt und die Vorschau ist hier erreichbar:

    http://astra103kw.de/17/07/25/koffer...en_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

  5. Beitrag #5
    Commodore
    Special
    Commodore
    Avatar von Darkwolf

    Registriert seit
    04.07.2003
    Ort
    Berlin
    Beiträge
    497
    Danke Danke gesagt 
    80
    Danke Danke erhalten 
    5
    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
    P$
    Code:
    [System.Text.Encoding]::UTF8.GetString([System.Convert]::FromBase64String("NjE3Mzc0NjExMDgzNzU3MjY2Mjg2NzczNjE2OTcyMTA2Mzc1NzM=")) | % { 
        $a = $_; $s = ""; 1..($_.Length / 2) | % { $s+= [char]([int]$a.Substring($_*2-2, 2) + 36) 
    }; $s }

  6. Beitrag #6
    Themenstarter
    Vice Admiral
    Special
    Vice Admiral
    Avatar von X_FISH
    • Mein DC

      X_FISH beim Distributed Computing

      Aktuelle Projekte: distributed.net (seit 2000), BOINC (seit 2017)
      BOINC-Statistiken:

    Registriert seit
    03.02.2006
    Beiträge
    618
    Danke Danke gesagt 
    4
    Danke Danke erhalten 
    18
    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
    Geändert von X_FISH (29.08.2017 um 21:53 Uhr)

  7. Beitrag #7
    Commodore
    Special
    Commodore
    Avatar von Darkwolf

    Registriert seit
    04.07.2003
    Ort
    Berlin
    Beiträge
    497
    Danke Danke gesagt 
    80
    Danke Danke erhalten 
    5
    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/la.../#grid-options
    Geändert von Darkwolf (03.09.2017 um 12:15 Uhr)
    P$
    Code:
    [System.Text.Encoding]::UTF8.GetString([System.Convert]::FromBase64String("NjE3Mzc0NjExMDgzNzU3MjY2Mjg2NzczNjE2OTcyMTA2Mzc1NzM=")) | % { 
        $a = $_; $s = ""; 1..($_.Length / 2) | % { $s+= [char]([int]$a.Substring($_*2-2, 2) + 36) 
    }; $s }

  8. Beitrag #8
    Themenstarter
    Vice Admiral
    Special
    Vice Admiral
    Avatar von X_FISH
    • Mein DC

      X_FISH beim Distributed Computing

      Aktuelle Projekte: distributed.net (seit 2000), BOINC (seit 2017)
      BOINC-Statistiken:

    Registriert seit
    03.02.2006
    Beiträge
    618
    Danke Danke gesagt 
    4
    Danke Danke erhalten 
    18
    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

  9. Beitrag #9
    Commodore
    Special
    Commodore
    Avatar von Darkwolf

    Registriert seit
    04.07.2003
    Ort
    Berlin
    Beiträge
    497
    Danke Danke gesagt 
    80
    Danke Danke erhalten 
    5
    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
    P$
    Code:
    [System.Text.Encoding]::UTF8.GetString([System.Convert]::FromBase64String("NjE3Mzc0NjExMDgzNzU3MjY2Mjg2NzczNjE2OTcyMTA2Mzc1NzM=")) | % { 
        $a = $_; $s = ""; 1..($_.Length / 2) | % { $s+= [char]([int]$a.Substring($_*2-2, 2) + 36) 
    }; $s }

  10. Beitrag #10
    Themenstarter
    Vice Admiral
    Special
    Vice Admiral
    Avatar von X_FISH
    • Mein DC

      X_FISH beim Distributed Computing

      Aktuelle Projekte: distributed.net (seit 2000), BOINC (seit 2017)
      BOINC-Statistiken:

    Registriert seit
    03.02.2006
    Beiträge
    618
    Danke Danke gesagt 
    4
    Danke Danke erhalten 
    18
    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

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •