Css Anfängerfragen

Status
Nicht offen für weitere Antworten.
xkoy79

xkoy79

Mitglied
Servus an alle,

da ich mich mit Css auseinandersetzen will, brauch ich eure Hilfe !

Also ich verstehs noch nit ganz !

Habe gelesen das man mit den Verschachtelten Tabellen nicht mehr viel machen sollte.

Kurz gesagt soll man Css Tabellen nehmen, so nun habe ich vers. Seiten gesehen wo aber trotzdem mit TD Tabellen gearbeitet wird, und mit DIV.

Wo ist da nun CSS

Brauche nämlich für mein Design ein Grundgerüst, d.h. Oben ein header, darunter 3 Felder, und darunter den Bottom !!
Die 3 Felder: Links nur für den 2px Rand mit Schatten , Mitte der Inhalt, Rechts wieder der 2px Rand !!

So, soll ich nun doch wieder Tabellen ausm Html nehmen ? Oder versth ich da was nicht

Hier mal das Design ums zu verstehen !

http://www.kitzbühler-musig.at/pre2.jpg

Vielleicht kann mich jemand aufklären !

Danke
dani
 
Hallo :).
Also, zum anfang:
HTML ist der inhalt deines Dokumentes.
CSS bestimmt das Design des selbigen.
Die Idee ist also dass du ein div hast welches deinen Text enthält... und die CSS-Anweisungen positionieren es, geben ihm aussehen etc.
Erste überlegung: welche Bereiche hat meine Seite?
Bei dir sehe ich spontan einen grossne ebreich in der Mitte, und in diesme ebreich eine Überschrift, eine Navigation und einen Hauptteil.
Also hast du ein:
HTML: 
<div>
   <div> Überschrift</div>
   <div>Navigation</div>
   <div>Inhalt</div>
</div>

Die diversen CSS-anweisungen sorgen dann für das aussehen etc :).
Ich hoffe das hilft als Ansatzpunkt weiter.

Layna
 
Hi danke für deine Mühen :)

Also ich sitze nun schon 1h dran und versuch diese DIVs zu verschachteln, kommt nur Kraut und Rüben raus :)

Wenn ich dein Code nehme hab ich ja 3 "Tabellen", passt scho, aber ich brauche:

1BLOCK
3er BLOCK
1BLOCK

Also in der Mitte links und rechts auch eine Tabelle da dort der Pixelrand reinkommensoll der sich wiederholt, wenn sich der Inhalt verlängert...

danke Dir
 
*erinnert sich an ihre erstens div's... kraut und rüben war da geschmeichelt ^^*
Aber warum links udn rechts ein block?
Die Mitte ist doch das was sich verlängern soll oder?
Du hast also, Grafisch gesehen:
Oben eine feste höhe
In der Mitte an sich einen Frauen block mit links und rechts ein paar schwarzen und grauen pixeln
Unten wieder etwas mit fester höhe.

Du kannst also:
Die Teile mit der Festen höhe normal einbinden.
Da sich die Mitte nur in der höhe, aber nicht in der breite verändert kannst du dort ein Div mit einem 1-Pixel-hohen, sich wiederholendem hintergrund machen.. an sich eben eine Pixelzeile deines Inhaltbereiches plus Schatten.
Unten schliesst sich dann wieder eine statische grafik an.

Hoffe das ergibt so sinn :).

Layna
 
Hey,

Frauenblock ? öha :)

Also verstehen tu ich es schon, aber wie setz ich sowas um.

Also in der Mitte brauch ich quasie 3 SPALTEN !! ja die Spacer werdn sich wiederholend angeordnet, das sich der Rand und die Mitte nach unten strecken können !!

Oben und unten am besten als BG Image, da dort Text und Navi drüberkommt !!

Hier mal ein Bild als Info:

http://www.kitzbühler-musig.at/anl.jpg

Ich brauche quasie ein LEER Gerüst... aber daran scheiter ich schon, google nun schon seid heute Mittag nach DIV Tabellen, und Spalten, aber nix kommt rum .. leider..

Hey, habe grade ne Page gefunden, da wo man sich was generieren lassen kann, bissl geschaut und kanns sein das es was mit FLOAT zutun hat ? Da werdn dann die "Tabellen" nebeneinander gereiht, schonmal ein Schritt weiter :)

Kann ich das auch als ein Paket zusammsetzen ?

Also 1 oben
dann die 3 drunter
dann noch 1

danke
dani
 
Hi,

ich hab dir mal eine kleine Vorlage erstellt:

Code: 
<!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">
<meta name="author" content="Maik">
<title>tutorials.de | demo_xkoy79</title>

<style type="text/css">
<!--
#wrap {
width:700px;
margin:0 auto;
}

#header {
height:100px;
background:#ddd;
}

#content {
border-left:2px solid #ddd;
border-right:2px solid #ddd;
}

#footer {
height:50px;
background:#ddd;
}
-->
</style>

</head>
<body>

<div id="wrap">
     <div id="header">header</div>
     <div id="content">content</div>
     <div id="footer">footer</div>
</div>

</body>
</html>
Den Rahmen (Schatten) für den mittleren Teil kannst du in einer Grafik vereinen, die die Breite des DIVs #wrap besitzt, und als Hintergrundbild im DIV #content eingesetzt wird., somit sind an dieser Stelle keine drei Elemente erforderlich.
 
Hi, danke Dir ! Schaut schon Super aus !!

Aber was meisnte mit vereinen ? Soll ich meine Mitte nur EINMAL auschneiden also mit den Pixelrahmen links und rechts ? Und das dann als 1px wiederholend einsetzen


Weil ich eigentlich den Background Colour vom Inhalt nur mit Hintergrundfarbe definieren wollte....
 
Die gewünschte Hintergrundfarbe könntest du direkt in das Hintergrundbild einfliessen lassen.
 

Anhänge

  • demo_xkoy79.zip
    928 Bytes · Aufrufe: 18
Jo hab schon verstanden was du gemeint hast ! habs nun mal geändert !

Also habe ich nur noch 3 Grafikteile, quasie alle als BG Images.

#top {
background-image:url(../top.jpg);
height:157px;
background:#ddd;
}


Irgendwie will der das Bild nicht anzeigen...


Hab mal das Background gelöscht, schon gings... auf sowas muss man erstmal kommen...

Ich verzweifel noch...
 
Die background-Eigenschaft überschreibt die background-image-Eigenschaft.

Code: 
background: #ddd url(../top.jpg);

Denkbar wäre auch diese Variante ;)

Code: 
#wrap {
width:700px;
margin:0 auto;
background: #ddd url(shadow.png) left repeat-y;
}

#header {
height:100px;
background:#ddd;
}

#content {
background: #fff url(shadow.png) right repeat-y;
padding:0 2px;
margin-left:2px;
}

#footer {
height:50px;
background:#ddd;
}
 

Anhänge

  • demo_xkoy79_v2.zip
    944 Bytes · Aufrufe: 13
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück