Guten Morgen,
ich hänge im Moment an einem für euch wahrscheinlich ziemlich simplen Fall fest.
Ich möchte gerne Boxen wie diese erstellen können: (hab sie hier einmal aufgezeichnet)
In der mittleren runden Box soll ein Logo kommen.
In den äußeren 4 Boxen soll Text stehen.
Wäre sehr froh, wenn mir jemand helfen könnte bzw. eine Vorlage hätte.
Freundliche Grüße
Jan
Wir schreiben dir hier keinen Code, der Ansatz muss von dir kommen. Wenn du so überhaupt keine Ahnung hast, empfehle ich mit kleinen Dingen zu beginnen und ein Tutorial zum Einstieg.
Ich wusste ja nicht das du gar keine Ahnung hast. Boxen sind immer viereckig in HTML. Grafische Dinge wie von dir dargestellt müssen als Bild implentiert werden.
Die Grundlagen sollte man schon mal lernen, das kann ein Forum nicht leisten.
http://www.peterkropff.de/site/html/html.htm
http://little-boxes.de/little-boxes-teil1-online.html
http://webkompetenz.wikidot.com/docs:html-handbuch
Wie explanator schon gesagt hat, ist es nicht möglich, die rechteckige Form von HTML-Boxen zu ändern. Was du aber machen könntest wäre die mittlere runde Box mithilfe eines border-radius zu einem Kreis zu machen. Dabei musst du allerdings beachten, dass Text in den 4 eckigen Boxen hinter den Kreis gehen kann, das müsstest du also noch irgendwie sonst verhindern, z.B. durch eine gefloatete box innerhalb der jeweiligen Section.
Beispielcode:
CSS
.wrapper { height: 420px;
width: 820px;
position: relative;
}
.round {
height: 200px;
width: 200px;
position: absolute;
top: 90px;
left: 290px;
border: 20px solid white;
border-radius: 50%;
background: #444;
}
.wrapper > section {
width: 400px;
height: 200px;
margin: 0 20px 20px 0;
background: #aaa;
position: absolute;
}
#one {
top: 0;
left: 0;
}
#two {
top: 0;
left: 420px;
}
#three {
top: 220px;
left: 0;
}
#four {
top: 220px;
left: 420px;
}HTML
<div class="wrapper">
<section id="one"></section>
<section id="two"></section>
<section id="three"></section>
<section id="four"></section>
<div class="round"></div>
</div>