CSS Boxen

[hmm]

Hi,

hier mein Code:

        <header>
            <h1>Skill-Matrix</h1> 
           
            <nav>
                <ul>
                    <li><a href="/">Logout</a></li>
                    <li><a href="/verwalten">Verwalten</a></li>
                    <li><a class="selected" href="/welcome">Willkommen</a></li>
                </ul>
            </nav>
        </header>

        <main>
            Hallo @username.
            <div class="center">
                <table id='tabelleMain'></table>
                <input type="button" value="Neuen Mitarbeiter hinzufügen" onclick="createNewMitarbeiter();"></input>
                <input type="button" value="Ausgewählte Mitarbeiter löschen" onclick="removeMitarbeiter();"></input>
            </div>
            
            <table id='tabelleSkills'></table>
		</main>
            
        <footer>
    		<a href="#">AGB</a> |
    		<a href="#">Impressum</a>
    	</footer>

Dazu folgender CSS:

header {
	display: block;
	top:0px;
	left:0px;
	right:0px;
	position:absolute;
	padding:0px;
	text-align:left;
	font-weight:bold;
	color:#FAFAFA;
	background: #3b5998;
	width: 100%;
	height: 82px;
	z-index:3;	
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #F2F2F2;
}

li {
    float: right;
}

li a {
    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #BEBEBE;
}

li a.selected {
    background-color: #BEBEBE;
}

.login {
    float: right;
    top:0px;
    width: 600px;
    height: 0px;
    margin: 10px;
}

main {
	background-color: #F2F2F2;
	height:100%;
	overflow:auto;
	position: relative;
        text-align: center;
	color: black;
}

html {
	height: 100%;
}

body {
	height: 100%;
	background-color: #F2F2F2;
}

.center {
	background-color: #FAFAFA;
	position: relative;
	left: 25%;
	width: 50%;
	height: 100%;
	overflow:auto;
}

footer {
	background-color: #F2F2F2;
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 1rem;
        text-align: center;
	color: #045FB4;
}

Meine Tabelle "tableSkills" soll links neben dem div "center" stehen, leider steht sie links darunter. Wie korrigiere ich das?

Mein div center fängt viel zu weit oben an, dadurch sieht man die Hälfte der Tabelle "tableMain" nicht, wie korrigiere ich das?

[Gunnar Bittersmann]

@@hmm

hier mein Code:

Wo kann man sich das ansehen? Online-Beispiel, bitte.

LLAP 🖖

[hmm]

Link zum aktuellen Projekt

Login:

Christopher

hallo123

Habs kompiliert und seperat hochgeladen. Auf der Startseite hab ich anscheint genau das gleiche Problem.

[marctrix]

Hej hmm,

Link zum aktuellen Projekt

Ich bekomme nur eine Fehlermeldung:

No Cloud9 workspace is bound to this domain name. Please check if the domain name is spelled correctly.

Marc

[hmm]

https://scala-play-framework-5-blutwurst1.c9users.io/

Seite

Habs neu geladen. Vieles verbessert, muss aber noch viel machen. Was wuerdet ihr an meiner Stelle als naechstes verbessern? Die Seite sieht noch unprofessionell aus, verbessere ich das mit css oder nutz ich besser Bibliotheken wie d3?

[Gunnar Bittersmann]

@@hmm

Was wuerdet ihr an meiner Stelle als naechstes verbessern?

Die Fehler.

Das Bild hat keinen Alternativtext. Wenn es reindekorativen Zwecken dient, sollte es als Hintergrundbild im CSS stehen, nicht im Markup. Un wenn schon, dann muss es alt="" haben und das per role="none presentation" als Schmuckelement gekennzeichnet werden.

Die Eingabefelder haben keine Beschriftung. Die Zuordnung fehlt; die Werte der for-Attribute beziehen sich auf die jeweilige ID der Eingabelemente. Solche sind aber bei dir bislang noch nicht vorhanden.

LLAP 🖖

[hmm]

Danke ich setze das heute um. Hast du dich auch eingelogt? Christopher hallo123

Nach login kann man bisher:

Namen der Mitarbeiter und Skills aendern, Mitarbeiter zufuegen und loeschen.Wird stets direkt gespeichert, aber die Tabelle wird zu breit durch die Skills

[marctrix]

Hej hmm,

https://scala-play-framework-5-blutwurst1.c9users.io/

Seite

Habs neu geladen. Vieles verbessert, muss aber noch viel machen. Was wuerdet ihr an meiner Stelle als naechstes verbessern?

Ich würde nie so eine mehrdimensionale Tabelle machen. Viel zu viele Spalten. So kriegt man das nicht vernünftig auf Smartphones.

Eine Tabelle je Mitarbeiter wäre besser. Kannst ja auch anbieten eine Tabelle je Skill usw.

Bei einem Mitarbeiter dann zu jedem Skill eine kleine Tabelle - falls überhaupt drei Spalten benötigt werden. Eine Grafik für den schnellen Überblick (vermutlich wäre hier SVG gut geeignet).

Mit Flexbox bekommt man die kleinen Tabellen schön nebeneinander (kompakt), wenn der Screen groß genug ist, auf dem Smartphone stehen die dann halt untereinander…

Überschriften korrekt verwenden für eine erkennbare Struktur!

Marc

[marctrix]

Warum bleibt die Tabelle eigentlich nicht in dem weißen kästen (habe jetzt den Quellcode nicht angeschaut - kannst ja selber mal schauen, ob du korrekt verschachtelt hast oder ein Overflow-Problem lösen musst…

[Rolf b]

Chrome ist unglücklich über deine Seite. Er sagt:

Mixed Content: The page at 'https://scala-play-framework-5-blutwurst1.c9users.io/welcome#' was loaded over HTTPS, but requested an insecure stylesheet 'http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'. This request has been blocked; the content must be served over HTTPS.

Möglicherweise sehe ich dadurch deine Seite nicht so, wie Du sie gerne darstellen würdest. Ob er glücklicher ist, wenn Du bootstrap per https von bootstrapcdn anforderst, oder ob er es gerne von c9users haben will, das weiß ich nicht so ganz.

Edit: Ok, hab was neues über Chrome gelernt - oben rechts auf das entsprechende Icon drücken und ihm den Mixed-Zugriff erlauben.

Rolf

[beatovich]

Nur ein paar Funde:

CSS: overflow: hidden; ist meistens schlecht. Nutze stattdessen overflow:auto;

Wann immer eine Hintergrund Farbe definiert wird, auch eine color definieren. Das beugt überraschungen vor.

Die Gefahr besteht, dass dein absolut positionierter header Teile des main-Elements überdeckt.

[hmm]

ok, danke.

hab die Positionierung des Headers auf relative gesetzt. Dadurch seh ich jetzt wieder meine Tabelle.

Problem: Ich habe einen fetten Rand zwischen meinem Header und dem Bildschirm.

Problem2: Leider ist meine Skill Tabelle immer noch nicht Links neben der Haupttabelle, sondern Links unter der Haupttabelle.

[beatovich]

hallo

Problem: Ich habe einen fetten Rand zwischen meinem Header und dem Bildschirm. Problem2: Leider ist meine Skill Tabelle immer noch nicht Links neben der Haupttabelle, sondern Links unter der Haupttabelle.

Die Ursache solcher Darstellungen können ja in den Entwicklertools eingesehen werden. Dabei auch bitte das DOM überprüfen, ob das auch wie von dir gedacht geparst wurde.