Private Homepage(CSS/HTML)--> einige Fragen

Dieses Thema im Forum "Webmaster Hilfe / Programmierer Forum" wurde erstellt von mfsto, 09.06.2007.

  1. mfsto

    mfsto Erfahrener Benutzer

    Dabei seit:
    15.04.2007
    Beiträge:
    372
    Zustimmungen:
    0
    Hi!

    ich bin grade dabei mir ne eigene Seite zu basteln mit Hilfe von HTML/CSS , da ich vor einiger Zeit ma einen Kurs gemacht habe über diese zwei Sprachen , jedoch ein bisschen eingerostet bin :p
    Habe ne ungefähre Vorstellung wie die Seite aufgebaut werden soll.Hier ma nen Link:
    Klick

    Hier ist der provisorische Code von dem was ich bisher gemacht habe:

    Code:
    <html>
    <head>
    
    <title>...</title>
    
    </head>
    
    <body bgcolor="silver">
    
    <div color="black" align="center" style="background-color:black;">
    
    [img]....jpg[/img]
    
    </div>
    <hr noshade width="100%" size="1" noshade width="100%">
    
    <div align="left">
    <table cellpadding="0" cellspacing="" border="1" height="400" width="180">
    <tr>
    <td width="176" height="10" align="center">Men&uuml;
     </td></tr>
    <tr>
    <td width="176" align="left" height="80">
    <ul class="linksnav">
    [*][url=""]News[/url]
    [*][url=""]Bilder[/url]
    [*][url=""]Links[/url]
    [*][url=""]Kontakt[/url]
    </td></tr></div>
    
    <div align="left">
    <table cellpadding="0" cellspacing="0" border="1" height="360" width="180">
    <tr>
    <td width="176" height="40" align="center"><div>Links</div>
     </td></tr>
    <tr>
    <td width="176"><ul class="linksnav">
    [*][url=""]...[/url]
    [*][url=""]...[/url]
    [*][url=""]...[/url]
    [*][url=""]...[/url]
    [*][url=""]...[/url]
    [/list]</div>
                </td></tr>
                [/list]</div></table>
    
    
     <div style="position:absolute; top:228px; left:1068px;">
    
    <table cellpadding="0" cellspacing="" border="1" height="300">
    <tr>
    <td width="176" height="10" align="center"><div>Links</div>
     </td></tr>
    <tr>
    <td width="176"><ul class="linksnav">
    [*][url=""]...[/url]
    [*][url=""]...[/url]
    [*][url=""]...[/url]
    [*][url=""]...[/url]
    [*][url=""]...[/url]
    [/list]</div>
    
     <div style="position:absolute; top:100px; right:700px;width:200px;border-style:solid; border-width:2px;padding:4px ">
    
    LATEST NEWS
    
     </div>
    
     </body>
    
    
    </html>
    
    Nun komm ich nicht wirklich weiter:
    1.)Wie programmiere ich am praktischten die Boxen in der Mitte , wo die News stehen sollen?

    2.)Zuerst wollte ich die Tabellen einfach nur mit <div align..> positionieren , was jedoch nicht klappte.Z.B die rechte Boxe konnte ich nicht mit <div align ="right"> positionieren (die hang irgendwie immer unter der ersten links),weshalb ich <style="position:absolute;...> benutzt hab.Ist das richtig so , dass ich die Tabellen durch "position absolute" zueinander"floate" ?

    3.) Wie bewirkte ich ,dass der Inhalt in den Boxen nicht so aneinander gequetsch ist?Ich kenn nur cellspacing bzw. cellpadding:/

    4.)Die zwei Tabellen links kleben auch aneinander ..Was muss ich da machen?
    Könnt ihr mir sonst vielleicht noch paar Tipps geben , wie ich dieses Desing erreichen kann?Bitte nicht zu streng mit mir umgehen ..Bin ein ziemlicher Greenhorn auf dem Gebiet
    Wie gesagt ich wollte erstma das Grundgerüst machen und danach überarbeite ich das alles nochma , sprich auch an andere Explorer anpassen und und..
    Mir ist wichtig , dass ich das mittels HTML schreibe und nicht auf irgendwelche Baukästen zurückgreife , auch wenns am Ende nicht so gut aussehen wird^^.

    Würde mich über Hilfe freuen!!

    Mfg
     
  2. AdMan

    schau mal hier: Windows-Wartungs-Tool. Viele Probleme lassen sich damit einfach beheben. Oftmals ist der PC dann auch schneller!
    Registrieren bzw. einloggen, um diese und auch andere Anzeigen zu deaktivieren.
  3. #2 Blaxxun, 09.06.2007
    Blaxxun

    Blaxxun aka Noisy

    Dabei seit:
    06.11.2005
    Beiträge:
    6.171
    Zustimmungen:
    0
    erst mal zu 4. 2. Teil: sehr löblich :)

    1) Programmieren ist hier das falsch Wort, bei HTML handelt sich weder um eine Programmier- noch um eine Scriptsprache, HTML ist eine Auszeichnungsprache, gibt also nur an, wie Inhalt dargestellt wird. Soviel erst mal dazu. So, du solltest dich mit dem Begriff CSS, den du ja bereits schon angelernt hast etwas näher vertraut machen und insbesondere dir die "float:" Definition mal zu Gemüt führen -> http://www.css4you.de/float.html wunderbare Seite zum lernen, da hab ich meine gesamten CSS Kenntnisse her.

    2) absolute bedeutet, dass die Divs "stehn bleiben", also die Position ist eben nicht dynamisch bzw. muss absolut angegeben werden z.b. mit der top,right,left und bottom Angabe.

    3) Stichwort: margin padding: http://www.css4you.de/margin.html : http://www.css4you.de/padding.html

    Ich helf dir gerne weiter, falls du was nicht verstanden hast du Hilfe benötigst :)
     
  4. mfsto

    mfsto Erfahrener Benutzer

    Dabei seit:
    15.04.2007
    Beiträge:
    372
    Zustimmungen:
    0
    Hi!

    Die rechte Box (Die Box auf dem Bild-Link wo "Weitere Konfigurationsleiste" steht) soll rechts ausgerichtet sein und auch auf der gleichen Höhen sein wie die zwei Boxen links:
    Habe die Klasse definiert, jedoch klappts irgendwie nicht:

    .aussenabstand { margin-left:1070px;margin-top:5px;}

    Also der Abstand von links ist schonma so wie ich es wollte , nur ist die Box noch zuweit unten...Wenn ich den top-Wert vergrößer wächst der Abstand ja noch weiter nach unten:/
    Was muss ich machen?

    Soll ich eigentlich ganz auf die Positionierung mit "position absolute.."verzichten und lieber auf die margin-Eigenschaft zurückgreifen?
    Mfg
     
  5. #4 Blaxxun, 09.06.2007
    Blaxxun

    Blaxxun aka Noisy

    Dabei seit:
    06.11.2005
    Beiträge:
    6.171
    Zustimmungen:
    0
    Nö, absolut kannst du schon nutzen, aber willst du, dass deine DIVs sich automatisch anpassen an die Fenstergröße?

    Wenn nicht oder wenn doch, da muss man etwas werkeln. Mein Vorschlag wäre folgender:


    <div id="left" style="float:left; margin-right:10px;">Die linke Box</dvi>

    <div id="middle" style="margin: auto;">Die mittlere Box</dvi>

    <div id="right" style="float:right; margin-left:10px;">Die rechte Box</dvi>

    Keine Ahnung ob das funktioniert, ich glaub die CSS angaben sind völlig falsch, aber es soll nur folgendes verdeutlichen:

    Die Linke Box fließt links an der Mittlere Box vorbei und hat einen Abstand von 10px zu ihr. Die rechte fließt rechts vorbei und hat ebenfalls einen Abstand von 10px zu ihr. Die Mittlere wird immer genau in der Mitte des Browser dagestellt, so ist deine Webseite immer mittig. (margin: auto; gibt diese Effekt an)
     
  6. mfsto

    mfsto Erfahrener Benutzer

    Dabei seit:
    15.04.2007
    Beiträge:
    372
    Zustimmungen:
    0
    Ok danke für den Tipp:D

    Mfg
     
Thema: Private Homepage(CSS/HTML)--> einige Fragen
Besucher kamen mit folgenden Suchen
  1. private homepage css

    ,
  2. size=1 width=100% noshade color=silver align=left&gt;

    ,
  3. privat homepage css

Die Seite wird geladen...

Private Homepage(CSS/HTML)--> einige Fragen - Ähnliche Themen

  1. Frage zu windows 10 update

    Frage zu windows 10 update: hallo community :) Ich hab folgende Frage: Ich wollte mir vielleicht einen neuen rechner zulegen und ich hab mich gefragt ob ich dann die ältere...
  2. Frage zu ungewöhnlicher Email mit Zahlungsaufforderung

    Frage zu ungewöhnlicher Email mit Zahlungsaufforderung: Heute habe ich eine seltsame Mail erhalten. Und zwar steht darin: Sehr geehrte(r) *Voller NAME* unsere Zahlungserinnerung blieb bislang...
  3. Frage zu dieser Seite (Bildwirkerey)

    Frage zu dieser Seite (Bildwirkerey): Hallo... ich finde diese Seite ganz orginell und würde dort gerne ein paar Memes erstellen. http://bayeux.datensalat.net/ Leider klappt es bei...
  4. Excel Frage

    Excel Frage: Hallo , eine frage zum Microsoft Excel Ich Arbeite neuerdings mit einer Preisliste via Microsoft Excel im Betrieb. Da ich dort Preise auf die...
  5. Fragen zur PC Zusammenstellung

    Fragen zur PC Zusammenstellung: Ich möchte mir bei atelco http://www.atelco.de/pcconfigurator.jsp?pcConfigurator.step.1=1 einen PC zusammenstellen, weil ich im Geschäft keinen...