webpage programmier-frage!

Dieses Thema im Forum "Web Page Design" wurde erstellt von Tobi24, 22.10.2006.

  1. Tobi24

    Tobi24 Thread Starter MacUser Mitglied

    Beiträge:
    703
    Zustimmungen:
    4
    MacUser seit:
    03.02.2005
    hallo!


    habe eine programmierfrage zu einem html-design, welches mir vorschwebt:

    ich möchte gerne eine html-seite erstellen, in der sich der seiteninhalt in einem rechteckigen feld (frame?) in der mitte der seite abspielt.

    wichtig: dieses feld soll immer schön zentral auf dem bildschirm sein, egal welchen browser und welchen monitor ich benutze!

    wie geht das?

    vielen dank für alle antworten!
     
  2. miss.moxy

    miss.moxy MacUser Mitglied

    Beiträge:
    6.558
    Zustimmungen:
    624
    MacUser seit:
    15.05.2004
    Mit CSS.
    Schau dir das mal an:
    http://www.intensivstation.ch/files/templates/temp11.html


    P.S.: HTML und CSS sind nicht programmieren (;
     
  3. Tobi24

    Tobi24 Thread Starter MacUser Mitglied

    Beiträge:
    703
    Zustimmungen:
    4
    MacUser seit:
    03.02.2005
    aber jetzt noch mal was ganz doofes... ;)


    habe eine seh brauchbare css datei gefunden und fange so langsam an, sie zu verstehen. wie kann ich die denn dann im browser darstellen? es muss doch erst noch eine html datei geben, oder?
     
  4. 2nd

    2nd MacUser Mitglied

    Beiträge:
    8.902
    Zustimmungen:
    242
    MacUser seit:
    25.07.2004
    Jo. Das HTML-Markup wird durch die CSS Selektoren und Attribute in der CSS Datei "gestyled". Diese CSS Datei wird im Head der HTML Seite eingebunden und gilt dann für das gesamte Dokument.

    2nd
     
  5. miss.moxy

    miss.moxy MacUser Mitglied

    Beiträge:
    6.558
    Zustimmungen:
    624
    MacUser seit:
    15.05.2004
    Ich nehme an, du kennst Selfhtml???
    Wenn nicht -> Pflichtlektüre für (angehende) Webdesigner ;)
     
  6. Der Graf

    Der Graf MacUser Mitglied

    Beiträge:
    389
    Zustimmungen:
    17
    MacUser seit:
    02.06.2004
    So z.B. könnte es gehen:

    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">
    	<head>
    		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    		<title>SeiteXYZ</title>
    		<style type="text/css">
    			.helpline {
    			  position:absolute;
    			  height:1px;
    			  width:100%;
    			  top:50%;
    			}
    			.cont {
    			  position:absolute;
    			  height:400px;
    			  width:700px;
    			  left:50%;
    			  margin-left:-350px;
    			  margin-top:-200px;
    			  text-align:center;
    			  border: #000000 1px solid;
    			}
    		</style>
    
    	</head>
    	<body>
    		<div class='helpline'>
    			<div class='cont'>
    				<p>Das hier steht alles genau in einem zentrierten Kasten.</p>
    	
    			</div>
    		</div>
    
    	</body>
    </html>
    
    Erklärung dazu: Im HTML-Teil wird ein div-Container helpline geöffnet, darin ein div-Container "cont". Darin steht dann der Inhalt.
    Zum CSS: .helpline befindet sich (von der Höhe her) genau in der Seitenmitte und ist 1px hoch. Dieser Container dienst nur als Positionierungshilfe für den inneren Container
    .cont hat genaue Angaben, wie groß Dein Inhalt sein soll, in diesem Beispiel 400x700px. Wäre "cont" auch nur 1px breit, würde "left: 50%" ausreichen, da das genau die Mitte wäre. Der Inhalt ist aber 700px breit, also wird er um genau die Hälft der Breite nach links "rausgeschoben", die andere Hälfte lappt dann rechts über => margin-left: -350px. Gleiches Prinzip mit der Höhe...
    Aber ich kann Lea nur beipflichten, HTML-Grundwissen ist eine tolle Sache, also ab zu SelfHTML. Und wenn Du da fertig bist ;-) und noch Hunger auf CSS hat, dann versuch mal http://www.csszengarden.com, da gibt es einen "resources"-Teil mit tollen und hilfreichen Links zu Seiten, die Dir CSS-Tricks beizubringen versuchen.

    Liebe Grüße, der Graf.
     
  7. asylum

    asylum MacUser Mitglied

    Beiträge:
    747
    Zustimmungen:
    1
    MacUser seit:
    10.06.2005
    geht nicht beim Internet Explorer!!!
    Naja ansonten machst du um den Bereich den du gern Zentriert haben willst ein <.center> <./center> [ohne Punkt versteht sich ;-)] und musst dann mit padding-top arbeiten. einfach rum probieren bis du denkst es ist horizontal zentriert, is ja ueberall anders.

    wenn dir das gar nix sagt was ich geschrieben habe, dann benutzt mal die Suche bei SelfHTML und lies dir die Erklaerungen durch

    mfg
     
  8. miss.moxy

    miss.moxy MacUser Mitglied

    Beiträge:
    6.558
    Zustimmungen:
    624
    MacUser seit:
    15.05.2004
    Seit wann?
    margin-left: auto; geht nicht (selfhtml).
    Aber diese Ausrichtung versteht auch der IE soweit ich weiß…
     
  9. Tobi24

    Tobi24 Thread Starter MacUser Mitglied

    Beiträge:
    703
    Zustimmungen:
    4
    MacUser seit:
    03.02.2005

    vielen dank! html grundwissen habe ich wirklich! es war dann doch eher der "css-hunger"! ;)
     
  10. miss.moxy

    miss.moxy MacUser Mitglied

    Beiträge:
    6.558
    Zustimmungen:
    624
    MacUser seit:
    15.05.2004
    Da kann ich dir auch http://www.culturedcode.com/css/reference_app.html
    empfehlen, gute Übersicht über die CSS2.1 Eigentschaften… (Selfhtml hat auch eine
    ganz annehmbare CSS-Abteilung (; )
    Und wirklich auch den Zengarden, der wurde aber eh schon vom Graf
    glaub ich verlinkt.
     
Die Seite wird geladen...

Diese Seite empfehlen