Druckversion des Themas
Hier klicken um das Topic im Orginalformat anzusehen
HTML-Editor phase 5 Support _ HTML _ Am Ende mit meinen Kenntnissen
Geschrieben von: magoac 04.12.2007 - 23:07
Hallo Forenuser,
ich hoffe meine Frage ist nicht zu allgemein oder unverschämt, wenn ich einfach darum bitte. mir bei dem CSS zu helfen, ich verzweifel dran.
Ich habe größere Probleme mit meinem Layout: http://magoac.ma.funpic.de/
Ohne das Problem weiter zu beschreiben, ich denke ihr seht was falsch ist. Der "Body" ist irgendwie nach rechts verschoben und die restlichen Menü-Button sollten auf der selben Höhe sein wie "Home", wobei "Home" links stehen sollte und die restlichen daneben.
Ich hoffe das sind nur kleine Fehler im CSS und ihr könnt mir da "schnell" helfen.
Ich würde mich auf jeden Fall freuen.
Geschrieben von: i.b.g 05.12.2007 - 7:59
Hallo,
dann wollen wir mal schauen.
1. Du hast im Quelltext zweimal den body-Tag notiert, was syntaktisch falsch ist.
2. Dann solltest Du eingebettete Stylesheets im Header des Quelltextes unter bringen.
3. Der "Fehler" in der Anzeige wird durch die Deklaration von ul.dropdown in style/dropdownmenu.css ausgelöst. Ich habe das mal auskommentiert und denke so wie es dann aussieht möchtest Du es haben.
Ich habe mal meinen Versuch hier eingestellt:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>FeG Eschweiler</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link href="style/feglogo.jpg" rel="shortcut icon" />
<link rel="stylesheet" type="text/css" href="style/style.css" />
<link rel="stylesheet" type="text/css" href="style/colour.css" />
<link rel="stylesheet" type="text/css" href="style/dropdownmenu.css"/>
<style>
/*----style.css----*/
#menuebox {
position: relative;
height: 50px;
}
.stupidie {
display: none;
}
#menue {
height: 50px;
width: 766px;
margin-top: 12px;
/*position: absolute;*/
}
#menue .aussen {
float: left;
display: block;
overflow: hidden;
width: 8em;
height: 1.5em;
font-weight: bold;
text-align: center;
background-color: #347AB5;
color: 57696F;
}
#menue .aussen:hover {
float: left;
width: 8em;
height: auto;
font-weight: bold;
text-align: center;
background-color: #baca3F;
color: #57696F;
}
span.menutag {
display: block;
cursor: default;
}
/* global */
html{height: 100%;}
body
{ font-family: verdana, arial, sans-serif;
padding: 0px;
margin: 0px;
font-size: .68em;
}
p
{ margin: 0px;
padding: 0px 0px 16px 0px;
line-height: 1.7em;
}
h1
{ font-family: arial, sans-serif;
font-size: 108%;
letter-spacing: .1em;
}
h2
{ margin: 0px;
padding: 0px 0px 4px 0px;
font-size: 100%;
}
img{border: 0px;}
a{outline: none;}
/* block quote */
blockquote
{ margin: 20px 0px 20px 0px;
padding: 10px 20px 0px 20px;
border-left: 8px solid;
}
/* unordered list */
ul
{ margin: 8px 0px 0px 16px;
padding: 0px;
}
ul li
{ list-style-type: square;
margin: 0px 0px 11px 0px;
padding: 0px;
}
/* ordered list */
ol
{ margin: 8px 0px 0px 24px;
padding: 0px;
}
ol li
{ margin: 0px 0px 11px 0px;
padding: 0px;
}
/* margin lefts / margin rights - to centre content */
#main, #links, #footer, #logo, #menu, #content
{ margin-left: auto;
margin-right: auto;
}
/* main container */
#main{width: 780px;}
/* links above the logo / footer */
#links, #footer
{ width: 726px;
height: 24px;
font-size: 88%;
text-transform: uppercase;
padding: 12px 21px 0px 19px;
}
#links{text-align: right;}
#footer
{ text-align: center;
border-top: 2px solid;
}
#links a, #footer a{text-decoration: none;}
#links a:hover, #footer a:hover{text-decoration: underline;}
/* logo */
#logo
{ width: 766px;
height: 125px;
border-top: 2px solid;
border-bottom: 5px solid;
}
#logo h1
{ margin: 0px;
letter-spacing: .2em;
padding: 41px 0px 0px 19px;
font-size: 160%;
}
/* navigation menu */
#menu
{ height: 30px;
width: 766px;
margin-top: -30px;
position: relative;
}
#menu ul{margin: 0px auto;}
#menu li
{ float: left;
margin: 0px 5px 0px 0px;
padding: 0px;
list-style: none;
}
#menu li a
{ display: block;
float: left;
height: 22px;
text-decoration: none;
padding: 6px 19px 2px 19px;
}
/* main content */
#content
{ width: 700px;
overflow: hidden;
}
/* column 1 - contains sidebar items */
#column1
{ width: 22px;
margin: 22px 0px 0px 0px;
float: right;
padding: 19px 19px 15px 19px;
}
.sidebaritem
{ text-align: left;
width: 0px;
float: left;
margin: 0px 0px 23px 0px;
border: 1px solid;
padding: 14px 8px 14px 19px;
}
.sidebaritem h1
{ margin: 0px;
font-weight: normal;
padding: 0px 0px 16px 0px;
text-transform: uppercase;
}
.sidebaritem p
{ line-height: 0px;
padding: 0px 0px 8px 0px;
}
.sidebaritem a, .sidebaritem a:hover
{ padding: 0px 0px 2px 19px;
text-decoration: none;
}
.sbilinks{padding: 0px}
.sbilinks ul{margin: 0px auto;}
.sbilinks li
{ margin: 0px;
float: left;
list-style: none;
}
.sbilinks li a , .sbilinks li a:hover
{ float: left;
height: 16px;
text-decoration: none;
padding: 5px 0px 4px 19px;
width: 149px;
}
/* column 2 - page content */
#column2
{ text-align: justify;
width: 90%;
float: left;
padding: 2px 3px 15px 19px;
}
#column2 h1
{ font-family: arial, sans-serif;
padding: 16px 0px 5px 0px;
margin: 0px 0px 12px 0px;
border-bottom: 1px solid;
font-size: 150%;
text-transform: uppercase;
font-weight: normal;
}
#column2 a, #column2 a:hover
{ padding: 0px 0px 2px 0px;
text-decoration: none;
border-bottom: 1px dashed;
}
#column2 a:hover{border-bottom: 1px solid;}
/* contact page - form layout */
form{margin-top: 0px;}
div.row
{ clear: both;
width: 448px;
}
div.row span.formlabel
{ float: left;
width: 150px;
text-align: left;
}
div.row span.forminput
{ float: right;
text-align: right;
}
div.spacer
{ clear: both;
width: 80px;
}
input, textarea
{ width: 259px;
font-family: verdana, arial, sans-serif;
font-size: 100%;
border: 1px solid;
margin: 2px;
}
.submit
{ font-family: verdana, arial, sans-serif;
font-size: 100%;
border: 1px solid;
width: 70px;
height: 22px;
cursor: pointer;
}
*----color.css----*
body
{ background: #FFFFFF url(back.png) repeat;
color: #57696F;
}
blockquote
{ background: #FFFFFF;
color: #57696F;
border-color: #449B70;
}
#main
{ background: #FFFFFF url() repeat-y;
color: #57696F;
}
#links, #footer
{ background: #449B70 url(linkfoot.png);
color: #FFFFFF;
border-color: #57696F;
}
#links a, #footer a, #links a:hover, #footer a:hover
{ background: transparent;
color: #FFFFFF;
}
#logo
{ background: #FFFFFF url(logo.jpg) no-repeat;
color: #449B70;
border-top-color: #449B70;
border-bottom-color: #449B70;
}
#logo h2
{ background: transparent;
color: #CCC;
}
h1
{ background: transparent;
color: #449B70;
border-color: #E1E1E1;
}
#menu
{ background: transparent;
color: #57696F;
}
#menu li a
{ background: #449B70;
color: #57696F;
border-color: #109CEF;
}
#menu li a:hover, #menu li a#selected, #menu li a#selected:hover
{ background: #baca3F;
color: #FFFFFF;
}
#content, #column2, #column2 a
{ background: #FFFFFF;
color: #57696F;
border-color: #57696F;
}
#column2 a:hover
{ background: #FFFFFF;
color: #449B70;
border-color: #449B70;
}
.sidebaritem
{ background: #F9F9F9;
color: #57696F;
border-color: #E1E1E1;
}
.sbilinks li a, .sidebaritem a
{ background: transparent url(link_arrow.png) no-repeat left center;
color: #57696F;
}
.sbilinks li a:hover, .sidebaritem a:hover
{ background: transparent url(link_arrow_sel.png) no-repeat left center;
color: #449B70;
}
input, textarea
{ background: #FFFFFF;
color: #57696F;
border-color: #E1E1E1;
}
/*----dropdownmenu.css----*/
/* -------------------------- BEGIN do not change --------------------------- */
/* diese deklaration ist ausgeschaltet - nun wird die seite richtig angezeigt*/
/*ul.dropdown
{
list-style: none;
margin:0;
padding:0;
width:8em;
z-index:99;
}*/
ul.dropdown * ul
{
list-style: none;
margin:0;
padding: 0;
display:none;
position:absolute;
z-index:99;
width:8em;
}
ul.dropdown li
{
float:left;
}
ul.dropdown li * li
{
border:1px solid #fff;
float:none;
position: relative;
}
ul.dropdown ul * ul
{
left:98%;
top:0;
}
ul.dropdown a
{
display:block;
}
ul.dropdown ul * a
{
height:100%;
}
ul.dropdown li:hover ul ul, ul.dropdown li:hover ul ul ul, ul.dropdown li:hover ul ul ul ul
{
display:none;
}
ul.dropdown li:hover ul, ul.dropdown ul li:hover ul, ul.dropdown ul ul li:hover ul
{
display:block;
}
/* -------------------------- END do not change --------------------------- */
</style>
</head>
<body onload="enableDropdownMenuForIE();" bgcolor="#FFFFFF">
<div id="main">
<div id="links">
<!-- **** INSERT LINKS HERE **** -->
</div>
<div id="logo"></div>
<div id="menu"><script type="text/javascript" src="css_dropdown.js"></script>
<ul class="dropdown" id="mainmenu">
<li><a href="index.php">Home</a>
</li>
<li><a href="gemeinde.php">Gemeinde</a>
<ul>
<li><a href="termine.php">Termine</a></li>
<li><a href="predigten.php">Predigten</a></li>
<li><a href="gruppen.php">Gruppen</a></li>
<li><a href="hauskreise.php">Hauskreise</a></li>
<li><a href="bilder.php">Bilder</a></li>
<li><a href="artikel.php">Artikel</a></li>
</ul>
</li>
<li><a href="links.php">Links</a>
</li>
<li><a href="kontakt.php">Kontakt</a>
</li>
<li><a href="impressum.php">Impressum</a>
</li>
</ul></div>
<div id="content">
<div id="column2">
<h1>Herzlich Willkommen bei der FeG Eschweiler</h1><br>
Schön, dass Sie hier sind, auf der Homepage der Freien evangelischen Gemeinde Eschweiler!
</div>
</div>
<div id="footer">
copyright © 2007 FeG Eschweiler | <a href="http://validator.w3.org/check?uri=referer">XHTML 1.1</a> </div>
</div>
<div style="font-size: 0.8em; text-align: center; margin-top: 1.0em; margin-bottom: 1.0em;">
</div>
<!-- Ad by funpic.de --><noscript><div style="display:none"> </div></noscript><script type="text/javascript" src="http://media.funpic.de/layer.php?bid=39743555"></script><!-- End Ad by funpic.de --></body>
</html>
Geschrieben von: magoac 05.12.2007 - 22:05
Danke für Deine Antwort! 
Ich habe Deine Seite mal auf http://magoac.ma.funpic.de/index1.php abgespeichert. Also der Fehler ist bei mir in Firefox immer noch siehe die angehangenen Screenshots. Wobei die Menü Button nebeneinander sein sollten an der grünen Linie ausgerichtet und bei "Gemeinde" die anderen Felder nach unten ausklappen sollen und dabei die Felder alle die selbe Breite wie "Gemeinde" haben sollten. Ich habe nun jedoch drei Layouts für Firefox, IE und Safari (Mac).
Geschrieben von: i.b.g 06.12.2007 - 8:23
Hallo,
also, du hast offensichtlich nicht so viel Erfahrung mit HTML/CSS, richtig?
Da ich Deine Entwicklungsumgebung nicht habe, habe ich die Inhalte Deiner Stylesheet-Dateien zum Testen direkt in den Quelltext eingefügt. Du musst nun Deine Version so ändern, dass in der Datei dropdownmenu.css die Deklaration für die Klasse ul.dropdown entweder gelöscht oder wie folgt komplett auskommentiert wird:
{
list-style: none;
margin:0;
padding:0;
width:8em;
z-index:99;
}*/
Die von mir eingetragenen Stylesheet-Deklarationen kannst Du komplett aus dem Quelltext entfernen, wenn Du die o.g. Änderung vorgenommen hast, so dass dieser Quelltext übrig bleibt:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>FeG Eschweiler</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link href="style/feglogo.jpg" rel="shortcut icon" />
<link rel="stylesheet" type="text/css" href="style/style.css" />
<link rel="stylesheet" type="text/css" href="style/colour.css" />
<link rel="stylesheet" type="text/css" href="style/dropdownmenu.css"/>
</head>
<body onload="enableDropdownMenuForIE();" bgcolor="#FFFFFF">
<div id="main">
<div id="links">
<!-- **** INSERT LINKS HERE **** -->
</div>
<div id="logo"></div>
<div id="menu"><script type="text/javascript" src="css_dropdown.js"></script>
<ul class="dropdown" id="mainmenu">
<li><a href="index.php">Home</a>
</li>
<li><a href="gemeinde.php">Gemeinde</a>
<ul>
<li><a href="termine.php">Termine</a></li>
<li><a href="predigten.php">Predigten</a></li>
<li><a href="gruppen.php">Gruppen</a></li>
<li><a href="hauskreise.php">Hauskreise</a></li>
<li><a href="bilder.php">Bilder</a></li>
<li><a href="artikel.php">Artikel</a></li>
</ul>
</li>
<li><a href="links.php">Links</a>
</li>
<li><a href="kontakt.php">Kontakt</a>
</li>
<li><a href="impressum.php">Impressum</a>
</li>
</ul></div>
<div id="content">
<div id="column2">
<h1>Herzlich Willkommen bei der FeG Eschweiler</h1><br>
Schön, dass Sie hier sind, auf der Homepage der Freien evangelischen Gemeinde Eschweiler!
</div>
</div>
<div id="footer">
copyright © 2007 FeG Eschweiler | <a href="http://validator.w3.org/check?uri=referer">XHTML 1.1</a> </div>
</div>
<div style="font-size: 0.8em; text-align: center; margin-top: 1.0em; margin-bottom: 1.0em;">
</div>
<!-- Ad by funpic.de --><noscript><div style="display:none"> </div></noscript><script type="text/javascript" src="http://media.funpic.de/layer.php?bid=39743555"></script><!-- End Ad by funpic.de --></body>
</html>
Ich hätte Dir dazuschreiben sollen, dass es nicht einfach so zu übernehmen ist, was man ohnehin nicht mal eben so und unkritisch tun sollte, sondern nur meinen hiesigen Versuch zeigt, an welcher Stelle ich eine Änderung vorgenommen hatte. Ich hoffe es ist Dir nun klar, was ich vorschlage.
Geschrieben von: magoac 06.12.2007 - 12:41
Danke für Deine Rückantwort.
HTML kann ich eigentlich sehr gut, wobei ich bei HTML 4.1 gelernt habe und die Entwicklungen danach (XHTML) ich mir nur selbst angelsen habe. In CSS habe ich die wenigsten Kenntnisse, leider, dabei ist das mit das wichtigste.
So das Menü sitzt wo es hingehört, sie so aus wie es soll. Ich habe nur das Problem, dass im Firefox sich "Termine" über "Gemeinde" legt, wenn ich drüber gehe mit der Maus. Das ist bei IE nicht der Fall. Und dann muss ich die einzelnen Punkte im Pulldown noch gleichbreit machen. Dann sollte es ok sein. Valide ist es auf jeden Fall schon.
Geschrieben von: Conny 06.12.2007 - 15:39
Hallo,
wenn ich Dein dropdown.js lese, steht da als erstes: enable Drop down Menu For IE
Das bedeutet übersetzt: mit allen anderen Browser gibt es Schwierigkeiten!
Die feste Breite müsste machbar sein, entweder list über style= eine feste Breite geben, oder im JS-Script das 'Block' eine feste Breite geben (ausprobieren).
cu
Conny
Geschrieben von: magoac 07.12.2007 - 11:24
Hallo,
wenn ich Dein dropdown.js lese, steht da als erstes: enable Drop down Menu For IE
Das bedeutet übersetzt: mit allen anderen Browser gibt es Schwierigkeiten!
Die feste Breite müsste machbar sein, entweder list über style= eine feste Breite geben, oder im JS-Script das 'Block' eine feste Breite geben (ausprobieren).
cu
Conny
Das JS soll jedoch NUR für IE genutzt werden weil er das CSS nicht kann wie es für Firefox und Opera etc. für die Navigation ausreicht.
Geschrieben von: Conny 07.12.2007 - 14:34
Dann müsste aber imho in dem Script eine Browserweiche mit drin sein; ich habe da aber nix gesehen.
cu
Conny
Geschrieben von: Auge 08.12.2007 - 2:17
Hallo
Warum ist es denn überhaupt XHTML 1.1 geworden? Soweit ich informiert bin, gibt es mit einigen heutzutage gebräuchlichen Browsern Probleme bei der Darstellung von XHTML 1.1.
Davon abgesehen finde ich einige ungereimtheiten in deinem Code.
1. Im <body>-tag wird die JavaScript-Funktion enableDropdownMenuForIE aufgerufen, obwohl die Ladeanweisung erst vor der Navigationsliste notiert ist und die Datei, in der die Funktion notiert ist, somit -zumindest beim ersten Aufruf- auch erst später geladen werden kann. Die Funktion sollte in diesem Fall nicht ausgeführt werden können.
2. Deine CSS-Anweisungen bezüglich der Navigation sind recht unübersichtlich. Insbesondere bezüglich der Spezifität der Elementanwahl bleiben bei mir Ungereimtheiten (z.B.: ul.dropdown ul * ul - wozu der Stern?) zurück. Aber auch über die Verwendung der Klasse dropdown kann man geteilter Meinung sein, da sich alle Elemente der Navigation bereits über die ID menu bzw. ihre eigene ID ansprechen lassen. Bei der derzeitigen Verschachtelungstiefe würde man eine Liste als Untermenü schon mit #menu ul ul und einen Listenpunkt mit #menu li li finden.
Tschö, Auge
Geschrieben von: i.b.g 10.12.2007 - 11:31
Hallo,
ich melde mich erst jetzt, weil ich mit unserer Gemeindediakonin in Polen war, um für bedürftige Kinder "St.-Martins-Päckchen" zu verteilen.
Das liegt daran, dass der Versatz für die Klasse "ul.dropdown li * li" fehlt, wobei ich Auge zustimmen muss, dass die Stylesheets wirklich schwer zu durchschauen sind.
Ändere doch mal in der dropdownmenu.css die Klasse "ul.dropdown li * li" wie folgt:
{
border:1px solid #fff;
float:none;
position: relative;
top: 30px;
}
Ich prophezeie Dir aber, dass bei weiteren Verschachtelungen die Probleme erst richtig anfangen.
Geschrieben von: magoac 20.12.2007 - 18:57
So nur, dass ihr wisst, dass ich nicht vergessen habe weiter zu machen. Ich bin an dem alten verzweifelt und auf Vorschlag mehrerer habe ich eine andere Struktur gewählt.
Ich würde mich freuen, wenn ihr jetzt zu dem soweit fertigen noch Eure Kritik und Verbesserungsvorschläge mir geben könntet:
http://magoac.ma.funpic.de/
Geschrieben von: db 20.12.2007 - 19:35
Beim &bull fehlt ein ; am Ende, dann wird es zu •
Sieht doch echt gut aus! Sehr übersichtliche, angenehme Struktur. Farben für Puristen geeignet.
Geschrieben von: Thomas 20.12.2007 - 19:47
Gefällt mir auch gut!
Mir ist wie Dieter vor allen Dingen auf den Seiten Gruppen und Hauskreise das "&bull" aufgefallen - da über das LI-Tag bereits ein • erzeugt wird, sollte das "&bull" wohl einfach gelöscht werden. Zudem sollten die BR-Tags dort in die LI-Tags und nicht dazwischen. Hat zwar auch den gewünschten Effekt, ist aber nicht HTML-konform.
Dann gibt es noch ein leeres SPAN-Tag ganz oben auf jeder Seite ("<a href="index.php" title="FeG Eschweiler"><img src="images/feg_185.png" alt="FeG-Logo"/><span></span></a></h1>"), das kann auch weg.
Und auf der Kontaktseite gibt es in Zeile 90 noch ein schließendes P-Tag ohne dazugehöriges öffnendes sowie ein leeres FONT-Tag (Zeile 57, "<td>Wie aufmerksam geworden?<font color="blue"></font></td>"). Außerdem sind die Radiobuttons zur Auswahl, ob man eine Kopie möchte, nach meinem Empfinden etwas seltsam angeordnet (der Text sollte dichter an dem jeweiligen Radiobutton stehen). Und ich verstehe die Zeile "Oder schicken Sie einfach eine email an: email nicht benutzen!redaktion@eschweiler.feg.de" nicht ganz. Wer soll da was nicht benutzen?
Alles eher Schönheitsfehler aber nichts wirklich weltbewegendes. Und da ich nur mal drübergeflogen bin, erhebe ich auch keinen Anspruch auf Vollständigkeit 
.
[edit: Noch ein bisschen was ergänzt]
Geschrieben von: magoac 20.12.2007 - 22:37
Mir ist wie Dieter vor allen Dingen auf den Seiten Gruppen und Hauskreise das "&bull" aufgefallen - da über das LI-Tag bereits ein • erzeugt wird, sollte das "&bull" wohl einfach gelöscht werden. Zudem sollten die BR-Tags dort in die LI-Tags und nicht dazwischen. Hat zwar auch den gewünschten Effekt, ist aber nicht HTML-konform.
Dann gibt es noch ein leeres SPAN-Tag ganz oben auf jeder Seite ("<a href="index.php" title="FeG Eschweiler"><img src="images/feg_185.png" alt="FeG-Logo"/><span></span></a></h1>"), das kann auch weg.
Und auf der Kontaktseite gibt es in Zeile 90 noch ein schließendes P-Tag ohne dazugehöriges öffnendes sowie ein leeres FONT-Tag (Zeile 57, "<td>Wie aufmerksam geworden?<font color="blue"></font></td>"). Außerdem sind die Radiobuttons zur Auswahl, ob man eine Kopie möchte, nach meinem Empfinden etwas seltsam angeordnet (der Text sollte dichter an dem jeweiligen Radiobutton stehen). Und ich verstehe die Zeile "Oder schicken Sie einfach eine email an: email nicht benutzen!redaktion@eschweiler.feg.de" nicht ganz. Wer soll da was nicht benutzen?
Alles eher Schönheitsfehler aber nichts wirklich weltbewegendes. Und da ich nur mal drübergeflogen bin, erhebe ich auch keinen Anspruch auf Vollständigkeit
.[edit: Noch ein bisschen was ergänzt]
Danke für eure Hinweise. Einmal zu dem • wenn ich es weglasse gibts halt keinen Kringel obwohl das normal bei einer li der Fall sein müßte. Ebenso macht es einen Unterschied ob ich das <br> vor </li> oder dahinter setze. Normal muss es rein ich weiß, dann fehlt jedoch nee Leerzeile.
Zu der email-Adress bei Kontakt. Da das noch ein Test ist, sollen der Pastor etc. noch nicht mit Testmails vollgespamt werden, daher hab ich das da noch so komisch. das wird bei offiziellen Freischalten und Umziehen auf den offiziellen Server natürlich anders.
Nachtrag:
Die kleinen Fehler entferne ich morgen.
Nachtrag 2:
Ich finde unter termine die Reihenabstände der Tabelle komisch groß. Weiß da jemand von Euch Rat?
Geschrieben von: db 20.12.2007 - 23:31
Ich finde unter termine die Reihenabstände der Tabelle komisch groß. Weiß da jemand von Euch Rat?
Mal in die css sehen
td { margin:1em; padding:1em;}
und ändern auf z.B. 0.4em
Geschrieben von: Thomas 21.12.2007 - 9:38
In http://magoac.ma.funpic.de/stylesheets/reset-min.css wird für die UL "list-style : none;" definiert, deshalb keine Kringel. Ich denke, mit der jetzt korrekten Entität • ist es okay, sicher könntest du das auch über eine entsprechende Formatierung der UL mit CSS erreichen, aber das würde erstmal wieder mehr Aufwand bedeuten.
Probier es mal mit 2 BR-Tags am Ende - oder mit etwas in der Form 'style="padding-bottom: 1em;"' im LI-Tag.
Wenn es die Adresse redaktion@eschweiler.feg.de gibt und du SPAM darauf verhindern willst, würde ich das vorerst komplett weglassen.
Das kommt aus http://magoac.ma.funpic.de/stylesheets/styles.css: "td { margin:1em; padding:1em;}" und macht dir vor und nach jeder Zelle ca. 2 Zeilen Abstand. Wenn du das änderst, sind aber automatisch alle Tabellen davon betroffen, sofern sie nicht explizit abweichend formatiert sind. Betrifft wahrscheinlich auch die von mir angemerkten Radiobuttons. Also vorher nochmal prüfen, wo überall Tabellen eingesetzt werden, und wo der Abstand ggf. gewollt ist. Eventuell musst du dann zwei verschiedene Definitionen für TD-Tags machen und diese über Klassen voneinander unterscheiden.
[edit: Rechtschreibfehler und Leerzeile etfernt.]
Geschrieben von: magoac 21.12.2007 - 12:40
So ich habe das <span></span> gelöscht auf jeder Seite. Bei den Listen das <br/> durch zwei vor das </li> gesetzt. Und nun klappt es.
Das </p> im Kontakfformular finde ich jedoch nicht. Hab es zweimal geguckt. Ich gehe oben einmal hin und öffne <p align="center"> und schließe es unten wieder.
Das Problem mit den Tabellen ist, dass mein cellspacing und cellpadding nicht klappt, daher habe ich in dem css "td { margin:0.4em; padding:0.4em;} " reingesetzt. Würde ich für jede Tabelle den Abstand selbst definieren können dann wäre es ok. Ich habe die Zeile überwiegend reingepackt, da sonst unter Impressum und unter Links die Bilder direkt aneinander geklatscht sind.
Die email-Adresse ist inzwischen "freigegeben", wenn er eine email erhält. was solls.
Die Abstände in den Kontaktformularen gefallen mir selbst auch noch nicht so, nur ist dies im Moment wegen dem "Tabellenproblem" nicht anders möglich.
Geschrieben von: Thomas 21.12.2007 - 13:05
Da habe ich tidy fehlinterpretiert (bzw. tidy hat sich unklar ausgedrückt). Das Problem liegt wohl darin begründet, dass innerhalb vom http://de.selfhtml.org/html/referenz/elemente.htm#p nur Inline-Elemente auftauchen dürfen - und FORM und TABLE sind eben keine Inline-Elemente. Warum lässt du das P-Tag nicht einfach ganz weg? Wenn du wirklich möchtest, dass das Formular etwas eingerückt wird, steuer das doch über CSS im FORM-Tag.
Ääähm - wie, wo, was
?Dann dort jeweils eine Tabelle der Klasse "image" und diese Klasse z. B. so definieren:
margin: 0.4em;
padding: 0.4em;
}
Geschrieben von: Thomas 21.12.2007 - 13:15
Ääähm - wie, wo, was
?[Kristallkugelmodus]
Ggf. kannst du das umgehen, indem du in http://magoac.ma.funpic.de/stylesheets/reset-min.css "table{border-collapse:collapse;border-spacing:0;}" rausnimmst - aber Vorsicht, auch hier sind wieder alle Tabellen davon betroffen. Ich glaube, schon mal die Erfahrung gehabt zu haben, dass mit ähnlichen CSS-Definitionen Angaben in den Attributen cellspacing und cellpadding ignoriert wurden.
[/Kristallkugelmodus]
Geschrieben von: magoac 21.12.2007 - 13:22
Also ich teste beides mal.
Für das Klassifizieren der Tabelle gehe ich doch einfach so vor:
<table class="image">
und halt im css dann die Beschreibung von dir rein oder?
Ich probiere jetzt aber ersmtal diese Sperre rauszunehmen
Edit: So Tabellen sind jetzt ok, nur bei Termine ist die "aktuelle Termine"-Tabelle rechts kaputt.
Geschrieben von: Thomas 21.12.2007 - 13:46
<table class="image">
und halt im css dann die Beschreibung von dir rein oder?
Jepp
.
Geschrieben von: Thomas 21.12.2007 - 13:48
Mal mit border="0" ausprobieren?
Geschrieben von: magoac 21.12.2007 - 14:06
Mal mit border="0" ausprobieren?
Ne die soll ja nen Rand haben halt border="1". Aber ich sehe rechts nen doppelten Rand, das liegt wohl mit dem colspan zusammen.
Ansonsten bin ich jetzt zufrieden. Bis auf die Schriftgrößenanpassung. Nur da muss ich generell nach ner besseren Lösung suchen
Geschrieben von: magoac 21.12.2007 - 14:08
das <span></span> ist doch wichtig, sonst ist oben das graue Feld mit FeG Eschweiler kaputt. vergleiche index.php (kaputt) mit termine.php ganz
Geschrieben von: Thomas 21.12.2007 - 14:18
Tatsächlich, nämlich wegen:
height : 71px;
width : 13px;
position : absolute;
top : 0;
right : -13px;
cursor : pointer;
background : url(../images/logo_right.gif) no-repeat right top;
}
Weißt du, wer den Code in die Welt gesetzt hat
? Falls ja, frag ihn doch mal, warum nicht der komplette Hintergrund in das A-Tag gesetzt wird:font : 24px/24px Arial, Helvetica, sans-serif;
font-weight : bold;
letter-spacing : -2px;
padding : 16px 9px 25px 20px;
display : block;
color : #fff;
background : url(../images/logo_bg.gif) no-repeat left top;
}
Schnellste Lösung (für komischen, aber von tidy nicht bemängelten Code): Im SPAN-Tag ein Leerzeichen einsetzen.
Geschrieben von: Thomas 21.12.2007 - 14:23
Schreib mal statt
<td>9.1.</td>
<td colspan="5"><center>Allianzgebetswoche "Weil ER lebt", 20 Uhr bei uns im Gemeindehaus</center></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<td>9.1.</td>
<td colspan="5"><center>Allianzgebetswoche "Weil ER lebt", 20 Uhr bei uns im Gemeindehaus</center></td>
</tr>
Wenn der Rand sein soll, würd ich den Zellen dann noch ein padding-left verpassen, damit der Text nicht an den Rand klatscht.
Kleine Frage am Rande: Machst du die Seiten eigentlich ehrenamtlich?
Geschrieben von: magoac 21.12.2007 - 14:28
Weißt du, wer den Code in die Welt gesetzt hat
? Falls ja, frag ihn doch mal, warum nicht der komplette Hintergrund in das A-Tag [...]
Ja weiß ich, ein Bekannter hat mir den gemacht. Wobei er auf das Layout nicht mehr so gut zu sprechen ist, wenn ich ihn anspreche, weil ich doch einige Kritikpunkte hatte und ich mir nicht sagen lassen wollte: Dann machs doch besser Du hast noch weniger Ahnung als ich. Wobei es dabei nur um Sachen ging wie der fehlende Punkt bei der Liste, und er einfach meinte das soll so sein die Punkte sind Exkrement etc. Naja anderes Thema.
Und ja ich mache die Seite ehrenamtlich, wie Du siehst ist das für nee Gemeinde und bis auf den Pastor arbeitet da jeder ehrenamtlich. Und den Pastor bezahlen wir alleine durch Spenden
Geschrieben von: magoac 21.12.2007 - 14:31
Schreib mal statt
<td>9.1.</td>
<td colspan="5"><center>Allianzgebetswoche "Weil ER lebt", 20 Uhr bei uns im Gemeindehaus</center></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<td>9.1.</td>
<td colspan="5"><center>Allianzgebetswoche "Weil ER lebt", 20 Uhr bei uns im Gemeindehaus</center></td>
</tr>
Wenn der Rand sein soll, würd ich den Zellen dann noch ein padding-left verpassen, damit der Text nicht an den Rand klatscht.
Kleine Frage am Rande: Machst du die Seiten eigentlich ehrenamtlich?
So Tabelle ganz. Ich war fest der Überzeugung man müsse die Leeren <td> dabei lassen, damit er weiß, dass das soweit geht. Hat sich das mit der Zeit geändert?
Das mit dem ehrenamtlich hab ich ja schon kurz beantwortet und, ich würde ich schämen für meine beschissenen Kenntnisse noch Geld zu nehmen. Ich hoffe meine Kenntnisse etwas aufzubessern und der Gemeinde so nen gefallen zu tun. Wir hatten so nämlich niemanden mehr der die Seite pflegen konnte, da der letzter Webmaster durch Heirat in die andere Ecke von Deutschland ist.
Geschrieben von: Thomas 21.12.2007 - 14:41
Nö, wenn du colspan="5" einfügst, kannst (und musst) du dafür 4 weitere TD-Tags weglassen (das eine ersetzt dann 5). Genau durch die 5 im COLSPAN-Attribut weiß der Browser ja, "dass es soweit geht". Das war aber immer schon so.
Uuuups, hab ich wohl überlesen - aber egal, dann helfe ich natürlich auch ehrenamtlich
.
Geschrieben von: magoac 21.12.2007 - 14:54
Danke Thomas Mehr als Danke sagen kann ich Dir nicht und vielleicht der Trost, Geld was die Gemeinde für soetwas nicht ausgeben kann geht dann weg wohltätige Zwecke.
Gelernt habe ich auf jeden Fall schon etwas
Ich habe jetzt einmal im CSS eine Klasse
table.image td {
margin: 0.6em;
padding: 0.6em;
Diese benutze ich für Tabellen mit Bildern. Tabellen allgemein habe ich im CSS nicht definiert, sondern nur im reset-min.css den folgenden Text:
table{border-collapse:collapse;}
Damit der Rand der Tabelle so aussieht, wie er es jetzt bei "aktuelle Termine" tut. Dieser Befehl scheint aber auch das cellpadding und cellspacing außer Kraft zu setzen, da dieses bei keiner Tabelle auf der Seite klappt! Nehme ich jedoch den Befehl aus dem reset-min.css raus, so klappen cellpadding und cellspacing auch nicht. Und diese sind defintiv an der richtigen Stelle: <table border="1" cellpadding="50"> der Befehl width="100%" zieht die Tabelle auseinander (was in meinen Augen besser aussieht), jedoch beeinflußt der das cellpadding nicht. Da bin ich jetzt am Ende mit jeglicher "Trickserei"
Geschrieben von: Thomas 21.12.2007 - 15:07
Mehr als Danke sagen kann ich Dir nichtDas ist schon deutlich mehr als viele andere können und reicht mir volkommen
.Nimm doch auch nochmal in
blockquote,th,td{margin:0;padding:0;}
. Wie immer: Gilt dann für alle Tabellen, also Vorsicht.
Geschrieben von: magoac 21.12.2007 - 15:13
Mehr als Danke sagen kann ich Dir nichtDas ist schon deutlich mehr als viele andere können und reicht mir volkommen
.Nimm doch auch nochmal in
blockquote,th,td{margin:0;padding:0;}
. Wie immer: Gilt dann für alle Tabellen, also Vorsicht.Das ist nicht sehr gut, das zerhaut mir die Navigation. Ich lasse Die Tabelle wohl erstmal ohne Rand und kümmere mich Später mehr darum. Erstmal VIELEN DANK.
Unterstützt von Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)