selfhtml.de - Alles für den Webmaster!

Anzeige: united-domains - Die ganze Welt der Domains

Text und Grafik in Kreis einpassen?

Autor: Taschendrache
Datum: 05.08.2010 15:23:58

Hallo zusammen!

bin recht blutiger Anfänger und schreibe quasi ausschließlich html und css. Jetzt möchte ich den Hauptinhalt einer Seite in einem Kreis optisch ansprechend darstellen. Angucken könnt ihr euch den ersten Versuch unter http://www.abenteuerspielplatz-troisdorf.de/jugendtreff
Im großen weißen Kreis sollen entsprechend die Inhalte stehen. Am liebsten hätte ich eine Möglichkeit, den Text entlang des Kreisbogens auszurichten (was aufgrund der eckigen div-boxen wohl nicht geht.)
Fällt euch was ein, oder sollte ich das Vorhaben so beerdigen? Wenn ihr noch Infos braucht oder Teile des Codes, sagt bescheid.
In Hoffnung auf gute Ideen und besten Dank schon mal,

flinke Grüße

Re: Text und Grafik in Kreis einpassen?

Autor: gaby
Datum: 05.08.2010 17:55:25

> Am liebsten hätte ich eine
> Möglichkeit, den Text entlang des Kreisbogens
> auszurichten (was aufgrund der eckigen div-boxen
> wohl nicht geht.)

Doch, das geht.
Du brauchst dafür aber sehr viele Float-DIVs untereinander, jedes so breit, daß es vom Rand (des viewports) bis zum Kreisbogen reicht.


Grüße
gaby

Re: Text und Grafik in Kreis einpassen?

Autor: Taschendrache
Datum: 09.08.2010 12:22:54

Schon mal Danke Gaby (auch wenn ich noch nicht so ganz verstehe, wie das funktioniert). Es hört sich erstmal nach jeder Menge Arbeit an. Komm ich da nicht irgendwie vorbei ;-)?

Verdammt, was hab ich mir da eingebrockt...

Text an Kreisbogen ausrichten (was: Text und Grafik in Kreis einpassen?)

Autor: gaby
Datum: 10.08.2010 10:09:05

> Schon mal Danke Gaby

bitte sehr! :-)

> (auch wenn ich noch nicht so ganz verstehe, wie das funktioniert).


Lies dir mal durch, wie 'float' funktioniert:

http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float

Der Text, der neben den gefloateten Boxen steht, fließt exakt an ihnen vorbei.

http://gaby77.ga.funpic.de/web/demos/text-ausrichtung/text_an_bogen/dat-0.html

im Stylesheet:
box {Höhe: zb 10px, clear, float, border} -->(mit passenden Werten)

Die unterschiedlichen Breiten der Float-Boxen kannst du als Inline-Styles im HTML-Teil vergeben.

Dann positionierst du die Bogen-Grafik absolut darüber, und passt Höhe und Breite der Float-Boxen so an, daß sie in etwa die Kontur der Grafik nachzeichnen. Je niedriger die Float-Boxen sind, desto besser.
Andernfalls hast du "Treppenstufen" im Textverlauf.

http://gaby77.ga.funpic.de/web/demos/text-ausrichtung/text_an_bogen/20-23.png

> Es hört sich erstmal nach jeder Menge Arbeit an.

Etwas aufwendig ist es ja auch.

> Komm ich da nicht irgendwie vorbei ;-)?

Nicht, wenn du den Text entlang der Kreiskontur ausrichten möchtest.


Grüße
gaby

Re: Text an Kreisbogen ausrichten

Autor: Taschendrache
Datum: 10.08.2010 17:53:28

Sehr ausführlich, vielen Dank.
Ich glaube ich hab's auch verstanden und muss das bei nächster Gelegenheit mal ausprobieren. Die genauere Durchführung kann ich ja dann deinem Beispielquelltext entnehmen.
Besten Dank für's erste, weitere Tipps (von allen) willkommen.

Flinke grüße

Taschendrache

Re: Text an Kreisbogen ausrichten

Autor: manya
Datum: 11.08.2010 00:00:51

> weitere Tipps (von allen) willkommen.


Mit CSS2 gibt es keine andere Möglichkeit.
Du kannst höchstens Gabys beschriebene Methode etwas variieren:

Statt die Grafik mit position:absolute, kannst du sie auch als bg-Bild einbinden, und statt den Inline-Styles, kannst du jedem Float-Container eine Klasse geben, und im Stylesheet die Breite festlegen.

Aber das ist keine grundsätzlich andere Methode, als bereits beschrieben wurde, und exakt der gleiche Aufwand.


Gruß
manya

(OT) Re: Text an Kreisbogen ausrichten

Autor: manya
Datum: 11.08.2010 00:06:43

Uiii, ich habe eine super Postingzeit in meinem letzten Beitrag!  :-D


Guten Morgen!

manya

Re: Text an Kreisbogen ausrichten

Autor: Taschendrache
Datum: 11.08.2010 14:54:17

Schon wieder ich...
besten Dank für eure Hilfe, ich steh aber irgendwie bei der Umsetzung auf dem Schlauch... wo ist der verdammte Fehler?

Hier mein css (auf die Boxen beschränkt, in einer eigenen Datei):
html,
        body {
        margin:0;
        padding:0;
        background-color: #006633;
        }

        #hintergrund {
        position:absolute;
width:1200px;
left:0px;
        top:0px;
z-index:1;
        }

#animation {
position:absolute;
top:60px;
left:68px;
width:200px;
height:228px;
z-index:0;
}

.float-bogen {
left: 272px;
   clear: both;
     float: left;
     height: 14px;
     margin-top: 0;
     border: solid;
}

        #menue {
position:absolute;
        top:300px;
        left:20px;
        width:180px;
        z-index:2;
        padding:5px;
line-height:20px;
        }

        #inhalt {
position:absolute;
width:800px;
height:800px;
        top:200px;
        left:272px;
        z-index:4;
        padding:5px;
margin:5px;
        }



ZACK, und hier die html-Datei:



<html>

<head>
<title>Jugendtreff des Abenteuerspielplatz Friedrich-Wilhelms-Hütte e.V. - Startseite</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>

<body>
<div id="hintergrund">
<img id="hintergrund" src="img/hintergrund.png"/>

<div id="menue">
<p><b>Öffnungszeiten:</br></br>
Montags & Donnerstags
17:30 - 20:30 Uhr</b></p></br></br>
<a href="http://www.abenteuerspielplatz-troisdorf.de/jugendtreff/index.html"><li>Startseite</li></a></li></br></br>
</div>

<div id="animation">
<img id="animation" src="img/animation.gif"/>
</div>

<div class="float-bogen" style="width: 250px; top: 200px;">Float-Box-1</div>
<div class="float-bogen" style="width: 250px; top: 214px;">Float-Box-2</div>
<div class="float-bogen" style="width: 250px; top: 214px;">Float-Box-3</div>
<div class="float-bogen" style="width: 250px; top: 214px;">Float-Box-4</div>
<div class="float-bogen" style="width: 250px; top: 214px;">Float-Box-5</div>
<div id="inhalt">
<p>blabla</p>
</div>
</div>

</body>

</html>

Re: Text an Kreisbogen ausrichten

Autor: gaby
Datum: 11.08.2010 16:40:41

> ich steh aber irgendwie bei der Umsetzung auf dem Schlauch...
> wo ist der verdammte Fehler?


Positionseigenschaften (top, left, bottom, right) haben nur dann eine Auswirkung, wenn auch gleichzeitig eine 'position'-Angabe mit einem Wert != 'static' deklariert wird.

Den Rest sagt dir der Validator:

http://validator.w3.org/check


Grüße
gaby

Re: Text an Kreisbogen ausrichten

Autor: Taschendrache
Datum: 11.08.2010 16:52:37

Halleluja!

Vielen Dank, blöder Fehler!
Dann sollte ich's jetzt wohl hinbekommen.

Beste Grüße eines Volllaien

Re: Text an Kreisbogen ausrichten

Autor: Taschendrache
Datum: 12.08.2010 16:14:58

Ich arbeite mich hier Stück für Stück voran. Entschuldigt meine idiotische Fragerei, vermutlich liegt es mal wieder auf der Hand... Jetzt sehe ich die Boxen, auch für's erste da wo ich sie haben will, aber sie nehmen null Einfluss auf Text und Bild, sondern liegen dahinter. (Obwohl sie eigentlich auf der gleichen Ebene liegen (sollten))
Ich dreh am Rad... habt ihr noch so'n schicken Tipp?

Dankbare Grüße

Simon

Re: Text an Kreisbogen ausrichten

Autor: Taschendrache
Datum: 12.08.2010 22:46:51

So, nach einiger Probiererei kann ich mein Problem noch etwas präzisieren: Wie positioniere ich die float-boxen und die text-box?
hatte absolut positioniert, war wohl sehr unsinnig. aber wie geht's???

> Ich arbeite mich hier Stück für Stück voran.
> Entschuldigt meine idiotische Fragerei,
> vermutlich liegt es mal wieder auf der Hand...
> Jetzt sehe ich die Boxen, auch für's erste da wo
> ich sie haben will, aber sie nehmen null Einfluss
> auf Text und Bild, sondern liegen dahinter.
> (Obwohl sie eigentlich auf der gleichen Ebene
> liegen (sollten))
> Ich dreh am Rad... habt ihr noch so'n schicken
> Tipp?
>
> Dankbare Grüße
>
> Simon

Re: Text an Kreisbogen ausrichten

Autor: gaby
Datum: 13.08.2010 10:37:48

> Also hier nochmal mit etwas mehr Ruhe:
> Das Problem findest du, und jeder andere, unter
> http://www.jugendtreff.abenteuerspielplatz-troisdorf.de

OK.

> Das Problem: Float-Boxen und Text verschwinden
> hinter allem anderen

Ja, weil die Kreisgrafik _absolut_ positioniert ist.
Deshalb überdeckt sie ohne Rücksicht auf Verluste alle anderen Elemente, selbst dann, wenn diese im Quellcode _nach_ der Grafik vorkommen.

Ich habe das in meinem Beispiel

http://gaby77.ga.funpic.de/web/demos/text-ausrichtung/text_an_bogen/dat-20.html

zwar auch so gemacht, jedoch bestand _meine_ Grafik nur aus einem mehrere px breiten Bogen. Der Rest der Grafik war transparent, und ließ deshalb den untendrunterliegenden Text durchscheinen.

Entweder machst du also auch den großen weißen Kreis transparent, oder du hältst dich an Manyas Alternativ-Vorschlag, und bindest die Grafik als Hintergrundbild ein.


Grüße
gaby

Re: Text an Kreisbogen ausrichten

Autor: gaby
Datum: 13.08.2010 13:31:28

> > Jetzt sehe ich die Boxen, auch für's erste da wo
> > ich sie haben will, aber sie nehmen null Einfluss
> > auf Text und Bild, sondern liegen dahinter.
> > (Obwohl sie eigentlich auf der gleichen Ebene
> > liegen (sollten))
> > Ich dreh am Rad... habt ihr noch so'n schicken Tipp?

http://www.sve-fre.de/selfhtml/netiquette/index.php?a=text5_5#text5_5

Und bitte einen Link, und keine Code-Schnipsel, die man sich erst noch mühsam zusammensetzen und ergänzen muß.


> So, nach einiger Probiererei kann ich mein
> Problem noch etwas präzisieren: Wie positioniere
> ich die float-boxen und die text-box?
> hatte absolut positioniert, war wohl sehr
> unsinnig. aber wie geht's???

Konntest du das nicht meinem Beispiel-Code entnehmen?

http://gaby77.ga.funpic.de/web/demos/text-ausrichtung/text_an_bogen/dat-0.html




Grüße
gaby

Re: Text an Kreisbogen ausrichten

Autor: Taschendrache
Datum: 13.08.2010 16:38:37

Entschuldige bitte, Gaby!

Also hier nochmal mit etwas mehr Ruhe:
Das Problem findest du, und jeder andere, unter http://www.jugendtreff.abenteuerspielplatz-troisdorf.de

Im Quelltext sind css- und htmlcode zu sehen.

Das Problem: Float-Boxen und Text verschwinden hinter allem anderen (kommen aber ihrer Funktion mittlerweile nach). Wie positioniere ich jetzt die Float-Boxen und den Text? Absolute Positionierung o.ä. geht ja nunmal nicht, richtig?

Ich hoffe, mich halbwegs verständlich gemacht zu haben.de.selfhtml.org und google haben mir leider bislang nicht entscheidend weitergeholfen.

Besten Dank,

Simon

Re: Text an Kreisbogen ausrichten

Autor: Taschendrache
Datum: 18.08.2010 14:57:25

Hab's geschafft!
Vielen Dank noch mal! Das Ergebnis wird man sich demnächst dann unter der oben bereits genannten url anschauen können.
Ich musste es ein wenig anders lösen, aber es funzt.

Beste Grüße,

Simon