HTML- und CSS-Formatierung

  • Ich bin ein Neuling in der Webentwicklung, und ich habe einige Probleme damit, meine Elemente richtig auf der Seite zu formatieren. Die Website wird unter Verwendung von html5 / css3 entwickelt. Ich versuche, das Begrüßungsfenster links, das Bildfeld rechts und den Text Mein Konto / Update rechts daneben anzuzeigen. Bitte sehen Sie sich das Bild an.

    Alles, was ich bisher versucht habe, hat entweder dazu geführt, dass alles auf der linken Seite gerechtfertigt ist oder die Elemente in separaten Zeilen erscheinen.

    Ihre Hilfe wird geschätzt.

    Vielen Dank Chris

    HTML- und CSS-Formatierung

    22 November 2011
    Chris
5 answers
  • Dies sollte Ihnen den Einstieg erleichtern:

    http://jsfiddle.net/Eric/u5xvt/


    HTML

     <div class="controls">
        <img src="http://placehold.it/100x100" />
        <span>My Account</span>
        <a>Update</a>
    </div>
    <p>Welcome,<br /> Chris</p>
     

    CSS

     .controls {
        float: right; /* push it to the right */
        width: 200px;
        background: #FFe0c0; /* Just so you can see what is going on */
        padding: 5px;
    }
    .controls img {
        float: left; /* push it to the left */
        margin-right: 5px;  
    }
    .controls span, .controls a{
        display: block;
        line-height: 50px;
    }
     
    22 November 2011
    Eric
  • Die CSS-Methode besteht darin, das Attribut float zu verwenden.

     <div class="Header">
        <div class="Welcome"></div>
        <div class="Image"></div>
        <div class="MyAccount"></div>
        <div class="clear"></div>
    </div>
    <div class="Body">
        ...
    </div>
    ...
     

    Und das CSS dafür:

     .Welcome { float: left }
    .Image { float: right }
    .MyAccount { float: right }
    .clear { clear: both }
     

    Der clear:both -Teil dient dazu, den Header um seinen Inhalt erweitern zu lassen - Ansonsten würden Welcome, Image und MyAccount tatsächlich über dem angezeigt, was sich in Body befindet.

    Schauen Sie sich dieses großartige Tutorial an: http://css.maxdesign.com.au/floatutorial/

    22 November 2011
    egasimus
  • Sie können versuchen, float: left zu setzen, um ein spaltenähnliches Layout zu erhalten. In CSS3 vielleicht http://intensivstation.ch/files/css3/columns.html hilft dir auch

    22 November 2011
    dasheddot
  • Ein Ansatz besteht darin, die Elemente auf der rechten Seite in ein Div einzuhüllen, das nach rechts verschoben wird. In diesem Div möchten Sie das Bild als Blockelement anzeigen und nach links verschieben.

    22 November 2011
    Brandon
  • Ohne Code-Beispiele zu sehen, kann ich nur versuchen, zu helfen. Ich würde vorschlagen, alle Ihre Elemente in etwas wie ein header -Tag zu packen und dann text-align:left; auszuführen. Theoretisch sollte Ihr img jedoch nach rechts geschoben werden, so dass alle in einer Zeile erscheinen. Sobald der Code veröffentlicht wurde, kann ich ihn weiter testen.

    22 November 2011
    jezza-tanuser1453918