Hallo,
ich wollte diesen snippet als grundgerüst für meinen slider benutzen.
nun habe ich festgestellt - der slider geht im IE nicht richtig. (z.b ladebalken geht nicht von L nach R wie bei allen anderen browsern) das sieht mir etwas buggy aus ... kann ich irgendwie testen ob der IE da probleme macht? irgendwie ein testool ob er alle codes versteht?
Super. Vielen Dank.
Vielen Dank.
Mit dem + kann ich also beliebig viele var und Angaben kombinieren.
Habe ich auch die Möglichkeit einen Unterordner für die html Seite anzugeben? Spaßeshalber versuche ich das auch gerade, wirkt mir als js Schussel etwas schwerer.
Also, ich bin nochmals etwas weiter gekommem.
Mein Problem nun ist, dass ich zwar ein Eingabefeld habe, welches auch ausgelesen wird, allerdings weis ich nicht wie ich das .html nun automatisch dahinter setzen kann.
$("#main").load((sucheingabe).html, function() {Da experimentiere ich gerade. :-/ Ich will eben, dass man nur testseite eingeben muss und nicht testseite.html. Ich habe erst versucht es in der var anzugeben, aber da habe ich nach 20 versuchen aufgegeben ....
var sucheingabe = $("input[name=eingabe].html").val();<!DOCTYPE html>
<html>
<head>
<style>
#main { border: 1px solid red; width: 600px;}
.container {
max-width: 1500px;
margin-left: auto;
margin-right: auto; }
.anzeigen{
text-decoration: none;
background: red;
color: aliceblue;
padding: 5px 10px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<label>EINGABE: <input type="text" name="eingabe"/></label>
<button>Anzeigen</button>
<section id="main">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem at similique iste, quas, quam quibusdam corporis aut quod voluptates illum praesentium aperiam provident eum. Neque, voluptatem omnis dolores odio dolore.
</section>
<script type="text/javascript">
jQuery("button").on("click", function() {
var sucheingabe = $("input[name=eingabe]").val();
console.log(sucheingabe);
$("#main").animate( {opacity:"0", filter:"alpha:opacity=0"}, 300, function() {
$("#main").load((sucheingabe), function() {
$("#main").animate( {opacity:"1", filter:"alpha:opacity=100"}, 300);
});
});
}); // jQuery Ende
</script>
</body>
</html>so, jetzt habe ich es doch,- nur ist die lösung eventuell nicht sauber?
var sucheingabe = $("input[name=eingabe]").val();
var html = ".html";
$("#main").animate( {opacity:"0", filter:"alpha:opacity=0"}, 300, function() {
$("#main").load((sucheingabe)+(html), function() {
$("#main").animate( {opacity:"1", filter:"alpha:opacity=100"}, 300);
});
});Ich mache das ja zum üben.
Kann ich so einen Code benutzen oder gibt es im Idealfall eine bessere Lösung dafür?
Ich habe gerade ein Tutorial nachgebaut, welches eine html-Seite in einen DIV laden soll.
Allerdings habe ich was falsch gemacht und weis nicht was. 
Kann eventuell jemand sagen was ich anders machen muss?
(Später will ich die Seite über ein Eingabefeld laden - also wenn man in das Feld Eingibt "dieseseite" soll dieseseite.html geladen werden. Ist eine Übungsaufgabe für mich selbst. Bissle mehr mit jQuery machen.)
Liebe Grüße und Danke.
EDIT - habe meinen Code geändert und jetzt geht es soweit. Ich lass mal alles offen und habe den Code aktuallissiert, da ich gerade versuche das Eingabefeld einzubauen und da eventuell eine neue frage kommt.
(Aktueller Code weiter unten)
Du hast mit Basi und MrMurphy schon zwei der mit besten User hier im Forum als Ratgeber erhalten, ich weis selbst - manchmal kommt es doch recht kritisch und hart vor, wenn jemand Antwortet. Dennoch, die Leute wollen auch helfen, sonst würden sie ja nicht antworten und sich Mühe machen alles zu lesen. 
Ich habe den Text etwas überflogen, aber meinst du nicht dass es besser ist, wenn du die Seite ganz neu erstellst? Wenn du jetzt alles kopierst bzw. hier und dort was änderst, wird es glaube nur Ärger geben. Wenn du alles neu machst (Remake), hast du automatisch Training im Webdesign und weist vorallem genau wie was gemacht worden ist und hast es leichter später Objekte zu bearbeiten. Du sollst die Sache ja in Zukunft auch pflegen. Der Bauherr sollte die Baustelle genau kennen. Dazu kannst du die Seite dann direkt für das SEO verbessern.
Ist deinem Arbeitgeber bewusst, dass dein Beruf nicht direkt was mit Webdesign zu tun hat? Der denkt sicher "Computer-Freak", der wird sowas können.
Also ich würde eine Vortbildung bzw einen Webdesign-Kurs vom Chef verlangen. Alernativ schreib doch eine Rechnung für Buchmateriel und bestell dir auf Amazon ect. gescheite Bücher bzw. DVDs, das wird er sicherlich investieren.
Rein taktisch würde ich das an deiner Stelle selber machen, so machst du dich wichtiger für die Firma! Klingt ja alb ob du neu dort bist, da schades sowas nicht.
P.s. CMS brauchst du wie es klingt doch nicht, wieso dann die Mühe dann?
Hallo,
danke.
Nunja, ich will es ja schon benutzen, aber zusammen mit Bootstrap eben. Ich dachte,ich kann einfach die columns von bootstrap benutzen und das alles in einem flexbox container. oder mach ich in dem fall die spaltenbreite auch über flexboxx befehle (flex:1 ect.) ?
hier nochmal der html
<div class="container">
<div style="" class="row col-xs-12 flex-container">
<div class="dicon item1 item col-lg-6">
<p>hey hey hey</p>Box 1></div>
<div class="dicon item2 item col-xs-6">
Box 2<p>hey hey hey</p><p>hey hey hey</p></div>
<div class="dicon item3 item col-xs-3">
Box 3</div>
<div class="dicon item4 item col-xs-3">
Box 4<p>hey hey hey</p></div>
</div>müsste dass so nicht eigentlich funktionieren?
.item{
margin: 5px;
flex-shrink: 1;
flex-basis: auto;
align-items: stretch;
}hmm... grübel 
Anhang: Muss ich denn mit Flexbox jedes mal den Margin in die Breitenangabe einberechnen? Also so:
flex: 1 calc(33.3333% - 10px);
margin: 5px;Geht dass nicht auch irgendwie automatisch? 
Hallo,
ich bin gerade auf Autoprefixer gestoßen und wollte Fragen was die Profis davon halten bzw. welcher denn empfehlenswert ist.
Aktuell habe ich folgenden auf meinem Platz 1:
doch eventuell hat jemand ja einen besseren, oder ihr ratet davon ab.
Danke
Hallo, ich hatte einen Denkfehler - die Hintergrundfarbe geht ja auch in den Padding.
Ich habe mich jetzt nochmals mit Flexbox auseinander gesetzt und glaube ich habe mehr oder weniger verstanden.
Nur ein Problem habe ich noch:
Wie kann ich dass genau mit dem Margin machen, wenn ich 2 Spalten mit 50% Breite habe? Wie in meinem Lerncode, habe ich zwei Bootstrap col auf 6 setzen wollen, dann ist aber durch den Margin kein Platz mehr und es sprint um. (Ich habe zwar dank euch funktionierende Codes, versuche es aber auch zu verstehen - und das mit dem Margn ist eben noch offen) Hier mein Code:
p.s. ist mein Reset-Code, den ich kopiert habe gut so, oder gibts da bessere?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test2</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link href="test3.css" rel="stylesheet">
</head>
<body>
<header id="top">
<div class="container">
<nav class="row col-xs-12">
<h1> Hallo Welt</h1>
<ul>
<li><a href="Nav Link">Haupseite</a></li>
<li><a href="Nav Link">Haupseite</a></li>
<li><a href="Nav Link">Haupseite</a></li>
</ul>
</nav>
</div>
</header>
<div class="wrapper">
<div class="container">
<div style="" class="row col-xs-12 flex-container">
<div class="dicon item1 item col-lg-6">
<p>hey hey hey</p>Box 1></div>
<div class="dicon item2 item col-xs-5">
Box 2<p>hey hey hey</p><p>hey hey hey</p></div>
<div class="dicon item3 item col-xs-3">
Box 3</div>
<div class="dicon item4 item col-xs-3">
Box 4<p>hey hey hey</p></div>
</div>
<br>
<hr>
<BR>
<!---
<div class="row">
<div style="background:blue;" class="col-md-4">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
<div style="background:orange;" class="col-md-4">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
<div style="background:red;" class="col-md-4">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
</div>
<div class="row">
<div style="background:yellow;" class="col-md-4">Hallo Box 1</div>
<div style="background:pink;" class="col-md-4">Hallo ich bin Box 2</div>
<div style="background:green;" class="col-md-4">Hallo und ich bin Box 3</div>
</div>
--->
</div>
</div>
</div>
</body>
</html>/* * { margin: :0px; padding: 0px;} */
/* ==========================================
CSS-Reset | Browservorgaben
========================================== */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
}
html { overflow-y: scroll}
/* ==========================================
Basisangaben
========================================== */
header#top{background:red; display:block; width: 100%}
.wrapper{padding:10px;}
.container{background-color: beige}
.flex-container{
display: flex;
flex-direction: row;
background: #000;
flex-wrap: wrap;
margin: 0px;
padding: 0px;
flex: 1 100%;
}
.flex-container div.dicon:nth-of-type(1){
align-items: stretch;
order: 1; }
.flex-container div.dicon:nth-of-type(2){
align-items: stretch;
order: 2;}
.flex-container div.dicon:nth-of-type(3){
align-items: stretch;
order: 3; }
.flex-container div.dicon:nth-of-type(4){
align-items: stretch;
order: 4;}
.item{margin: 5px; min-width: 100px;}
.item1{background-color:red; color:#fff; }
.item2{background-color:palegreen; }
.item3{background-color:blue; }
.item4{background-color:yellow;}p.s. wird mein html code nicht angezeigt, oder liegt es an meinem browser?
Hallo,
ich bin auf Dash gestoßen, welches es ja leider nur für Mac gibt.
Es gibt zahlreiche Alternativen wie z.B. Zeal, ich wollte jedoch fragen, ob ihr einen empfehlen könnt.
So wie ich es verstanden habe (konnte Dash ja nicht testen (windows)), kann man dort alle Befehle nachlesen - sollte man offline also mal einen code nicht ganz im kopf haben, kann man den rasch nachscheuen, richtig, oder?
gibts dass eventuell auch auf deutsch mit beschreibung? benutzt ihr sowas?
Du kannst zwar den Browser breiter und schmaler ziehen, aber auf der Seite hier: http://mobiletest.me/ kannst du schauen wie es auf einigen Geräten aussehen würde (die Seite muss dann natürlich online sein).
Hallo Leute,
ich bin seit Tagen im google und seminar.de unterwegs und dachte, ich sollte mir mal eine solide basis zulegen, also ein lernbuch und nachschlagewert. ich kann und möchte nicht immer all zu viel fragen hier.
was haltet ihr von dem buch bzw. kennt es jemand?
hauptsächlich will ich flexboxen besser kennen lernen und auch bootstrap bzw. responsive design allgemein. auch ein anständiges, sauberes grundgerüst buw. seitenaufbau will ich mir direkt angewöhnen.
würde mich über buchempfehlungen freuen bzw. eure meinung über das, was ich rausgesucht habe.
danke
So, jetzt aber, hier mein finaler code - wo fasst alles geht wie es soll.
das einzige problem ist, er nimmt den padding vom container nicht an, wohl wegen dieser zeile:
.container-flex > div[class*='col-'] div,.row-flex > div[class*='col-'] div {
width:100%;
}könnte mir da jemand noch helfen, dann habe ich 3 tage mission abgeschlossen der code ansich ist so hoffentlich auch ordentlich?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test2</title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="test2.css" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="row row-flex row-flex-wrap">
<div class="col-md-4 col-lg-8">
<div class="item">
asdasdaddasd
</div>
</div>
<div class="col-md-4 col-lg-4">
<div class="item">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.
</div>
</div>
<div class="col-md-4 col-lg-4">
<div class="item">
Duis pharetra varius quam sit amet vulputate.
</div>
</div>
<div class="col-md-8 col-lg-4">
<div class="item">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
dolor, in sagittis nisi.
</div>
</div>
<div class="col-md-4 col-lg-4">
<div class="item">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
dolor, in sagittis nisi.
</div>
</div>
<div class="col-md-12 col-lg-12">
<div class="item">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
dolor, in sagittis nisi.
</div>
</div>
</div><!--/row-->
</div> </div>
</body>
</html>html,body {
height:100%;
}
.wrapper{
padding:0px;
margin:10px 5px 20px 5px;
}
.container{
padding:15px;
border: 1px solid #ffffff;
background-color: #eeeeee;
-webkit-box-shadow: 0px 0px 12px -6px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 12px -6px rgba(0,0,0,1);
box-shadow: 0px 0px 12px -6px rgba(0,0,0,1);}
.row-flex, .row-flex > div[class*='col-'] {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex:1 1 auto;
}
.row-flex-wrap {
flex-flow: row wrap;
align-content: flex-start;
flex:1;
}
.container-flex > div[class*='col-'] div,.row-flex > div[class*='col-'] div {
width:100%;
}
.flex-col {
display: flex;
display: -webkit-flex;
flex: 1 100%;
flex-flow: row wrap;
}
.item{
background: #fff;
border: 1px solid red;
margin:2px;
}Hallo
Killerbear,
vielen Dank für deine Antwort.
Werde deine Lösung gleich mal genau anschauen.
So grob habe ich deine Erklärung verstanden, werde die wie gesagt noch in Ruhe nachbauen bzw. anschauen.
Meine Momentane Lösung mit:
<div class="clearfix visible-md-block"></div>
funktioniert mit dem "float "problem" ebenfalls, kann man sagen welche "besser" ist, oder führen viele Wege nach Rom und es ist egal? Dein Coe sieht auf jedenfall sauberer und übersichtlicher aus, daher werde ich wohl den auch so benutzen.
So, nun muss ich nur noch die "boxen" auf einheitliche, vertikale Höhe brinen und mit display:flex experimentieren. Oder sollte ich sowas dann mit display:table machen?
Eine alternative Möglichkeit wären die besagten flexboxen.
Dadurch kann man auch erreichen, dass die nebeneinander stehen Boxen gleich hoch sind.
http://codepen.io/Killerbear_02/pen/ZOLxdG
Kann ich die Boxen über das Bootstrapgrid nicht gleich hoch setzen? Also im Multi-Column Layouts? Ich konnte es bis jetzt wie gesagt nur für eine der Breakpoints erreichen, in dem ich einen div mit display:flex um alles gezogen habe.
EDIT: Ich sehe gerade, dass dein Beispiel mit Flexbox auch das Bootstrap Grid benutzt, ich dachte dass kann man nicht kombinieren bzw. es sind eben 2 unterschiedliche Wege. Nochmals danke, werde alles nun genau nachvollziehen versuchen. Über weitere Hilfe bzw Tipps und Tricks freue ich mich natürlich sehr.
Liebe Grüße
Eine Frage noch zu dem Thema:
Wie bekomme ich denn das Margin zwischen den div-boxen hin? Wenn ich dass so mache:
@media all and (min-width: 992px) {
.row div {
flex: 1 33.3333%;
margin: 5px;
}
}dann stellt er automatisch von 3 auf 2 spalten um, - wohl weil es zu wenig Platz gibt, da die 3 x 33,333 100% ergeben und der margin dann kein Platz hat.
Ich würde gerne einen genauen Wert in Pixel benutzen - sonst würde ich z. B: flex: 1 30%; einstellen, dann hätte ich ja 10% Platz für den Abstand. Ich schätze aber, das geht irgendwie auch anders, dass ich pixel benutzen kann? Irgendwas mit "auto"?
Liebe Grüße.
GIbt es eigentlich eine Kaffe-Kasse im Forum?
P.s. wäre es denn okay, wenn ich manche Elemente (einfachere) mit Bootstrap mache - und wieder andere mit Flexboxen? Oder würdet ihr wenn dann alles entweder oder machen? Zwecks "Sauberkeit" und so.
Das ist glaube nicht ganz die Lösung, dennoch danke.
Ich habe schon versucht mit margin:9999px und overflow:hidden: zu arbeiten, aber alles Sackgassen, oder falsch umgesetzt.
Dazu ist das mit dem Float (neue reihe für alle elemente (siehe bild 1) nicht behoben.
So, ich denke Anfänger wie ich, werden eventuell die gleiche Frage haben. Daher meine aktuelle Lösung für den Zeilenumbruch:
<div class="row">
<div style="background:blue;" class="col-sm-6 col-md-4"><p>eu, pretium quis, sem. Nulla consequat m</p><p>eu, pretium quis, sem. Nulla consequat m</p></div>
<div style="background:black;" class="col-sm-6 col-md-4"><p><p>eu, pretium quis, sem. Nulla consequat m</p></p></div>
<div class="clearfix visible-sm-block"></div>
<div style="background:pink;" class="col-sm-6 col-md-4"><p><p>eu, pretium quis, sem. Nulla consequat m</p><p>eu, pretium quis, sem. Nulla consequat m</p><p>eu, pretium quis, sem. Nulla consequat m</p></p></div>
<div class="clearfix visible-md-block"></div>
<div style="background:gray;" class="col-sm-6 col-md-4"><p><p>eu, pretium quis, sem. Nulla consequat m</p><p>eu, pretium quis, sem. Nulla consequat m</p><p>eu, pretium quis, sem. Nulla consequat m</p><p>eu, pretium quis, sem. Nulla consequat m</p></p></div>
<div class="clearfix visible-sm-block"></div>
<div style="background:green;" class="col-sm-6 col-md-4"><p><p>eu, pretium quis, sem. Nulla consequat m</p></p></div>
<div style="background:purple;" class="col-sm-6 col-md-4"><p><p>eu, pretium quis, sem. Nulla consequat m</p><p>eu, pretium quis, sem. Nulla consequat m</p></p></div>
<div class="clearfix visible-md-block"></div>
<div class="clearfix visible-sm-block"></div>
</div>Jetzt noch das Problem mit dem display:flex. Mal sehen ob ich es schaffe, oder ob jemand eine Hilfe geben kann.
Hallo,
ich habe folgende Frage zu Bootstrap, die ich mir über google bzw. youtube leider noch nicht beantworten konnte.
Was ich möchte:
Alle Spalten sollten die gleiche, maximale höhe haben (display:flex).
Das Problem:
Ich bekomme es nicht hin, display:flex einzuarbeiten, dass es für desktop und medium funtkioniert, ich schaffe immer nur eins von beiden.
Dazu habe ich die frage, wie ich es machen muss, dass bootstrap immer eine neue zeile anfängt, wenn ein umbruch stattfindet.
Hier ein Foto wie es aktuell ausssieht, wenn ich von desktop zu medium wechsel:
[Blockierte Grafik: http://250kb.de/u/160625/j/3Jn2t9zK5E8F.jpg]
So sollte bzw. möchte ich es jedoch haben:
[Blockierte Grafik: http://250kb.de/u/160625/j/Qj44TufCHCvl.jpg]
ich glaube es muss irgendwie mit dem float was zu tun haben, jedoch habe ich nach einigen wilden versuchen keine lösung gefunden.
Des weiteren wäre es noch ideal, wenn ich die einzelnen spalten auf einheitliche höhe bringen kann. Wie gesagt, weis ich nicht, wie ich display:flex einsetzen muss. wenn ich einen div mit diesem atribut um die einzelnen spalten setze, dann geht dass wie gesagt nur auf einem mediabreakpoint, nicht auf allen.
Hier ein bild wie ich es am ende haben will:
[Blockierte Grafik: http://250kb.de/u/160625/p/3xPrD1wLUKBe.png]
[Blockierte Grafik: http://250kb.de/u/160625/j/doDuQdhemXlb.jpg]
Ich würde mich über Hilfe sehr freuen. Hier mein Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Debugger</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link href="test.css" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="col-xs-12">
<div style="background:black;" class=" col-xs-12 col-sm-6 col-lg-4">
<p>eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, ali
eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae,
eleifend ac, enim. Aliquam lorem ante, dapibus </p></div>
<div style="background:red;" class=" col-xs-12 col-sm-6 col-lg-4">
<p>end tellus. Aenean leo ligula, porttitor eu, consequat vitae,
eleifend ac, enim. Aliquam lorem ante, dapibus </p></div>
<div style="background:green;" class=" col-xs-12 col-sm-6 col-lg-4">
<p>eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede m felis eu pede mollis p
mper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae,
eleifend ac, enim. Aliquam lorem ante, dapibus</p></div>
<div style="background:yellow;" class=" col-xs-12 col-sm-6 col-lg-4">
<p> vitae, justo. Nullam dictum felis eu pede mollis p
mper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae,
eleifend ac, enim. Aliquam lorem ante, dapibus </p></div>
</div>
</div>
</div>
</body>
</html>.wrapper{
padding:0px;
margin:10px 5px 20px 5px;
}
.container{
padding:15px;
border: 1px solid #ffffff;
background-color: #eeeeee;
-webkit-box-shadow: 0px 0px 12px -6px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 12px -6px rgba(0,0,0,1);
box-shadow: 0px 0px 12px -6px rgba(0,0,0,1);}p.s. mit flexbox wüsste ich es dank MrMurphy, aber ich habe die ganze restliche seite jetzt mit bootstrap, und dachte dass müsste doch damit auch gehen. liebe grüße an alle
Okay danke. Ich dachte nur, dass ich so über medias z.b. die anordnung verschieben kann - dass z.b ein element im mobile unter einem steht, was im desktop vorher steht. nochmals danke. (ja, flexbox habe ich sowas gesehen, habe aber gedacht es ibt was "leichtes" wie der z-index)
Danke, da habe ich ne Menge zum lesen!
Ach, kleine Zwischenfrage, dann muss ich kein neues Thema starten.
Das HTML baut sich ja nach der Reihe im Quellcode auf - also von oben nach unten. Gibt es denn einen Code, dass z.b. die letze Zeile im Quellcode ganz oben auf der Webseite erscheint? z. b.
<div class="1"> ich bin ganz unten</div>
<div class="2"> ich bin ganz oben</div>und auf der Webseite ist "ganz oben" trotz dass es im code unten steht, oben?
Hallo,
DANKE! genau sowas habe ich gebraucht! du hast 7-8 stunden suche nun beendet! 
vielen vielen vielen DANK!
gibt es zu dem thema ein tutorial, dass ich dass besser verstehe und später dann auch selbst bauen kann? flexbox und display:table waren ja alles falsche ansätze.
p.s. kann ich eigentlich sagen: z. b. "div 1" ist ein parent und "div 2" (kind) soll die gleiche höhe haben wie "div 1"? geht sowas auch?
Hallo,
ich habe folgende Frage:
Ich habe 2 Div-Elemente mit display:flex auf gleiche Höhe gebracht.
Nun möchte ich aber innerhalb dieser zwei, nennen wir sie Haupt-Divs, weitere divs einfügen z. B. Bildergalarie ect. Diese sollten aber vertikal auf der gleichen Höhe sein. Hier ein Bild:
[Blockierte Grafik: http://250kb.de/u/160624/j/5qvuoUwrA5NV.jpg]
kann ich sagen, der rote div ist die basislinie und der schwarze soll auf die selbe höhe kommen bzw. eben dort anfangen?
Der schwarze Div im rechten Div, soll auf die gleiche Höhe wie der rote Div kommen, dass es ordentlicher aussieht.
Die Frage ist, kann ich denn innerhalb von 2 flex divs, eine solche Anordnung machen, oder muss ich jetzt mehrere display-flex divs untereinander anlegen?
Hier mein Code:
<!---------- Ausziehtechnik start ------------------>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="col-xs-12 row-m">
<div class="display-flex">
<!---------------------------->
<div class="margin-first display-flex pad-r col-xs-12 col-sm-6">
<div style="width:100%;" class="basic-box">
<h1>Lackschadenfreie Ausbeultechnik</h1>
<p>
adshdahsd jkask asgkdsag aks dgadg ashdg ah dgasgashkg dahka gs kasg ahkgd ahkgd asgd haksg dasdg ahsd ghasg ashg das
</p>
<div style="background:red;" class="display-flex">
hhhhhhhhhhhhhhhhhhhhhhhhh dasd sd <br><br>hhh dasd sd hhh dasd sd
hhhhhhhhhhhhhhhhhhhhhhhhh dasd sd <br><br>hhh dasd sd hhh dasd sd
</div>
<hr>
<p>
Wir beseitigen Dellen ohne Lackierung. Bereits seit Jahren wenden wir diese Art des Ausbeulens
bei Parkschaden und Hagelschäden erfolgreich an.
Durch Hebeln mit speziellen Werkzeugen werden Dellen ohne Beschädigung des Lacks entfernt.
Diese Technik wird besonders bei Hagelschäden angewandt.
</p>
<p>
<b>Anwendungsgebiete:</b><br>
Leichter Karosserieschaden • Hagel bzw. Unwetterschäden • Ein und Ausparkschaden • Leichte Unfallschäden.
</p>
</div>
</div>
<!---------------------------->
<div style="" class="margin-first display-flex pad-l col-xs-12 col-sm-6">
<div style="width:100%;" class="basic-box">
<h1>Ausziehtechnik</h1>
<div style="background:black; color: #fff;" class="display-flex">
jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj
hhhhhhhhhhhhhhhhhhhhhhhhh dasd sd <br><br>hhh dasd sd hhh dasd sd
hhhhhhhhhhhhhhhhhhhhhhhhh dasd sd <br><br>hhh dasd sd hhh dasd sd
</div>
<hr>
<p>
Teile-Instandsetzung ohne Neuteilbeschaffung. Diese Technik ist eine innovative Reparatur-Methode im Bereich
der Karosserieinstandsetzung. Durch Hebeln mit der Zugbrücke lassen sich Dellen kontrolliert und zielgenau
rückverformen. Anschliessend wird das reparierte Teil lackiert.
</p>
<p>
<b>Unsere Leistung:</b><br>
Karosserieschäden jeglicher Art • Innovative Reparatur-Methode!
</p>
</div>
</div>
</div>
</div>und der css:
.display-flex{display:flex;}
@media only screen and (min-width: 768px) and (max-width: 992px){
.img-container {padding:0px 15px 5px 0px; margin:0px;}
.block-container{margin-bottom:15px;}
.display-flex{display:flex;}}
@media only screen and (max-width: 768px){
.display-flex{display:block;}}