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

Inhalte im div pixelgenau positionieren - nach außen hin dynamisch bleiben

A

Alex__

Neues Mitglied
Hallo,
ich möchte demnächst auf einer Webpräsenz eigenentwickelte als auch Programme von Bekannten kostenlos zur Verfügung stellen.
Der Aufbau soll dabei dem flat-Design des Windows 8 Stores folgen. ;Jump

Design steht soweit auch, leider mangelt es hier und da an der technischen Umsetzung - hab zuvor noch nichts mit HTML/CSS gemacht..

Geplant ist die einzelnen Programme als Kacheln in verschiedenen Tabellen aufzuteilen.
Hier mal ein Beispiel, wie so eine Kachel aussehen soll:
Kachel.jpg

Wie sollte ich die einzelnen Element am besten positionieren? Das Bild hab ich per
Code: 
    margin-left: 12px;
    margin-top: 12px;
auf die gewünschte Position gebracht. Die Schriften wollen sich jedoch nicht vernünftig ausrichten lassen.
Hab's dann mit ner Tabelle und allign="top" versucht bin vom Ergebnis aber nicht wirklich überzeugt. (Kann HTML Texte eigentlich anhand der Baseline ausrichten wie ich das in der Zeichnung habe oder wird immer die obere linke Ecke genommen?)

Hat da jemand ne Idee wie man das realisieren kann?
 
Mit HTML positioniert man nichts, und vergiss die Sache mit den Tabellen am besten gleich wieder. Styling wird ausschließlich per CSS vorgenommen.
 
Hab oben schon bisschen css gepostet, war mir nur nicht sicher in welches Unterforum die Frage gehört. Vielleicht könnte ein Mod die Frage verschieben?

Tronjer schrieb:
Mit HTML positioniert man nichts, und vergiss die Sache mit den Tabellen am besten gleich wieder. Styling wird ausschließlich per CSS vorgenommen.
Zum Vergrößern anklicken....

Frag deswegen ja nach, möcht das von Anfang an vernünftig machen :)

Mit Tabellen und fixen Positionsangaben hab ich mir ne Lösung zusammen gebastelt, fand das aber selbst als HTML Neuling schon ziemlich schlimm was da für ein Code bei rum kommt - wenn man dann hinterher noch etwas ändern möchte kann man's eigentlich wieder neu machen...
 
Code: 
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
.content {
    border:1px solid black;
    width:250px;
    height:100px;
    vertical-align:top;
}
.tilePicture{
    width: 76px;
    height: 76px;
    margin-left: 12px;
    margin-top: 12px;
}
.moreDetails{
    width: 50px;
    height: 12px;
    margin-left: 101px;
}
tileCaption, tileAuthor{
    font-size: 14px;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin-left: 100px;
}
tileAuthor{
    font-size: 13px;
    font-style: oblique;
    color: #909090;
}
</style>
</head>


<body>
<div class="content">
<div>
    <img class="tilePicture"src="http://corrupteddevelopment.com/wp-content/uploads/2012/02/paper-airplane-icon.jpg"/>
</div>
    <tileCaption>Projektname</tileCaption>
    <tileAuthor>Entwicklername</tileAuthor>
<div>
    <img class="moreDetails"src="http://www.onesmarthost.co.uk/assets/templates/osh/images/more_details.jpg"/>
</div>
</div>
</body>
</html>
Bilder erstmal wahllos aus dem Internet zusammengesucht.

Wie bekommt man die Schriften nach oben, so wie ich es in der Zeichnung dargestellt hab?
Und wie leg ich den Abstand zwischen den Elementen fest? Ein 'margin-top: xyz' im tileAuthor css bewirkt erstmal nichts.



Edit: Sorry an den Mod der meine doppelten Beiträge gelöscht hat. Dachte es wär nur ein Fehler, dass sie nicht angezeigt wurden :???:
 
Zuletzt bearbeitet:
Alex__ schrieb:
Frag deswegen ja nach, möcht das von Anfang an vernünftig machen :)
Zum Vergrößern anklicken....

Verstehe ich ja. Punkt ist allerdings, dass sich das nicht mit wenigen Sätzen erklären lässt, wenn dir das gesamte Vorwissen fehlt. Um Elemente nebeneinander zu positionieren gibt es in CSS Möglichkeiten wie float:left oder display:inline-block, und dein Bild mal als Ausgangspunkt genommen, ließe sich ein Grundgerüst mit Blockelementen erstellen, um alles pixelgenau zu positionieren. Problematisch wird so ein starres Layout allerdings dann, wenn die Seite sich unterschiedlichen Auflösungen und mobilen Geräten anpassen soll. Dafür wäre der Einsatz eines Frameworks wie Bootstrap anzuraten, um das Design von Grund auf responsive zu halten.

Aber das Design alleine bringt noch keine Funktionalität. Woher bezieht die Seite ihren Inhalt, was soll passieren, wenn ein User auf den Button "Details" klickt, wie kann er Inhalte herunterladen? Du wirst viele Monate brauchen, um dir die für dein Projekt notwendigen Grundlagen anzueignen und dich neben HTML und Styling-Fragen auch mit Programmierung und Datenbanken auseinandersetzen müssen. Wenn du dazu bereit bist, dann beginne mit einem HTML/CSS-Kurs (Buch, Videos, Tutorials, etc.) und erstelle erstmal eine ganz einfache Seite.
 
Tronjer schrieb:
Verstehe ich ja. Punkt ist allerdings, dass sich das nicht mit wenigen Sätzen erklären lässt, wenn dir das gesamte Vorwissen fehlt.[...]Aber das Design alleine bringt noch keine Funktionalität. Woher bezieht die Seite ihren Inhalt, was soll passieren, wenn ein User auf den Button "Details" klickt, wie kann er Inhalte herunterladen?
Zum Vergrößern anklicken....

Ist zum Glück nicht so das ich so ein Projekt komplett ohne Vorwissen angehe. Komme eigentlich aus der Java-Ecke und hab da schon reichlich mit MySQL-Datenbanken (jdbc,hibernate Anbindung) gearbeitet. Schätze mal in 1-2 Wochen sollt ich die grundlegenden Kentnisse ihn HTML/CSS erlernen können.

Tronjer schrieb:
Problematisch wird so ein starres Layout allerdings dann, wenn die Seite sich unterschiedlichen Auflösungen und mobilen Geräten anpassen soll.
Zum Vergrößern anklicken....
Meine Idee war das Seitenlayout auf eine Minimalauflösung von 1024x768 aufzubauen (optimal 1333x768) und alles was größer ist dementsprechend skalieren. Weiß nicht ob das der übliche Weg unter HTML/CSS ist? (Unter Java würd ich mir nen geigneten Layoutmanager schreiben)


Hab vorhin eigentlich schon meinen Code gepostet - die Antwort wurde aber scheinbar nicht freigeschaltet? (Hab mal jetzt die URL's aus den src Attributen rausgenommen)

Code: 
<html><head>
<meta charset="UTF-8">
<style type="text/css">
.content {
    border:1px solid black;
    width:250px;
    height:100px;
    vertical-align:top;
}
.tilePicture{
    width: 76px;
    height: 76px;
    margin-left: 12px;
    margin-top: 12px;
}
.moreDetails{
    width: 50px;
    height: 12px;
    margin-left: 101px;
}
tileCaption, tileAuthor{
    font-size: 14px;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin-left: 100px;
}
tileAuthor{
    font-size: 13px;
    font-style: oblique;
    color: #909090;
}
</style>
</head>
 
<body>
<div class="content">
<div>
    <img class="tilePicture"src="bild"/>
</div>
    <tileCaption>Projektname</tileCaption>
    <tileAuthor>Entwicklername</tileAuthor>
<div>
    <img class="moreDetails"src="bild"/>
</div>
</div>
</body>
</html>

Problem eigentlich klar. Die Schriften müssen nach oben.
Und wie leg ich den Abstand zwischen den Elementen fest? Ein 'margin-top: xyz' im tileAuthor css bewirkt erstmal nichts, oder benötigt man dafür zwangsläufig divs?
 
Zuletzt bearbeitet:
Alex__ schrieb:
Meine Idee war das Seitenlayout auf eine Minimalauflösung von 1024x768 aufzubauen (optimal 1333x768) und alles was größer ist dementsprechend skalieren. Weiß nicht ob das der übliche Weg unter HTML/CSS ist? (Unter Java würd ich mir nen geigneten Layoutmanager schreiben)
Zum Vergrößern anklicken....

Schau dir das mal an.

Scaffolding · Bootstrap

Das Grid-Layout erspart gefühlte 90% der Arbeit, welche sich aus dem späteren Anpassen des Layouts für unterschiedliche Auflösungen ergeben.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben