Infobox mit Rahmen

m.scatello

Hallo zusammen,

ich bräuchte mal einen Denkanstoss (oder auch mehr )

Es geht um so eine Info-Box, die ich im Anhang beigefügt habe. Wie ihr sehen könnt, hat die Box auf der linken Seite und oben einen hellgrauen Rahmen/Hintergrund und unte und recht einen dunkelgrauen Rahmen/Hintergrund. Das wäre ja nicht das Problem, aber wie bekomme ich die Grafik (der Kreis links oben) positioniert? Wenn ich mit Border arbeite, geht das nicht, da dann die Grafik in die weiße Fläche verschoben wird. Ich komme auf keine vernünftige Lösung, ist wohl zu warm heute.

Danke und Gruß

M.Scatello

html-seminar.de/woltlab/attachment/1945/

Arne Drews

~~Schau Dir die border Eigenschaften von CSS an, das ist kein Hexenwerk.~~

Sorry, nicht zu Ende gelesen...

Außer mit negativen margin-Werten wüsste ich das adhoc auch nicht.

djheke

So vielleicht.

HTML

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Infobox</title>
<style>
.info {
 display:flex;
 position:relative;
 padding-left:100px;
 height:200px;
 background:#ddd;
}

.info div {
 margin:20px 0;
 padding:10px;
 overflow:auto;
 flex-basis:100%;
 background:#fff;
 border-right:20px solid #aaa;
}

.info:before {
 content:"IT";
 position:absolute;
 width:60px;
 height:60px;
 background:yellow;
 color:red;
 left:10px;
 top:10px;
 border-radius:50%;
 font-size:32px;
 display: block;
 text-align: center;
 line-height:60px;
 border:10px solid red;
}

.info:after {
 content:"";
 position:absolute;
 left:100px;
 right:0;
 bottom:0;
 height:20px;
 background:#aaa;
}
</style>
</head>
<body>
<div  class="info">
<div>
<h2>Überschrift</h2>
<ul>
 <li>Aufzähling</li>
 <li>Aufzähling</li>
 <li>Aufzähling</li> 
</ul>
</div>
</div>
</body>
</html>

Alles anzeigen

m.scatello

djheke

Danke, aber du hast kein Image eingebaut.

Ich habe gerade mal etwa rumgespielt:

HTML

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <title>Test</title>
    <style>
       h3 { margin: 5px; }

      .box {
         max-width: 300px;
         border-top: 30px solid #f7f7f7;
         border-left: 50px solid #f7f7f7;
         border-bottom: 30px solid #eeeeee;
         border-right: 30px solid #eeeeee;
      }
      
      .box-item .icon {
        width: 60px;
        height: 60px;
        margin-left: -20px;
        margin-top: -20px;
      }
      
      .box-container {
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        -webkit-align-content: flex-start;
        -ms-flex-line-pack: start;
        align-content: flex-start;
        -webkit-align-items: flex-start;
        -ms-flex-align: start;
        align-items: flex-start;
     
    }
    
    .box-item: {
        -webkit-order: 0;
        -ms-flex-order: 0;
        order: 0;
        -webkit-flex: 0 1 auto;
        -ms-flex: 0 1 auto;
        flex: 0 1 auto;
        -webkit-align-self: auto;
        -ms-flex-item-align: auto;
        align-self: auto;
    }
   </style>
  </head>
  <body>
    <div class="box">
      <div class="box-container">
        <div class="box-item">
         <img class="icon" src="./images/icon.png"  alt="">
        </div>
        <div class="box-item">
          <h3>Eine einfache Überschrift</h3>
          <ul>
           <li>Text 1 Text 1 Text 1</li>
           <li>Text 2 Text 2 Text 2</li>
           <li>Text 3 Text 3 Text 3 </li>
          </ul>
        </div>
    </div>
    </div>
  </body>
</html>

Alles anzeigen

djheke

Ich habe mich an deinem Beispiel gehalten und war der Meinung, dass es auch ohne geht.Sorry!

Oder du nimmst negative Werte für margin oder top/left u.s.w.

Stef

Hey,

ich habe auch mal rumgetestet.

Ich habe versucht von außen das Bild an seine Position zu bekommen. Dazu habe ich einen Außencontainer noch erstellt, dann dem Innencontainer den Rahmen gegeben und das Bild vom Außenbereich auf die Position verschoben mittels absoluter Positionierung.

HTML

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <title>Test</title>
    <style>
       h3 { margin: 5px; }

      
      .box {
         max-width: 300px;
         border-top: 30px solid #f7f7f7;
         border-left: 50px solid #f7f7f7;
         border-bottom: 30px solid #eeeeee;
         border-right: 30px solid #eeeeee;

         margin: 0px 50px;
      }
      
      .iconBox{
          position: absolute;
          top: 5px;
          left: 50px;
      }

      .icon {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          
      }
      
      .box-container {
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        -webkit-align-content: flex-start;
        -ms-flex-line-pack: start;
        align-content: flex-start;
        -webkit-align-items: flex-start;
        -ms-flex-align: start;
        align-items: flex-start;
     
    }
    
    .box-item: {
        -webkit-order: 0;
        -ms-flex-order: 0;
        order: 0;
        -webkit-flex: 0 1 auto;
        -ms-flex: 0 1 auto;
        flex: 0 1 auto;
        -webkit-align-self: auto;
        -ms-flex-item-align: auto;
        align-self: auto;
    }
   </style>
  </head>
  <body>
  <div class="outerBox">
    <div class="iconBox">  
       <img src="drohnenkennzeichen.jpg" alt="" class="icon">
    </div>
   
    <div class="box">
      <div class="box-container">
        <div class="box-item">
         
       </div>
        <div class="box-item">
          <h3>Eine einfache Überschrift</h3>
          <ul>
           <li>Text 1 Text 1 Text 1</li>
           <li>Text 2 Text 2 Text 2</li>
           <li>Text 3 Text 3 Text 3 </li>
          </ul>
        </div>
    </div>
    </div>
  </div>
  </body>
</html>

Alles anzeigen

Grüße,

Stef

m.scatello

Ich danke euch.

djheke

Hallo ich nochmal.

Möglicherweise hast Du schon eine brauchbare Lösung gefunden, aber ein simplen Vorschlag hätte ich noch.

HTML

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Infobox</title>
<style>


.info {
display: flex;
/* Wird nur benötigt,wenn absolut positioniert werden soll
position: relative;
padding-left:100px;
*/
height:200px;
background:#ddd;
}


.info div {
margin-top:20px;
padding:10px;
overflow: auto;
flex-basis:100%;
background:#fff;
border-right:20px solid #aaa;
border-bottom:20px solid #aaa;
}


.info img {
display: inline-block;
width:70px;
height:70px;
padding:15px;
}


/* Absolut positioniert.


.info img {
display: inline-block;
width:70px;
height:70px;
position: absolute;
left:-10px;
top:-10px;
}
*/


</style>
</head>
<body>
<div  class="info">
<img src="it.png" alt="icon">
<div>
<h2>Überschrift</h2>
<ul>
<li>Aufzähling</li>
<li>Aufzähling</li>
<li>Aufzähling</li>
<li>Aufzähling</li>
<li>Aufzähling</li>
<li>Aufzähling</li>
<li>Aufzähling</li>
<li>Aufzähling</li>
<li>Aufzähling</li>
</ul>
</div>
</div>
</body>
</html>

Alles anzeigen

Vielleicht kannst Du das ja gebrauchen.

m.scatello

Werde ich mit morgen mal in Ruhe ansehen, danke.

Jetzt mitmachen!