Ein paar Fragen eines CSS-Newbie (Textausrichten, etc)

das.prov · #1 (**permalink**) 03.02.2005, 20:23

So, dank einiger Tutorials habe ich mein erstes CSS Konstrukt auf die Beine gestellt und habe ein paar offene Fragen.

Hier erstmal der Quellcode:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

  <head><title>test01</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    <!--
    body {
      margin:0px;
    }

    #main {
      background:#C9CDD2;
      width:780px;
      margin:auto;
    }

    #title {
      /* background-image:url(images/title.jpg); */
      height:95px;
    }

    #menu {
      background:#41576F;
      color:#ffffff;
      height:25px;
      text-align:center;
      padding-top:10px;
      font-family:Verdana;
      font-size:12px;
      font-weight:bold;
    }

    #content {
      height:400px;
    }

    #content2 {
      border-style:solid;
      border-color:#ffffff;
      border-right-style:none;
      float:right;
      margin-top:10px;
      width:510px;
      height:370px;
      font-family:Verdana;
      font-size:12px;
    }

    #bild {
      /* background-image:url(images/picture.jpg); */
      width:250px;
      height:400px;
      float:left;
    }

    #footer {
      background:#ffffff;
      text-align:center;
      font-family:Verdana;
      font-size:10px;
    }

    -->
    </style>
  </head>
</html>

<div id="main">

  <div id="title">
    (titelgrafik)
  </div>

  <div id="menu">
    menüpunk1 | menüpunkt2 | menüpunkt3 | menüpunkt4 | menüpunkt5
  </div>

  <div id="bild">
    (seitengrafik)

    (breite=250px)
  </div>

  <div id="content">
    <div id="content2">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, ....
    </div>
  </div>

  <div id="footer">
    footertext
  </div>

</div>

Vorschau hier

So.
Fragen:

1. Beim Menü habe ich getrixt. Der Text soll sowohl horizontal wie auch vertikal ausgerichtet sein. Der text-align:center; ist klar, nur die vertikale Ausrichtung haut nicht hin weshalb das mit padding gemacht habe.
Mit vertical-align geht es nicht... ?

2. Der weisse Rahmen:
- Warum kann ich den Border nicht mit border:1px; auf 1px reduzieren? Wie kann ich die Randstärke anpassen?
Bzw generell: Gibt es da ne schönere Lösung als zwei verschachtelte DIVs? Ich dachte schon an fest positionierte die ich mit z-index anordne?

- Der Rahmen soll aussen (oben, unten, links) jeweils z.b. 10px Abstand haben.
Der Text innen soll ringsum 10px Abstand zum weissen Rahmen haben.
Wenn ich PADDING verwende zerballert es mir aber alles... Das widersetzt sich meiner Logik...

- Kann ich das ganze auch direkt zentrieren und auf Breite bringen? Sprich den #main Container weglassen? Oder ist das schon der richtige Weg, dafür einen weiteren Container zu machen??

So. Das waren mal meine Fragen,
vielleicht habe ich auch einige Dinge komplett falsch gemacht - das ist nun eben das, was ich mir aus den Fingern gezogen habe.

DANKE !

wahsaga · #2 (**permalink**) 03.02.2005, 21:42

Zitat:

Zitat von das.prov

Mit vertical-align geht es nicht... ?

nein.
http://www.w3.org/TR/CSS21/visudet.h...vertical-align
'vertical-align'
Applies to: inline-level and 'table-cell' elements

Zitat:

- Warum kann ich den Border nicht mit border:1px; auf 1px reduzieren?

ich sehe nicht, wo du überhaupt eine angabe zur rahmenbreite gemacht hättest ...?
nachlesen: http://de.selfhtml.org/css/eigenschaften/rahmen.htm

Zitat:

Wie kann ich die Randstärke anpassen?
Bzw generell: Gibt es da ne schönere Lösung als zwei verschachtelte DIVs?

definiere "randstärke".

Zitat:

- Der Rahmen soll aussen (oben, unten, links) jeweils z.b. 10px Abstand haben.
Der Text innen soll ringsum 10px Abstand zum weissen Rahmen haben.
Wenn ich PADDING verwende zerballert es mir aber alles... Das widersetzt sich meiner Logik... ;)

dann solltest du dich vermutlich intensiver mit dem "box model" auseinandersetzen.

das.prov · #3 (**permalink**) 03.02.2005, 22:11

Erstmal danke für die Info.
Leider machst du es dir einfach, wenn du sagst, ich soll mich mal das Box Modell anschauen. Wenn ich alles wüsste, würde ich hier nicht fragen und um Tipps bitten??

ich sehe nicht, wo du überhaupt eine angabe zur rahmenbreite gemacht hättest ...?
ja ich habe gerade keine drin nachdem ein einfaches border:1px; nicht geklappt hat... Deswegen die Frage.

Definition Randstärke: Bezieht sich hierbei auf die Borderline. Sprich, wenn ich die mit 1px definieren kann passt's. Dann fehlt nur noch der Innen- und Aussenabstand den ich nicht hinbekommen habe.

'vertical-align' - Applies to: inline-level and 'table-cell' elements
Soweit war ich auch schon. Wie kann ich dann den Text mittig ausrichten?

cu. das.prov

ulle · #4 (**permalink**) 03.02.2005, 22:44

Zitat:

Leider machst du es dir einfach, wenn du sagst, ich soll mich mal das Box Modell anschauen. Wenn ich alles wüsste, würde ich hier nicht fragen und um Tipps bitten??

hmmmmm... Du möchtest Tipps und möchtest Lernen - OK

Durcharbeiten (Sinnvoll)

http://www.css4you.de/

BOX-Model

http://www.css4you.de/wsboxmodell/index.html

CSS2 (deutsche Übersetzung)

http://edition-w3c.de/TR/1998/REC-CSS2-19980512/

CSS2.1 (W3C)

http://www.w3.org/TR/CSS21/

Danach liest / studierst Du die Knowledge Base in diesem Forum, das sind ca. 20 Ausgesuchte THREADs mit vielen Tipps

http://www.xhtmlforum.de/viewforum.php?f=11

Des weiteren mal im Forum nach THREADs mit vielen Antworten schauen,die haben meist einen hohen Informationsgehalt.

Das klingt nach viel Stoff, aber die Zeit die Du in den LINKs oben investierst holst Du in jedem Projekt wieder ein......

wahsaga · #5 (**permalink**) 04.02.2005, 00:07

Zitat:

Zitat von das.prov

Leider machst du es dir einfach, wenn du sagst, ich soll mich mal das Box Modell anschauen. Wenn ich alles wüsste, würde ich hier nicht fragen und um Tipps bitten??

*grr* hast du dich überhaupt erst mal darüber informiert, was dieses stichwort bedeutet?
nein ...? na wer macht es sich denn dann hier bitte einfach?

Zitat:

ja ich habe gerade keine drin nachdem ein einfaches border:1px; nicht geklappt hat...

border und dann nur die breitenangabe ist auch unsinn.
border fasst die drei eigenschaften -witdh, -style und -color zusammen.
es gibt also keinen grund, warum einen rahmenbreite von 1px nicht "funktionieren" sollte, wenn man's richtig macht.

Zitat:

'vertical-align' - Applies to: inline-level and 'table-cell' elements
Soweit war ich auch schon.

ach so, deshalb auch deine frage,

Zitat:

Mit vertical-align geht es nicht... ?

wenn du dich hier weiterhin so arrogant gibst, wirst du von mir keine tipps mehr bekommen.

das.prov · #6 (**permalink**) 04.02.2005, 07:34

Guten Morgen.
ich habe nicht vor mich mit dir oder anderen zu streiten. Sorry.
Es ist nun leider so dass es genig Foren gibt wo man immer wieder das gleiche zu hören bekommen... "lies es dir durch" ... "lern es"...

Also, das Boxmodell habe ich soweit schon verstanden.
In Bezug auf das Beispiel von mir, sagen mir meine "Kenntnisse" über das Boxmodell nun, dass ich per padding 10px; einen Innenabstand des Textes zur Border (der Box) bekommen sollte.
Mache ich das so, fliegt die Box aus dem Div Container und wunderhalb des Footer-Div angeordnet.

Zu dem Border:
Ich habe ja oben bereits border-style:solid; + border-color:#ffffff; angegeben. Hatte jedoch irgendwie den width tag versaut, nun geht es. *ohman*

wenn du dich hier weiterhin so arrogant gibst, wirst du von mir keine tipps mehr bekommen.
Tur mir leid, was war daran ignorant?
Mit vertical-align geht es nicht. Wenn ich dann durch das SelfHTML schaue (mit dem ich viel arbeite) dann finde ich nur diesen Tag in Bezug auf verticale Ausrichtung.
Ich muss das doch nicht extra in eine Tabelle stopfen damit ich es ausrichten kann, oder?

Gruß das.prov

Danke für die Links, habe schon einge vorher gekannt - einige schon gelesen und arbeite mich durch. Ich möchte ja nicht, dass hier sich einer 'erbarmt' und mir das fertiges Layout hinstellt. Einfach nur einen Tritt in die Richtige Richtung denn in der Fülle der Tags die es für CSS gibt ist es gar nicht so einfach den richtigen zu finden... Aber das kennt ihr sicherlich ja auch.
Und es geht mir auch um die generelle Frage ob das CSS von mir soweit in Ordnung ist - sprich die Unterteilung in die DIV Container oder ob ich da schon 'grundlegende' Fehler drin habe. Mercie nochmals.

ulle · #7 (**permalink**) 04.02.2005, 08:13

http://validator.w3.org/check?uri=ht...ox.de%2Fcss%2F

http://jigsaw.w3.org/css-validator/v...usermedium=all

Syntaxfehler im Markup !!!!

das.prov · #8 (**permalink**) 04.02.2005, 09:14

Ich versteh nur nicht, was an meinem </html> falsch sein soll. Ich muss doch am Ende den Tag wieder schliessen...
Dennoch danke.

Ansonsten, generell, der Aufbau mit den Div's ist insofern schon logisch korrekt oder würdest ihr da einen anderen Weg gehen?

mikey · #9 (**permalink**) 04.02.2005, 09:36

angenommen deine Kopie weiter oben ist noch die aktuelle dann liegts daran das dein </html> zu früh geschlossen wird

normalerweise kommt ans unterste Ende des Dokumentes

</body>
</html>

mazzo · #10 (**permalink**) 04.02.2005, 10:09

Zitat:

Zitat von das.prov

Zu dem Border:
Ich habe ja oben bereits border-style:solid; + border-color:#ffffff; angegeben. Hatte jedoch irgendwie den width tag versaut, nun geht es. *ohman*

Mit vertical-align geht es nicht. Wenn ich dann durch das SelfHTML schaue (mit dem ich viel arbeite) dann finde ich nur diesen Tag in Bezug auf verticale Ausrichtung.
Ich muss das doch nicht extra in eine Tabelle stopfen damit ich es ausrichten kann, oder?

zum ersten: Das kannst Du so zusammenfassen:

Code:

border: 1px solid #000000;

Guck mal hier was vertical-align genau macht:
http://www.css4you.de/example/vertical-align.html

Wenn Du Abstände zum Rand innerhalb einer Box haben möchtest, musst Du padding benutzen. Mit margin: auto; kannst Du Inhalte zentrieren.

Auf css4you.de findest Du sicher einen Haufen bestens dokumentierter und dargestellter Beispiele, wenn dann noch Definitionsfragen bestehen ist SelfHTML sicher gut. Da SelfHTML aber eine andere Strukturierung hat, und komplexer ist, kannst Du mit css4you als "Hautpnachschlagewerk" evtl. schneller und effizienter zum Ziel kommen.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Ein paar Fragen im allgemeinen!	Pumpkin	Offtopic	2	14.08.2005 13:22
Anfängerin hat ein paar Fragen bezgl. css...	darvida	CSS	8	27.01.2005 21:46
mein erstes css layout-dazu habe ich jetzt ein paar fragen:)	destroy90210	CSS	6	03.01.2005 22:37
CSS Newbie Frage	clark kent	CSS	2	03.11.2004 19:24
CSS anfänger will nen paar Tips / Antworten :>	koDiacc	CSS	23	20.09.2004 12:33