Wie kann man einen Kreis mit html/css in dieses Form einfügen?
Hallo, ich versuche, einen Kreis wie in Bild 2 hinzuzufügen, und was ich bis jetzt geschafft habe, ist Bild 1. Weiß jemand, wie ich das machen kann? Irgendwelche Tipps? Ich werde meinen Code unten hinterlassen.
Danke.
*Bild 1*
*Bild 2*
</table>
<table class="es-footer" cellspacing="0" cellpadding="0" align="center"
style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;table-layout:fixed !important;width:100%;background-color:transparent;background-repeat:repeat;background-position:center top">
<tr>
<td align="center" style="padding:0;Margin:0">
<table class="es-footer-body" cellspacing="0" cellpadding="0" bgcolor="#ffffff" align="center"
style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:#FFFFFF;width:600px">
<tr>
<td align="left" style="Margin:0;padding-bottom:20px;padding-left:20px;padding-right:20px;padding-top:25px">
<!--[if mso]><table style="width:560px" cellpadding="0" cellspacing="0"><tr><td style="width:185px" valign="top"><![endif]-->
<table class="es-left" cellspacing="0" cellpadding="0" align="left"
style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;float:left">
<tr>
<td class="es-m-p20b" align="left" style="padding:0;Margin:0;width:165px">
<table width="100%" cellspacing="0" cellpadding="0"
style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:separate;border-spacing:0px;border-left:1px solid #ff5533;border-right:1px solid #ff5533;border-top:1px solid #ff5533;border-bottom:1px solid #ff5533;border-radius:28px"
role="presentation">
<tr>
<td align="left" class="es-m-txt-l" style="padding:10px;Margin:0">
<p
style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:tahoma, verdana, segoe, sans-serif;line-height:17px;color:#000000;font-size:14px">
<br><strong>Non existing Headline<br></strong><br></p>
<p
style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:tahoma, verdana, segoe, sans-serif;line-height:17px;color:#000000;font-size:14px;text-align:left">
probe text
nec, vulputate
</p><br><br><br><br>
</td>
</tr>
</table>
1 Antwort
Ein Blockelement (z.B. DIV) innerhalb des großen Rahmens platzieren und dann mit absoluter Positionierung an die richtige Stelle rücken.
Höhe und Breite identisch setzen, border-radius auf 50% um einen Kreis zu erzeugen.
Hintergrundfarbe weiß, Bild als background-image setzen.
Der Code ist eine Katastrophe, schmeiß das weg und schreibe den Code von Hand.
Mit Word kannst Du kein sinnvolles HTML erzeugen.
Keine <table> verwenden, wenn es nicht um tabellarische Daten geht.
Stile per Stylesheet einbinden, nicht inline.
