Intranet Formatierung CSS

Mitschy71 · #1 (**permalink**) 19.02.2015, 09:04

Hallo Web Profis,

ich hoffe ichbekomme jetzt nicht zu viel Prügel hier im Forum da ich ein totaler Neueinsteiger bin und ich weiß das man sich eigentlich erst mal Grundlagen bei dem was man macht aneignen sollte.

Ich habe fast keine Ahnung von CSS und HTML aber soll in unserer Firma das Intranet betreuen. (Personalmangel)

Nun wurde unser Intranet umgestellt und die Formatierung bei einigen Elementen passt nicht mehr.

Ich habe mir die entsprechende Tabelle mal mit den Entwicklertools angeschaut und kopiere den HTML Code mal hier rein

Code:

<iframe name="collectionHeadFrame" id="collectionHeadFrame" src="/Vertrieb/indexVertrieb.html?hyperwave=action%3Dplain.action&isCollectionHead=true" frameBorder="0" scrolling="auto" style="border-bottom: 0px; border-left: 0px; width: 100%; background: white; height: 925px; border-top: 0px; border-right: 0px;" onload="sizeframe(this)">
<!-- DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" -->
<html>
<head>
<body style="overflow-x: auto; overflow-y: hidden; visibility: visible;">
<table width="99%" border="0" cellSpacing="0" cellPadding="0">
<tbody>
<tr>
<td align="right" vAlign="top">
<table width="100%" border="0" cellSpacing="0" cellPadding="0">

Das ist nur ein Auszug aus dem ganzen.

Nun wüßte ich gerne was ich in die dazugehörige CSS Datei schreiben muß das dieser Wert <td align="right" vAlign="top"> auf <td align="left" vAlign="top"> geändert wird.

Vielen Dank

Michael

cloned · #2 (**permalink**) 19.02.2015, 09:12

Ist das ein guter Denkanstoß?

Mitschy71 · #3 (**permalink**) 19.02.2015, 09:27

Hallo,

vielen Dank, aber der Link übersteigt mein wissen!
So wie ich das sehe hat der zwar ein ähnliches Problem wie ich, aber natürlich sieht seine CSS Datei ganz anders aus als meine.

Ich glaube ich stelle meine CSS mal hier rein

Code:

/* Fließtext */
.text {
        font: 12px/16px Arial, Helvetica, sans-serif;
}
.textKlein {
        font: 11px/14px Arial, Helvetica, sans-serif;
}

/* Überschrift */
.head {
        font: 18px Arial, Helvetica, sans-serif;
        color: #FF0000;
        margin-bottom: 10px;
		text-align: left;
}
/* Eingepflegtes Erscheinungsbild einer Überschrift erster Ordnung */
h1 {
   		font: 18px Arial, Helvetica, sans-serif;
        color: #FF0000;
        margin-bottom: 10px;
		text-align: left;
   }

/* Unterüberschrift */
.subhead {
  font: 12px Arial, Helvetica, sans-serif;
  text-align: left;
}
/* Eingepflegtes Erscheinungsbild einer Überschrift zweiter Ordnung */
h2 { font: bold 12px Arial, Helvetica, sans-serif;
     margin: 1px;
	 text-align: left;
}
/* Eingepflegtes Erscheinungsbild einer Überschrift dritter Ordnung */
h3 {
	font: 12px Arial, Helvetica, sans-serif;
	margin: 0px;
	text-align: left;
	}
h4 {
	font: 12px Arial, Helvetica, sans-serif;
	margin: 0px;
	text-align: left;
	}
h5 {
	font: 12px Arial, Helvetica, sans-serif;
	margin: 0px;
	text-align: left;
	}
h6 {
	font: 12px Arial, Helvetica, sans-serif;
	margin: 0px;
	text-align: left;
	}
/* Überschrift für Anlagecheck, Vorsorgecheck etc. */
.subheadCheckmodul {
  font: bold 12px Arial, Helvetica, sans-serif;
  color: #FF0000;
  text-align: left;
}

/* Datum über Textblöcken */
.datum {
  font: italic 9px Arial, Helvetica, sans-serif;
}

/* Metanavigation */
.metanav {
  font: 10px Arial, Helvetica, sans-serif;
}


/* Formularbeschreibung */
.formdescr {
  font: 12px Arial, Helvetica, sans-serif;
  padding: 10px 10px 10px 15px;
}

/* Überschrift eines Blocks von Formularelementen */
.formblock {
  font: 11px Arial, Helvetica, sans-serif;
  padding: 10px 10px 10px 15px;
}

/* Formularfeld-Bezeichnung */
.formlabel {
  font: normal 11px Arial, Helvetica, sans-serif;
                                padding-left: 15px;
}

/* Die Rasterlinie zwischen Textblöcken */
.rasterlinie {
  background-image: url(http://e036.icm.intern/imagesRedaktion/rasterlinie.gif);
  background-repeat: repeat-x;
}

/* Links werden nicht unterstrichen */
a {
  text-decoration: none;
  color: #000000;
}
/* und mit einer Farbe hinterlegt */
.hyperlink {
        background: #f2f2f2;
        color: #FF0000;
        margin-top: 2px;
        margin-bottom: 2px;


}
/* Link ohne Hinterlegung */
.hyperlinkListe {
        color: #000000;
        height: 20px;
        padding-top: 2px;
        padding-bottom: 2px;

}


/* Text in tabellarischen Darstellungen */
.tabellentext {
  text-align: left;
  font: 10px Arial, Helvetica, sans-serif;
  padding-right: 5px;
  padding-left: 5px
  }

/* Text in den Containern */
.containertext {
  text-align: left;
  font: 9px/14px Arial, Helvetica, sans-serif;
  background: #F2F2F2;
  padding: 5px;
  border-top: 1px solid #F9F8F3;
  border-right: 1px solid #F9F8F3;
  border-bottom: 1px solid #E3DDD1;
  border-left: 1px solid #F9F8F3;
}


/* Zeilenabstand in Absätzen */
p {
  font: 12px Arial; Helvetica; sans-serif;
  margin-top: 0cm;
  margin-bottom: 0cm;
  margin-left: 0cm;
  margin-right: 1cm;
  text-align: left;
  text-indent: 0cm;

}


body {
	font: 11px Arial, Helvetica, sans-serif;
	background: #FFFFFF;
}

/* Detailtabelle: Beschriftung einer Reihe */
.detailTHrow {
        text-align: left;
        font: bold 11px/16px Arial, Helvetica, sans-serif;
        background: #F9F8F3;
        border-top: 1px none #E7E0D4;
        border-right: 1px solid #E7E0D4;
        border-bottom: 1px solid #E7E0D4;
        border-left: 1px none #E7E0D4;
        vertical-align: top;
        padding: 2px 5px;

}

/* Detailtabelle: Beschriftung einer Spalte */
.detailTHcol {
        text-align: center;
        font: bold 11px/14px Arial, Helvetica, sans-serif;
        white-space: nowrap;
        padding: 2px 5px;
        background: #F9F8F3;
        border-top: 1px none #E7E0D4;
        border-right: 1px solid #E7E0D4;
        border-bottom: 1px solid #E7E0D4;
        border-left: 1px none #E7E0D4;
}

/* Detailtabelle: Zwischenüberschrift */
.detailTH {
        text-align: left;
        font: bold 11px/18px Arial, Helvetica, sans-serif;
        white-space: nowrap;
        padding-right: 5px;
        padding-left: 5px;
        background: #F1EFE8;
        border-top: 1px none #E7E0D4;
        border-right: 1px solid #E7E0D4;
        border-bottom: 1px solid #E7E0D4;
        border-left: 1px none #E7E0D4;
        vertical-align: top;
}


/* Detailtabelle: Rahmen der Tabelle */
.detailTabelle {
        border-top-style: solid;
        border-bottom-style: none;
        border-left-style: solid;
        border-right-style: none;
        border-top-width: 1px;
        border-left-width: 1px;
        border-right-width: 0px;
        border-bottom-width: 0px;
        border-color: #E3DDD1;
        background: #F9F8F3;
}

/* Detailtabelle: Zelle mit Daten - keine Titelzellen! */
.detailTD {
        font: normal 11px/16px Arial, Helvetica, sans-serif;
        text-align: center;
        vertical-align: top;
        border-style: solid;
        border-color: #E3DDD1;
        border-right-width: 1px;
        border-bottom-width: 1px;
        border-top-width: 0px;
        border-left-width: 0px;
        background: #FDFDFB;
        padding: 2px 5px;
}

.detailTDlinksbund {
        font: normal 11px/16px Arial, Helvetica, sans-serif;
        vertical-align: top;
        border-style: solid;
        border-color: #E3DDD1;
        border-right-width: 1px;
        border-bottom-width: 1px;
        border-top-width: 0px;
        border-left-width: 0px;
        background: #FDFDFB;
        text-align: left;
        padding: 2px 5px;
}

.detailTDrechtsbund {
        font: normal 11px/16px Arial, Helvetica, sans-serif;
        text-align: left;
        vertical-align: top;
        border-style: solid;
        border-color: #E3DDD1;
        border-right-width: 1px;
        border-bottom-width: 1px;
        border-top-width: 0px;
        border-left-width: 0px;
        background: #FDFDFB;
        padding: 2px 5px;
}

/* Beschriftung in tabellarischen Darstellungen */
th {
  font: normal 12px/16px Arial, Helvetica, sans-serif;
  vertical-align: middle;
  text-align: left;
}



/* Formulartabelle: Rand */
.formularTabelle {
  font: normal 11px Arial, Helvetica, sans-serif;
  width: 430px;
  border: 1px solid #E7E0D4;
  background: #F9F8F3;
}

/* Zelle eines Formulars */
.formularTD {
  font: normal 11px Arial, Helvetica, sans-serif;
  line-height: 14px;
  padding: 1px;
}


/* Formularfelder */
input {
  font-size: 11px;
  padding-right: 1px;
  padding-left: 1px;
}

/* Menüs */
select {
  font-size: 11px;
}


/* Formularfelder wie Name, Kontonr. etc. */
.inputLang {
  width: 220px;
  font: 11px Arial, Helvetica, sans-serif;
}

/* Formularfelder mit halber Länge, zb Popup Menues */
.inputKurz {
                    width: 100px;
                                font: 11px Arial, Helvetica, sans-serif;
}

/* Formularfelder wie PLZ und Betrag */
.inputGanzKurz {
  width: 60px;
  font: 11px Arial, Helvetica, sans-serif;
}

/* Formularfelder wie Datum und Jahr */
.inputGanzGanzKurz {
  width: 40px;
  font: 11px Arial, Helvetica, sans-serif;
}

/* Formularbeschriftung im Fehlerfall wird rot hinterlegt */
.formlabelFehler {
  font: 10px Arial, Helvetica, sans-serif;
  /* Das hier muss fuer NN4 raus!!! */
  background: url(pixel/form_fehler_bg.gif) repeat-x;
  color: #FFFFFF;
  padding-left: 15px;
  padding-right: 3px;
  /* und zwar bis hierhin, dafuer die Schrift fett und das rein:
  color: #FF0000;
  */
}

.formlabelFehlerMehrzeilig {
  font: 10px Arial, Helvetica, sans-serif;
  /* Das hier muss fuer NN4 raus!!! */
  background: url(pixel/form_fehler_bg_mehrzeilig.gif) repeat-x;
  color: #FFFFFF;
  padding-left: 15px;
  padding-right: 3px;
  padding-top: 4px;
  padding-lfet: 4px;
  /* und zwar bis hierhin, dafuer die Schrift fett und das rein:
  color: #FF0000;
  */
}

/* Fehlermeldung in verschachtelter Tabelle (zB allzweckkredit/templates/kreditwunsch.ifhtml) */
.formlabelFehlerTD {
  font: 10px Arial, Helvetica, sans-serif;
  color: #FFFFFF;
  padding-left: 15px;
  padding-right: 3px;
}

/* Erklärung des Fehlers vor einem Formularfeld */
.formFehlerDescr {
  padding: 0px 10px 0px 15px;
  font: 11px Arial, Helvetica, sans-serif;
  color: #FF0000;
}

/* Eingaben, die der User gemacht hat */
.formularTDusereingabe {
  font: bold 11px/14px Arial, Helvetica, sans-serif;
  padding: 1px;
}

/* Links in Formularen (zB AGB und Produktbedingungen) */
.formHyperlink {
        color: #000000;
        margin-top: 2px;
        margin-bottom: 2px;


}

.formCheckboxListe {
        font: 11px Arial, Helvetica, sans-serif;
        padding: 10px;
}

/* Der Rand um einen Container */
.containerTabelle {
        border-top: 1px solid #E7E0D4;
        border-right: 1px solid #E7E0D4;
        border-bottom: 1px none #E7E0D4;
        border-left: 1px solid #E7E0D4;
        background: #F2F2F2;
}

/* Die Titelzeile eines Containers */
.containerHead {
        font: 10px Arial, Helvetica, sans-serif;
        background: #D7D5D5;
        border-top: 1px solid #F9F8F3;
        border-right: 1px solid #F9F8F3;
        border-bottom: none #F9F8F3;
        border-left: 1px solid #F9F8F3;
}

/* Der Text im Börsenticker-Container */
/*.tickertext {
        font: 9px Arial, Helvetica, sans-serif;
        background: #F9F8F3;
        border-top: 1px none #F9F8F3;
        border-right: 1px none #F9F8F3;
        border-bottom: 1px solid #E3DDD1;
        border-left: 1px none #F9F8F3;
}*/

/* Eingabefelder in den Containern */
.inputWKN {
        width: 55px;
        background: #E3DCD0;
        font-size: 9px;
}

.inputKontonummer {
        width: 90px;
        background: #E3DCD0;
        font-size: 9px;
}

/* Sitemap */
.sitemapText {
  font: 9px/12px Arial, Helvetica, sans-serif;
  background: #F9F8F3;
  border-top: 1px solid #E7E0D4;
  padding-left: 5px;
}

/* Der Rand um die Blöcke */
.sitemapTabelle {
  border-top: 1px solid #E7E0D4;
  border-right: 1px solid #E7E0D4;
  border-bottom: 1px solid #E7E0D4;
  border-left: 1px solid #E7E0D4;
}

/* Die Titelzeile eines Blocks */
.sitemapHead {
  font: 9px/12px Arial, Helvetica, sans-serif;
  padding-left: 5px;
  background: #E3DDD1;
}

/* GROSSBUCHSTABEN */
.CAPS {
  text-transform: uppercase;
}

}.formCheckboxListe {
        font: 12px Arial, Helvetica, sans-serif;
        padding: 10px;
}

/* check: Tabelle */
.checkTabelle {
  border: 1px solid #E7E0D4;
}

.checkTD {
  font: normal 11px/16px Arial, Helvetica, sans-serif;
  padding: 1px;
}

/* check: Tabelle mit allen Produkten */
.checkEmpfehlungTD {
  font: normal 11px Arial, Helvetica, sans-serif;
  line-height: 14px;
  padding: 5px;
  background: #FFFFFF;
}

/* nicht empfohlen werden */
.checkLinkInaktiv {
  color: #E2DED3;
}

/* Check: Fehler bei der Eingabe */
.checkFehlermeldung {
  font: 11px Arial, Helvetica, sans-serif;
  color: #FF0000;
}

.checkHeadline {
  font: 11px Arial, Helvetica, sans-serif;
  padding: 10px;
}

.formBestaetigungText {
  font: bold 11px Arial, Helvetica, sans-serif;
  padding: 10px 10px 10px 15px;
}

/* Symbol für Aufzählungen */
li {
        list-style: url(http://e036.s-intranet.intern/imagesRedaktion/pfeil_aufzaehlung.gif);
}

/* Abstände rund um Aufzählungen */
ul {
        margin-top: 5px;
        margin-left: 12px;
}

/* Form Tag ohne Luecken */
form {
  margin: 0px;
  padding: 0px;
}


.textWinzig {
        font: 9px Arial, Helvetica, sans-serif;
}
.hyperlinkKlein {
        background: #F2F2f2;
        color: #FF0000;
        margin-top: 2px;
        margin-bottom: 2px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 11px;
}

/* Style für Inhaltsseite die Scrollt */
.scroll {
	position: relative;
	width: 99%;
	height: 92%;
	max-height: 95%;
	overflow: scroll;

cloned · #4 (**permalink**) 19.02.2015, 10:01

Verstehe ich richtig, dass du keinen blassen Schimmer von CSS hast, dich aber dafür von deiner Firma bezahlen lässt? Falls ja solltest du sagen, dass sie diesen Job doch lieber jemand geben sollen, der zumindest die Grundlagen beherrscht. Du wirst doch nicht der einzige sein, auch wenn Personalmangel herrscht.
Eigenleistung kann ich bis jetzt nämlich keine erkennen.

Mitschy71 · #5 (**permalink**) 19.02.2015, 10:09

Genau diese Kommentare habe ich befürchtet. Leider ist es so wie du es sagst. Bezahlt werde ich eigentlich für administrative Dinge mit denen ich mich sehr gut auskenne. Leider ist es so das wir sicher keine weitere Unterstützung bekommen. Ich denke es gibt viele EDVler die das gleiche Problem haben.

Sicherlich kann ich sagen ich habe davon keine Ahnung und bekomme es nicht hin. Ich dachte halt es wäre recht einfach die Formatierung nach links zu bekommen ohne das ich mir erst mal ein CSS Buch kaufen muss.

Wenn ihr mir nicht helfen könnt oder wollt dann lassen wir es.

Vielen Dank trotzdem!

Michael

cloned · #6 (**permalink**) 19.02.2015, 10:25

Du brauchst kein Buch, du brauchst nur so etwas wie "Grundlagen von CSS" in google eingeben. Aber ich will niemandem Helfen, der eigentlich Geld dafür bekommt und keinerlei Eigenleistung bringt.

Mitschy71 · #7 (**permalink**) 19.02.2015, 10:54

OK verstehe, trotzdem danke!!!

keine Eigenleistung stimmt zwar nicht ganz hab schon einiges in der CSS hinzugefügt.
Alle Überschriften Links bündig usw.

Nur den Bereich finde ich in der CSS nicht bzw. weiß nicht warum das im HTML Code immer auf Right steht.

Vielleicht kann mir jemand anderes einfach nur einen Tipp geben.

Vielen Dank

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Dingend Hilfe benötigt bei CSS Boxen für eine Wetterseite!	Web4Live	CSS	2	13.07.2011 17:01
CSS Formatierung Schrift	seven-of-nine	CSS	3	02.12.2008 14:47
css formatierung auf felder aus form begrenzen	vistree	CSS	3	02.11.2008 13:46
Mozilla ignoriert externes css	DarkWanderer	CSS	9	22.09.2005 12:39
css formatierung in java newsticker	eyetag	CSS	5	11.06.2005 13:40