Am unteren Ende einer Table-Zelle soll ein anderer Hintergrund hin

PSP_Simon · 17.12.2010, 16:08

Hey,
ich arbeite zzt. an "www.pferdepraxis-dr-weber.de". Das ist aktuell nur eine seeehr rohe Fassung, zu der ich eine frage hätte:
Am untersten Ende, hört der "endlos"-Hintergrund natürlich auf. Ich hatte zunächst vor, den Table mit dem Seitenende abschließen zu lassen, aber die Browser setzten es immer ein bisschen nach oben. Ist es möglich, eine Grafik, die sozusagen den Rahmen fortsetzt, so ganz unten einzusetzten, dass sie bündig mit der darüber abschließt? ich meine natürlich ist das möglich, das sieht man auf beinahe jeder website, aber wie? mein html ist ein wenig "altmodisch", ich weis dass man eine Seite auch mit <div> aufbauen kann, wahrscheinlich ist es nur so möglich oder? Könnte mir jemand helfen?
Danke im Vorraus!
wePsi

Anzeige

Schau dir mal diesen Bereich an. Dort ist für jeden was dabei!

DD64 · 18.12.2010, 20:06

Ein bisschen CSS

PHP-Code:




.klasse_der_table {



border-bottom-right-radius: 20px;

border-bottom-left-radius: 20px;    

-moz-border-radius-bottomright: 20px; /* Hack für Firefox */

-moz-border-radius-bottomleft 20px; /* Hack für Firefox */

padding-bottom: 20px;



/* 20px musst du so anpassen, dass es genau wie die obere Rundung aussieht */



}

Würde aber lernen mit DIV-Containern zu arbeiten, man hat deutlich mehr Möglichkeiten und es ist zudem viel einfacher und nicht so umständlich wie mit Tabellen.

PSP_Simon · 19.12.2010, 15:45

Danke ertsmal, ich vermute mal, dass man das als Wert für das "style" Attribut einsetzten muss?
Aber wo kann ich die Grafik einfügen?

div container kenne ich nur zum zentrieren eines oder mehrer Objekte (align=...), man sieht sie aber auf fast jeder website.
Lege ich den Hintergrund eines Div-containers durch bgcolor oder background fest?
Lege ich die Größe einfach durch width= und height= fest? Oder muss dass alles in den Style-tag?
Ich denke ich kann mir das sonst selber beibringen^^

GG wePsi

DD64 · 19.12.2010, 19:33

Wenn man mit DIV's arbeitet, fallen sehr viele Style-Attribute an, deshalb sollte man mit CSS-Dateien und Klassen arbeiten, z.B

PHP-Code:


<div class="wrapper"> </div>

Dann kann man in einer CSS Datei die man in die HTML-Datei einbetten kann folgendes machen:

PHP-Code:


.wrapper {

height: auto;

width: 900px;

margin-left: auto;

margin-right: auto;

padding: 5px;

Lege ich den Hintergrund eines Div-containers durch bgcolor oder background fest?

Beides ist möglich, sogar gleichzeitig.

Zentrieren eines Hauptcontainers in den dann alles andere reinkommt (man nennt einen solchen Container oft Wrapper), erreicht man wie oben schon gezeigt mit

PHP-Code:


.wrapper {

margin-left: auto;

margin-right: auto;

}

Dieses bewirkt dass der Abstand rechts und links ausgewogen ist, also das Objekt genau in der Mitte des Bildschirms ist.

Weiter kann man dann so machen:

PHP-Code:


<div class="wrapper">

<div class="header">

// Header

</div>

<div class="menu">

// Hier findet das Menü seinen Platz

</div>



<div class="content">

// Hier werden die eigentlichen Inhalte geladen



<div class="news">

// Der Container content beinhaltet nun einen container für News.

</div>



</div>



</div class="sidebar">

// Eine Sidebar mit Linkverweisen gibt es auch noch

</div>



<div class="footer">

// schließlich ein Footer mit Verweisen auf das Impressum

</div>



</div> // Der Wrapper ist geschlossen

Die CSS kann so aussehen:

PHP-Code:




.wrapper {

margin-left:auto;

margin-right:auto;

margin-top:10px;

margin-bottom:10px;



background-color: #ff0000;

background: img(img/hintergrund.jpg);



padding: 5px;

}



.header {



width:100%;

height:200px;

background-color:#ccc;



}



.menu {



width:100%

height:50px;

background-color:#000;

}



...

Achso, so bindet man eine CSS-Datei in ein HTML dokument:

PHP-Code:


<head>

<link rel="stylesheet" href="http://webseite.de/design/style.css" />

</head>

PSP_Simon · 29.12.2010, 15:04

Danke für das fette handbuch :P
Ich abreibte mich solangsam da rein. Eine Frage wär jetz immer noch offen: Du beschreibst, wie ich den Rand eines Tables/Div-Containers abrunde, ich hätte aber gerne eine Grafik ganz unten, d.h. eine zweite Backgroundgrafik, auf der halt dieselbe rundung zu sehen ist wie in der haeder-background-grafik. Da könnt ich doch theoretisch einfach noch nen div-container machen, weil da ja kein Abstand dazwischen is, oda?
GG wePsi

Edit: Hintergrundproblem gelöst, der Hintergrund muss vererbt werden

DD64 · 30.12.2010, 03:32

PHP-Code:


.tabelle(oder div-box?){



    background-image:url('images/background_grafik_bottom.png');

    background-position:bottom;

    background-repeat:no-repeat;



}

Man müsste nur schauen welches Objekt nun diese Klasse zugewiesen bekommt.

EDIT:
Was ich dir noch Empfehlen möchte, wenn du zukünftig vollständig auf CSS Programmierung umsteigst: Teste die Webseite mit aktuellen Browsern, da nicht alle Browser auch alles gleich darstellen!