Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „html/css für ein grafischen Block“

MacDan

Noch nicht viel geschrieben

Hiho

also ich habe einen grafischen Block, der runde "Ecken" hat und eine farbige Kopfzeile für die Überschrift, und rundherum einen 1mm weisen Rand. Ein Schlagschatten ist auch vorhanden.

Der Kopf und die eingefärbte Fläche in der Mitte sollen mit Text gefüllt werden.

Wie könnte ich das html/css optimal lösen?
für die Mittigen Inhalt ein div und für jede Seite des Randes ein div?
Das scheint mir recht überladen...

Wäre für Ideen und Vorschlage dankbar

Einen schönen Montag
regards
denny
 

rest5

webbastler

AW: html/css für ein grafischen Block

Was hält Dich davon ab, das beschriebene Design als Grafik in den hintergrund eines DIV-Containers zu legen?
 

kleeaar

zwo-eins-risiko!

AW: html/css für ein grafischen Block

also ich kann mir im besten willen nicht vorstellen, was genau du meinst...
kannst du uns nicht irgendwo deinen Entwurf zeigen!
Dann weiß man eher was du haben möchtest...

Grüße
 

fexx

Aktives Mitglied

AW: html/css für ein grafischen Block

lade mal bitte einen screen hoch ... mir geht`s nicht anders als kleeaar :)

was ich jetzt rausgelesen hab waren die schlagwörter "schlagschatten" und "runde ecken", das ginge mit css3 ... je nachdem wies mit browserkompatibilität aussehen soll :)

aber um eine genaue antwort geben zu können, bräuchten wir ein bild :)
 

Myhar

Hat es drauf

AW: html/css für ein grafischen Block

Ich kanns mir auch nicht wirklich vorstellen, ein Entwurf wäre hier wirklich hilfreich.
Zu runden Ecken findet man über google (oder bestimmt auch hier auf psd-tutorials) genügend Tutorials. Grundsätzlich sind runde Ecken ohne Grafiken auch schon möglich, jedoch nicht unter allen Browsern anwendbar. Wenn du es nur mittels CSS3 umsetzt, bräuchtest du keine zusätzlichen <div>s im Markup. (und IE6-8 etc. sehen dann eben keine runden Ecken sondern eckige)
 

MacDan

Noch nicht viel geschrieben

AW: html/css für ein grafischen Block

Ah ich merk schon, kurz nach dem Aufstehen sollte ich nicht solche Threads erstellen :)

So hier ein Bild dazu wie ich es meine, habe das als psd und suche eine feine Lösung für das html/css.


 

kleeaar

zwo-eins-risiko!

AW: html/css für ein grafischen Block

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Beispiel</title>
<style type="text/css">
#container{
	width:250px;
	height:auto;
	background-image:url(bg.png);
	background-position:top;
	background-repeat:repeat-x;
	background-color:#CCC;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#333;
	-moz-border-radius: 10px;
        border-radius: 10px; 
	-webkit-box-shadow: -2px 2px 2px #000000;
	-moz-box-shadow: -2px 2px 2px #000000;
	box-shadow: -2px 2px 2px #000000; 
	border:1px solid white;
	padding:0px 10px 10px 10px;
	
}
#container h1{
	width:auto;
	padding:10px 0px 20px 0px;
	text-align:center;
	font-size:18px;
	color:white;
}
</style>

</head>

<body>
<div id="container"><h1>Überschrift</h1>Curabitur dignissim arcu ac nunc aliquet ultricies. Vivamus iaculis erat eros, in fermentum ipsum. Fusce elementum mauris ac metus sollicitudin vel rhoncus dui volutpat. In hac habitasse platea dictumst. Vivamus scelerisque diam eget ligula pellentesque vitae viverra arcu hendrerit. Duis nec velit eget ante egestas ultricies quis vitae libero! Mauris.
</div>
</body>
</html>
so kannst du das ganz einfach mit CSS3 lösen...

Du musst nur diesen Fade als bg.png benutzen...

natürlich könnte man auxh ganz auf graphiken verzichten und den farbverlauf auch per css herzaubern aber das ist dann noch ne weitere geschichte...


Grüße
 
Zuletzt bearbeitet:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.157
Beiträge
2.581.866
Mitglieder
67.223
Neuestes Mitglied
Desiree
Oben