Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 03.02.2005, 21:23
das.prov das.prov ist offline
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