dynamisches div mittig ausgerichtet

chickenburner · 01.05.2015

Hallo Zusammen,

ich habe folgendes Problem:

Um es zu veranschaulichen hier zwei Grafiken, da ich nicht weiss, wie ich es am besten in Worte fassen soll:

So soll es aussehen bei einer größeren Auflösung:

So soll es bei einer kleinere Auflösung aussehen:

Die divs sollen mittig immer gleich ausgerichtet werden, jedoch sollen die Divs zu den verschiedenen Seiten bis an den Rand gehen. Kann mir jemand helfen, wie ich das am besten umsetze?

Und mein weiteres Problem ist noch die schräge Kante.
Ich kenne Sekt zum neigen. Allerdings neigt sich der div dadurch auf beiden Seiten. Gibt es eine Möglichkeit nur eine Seite zu neigen.

Ich würde mich riesig über Hilfe freuen.

Vielen Dank und Beste Grüße.

Enigmon · 01.05.2015

Hallo..

das schaffst dun indem du 2D Transformationen verwendest.
In dem Fall skewX oder matrix().

Hier ist die Erklärung:
http://www.w3schools.com/css/css3_2dtransforms.asp

und hier das Bsp. mit skewX():
http://www.w3schools.com/css/tryit.asp?filename=trycss3_transform_skewx

LG
Thomas

Nachtrag:
hab das Beispiel mal schnell umgeschrieben, benötigt aber noch Feintuning!!!:

Code:

<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 300px;
    height: 100px;
    background-color: yellow;
    border: 1px solid black;
}

div#myDiv {
    -ms-transform: skewX(-20deg); /* IE 9 */
    -webkit-transform: skewX(-20deg); /* Safari */
    transform: skewX(-20deg); /* Standard syntax */
}
#test{
    -ms-transform: skewX(20deg); /* IE 9 */
    -webkit-transform: skewX(20deg); /* Safari */
    transform: skewX(20deg); /* Standard syntax */
    width: 80%;
    padding: 10px;
    margin: auto;
    background-color: transparent;
    border: none;
}

</style>
</head>
<body>

<p>The skewX() method skews an element along the X-axis by the given angle.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
<div id ="test">
This div element is skewed 20 degrees along the X-axis.
</div>
</div>

</body>
</html>

Enigmon · 01.05.2015

Eine weitere Möglichkeit ist, das Ganze mit Backgroundimages zu lösen:
Eines für den geraden Hintergrund und eines für den schrägen Rand.

Hier ein gutes Beispiel:
http://www.w3schools.com/css/css3_backgrounds.asp

chickenburner · 01.05.2015

Hallo Thomas,

vielen Dank für deine Antwort und Mühe.

Wie gesagt, die Skew-Methode kenne ich, allerdings werden hier beide Seiten geneigt. Ich möchte aber gerne nur eine Seite neigen.

Auch dir vielen Danke Enigmon!

Ja, wenn ich keine Lösung finde, wird es wohl darauf hinauslaufen.

Kann mir denn jemand auch beim ersten Problem helfen?

Vielen Dank euch!

Beste Grüße

dn3d_fanboy · 01.05.2015

Da ich für Überschriften genau dasselbe gesucht habe:
:before sollte dir helfen

CSS:

h1
{font-size: 30px;
margin: 0 0 25px 0;
color: #fff;
font-family: Arial, sans-serif;
font-weight: 500;
background: #48759c;
display: table;
padding: 0 10px;
padding-left: 10px;
padding-right: 35px;
position: relative;}

h1:before {
width: 0;
content: '';
position: absolute;
top: 0px;
right: 0px;
border-bottom: 47px solid #000;
border-left: 20px solid #48759c;
}

Musst es halt noch entsprechend anpassen. Und für die Anpassungen bei den verschiedenen Auflösungen schaust du dir am besten mal CSS Media Queries an.

chickenburner · 01.05.2015

Hallo dn3d_fanboy,

vielen Dank für deine Hilfe. Bin echt begeistert von der Hilfsbereitschaft hier im Forum! :daumenhoch

Bei deiner Lösung habe ich das Problem, dass ich ein Hintergrundbild habe. Daher sehe ich dann nur eine schwarze Ecke und nicht den Hintergrund.

Zu Media Queries: Gute Idee, jedoch lässt sich das nicht auf einzelne DIV´s anwenden, sofern ich da richtig informiert bin. Hatte zuvor die Divs mit folgendem Code versehen:

position:absolute;
left: 0px;
top: 200px;
width: 65%;

Dadurch gehen die DIV´s bis zum Rand, jedoch kann ich sie dadurch nicht mittig ausrichten, sprich, dass der Text genau in der Mitte liegt, so wie der restliche Hauptcontent, der dann folgt.

Wenn jemand noch einen guten Lösungsansatz hat, würde ich mich sehr freuen!

Beste Grüße

patrick_l · 01.05.2015

chickenburner schrieb:
Zu Media Queries: Gute Idee, jedoch lässt sich das nicht auf einzelne DIV´s anwenden, sofern ich da richtig informiert bin.

Da liegst du falsch

Media Queries sind Device bzw. eher Ausgabe spezifische Angaben. Damit kannst du jedes beliebiges Elements mit neuen Werten überschreiben. In dem Zusammenhang sei auch die Mobile first Herangehensweise im Responsive Webdesign (RWD) erwähnt.

Setze ein Media Querie, selektiere deine gewünschte Division und Formatiere diese mit neuen Werten. Hier ein kleines Beispiel:

CSS:

@media only screen and (min-width: 48em) and (max-width: 62.188em) {
  div#example {
   Eigenschaft:Wert;
  }
}

@media only screen and (max-width:47.938em) {
  div#example {
   Eigenschaft:Wert;
  }
}

Davon ab würde ich es entweder mit CSS3 und 2D Transform oder mit Hilfe von SVG lösen. Dazu einfach mit der Pseudo-Klasse :before oder :after arbeiten oder im Markup den Inhaltsbereich anders (weiter) "verschachteln". Möglichkeiten gibt es genug. Dank HTML5 und primär CSS3 immer mehr.

Liebe Grüße, Patrick

Enigmon · 01.05.2015

Nochmal was von mir.
Probier den Code mal aus ob er dir so gefällt:

Code:

<!DOCTYPE html>
<html>
<head>
<style>

.skew {
    width: 70%;
    float:right;
    margin-right: -50px;
    background-color: black;
    color: white;
    border: 2px solid gray;
    -ms-transform: skewX(-10deg); /* IE 9 */
    -webkit-transform: skewX(-10deg); /* Safari */
    transform: skewX(-10deg); /* Standard syntax */
}

.reSkew {
    -ms-transform: skewX(10deg); /* IE 9 */
    -webkit-transform: skewX(10deg); /* Safari */
    transform: skewX(10deg); /* Standard syntax */
    width: 70%;
    padding: 10px;
    padding-left: 10%; padding-right: 20%;
    background-color: transparent;
    border: none;
    text-align: left;
}

.clear{
    clear: both;
    margin: 20px 0;
}
.headline_skew{
    width: 60%;
    height: 2em;
    background-color: #4A769B;
    border: 1px solid gray;
    float: left;
    margin-left: -50px;
    -ms-transform: skewX(-20deg); /* IE 9 */
    -webkit-transform: skewX(-20deg); /* Safari */
    transform: skewX(-20deg); /* Standard syntax */
}

.headline_reskew{
    text-align: right;
    padding: 5px 20px 5px 10px ;
    font-weight: bold;
    font-size: 1.3em;
    color: white;
    -ms-transform: skewX(20deg); /* IE 9 */
    -webkit-transform: skewX(20deg); /* Safari */
    transform: skewX(20deg); /* Standard syntax */
}

@media only screen and (min-width: 30em) and (max-width: 60em) {
    .reSkew{
        padding-right: 20%;
    }
    .skew{
        width:80%;
    }

}

@media only screen and (max-width: 40em) {
    .skew{
        width:85%;
    }
    .headline_skew{
        width: 63%;
    }
}

@media only screen and (max-width: 30em) {
    .skew{
        width:90%;
    }
    .headline_skew{
        width: 70%;
    }
}

</style>
</head>
<body>
<div class="clear">
    <div class="headline_skew">
        <div class="headline_reskew">&Uuml;berschrift</div>
    </div>
</div>

<br><br>
<div class="clear">
    <div class="skew">
        <div class="reSkew">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>

</body>
</html>

Es ist nur ein Ansatz.

LG
Thomas

chickenburner · 02.05.2015

Vielen Dank Patrick_l für deine hilfreiche Antwort und auch dir, Enigmon, ein sehr großes Danke. Du hast dir ja echt Mühe gegeben! Vielen Dank!

Hut ab vor euch für euren Einsatz!

Enigmon: Das ist eine gute Idee. Leider erhalte ich dadurch einen Scrollbalken, da die schräge einfach aus dem Bild ist. Für den User ist es vielleicht tatsächlich aus dem Auge, aus de Sinn, aber ich wollte es gerne was sauberer. Hab es nun, wie folgt umgesetzt:

Code:

<!DOCTYPE html>
<html>
<head>
<style>
.cta1 {
    background : #386892;
    position:absolute;
    left: 0px;
    top: 220px;
    width: 51%;
    border: solid 1px #7d9eba;
    padding-right: 100px;
    border-right: 0;
    padding-top:5px;
    padding-bottom:5px;
   

}
.cta1:after {
  content: "";
  display: block;
  background-color: #386892;
  border: solid 1px #7d9eba;
  border-left: 0;
  width: 40px;
  height: 100%;
  position: absolute;
  z-index: -1;
  top: -1px; /* pull it up because of 1px border */
  right: -20.5px; /* 35px / 2 */
  transform: skew(-30deg);
  -o-transform: skew(-30deg);
  -moz-transform: skew(-30deg);
  -webkit-transform: skew(-30deg);
 
}

.cta2 {
    width : 500px;
    background : #1F1F1F;
    position:absolute;
    right: 0px;
    top: 280px;
    width: 85%;
    border-style:solid;
    border-width:thin;
    border-color:#5A5A5A;
    padding:10px;
    border-left: 0;
}
.cta2:before {
  content: "";
  display: block;
  background-color: #1F1F1F;
  border: solid 1px #5A5A5A;
  border-right: 0;
  width: 170px;
  height: 100%;
  position: absolute;
  z-index: -1;
  top: -1px; /* pull it up because of 1px border */
 
  left: -83.5px; /* 35px / 2 */
  transform: skew(-30deg);
  -o-transform: skew(-30deg);
  -moz-transform: skew(-30deg);
  -webkit-transform: skew(-30deg);
}
@media only screen and (max-width:40em) {
.cta2 {
    width: 96%;
}
}
@media only screen and (min-width: 40em) and (max-width:52em) {
.cta2 {
    width: 91%;
}
}
@media only screen and (min-width: 52em) and (max-width:62em) {
.cta2 {
    width: 85%;
}
}
@media only screen and (min-width: 62em) and (max-width:72em) {
.cta2 {
    width: 80%;
}
}

@media only screen and (min-width: 72em) and (max-width: 80em) {
.cta2 {
    width: 76%;

}
}
@media only screen and (min-width: 80em){
.cta2 {
    width: 72%;
}
}

#cta1_text {
    color:#FFFFFF;
    font-size: 150%;
    float: right;
    font-weight: 700;
   
}

#cta2_text {
    color:#FFFFFF;
    font-size: 100%;
    float: left;
    margin: 5px;
    max-width: 600px;
    line-height:1.8;
   
}
</style>
</head>
<body>


<div class="cta1">

<div id="cta1_text">
Überschrift
</div>

</div>

<div class="cta2">

<div id="cta2_text">
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>
</body>
</html>

Für Alle, die diesen Code verwenden möchten. Ihr müsst mit left bzw. right und der Breite etwas spielen, um es anzupassen.

Großen Dank nochmal an euch. Das war wirklich eine tolle Hilfe :daumenhoch

Enigmon · 02.05.2015

Ups..

Das habe ich doch tatsächlich übersehen.

LG
Thomas