• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bild und Text nebeneinander "bewegen"

S

Schalopez

Neues Mitglied
Hallo zusammen,

ich bin noch ziemlich frisch im Thema HTML/CSS drin und versuch mich grad so durch einige Übungsaufgaben durchzuschlagen. Leider bin ich jetzt an ein Problem gekommen das ich so irgendwie nicht bewältigen kann. Die Sache ist simpel erklärt, aber irgendwie für mich zu schwer zum lösen :mad:

2008xd.png


Und zwar möchte ich das der Pfeil und "BACK TO DASHBOARD" vom Rand und von der Seperationslinie weggehen und einen Abstand zu allem haben (Also das um die zwei Elemente Freiraum entsteht). Ich möchte nicht das Sie sich direkt in der mitte des "Hauptelements" befinden, sondern einfach nur ca von oben, links und unten 30-40% weg bewegen. So ung.:

1znrevm.png


Und das natürlich der Pfeil und das "Back to Dashboard" selbst auch noch einen Abstand bekommen und sich das Back to Dashboard in etwa zwischen dem Pfeil befindet. Was ich so bisher habe:

HTML
HTML: 
<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <link type="text/css" rel="stylesheet" href="style.css" />
    </head>
    <body>
        <g3>
            <img src="icons/arrow.png">
            <p class="dash">BACK TO DASHBOARD</p>
            <div class="leftseperator"></div>
            <h3>Document Title</h3>

        </g3><g7>60</g7>
    </body>
</html>

CSS
Code: 
* {
    box-sizing:border-box;
}

g3 {
    display:inline-block;
    width:30%;
    background-color: #33332D;
    color:#FFF8E3;
    font-family: Arial;
}

g7 {
    display:inline-block;
    width:70%;
    background-color: #FFF8E3;
    color:#33332D;
}

.dash {
    display: inline-block;
    font-size: 10px;
}

.leftseperator{
    border-bottom:1px solid #FFF8E3;
}

Hättet ihr eine Idee was ich da machen kann? Evlt auch Tipps?

(Im übrigen benutz ich keine div's, sondern ein Grid, find ich persönlich einfach übersichtlicher und einfacher :P)

Vielen Dank im vor raus!
 
Also um Außenabstände bestimmter Elemtente zu bekommen benutzt man die CSS-Angabe margin
diese kann wie folgt aussehen :
margin: 10px 0 5px 8px;
die Reihenfolge der Pixelangaben gibt hier bei folgende positionen an:
margin:10px(oben) 0(von rechts) 5px(von unten) 8px(von links);

es geht auch:
margin:10px 0;
das wiederum bedeutet dann dass der Abstand oben und unten jeweils 10px beträgt und rechts und links 0, ist eine Kurzschreibweise wenn man einheitliche Abstände hat.

und es gibt noch eine Möglichkeit einen Abstand zu definieren:
margin-left:5px;
margin-bottom:8px;
hier gibst du also speziefisch für jede Seite einzelnd die Abstände an.
Das benutzt man aber oft nur noch um bereits vorhandene Abstände zu überschreiben
zb:
<div class="test"></div>
<div class="test zwei"></div>

.test {margin:10px 0 5px 8px;}
.test.zwei{margin-left: 0;}

alles weitere zu dem Thema positionierung von div's und anderen Block-Elementen findest du hier:

http://de.selfhtml.org/css/eigenschaften/randabstand.htm
 
Hey,

danke für die Hilfe, hat so teilweise geklappt. Der Pfeil ist nun richtig platziert, nur der Text macht mir da aber noch probleme. Der Text befindet sich nicht auf der selben höhe, sondern irgendwie unter dem Pfeil. Hab dem Element schon margin hinzugefügt, aber das einzige was sich bei Margin ändert ist der Abstand nach unten, der Text an sich bewegt sich weder hoch, noch nach links, noch nach rechts. Wisst ihr was man da machen kann?
HTML: 
<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <link type="text/css" rel="stylesheet" href="style.css" />
    </head>
    <body>
        <g3>
            <img class="arrow" src="icons/arrow.png">
            <p class="dash">BACK TO DASHBOARD</p>
            <div class="leftseperator"></div>
            <h3>Document Title</h3>

        </g3><g7>60</g7>
    </body>
</html>

Code: 
* {
    box-sizing:border-box;
}

g3 {
    display:inline-block;
    width:30%;
    background-color: #33332D;
    color:#FFF8E3;
    font-family: Arial;
}

g7 {
    display:inline-block;
    width:70%;
    background-color: #FFF8E3;
    color:#33332D;
}

.arrow {
    margin: 50px 0 20px 70px;
}

.dash {
    display: inline-block;
    font-size: 10px;
    margin: 20px;
}

.leftseperator{
    border-bottom:1px solid #FFF8E3;
}


5vuae1.png
 
Tronjer schrieb:
Ich würde erst mal die Fantasy-Tags löschen und durch gültige ersetzen.
Zum Vergrößern anklicken....

Welche Fantasy-Tags? :-) Falls du die "g"-Tags meinst, kann ich nur sagen das Sie (für mich jedenfalls) wesentlich übersichtlicher und einfacher sind, da ich gelernt habe bzw noch lerne, meine Homepage in einem Grid aufzubauen.

Ich hab das Problem mit meinem Text jetzt doch noch lösen können. Habe beim .dash Tag in der CSS Datei margin entfernt und position:relative sowie top:-24px; hinzugefügt.
 
Schalopez schrieb:
Welche Fantasy-Tags? :) Falls du die "g"-Tags meinst, kann ich nur sagen das Sie (für mich jedenfalls) wesentlich übersichtlicher und einfacher sind, da ich gelernt habe bzw noch lerne, meine Homepage in einem Grid aufzubauen.
Zum Vergrößern anklicken....

Grid-Layout ist etwas völlig anderes; du könntest diese Elemente ebenso gut 'foo' oder 'bar' nennen. Der Grund dafür, dass überhaupt etwas angezeigt wird, liegt a) in der Fehlertoleranz moderner Browser und b) der Definition als Blockelement.

Wenn du interessiert an der Erstellung von Webseiten bist und in diesem Forum auf qualifizierte Antworten hoffst, solltest du dich schon an valides HTML halten.
 
Zuletzt bearbeitet:
Tronjer schrieb:
Grid-Layout ist etwas völlig anderes; du könntest diese Elemente ebenso gut 'foo' oder 'bar' nennen. Der Grund dafür, dafür, dass überhaupt etwas angezeigt wird, liegt a) in der Fehlertoleranz moderner Browser und b) der Definition als Blockelement.

Wenn du interessiert an der Erstellung von Webseiten bist und in diesem Forum auf qualifizierte Antworten hoffst, solltest du dich schon an valides HTML halten.
Zum Vergrößern anklicken....

Da hat sich jemand die W3C Spezifikation für custom elements nicht durchgelesen, welches mit dem Sinn und Zweck erstellt wurde um divitis einigermaßen zu verhindern und Elementen einen besseren symantischen Wert zu geben. Sogar eigene Javascript Methoden existieren, um diese Art von Elementen dynamisch zu erstellen, hier nachlesbar.

Es muss zwar ein Bindestrich in den Tagnamen beinhaltet sein (um einen Konflikt mit möglichen zukünftigen Elementen zu verhindern), jedoch sind diese tags alles andere als Fantasie.

Man möchte darüberhinaus noch beachten, dass Schalopez in seinem Post erklärt hat, dass er ein absoluter Anfänger ist. Man kann auch freundlich sein und einem Anfänger erklären was ein richtiges Grid-System ist und man kann genausogut es einem Anfänger entschuldigen, wenn er nicht valide Sachen schreibt. Hilfreich ist eine Antwort für einen Anfänger nur, wenn er etwas damit anfangen kann, ich glaube kaum dass Schalopez beim nächsten Post nach der Antwort 'ein Grid-Layout ist etwas völlig anderes' mit einem konformen Grid-System angelaufen kommt.
 
Und ebenso wenig dürfte der Hinweis auf DOM-Extensions, die im obigen Kontext auch semantisch bedeutungslos wären, für einen Einsteiger besonders hilfreich sein. Am Anfang steht der richtige Einsatz standardkonformer HTML-Elemente und deren Umsetzung in W3C-valide Webseiten. Erst wenn das verstanden wurde, macht es Sinn, über Responsive Design und Grid-Systeme zu reden.
 
Code: 
g1 - grid 10% breite
g2 - grid 20% breite
g3 - grid 30% breite
...
g10 - grid 100% breite

Das wäre meiner Meinung das 'System' das Schalopez hier verwenden möchte, mit Bindestriche (zb. <g-1>) wäre das sogar laut den Specs in Ordnung und für viele Leute angenehmer als beispielweise Twitters
Code: 
<div class='col-md-*'>

Mein Hinweis an DOM Extensions galt nicht an Schalopez, sondern an dich, da du meintest, dass diese falsch sind, was nicht ganz stimmt.

Ich fand einfach nur, dass deine Antwort gegenüber einem Anfänger (der wahrscheinlich noch nie was von valide oder W3C gehört hat), relativ unfreundlich war, da du Ihm sagst, dass er etwas falsch gemacht hat, aber keine Verbesserungsmöglichkeiten oder alternative Beispiele bietest, aus denen er lernen kann. Aus dem Grund wird er weiterhin seine g Tags verwenden.

An Schalopez, das hier wäre auch eine Möglichkeit:

Code: 
<div class='back'>
    <img class="arrow" src="icons/arrow.png">
    <p class="dash">BACK TO DASHBOARD</p>
</div>

Code: 
* {
    box-sizing:border-box;
}

.arrow {
    vertical-align:middle;
}

.dash {
    display: inline-block;
    font-size: 10px;
}

.back{
    padding:20px;
}

Mit dem padding bei .back kannst du den Abstand ändern. Durch vertical-align:middle bleiben Bild und Text mittig, die margins kannst du weglassen :)
 
Hallo

jedoch sind diese tags alles andere als Fantasie.
Zum Vergrößern anklicken....

Doch. Mit der aktuellen HMTL-Spezifikation haben die nichts zu tun.

Mal abgesehen davon, das die Adresse

http://http://w3c.github.io
Zum Vergrößern anklicken....

überhaupt nicht die offizelle W3C-Adresse ist sollte man sich bei sachlichen Texten immer zunächst die erste Seite anschauen, wo die Autoren selbst schreiben

This document is a non-normative reference...
Zum Vergrößern anklicken....

und weiter

Publication as an Editor's Draft does not imply endorsement by the W3C Membership. This is a draft document...
Zum Vergrößern anklicken....

Offiziell ist daran also gar nichts.

Elementen einen besseren symantischen Wert zu geben ...
Zum Vergrößern anklicken....

Was soll denn das sein? Wenn du semantisch meinst ist das auch falsch. Semantisch können Elemente nur sein, wenn jeder weiß, was sie aussagen sollen. Bei selbstkreierten Elementen geht das gar nicht.

Tronjer hat vollkommen recht, das solche selbst kreierten Elemente nichts mit aktuellem HTML zu tun haben. Selbst wenn man sie trotzdem benutzen will ist es bei der Fehlersuche sinnvoll und üblich erst mal nur offizielle Elemente zu benutzen um Fehler durch unzulässige Elemente auszuschließen.

Edith:

Ich habe mal eine Beispieldatei mit eingefügten Pfeil erstellt. Da der semantisch genau nichts aussagt hat er im Quelltext nichts verloren. Deshalb sollte er entweder als Hintergrundgrafik oder per CSS eingefügt werden. Der HTML-Quelltext für den Pfeil lautet damit schlicht

Code: 
<p>Back do dashboard</p>

Das ist doch auch viel übersichtlicher als wilde Konstruktionen per div und img und class. Per CSS wird dann mittels Font-Awesome der Pfeil eingefügt. Das hat zum Beispiel auch den Vorteil, das der Pfeil auch beim Zoomen nicht pixelig wird, wie das bei Grafiken geschehen würde. Und man hat so ganz nebenbei auch noch hunderte anderer Symbole zur Verfügung.

Weiterhin können problemlos padding, border und margin angepasst werden, ohne das sich das Verhältnis vom Pfeil zum Text ungewollt ändert. Der Abstand zwischen den beiden kann natürlich auch angepasst werden.

Das gesamte CSS ist in der Beispieldatei im head-Bereich vorhanden. Bei Übernahme muss nur der Pfad zu den Font-Awesome-Dateien (die man kostenlos im Internet downloaden kann) angepasst werden.

http://foreninfo.bplaced.net/seiten_fremdseiten/2014_02_05_schalopez_pfeil_vor_wort.html

Gruss

MrMurphy
 
Zuletzt bearbeitet:
Das wäre meiner Meinung das 'System' das Schalopez hier verwenden möchte, mit Bindestriche (zb. <g-1>) wäre das sogar laut den Specs in Ordnung und für viele Leute angenehmer als beispielweise Twitters
Zum Vergrößern anklicken....

Der tiefere Sinn semantischer Tags besteht darin, dass Maschinen die Bedeutung der Inhalte besser interpretieren können. Ein Grid-System betrifft hingegen ausschließlich das Design und hat nichts mit der Struktur der Seite zu tun. Aus dem Grunde gehört es auch in CSS-Klassen und keinesfalls ins HTML. Selbst wenn man ein beliebiges Tag per JavasScript im Browser "anmeldet", bleibt das für Suchmaschinen trotzdem ein semantisch nicht einzuordnendes Element und insofern ist es eigentlich schon fahrlässig, hier einen Edge Case zu konstruieren, um einem dadurch Einsteiger implizit zu bestätigen, dass die Verwendung erfundener Tags unproblematisch wäre.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben