Aussen Grafik, innen Text ?

Status
Nicht offen für weitere Antworten.
opriema

opriema

Erfahrenes Mitglied
Hallo,

ich habe eine Grafik (1024x768px), die grob gesagt, aussieht wie ein farbiges Rechteck mit einem weißen Rechteck in der Mitte. Das soll die Hintergrundgrafik sein. Ins weiße Feld soll geschrieben werden.

Mache ich sowas mit CSS oder genügt da eine Tabellenkonstruktion in HTML oder lege ich die Grafik als Hintergrund fest (nur wie schaltet man dann die Kachelfunktion aus..)?

Ich habe auch schon versucht meine Grafik in vier einzelne Teile zu zerschneiden und dann in eine Tabelle gelegt, aber irgendwie bekomme ich die nicht so zusammen, wie ich es möchte.

Hat jemand einen Tip?
Danke,opriema
 
Wenn es sich hierbei um ein festes Layout handelt, sprich das mittlere weiße Rechteck seine Dimension beibehalten soll (der übergroße Inhalt wäre dann darin scrollfähig), könnte die Grafik als Hintergrundbild für die Seite verwendet werden und ein entsprechend dimensioniertes DIV-Element in der horizontalen und vertikalen Bildschirmmitte positioniert werden.

Code: 
body {
background: url(pfad/zur/grafik.jpg) no-repeat 50% 50%; /* no-repeat = Grafik nicht wiederholen, 50% 50% = horizontale u. vertikale Hintergrundposition */
}

div#contentBox {
position: absolute;
left: 50%;
width: 600px;
margin-left: -300px; /* negative Hälfte von width:600px */
top: 50%;
height: 400px;
margin-top: -200px; /* negative Hälfte von height:400px */
overflow: auto; /* übergroßer Inhalt ist scrollfähig */
}
HTML: 
<body>
        <div id="contentBox"><!-- Hier folgt der Inhalt --></div>
</body>
 
Danke für Deine Antwort!

Muss ich das so eingeben:
<body bgcolor="#CC0000" text="#000000" background="BG_layout01.jpg" no-repeat 50% 50%;>

Geht nämlich nicht. Entschuldige meine Ungeübtheit :-(

Das innere Quadrat muss übrigens nicht scrollbar sein.

Ich geh mal zu selfhtml und fang nochmal von vorne an ;)

Gruß,
opriema
 
Das oben gezeigte Stylesheet lässt sich folgendermaßen in dem HTML-Dokument einbinden:

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

<style type="text/css">
body {
background: url(pfad/zur/grafik.jpg) no-repeat 50% 50%; /* no-repeat = Grafik nicht wiederholen, 50% 50% = horizontale u. vertikale Hintergrundposition */
}

div#contentBox {
position: absolute;
left: 50%;
width: 600px;
margin-left: -300px; /* negative Hälfte von width:600px */
top: 50%;
height: 400px;
margin-top: -200px; /* negative Hälfte von height:400px */
overflow: auto; /* übergroßer Inhalt ist scrollfähig */
}
</style>

</head>
<body>

        <div id="contentBox"><!-- Hier folgt der Inhalt --></div>

</body>
</html>
oder als externe CSS-Datei:

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

<link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>

        <div id="contentBox"><!-- Hier folgt der Inhalt --></div>

</body>
</html>

Siehe hierzu auch SELFHTML: Stylesheets / CSS-Formate definieren / Stylesheets in HTML einbinden.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück