Div ohnemittig direkt am Link ohne Freiraum

B

Benutzer007

Hallo,

weiß einer, wie ich es hinbekomme, dass der Div nicht über die gesamte Breite geht sondern direkt am Link beginnt und endet?

HTML: 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-de" lang="de-de">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
<head>
  <style>
    body {
      background-color: black;
      border: 3px solid #fff;
      padding: 30px 10px;
    }
  </style>
</head>
<body>

<div class="xxxxxxxxxx" style="text-align: center; background: #444; border: 3px solid white; padding: 5px;margin: 0 auto;"><a href="https://www.bla.de/blablabla.html" rel="nofollow" style="color: #fff" target="_blank">Link; Zeilenumbruch mit &lt;br&gt;,<br>
der graue Hintergrund soll eigentlich direkt am Link-Anfang/-Ende aufhören<br>
und nicht über die gesamte Breite gehen.</a></div>
</div>

</body>
</html>

Grüße
 
HTML: 
<div class="xxxxxxxxxx" style="text-align: center; background: #444; border: 3px solid white; padding: 5px;float:left">
 
Siehe nächsten Kommentar.
 
Zuletzt bearbeitet von einem Moderator:
float: left schneidet zwar den freien Bereich ab, aber dann ist der Div nicht mehr mittig. Soll er aber.
 

Anhänge

  • tut2.jpg
    tut2.jpg
    24,3 KB · Aufrufe: 13
  • tut1.jpg
    tut1.jpg
    21,4 KB · Aufrufe: 11
Du meinst so
"text-align: center; background: #444; border: 3px solid white; padding: 5px, display:inline;"?​
Dann sieht es wieder aus wie Bild "tut2.jpg" (bin momentan nur im Firefox).
Das mit dem body text-align center kann ich nicht machen, das würde das ganze Layout der Seite zerstören.

HTML: 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-de" lang="de-de">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
<head>
  <style>
    body {
      background-color: black;
      border: 3px solid #fff;
      padding: 30px 10px;
    }
  </style>
</head>
<body>

<div style="text-align: center; background: #444; border: 3px solid white; padding: 5px, display:inline;"><a href="https://www.openpetition.de/petition/online/befragung-der-bundesregierung-zu-climate-engineering-chemtrail" rel="nofollow" style="color: #fff" target="_blank">Link; Zeilenumbruch mit &lt;br&gt;,<br>
der graue Hintergrund soll eigentlich direkt am Link-Anfang/-Ende aufhören<br>
und nicht über die gesamte Breite gehen.</a></div>
</div>

</body>
</html>
 
Zuletzt bearbeitet von einem Moderator:
Nein. text-align:center soll für body gelten.

Das mit dem body text-align center kann ich nicht machen, das würde das ganze Layout der Seite zerstören.
Das ist nur ein File zum Testen.
Die Seite selbst ist viel größer.
 
So passt jetzt alles :)

display:inline hab ich hier ordnungshalber durch display:inline-block ersetzt, da ja das Element einen mehrzeiligen Inhalt besitzt, und seine Breite sich vollständig der längsten Zeile angleichen soll, anstatt zeilenweise zu variieren.
HTML: 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-de" lang="de-de">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
<head>
  <style>
  body {
  background-color:black;
  border:3px solid #fff;
  padding:30px 10px;
  text-align:center
  }
  </style>
</head>
<body>
<div style="text-align:left; background:#444; border:3px solid white; padding:5px; display:inline-block"><a href="https://www.openpetition.de/petition/online/befragung-der-bundesregierung-zu-climate-engineering-chemtrail" rel="nofollow" style="color: #fff" target="_blank">Link; Zeilenumbruch mit &lt;br&gt;,<br>
der graue Hintergrund soll eigentlich direkt am Link-Anfang/-Ende aufhören<br>
und nicht über die gesamte Breite gehen.</a></div>
</div>
</body>
</html>
Benutzer007 hat gesagt.:
Du meinst so
"text-align: center; background: #444; border: 3px solid white; padding: 5px, display:inline;"?​
Dann sieht es wieder aus wie Bild "tut2.jpg" (bin momentan nur im Firefox).
Zum Vergrößern anklicken....
Nach der padding-Regel hast du plötzlich ein Komma anstelle des Semikolons notiert, wodurch die darauffolgende Regel vom Browser ignoriert wird ;)
Benutzer007 hat gesagt.:
Das mit dem body text-align center kann ich nicht machen, das würde das ganze Layout der Seite zerstören.
Zum Vergrößern anklicken....
Wichtig hierbei, wie in meinem Beispiel angewandt, für alle weiteren enthaltenen <div>-Kinderelemente text-align:left deklarieren, damit sie nicht text-align:center vom Elternelement <body> vererbt bekommen :)

Im zentralen Stylesheet würde die Regel kurzerhand so lauten:
CSS: 
body div {text-align:left}
Benutzer007 hat gesagt.:
Das ist nur ein File zum Testen.
Die Seite selbst ist viel größer.
Zum Vergrößern anklicken....
Falls sich dieses Element entgegen deinem Test-Code in der HTML-Struktur tiefer verschachtelt wiederfindet, ist <body> als zu formatierendes Elternelement in der Tat die falsche Wahl :D
______________
[edit]Tipp-Ex[/edit]​
 
Zuletzt bearbeitet:
Da hast du dir ja richtig Mühe gegeben.
Ich danke dir.

Ich habe es jetzt so gemacht:
HTML: 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-de" lang="de-de">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
<head>
  <style>
  div.center {
  background-color:black;
  border:3px solid #fff;
  padding:30px 10px;
  text-align:center
  }
  </style>
</head>
<body>
<div class="center">
<div style="text-align:center; background:#444; border:3px solid white; padding:5px; display:inline-block"><a href="https://www.openpetition.de/petition/online/befragung-der-bundesregierung-zu-climate-engineering-chemtrail" rel="nofollow" style="color: #fff" target="_blank">Link; Zeilenumbruch mit &lt;br&gt;,<br>
der graue Hintergrund soll eigentlich direkt am Link-Anfang/-Ende aufhören<br>
und nicht über die gesamte Breite gehen.</a></div>
</div></div>
</body>
</html>
 

Anhänge

  • tut3.jpg
    tut3.jpg
    19,9 KB · Aufrufe: 12
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück