Positionierungs eines Bildes mit position:absolute

[nils.rochholl]

Hallo zusammen,

ich habe leider ein kleines Problem mit einer Positionierung.

im Folgenden der Code für die problematische Sache:

HTML:

<section class="contactbox ce_rsce_contactbox">
 
<img src="files/fotolia_62814684.jpg" width="500" height="350" alt="">
 
<p><h3></h3>
<h4>0176/65123789</h4>
Ihre Express-Schnittstelle</p>
</section>

CSS:

.contactbox,
#content .contactbox {
	position: relative;
	float: right;
	width: 39.13043%;
	margin: 36px 0 36px 4.34783%;
	padding: 4.34783%;
	text-align: center;
	background: white;
	-webkit-box-shadow: 0 0 0 1px #dfdfdf, 0 0 9px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0 0 0 1px #dfdfdf, 0 0 9px rgba(0, 0, 0, 0.2);
	box-shadow: 0 0 0 1px #dfdfdf, 0 0 9px rgba(0, 0, 0, 0.2);
}
 
.modernizr-no-boxshadow .contactbox,
.modernizr-no-boxshadow #content .contactbox {
	border: 1px solid #dfdfdf;
}
 
.contactbox:before,
#content .contactbox:before {
	content: "";
	position: absolute;
	left: 11.11111%;
	top: 0;
	width: 77.77778%;
	height: 3px;
	background: #ec8624;
}
 
.contactbox img,
#content .contactbox img {
	/*position: absolute;*/
	left: 11.11111%;
	width: 77.77778%;
	height: auto;
	top: 3px;
	margin: 0 7.14286% 0 0; /* 0 7.14286% 0 0*/
}
 
.contactbox h3,
#content .contactbox h3 {
	margin: 6px 0 12px 0;
	font-size: 12px;
	font-weight: normal;
	color: gray;
}
 
.contactbox h4,
#content .contactbox h4 {
	/*margin: 0;*/
	font-size: 21px;
	font-weight: normal;
	letter-spacing: 0;
	word-spacing: 0;
	color: #ec8624;
	text-transform: uppercase;
}
 
.contactbox h4:before,
#content .contactbox h4:before {
	font: 40px/1 "RockSolid Icons";
	content: "\e0e6";
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
	text-rendering: geometricPrecision;
	text-indent: 0;
 	display: inline-block;
 	position: relative;
 	display: block;
 	text-align: center;
}
  
.contactbox p,
#content .contactbox p {
	position: relative;
	margin: 0;
	font-size: 16px;
	color: gray;
}

Wenn ich bei contactbox img die "position: absolute" einblende, wird das Bild schön angezeigt, aber es liegt über dem Text. Die Position des Bildes nach oben soll genau so sein.

Wenn position: absolute deaktiv ist (siehe Code oben), dann sieht es so aus.

Kann mir hier jemand helfen?

VG Nils

[Klawischnigg]

Hi there,

ich habe leider ein kleines Problem mit einer Positionierung.

[jede Menge nötiger und unnötiger Text gelöscht...]

Kann mir hier jemand helfen?

Wie soll's denn ausschauen???

[nils.rochholl]

Wie soll's denn ausschauen???

so soll es aussehen.

LG Nils

[Steel (ohne Reg)]

Hi,

oehm... So spontan wuerd ich sagen, du willst die section positionieren und nicht das Bild. Aufgrund des fehlenden Drumrums, wuerd ich mal drauflosraten, dass Du auch gar nicht absolut positionieren willst. Absolute Positionierung nimmt das Element aus dem Fluss. Kannste Dir vorstellen wie ein Aufkleber den Du ueber den anderen Kram klebst. Wenn Da kein Platz fuer da ist, wird was verdeckt. Ich rate nochmal: vielleicht willst Du eigentlich float (http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Positionierung/float) verwenden? Ich bin mir nicht sicher, da du anscheinend nur das Element zeigst, das positioniert werden soll, aber nicht, was drumrum ist.

Gruss, Steel

[Klawischnigg]

Wie soll's denn ausschauen???

so soll es aussehen.

Ganz versteh' ich Dein Problem noch immer nicht, da ist schon wieder ein Bild im Bild, aber anyway, wenn Du das Drumherum absolut positionierst (Wovon wie schon geschrieben eher abzuraten ist), wobei ich mit Drumherum den Rahmen meine, dann kannst Du ja im Rahmen auch alles absolut positionieren. Dann setzt die eben das Bild zB auf position:absolute; top:0px; left:30px; und dem Darunter gibst Du dann eben ein unsichtbares "Drumherum", mit span bspweise und positionierst position:absolute; top:(Höhe des Bildes + ein paar Pixel)px; left:30px;

Bleibt die Frage, warum Du überhaupt diese Art der Positionierung gewählt hast. Auf Deinem Bildschirm mag das ja noch gut aussehen, aber auf einem mobilen Device oder auf einem kleineren Viewport kann bei absoluter Positionierung bald einmal etwas aus "dem sichtbaren Rahmen" fallen...

[Matthias Apsel]

Hallo nils.rochholl,

<section class="contactbox ce_rsce_contactbox">
 
<img src="files/fotolia_62814684.jpg" width="500" height="350" alt="">
 
<p><h3></h3>
<h4>0176/65123789</h4>
Ihre Express-Schnittstelle</p>
</section>

Falls das tatsächlich der HTML-Code ist, so ist dieser kaputt, p darf keine Überschriften enthalten. Zur Problemstellung trägt dies jedoch möglicherweise nicht bei, dennoch solltest du valides Markup schreiben. Ein Validator hilft, Fehler zu erkennen.

Bis demnächst
Matthias

[nils.rochholl]

Hallo Matthias,

<section class="contactbox ce_rsce_contactbox">
 
<img src="files/fotolia_62814684.jpg" width="500" height="350" alt="">
 
<p><h3></h3>
<h4>0176/65123789</h4>
Ihre Express-Schnittstelle</p>
</section>

Falls das tatsächlich der HTML-Code ist, so ist dieser kaputt, p darf keine Überschriften enthalten. Zur Problemstellung trägt dies jedoch möglicherweise nicht bei, dennoch solltest du valides Markup schreiben. Ein Validator hilft, Fehler zu erkennen.

ich hatte es tatsächlich auch vorher so:

<h3></h3> <h4>0176/65123789</h4> <p>Ihre Express-Schnittstelle</p>

aber dies hatte auch nicht geklappt.

LG Nils

[Gunnar Bittersmann]

@@nils.rochholl

<section class="contactbox ce_rsce_contactbox">

ich hatte es tatsächlich auch vorher so:

<h3></h3> <h4>0176/65123789</h4> <p>Ihre Express-Schnittstelle</p> aber dies hatte auch nicht geklappt.

Das ist auch nicht besser. Ein leeres h3-Überschriftenelement? Wozu? Abstände erzeugst du mit CSS.

Eine Telefonnummer ist wohl auch keine Überschrift, also kein h4-Element. <a href="tel:[phone]">0176/65123789</a> wäre passend, dann kann die Telefonnummer (entsprechendes Gerät vorausgesetzt) per Click gewählt werden.

Das Ganze ist auch kein Abschnitt, der als section auszuzeichnen wäre, sondern vermutlich address.

LLAP 🖖

[Gunnar Bittersmann]

@@nils.rochholl

HTML:

Dau hatte ich gerade schon was angemerkt.

CSS:

.contactbox:before,
#content .contactbox:before {
	content: "";
	position: absolute;
	left: 11.11111%;
	top: 0;
	width: 77.77778%;
	height: 3px;
	background: #ec8624;
}

Das ist unsinnig. Den orangenen Balken oberhalb des Bildes, der genauso breit wie dieses sein soll, bekommst du als oberen Rahmen hin:

.contactbox img { border-top: 3px solid #ec8624 }

LLAP 🖖

[Gunnar Bittersmann]

@@nils.rochholl

.contactbox,
#content .contactbox {

Wozu zweimal, als .contactbox allgemein und nochmal als .contactbox innerhalb von #content?

-webkit-box-shadow: 0 0 0 1px #dfdfdf, 0 0 9px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 0 0 1px #dfdfdf, 0 0 9px rgba(0, 0, 0, 0.2); box-shadow: 0 0 0 1px #dfdfdf, 0 0 9px rgba(0, 0, 0, 0.2);

Weg mit -webkit-box-shadow und -moz-box-shadow! Alle Browser, die box-shadow unterstützen, tun dies präfixfrei.

Nein, kein doppelter Schatteneffekt. Weg mit 0 0 0 1px #dfdfdf,! Die 1px-Linie ist einfach nur ein Rahmen: border: 1px solid #dfdfdf.

Und schon kannst du dir auch das sparen:

.modernizr-no-boxshadow .contactbox,
.modernizr-no-boxshadow #content .contactbox {
	border: 1px solid #dfdfdf;
}

LLAP 🖖

[MrMurphy1]

Hallo,

der Container könnte zum Beispiel folgendermaßen erstellt werden:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
   <title> Text positionieren 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- Um alte IE HTML5-tauglich zu machen -->
   <!--[if lt IE 9]>
      <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
   <![endif]-->
   <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
   <style>
   @media all {
      /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      html {
         font-size: 120%;
      }
      body {
         padding: 0;
      }
      .contactbox {
         width: 560px;
         box-shadow:
            0 0 0 1px #dfdfdf,
            0 0 9px rgba(0, 0, 0, 0.2)
            ;
         padding: 0 0 0.5rem 0;
         border: 1px solid #dfdfdf;
         margin: 0.5rem;
      }
      .contactbox img {
         display: block;
         max-width: 80%;
         border-top: 4px solid #ec8624;
         margin: 0 auto;
      }
      .contactbox span {
         text-align: center;
         font-style: normal;
         display: block;
      }
      .contactbox span:nth-child(2) {
         color: #ec8624;
         font-size: 3rem;
         line-height: 1;
         margin: 0.5rem 0 0 0;
      }
      .contactbox span:nth-child(3) {
         color: #ec8624;
         font-size: 1.5rem;
         line-height: 1;
         margin: 0 0 0.5rem 0;
      }
      .contactbox span:nth-child(4) {
         color: gray;
         font-size: 1rem;
         margin: 0 0 0.5rem 0;
      }
   }
   </style>
</head>
<body>
   <address class="contactbox">
      <img src="http://lorempixel.com/500/350/business" alt="">
      <span>&#9743;</span>
      <span>0176/65123789</span>
      <span>Ihre Express-Schnittstelle</span>
   </address>
</body>
</html>

Größen, Abstände, Farben, Schriftarten, das Telefonsymbol und alles andere kann natürlich noch angepasst werden.

Gruss

MrMurphy

[Gunnar Bittersmann]

@@nils.rochholl

Wenn position: absolute deaktiv ist

Wozu gedenkst du absolute Positionierung zu brauchen?

Einfach Bild und Telefonnumer als block formatieren, alles zentrieren, fertig.

LLAP 🖖