zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Ein paar Fragen eines CSS-Newbie (Textausrichten, etc)

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 03.02.2005, 21:23
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.02.2005
Beiträge: 28
das.prov befindet sich auf einem aufstrebenden Ast
Standard Ein paar Fragen eines CSS-Newbie (Textausrichten, etc)

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 !
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 03.02.2005, 22:42
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 18.01.2005
Beiträge: 696
wahsaga befindet sich auf einem aufstrebenden Ast
Standard Re: Ein paar Fragen eines CSS-Newbie (Textausrichten, etc)

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 03.02.2005, 23:11
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.02.2005
Beiträge: 28
das.prov befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #4 (permalink)  
Alt 03.02.2005, 23:44
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

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......
__________________
</ulle>
Mit Zitat antworten
  #5 (permalink)  
Alt 04.02.2005, 01:07
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 18.01.2005
Beiträge: 696
wahsaga befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #6 (permalink)  
Alt 04.02.2005, 08:34
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.02.2005
Beiträge: 28
das.prov befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #7 (permalink)  
Alt 04.02.2005, 09:13
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

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

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

Syntaxfehler im Markup !!!!
__________________
</ulle>
Mit Zitat antworten
  #8 (permalink)  
Alt 04.02.2005, 10:14
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.02.2005
Beiträge: 28
das.prov befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
  #9 (permalink)  
Alt 04.02.2005, 10:36
Benutzer
neuer user
 
Registriert seit: 15.12.2004
Beiträge: 83
mikey befindet sich auf einem aufstrebenden Ast
Standard

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>
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 04.02.2005, 11:09
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.01.2005
Ort: Berlin
Beiträge: 2.152
mazzo wird schon bald berühmt werden
Standard

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.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


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


Alle Zeitangaben in WEZ +2. Es ist jetzt 22:29 Uhr.