Simples Layout für custom-Startpage [Archiv]

Stanger

2016-04-17, 16:50:02

Hallo zusammen,
ich bin gerade dabei mir eine eigene Startpage zu machen da mir die Favoriten/Lesezeichen einfach zu unübersichtlich geworden sind.

Angedacht ist einfach 8x8 Kacheln mittig auf den Bildschirm zu platzieren.
Die Auflösung ist lediglich 1680x1050 sodaß andere getrost ignoriert werden können.

Bisher tu ich mir schwer wieder ins Thema Html&CSS zurückzufinden.

Habe bisher einfach eine Tabelle mit 8x8 Spalten/Zeilen zustande gebracht, aber schon
mit der Ausrichtung (Seitenmittig) scheitere ich bis dato kläglich.

Evtl. lässt sich das ja viel bequemer via CSS lösen.
Kann mir da grad jemdand unter die Arme greifen bitte ?

Besten Dank vorab.
mfg
Stanger

Ben Carter

2016-04-18, 08:59:03

Hallo,

so etwas kann man auch mit fließenden Containern machen. Leider ist das grid-Layout in CSS noch nicht so fest verankert, sonst ist das die schönere Alternative. Ich hab hier beispielsweise mal nur zwei Reihen erstellt, aber der Rest sollte klar sein. :)

<!DOCTYPE html>

<html lang="en">
<head>
<style type="text/css">
body
{
text-align: center;
}

div#boundary
{
margin-left: auto;
margin-right: auto;
width: 885px;
height: 885px;
}

div.container
{
float: left;
margin: 5px;
border: 0px;
background-color: #cccccc;
width: 100px;
height: 100px;
}

div.container > div
{
width: 100%;
height: 100%;
border: 1px solid #000000;
}
</style>

</head>

<body>
<div id="boundary">



<div class="container">
<div>Container 1.1</div>
</div>

<div class="container">
<div>Container 1.2</div>
</div>

<div class="container">
<div>Container 1.3</div>
</div>

<div class="container">
<div>Container 1.4</div>
</div>

<div class="container">
<div>Container 1.5</div>
</div>

<div class="container">
<div>Container 1.6</div>
</div>

<div class="container">
<div>Container 1.7</div>
</div>

<div class="container">
<div>Container 1.8</div>
</div>



<div class="container">
<div>Container 2.1</div>
</div>

<div class="container">
<div>Container 2.2</div>
</div>

<div class="container">
<div>Container 2.3</div>
</div>

<div class="container">
<div>Container 2.4</div>
</div>

<div class="container">
<div>Container 2.5</div>
</div>

<div class="container">
<div>Container 2.6</div>
</div>

<div class="container">
<div>Container 2.7</div>
</div>

<div class="container">
<div>Container 2.8</div>
</div>

</div>
</body>
</html>

lg Ben

Stanger

2016-04-18, 18:56:57

Super ! Vielen lieben Dank für die Hilfe genau sowas habe ich bisher vergebens gesucht bzw. versucht hinzubekommen .
Danke nochmals ! Das ist halt das 3DC-Forum einfach Spitze !!!

Liebe Grüße
Stanger

ezzemm

2016-04-21, 07:13:13

Als Startpunkt für neue Seiten verwende ich http://getskeleton.com/

Dieses Boilerplate enthält nur ein Reset-CSS, ein Fluid-Grid-System und entsprechende Anpassungen an die Screengröße. Finde ich toll das Ding ;)

Stanger

2016-04-22, 17:10:16

Auch sehr nice habs mir direkt gebookmarked.
Bin derzeit noch an der Version von Ben Carter welche mir auch ganz gut passt.

Mein Problem ist derzeit daß ich am liebsten die Favicons vergrößern würde auf z.b. 50x50 pcs und darunter einfach nochmal den Kurznamen des Links/Buttons.

Das scheitert warscheinlich, weil die Favicons von Haus aus in, für diesen Zweck, zu geringer Größe vorliegen dürften -> sprich wenn ich sie vergrößern würde siehts Pixelig aus und daß möchte ich dann auch wieder nicht. Geschweige denn zu finden wo der Firefox die unter Mint Cinammon ablegt usw. usw.

Zweites Problem ist atm die Zeit die ich dafür nicht übrig habe. :rolleyes:

mfg
Stanger