Problem beim Webseiten erstellen

I

indexnator

Grünschnabel
Hallo zusammen,

ich hab ein kleines problem mit meiner webseite, und zwar möchte ich meine Seiten inhalt Rahmen mit Runden ecken ausstatten, hab leider keinen Plan wie man sowas machen sollte, bin da auf was gestoßen das man mit bilddateien machet die man übereinander legt, hab da auch einen Seite gefunden die mit so wie ich das will schon vorgibt, die seite: http://www.roundedcornr.com.

Auf dieser seite bekomme ich 5 PNG dateien die den Rahmen bilden, Html und einen CSS text, nun bekomme es einfach nicht hin das es mir den rahmen mit runden ecken darstell.
Hab leider kaum erfahrung mit CSS.

Kann mir da jemand helfen.

Gruß indexnator
 
Hi,

wenn du um Unterstützung bittest, solltest du auch Einblick in deinen Quellcode gewähren, wegen der grafischen Komponente in diesem Fall am besten per Link zu deiner Seite.

mfg Maik
 
Hallo Maik,

hab noch keine Webseite hochgestellt, hier aber der Quellcode den ich anhand der Vorlage angefangen habe:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>test_ecken</title></head><body><style type="text/css">
.roundedcornr_box_705114 {
background: url(http://meinedomain.de//Test_ecken/roundedcornr_705114_tl.png) no-repeat top left;
}
.roundedcornr_top_705114 {
background: url(http://http://meinedomain.de//Test_ecken/roundedcornr_705114_tr.png) no-repeat top right;
}
.roundedcornr_bottom_705114 {
background: url(http://http://meinedomain.de//Test_ecken/roundedcornr_705114_bl.png) no-repeat bottom left;
}
.roundedcornr_bottom_705114 div {
background: url(http://http://meinedomain.de/Test_ecken/roundedcornr_705114_br.png) no-repeat bottom right;
}
.roundedcornr_content_705114 {
background: url(roundedcornr_705114_r.png) top right repeat-y;
}
.roundedcornr_top_705114 div,.roundedcornr_top_705114,
.roundedcornr_bottom_705114 div, .roundedcornr_bottom_705114 {
width: 100%;
height: 15px;
font-size: 1px;
}
.roundedcornr_content_705114, .roundedcornr_bottom_705114 {
margin-top: -19px;
}
.roundedcornr_content_705114 { padding: 0 15px; }
<div class="roundedcornr_box_705114">
<div class="roundedcornr_top_705114"><div></div></div>
<div class="roundedcornr_content_705114">
<p>TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText.</p>
</div>
<div class="roundedcornr_bottom_705114"><div></div></div>
</div>
</style><br></body></html>
Zum Vergrößern anklicken....

Das ist der Qellcode den ich angefertogt habe.

Gruß Björn
 
Leg doch deine ganzen css befehle in eine externe css Datei. Das macht deine Quelltexte zum einen übersichtlicher, zum anderen musst du deine CSS anweisungen nicht in jede Datei einzeln reinschreiben, sondern kannst deine eine CSS Datei universal verwenden.

Wenn du dich wunderst, warum die Bilder nicht angezeigt werden: die links
Code: 
http://http//meinedomain.de//Test_ecken/roundedcornr_705114_bl.png

Existieren nicht. Du müsstest dir entweder selbst die grafiken erstellen oder die vom Tutorial dir besorgen.

Dann müsstest du noch den Jetzigen pfad mit deinem Lokalen pfad bzw wenn das ganze im web steht von deinem Server Pfad austauschen.

lg
 
Hi,

du hast das Markup (HTML-Code) der abgerundeten Box im Stylesheet-Bereich <style>...</style> eingebettet, daher zeigt dir dein Browser auch nichts an.

Hier die korrigerte Fassung des Codes:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>test_ecken</title>

<style type="text/css">
.roundedcornr_box_705114 {
background: url(roundedcornr_705114_tl.png) no-repeat top left;
}
.roundedcornr_top_705114 {
background: url(roundedcornr_705114_tr.png) no-repeat top right;
}
.roundedcornr_bottom_705114 {
background: url(roundedcornr_705114_bl.png) no-repeat bottom left;
}
.roundedcornr_bottom_705114 div {
background: url(roundedcornr_705114_br.png) no-repeat bottom right;
}
.roundedcornr_content_705114 {
background: url(roundedcornr_705114_r.png) top right repeat-y;
}
.roundedcornr_top_705114 div,.roundedcornr_top_705114,
.roundedcornr_bottom_705114 div, .roundedcornr_bottom_705114 {
width: 100%;
height: 15px;
font-size: 1px;
}
.roundedcornr_content_705114, .roundedcornr_bottom_705114 {
margin-top: -19px;
}
.roundedcornr_content_705114 { padding: 0 15px; }
</style>

</head>
<body>

<div class="roundedcornr_box_705114">
<div class="roundedcornr_top_705114"><div></div></div>
<div class="roundedcornr_content_705114">
<p>TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextT extTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextT extTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextT extTextTextTextTextTextTextTextTextTextTextTextTextTextTextText.</p>
</div>
<div class="roundedcornr_bottom_705114"><div></div></div>
</div>

</body>
</html>


Ich gehe mal davon aus, dass die von meinem Vorredner angekreideten falsch lautenden Grafikpfade lediglich ein "Übertragungsfehler" sind, und bei dir lokal stimmen.

Mit diesem Code wird vorausgesetzt, dass sich das HTML-Dokument und die Grafikdateien im selben Verzeichnis befinden.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück