![]() |
Willkommen, Gast ( Anmelden | Registrierung )
![]() ![]() |
![]() |
![]()
Beitrag
#1
|
|
is getting harder Gruppe: User Beiträge: 14 Mitglied seit: 04.12.2007 Mitglieds-Nr.: 7.182 ![]() |
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. Der Beitrag wurde von magoac bearbeitet: 05.12.2007 - 7:42 |
|
|
![]()
Beitrag
#2
|
|
Weiss zuviel!! ![]() Gruppe: Mods Beiträge: 668 Mitglied seit: 19.04.2002 Wohnort: Grimmen Mitglieds-Nr.: 385 ![]() |
Hallo,
Ich würde mich auf jeden Fall freuen. 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: CODE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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> |
|
|
![]()
Beitrag
#3
|
|
is getting harder Gruppe: User Beiträge: 14 Mitglied seit: 04.12.2007 Mitglieds-Nr.: 7.182 ![]() |
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). Der Beitrag wurde von magoac bearbeitet: 05.12.2007 - 22:09
Angehängte Datei(en)
|
|
|
![]()
Beitrag
#4
|
|
Weiss zuviel!! ![]() Gruppe: Mods Beiträge: 668 Mitglied seit: 19.04.2002 Wohnort: Grimmen Mitglieds-Nr.: 385 ![]() |
Hallo,
Also der Fehler ist bei mir in Firefox immer noch siehe die angehangenen Screenshots. 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: QUELLTEXT /*ul.dropdown { 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: CODE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> Dann sollte es aussehen, wie es Deinen Vorstellungen entspricht.<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. |
|
|
![]()
Beitrag
#5
|
|
is getting harder Gruppe: User Beiträge: 14 Mitglied seit: 04.12.2007 Mitglieds-Nr.: 7.182 ![]() |
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. Der Beitrag wurde von magoac bearbeitet: 06.12.2007 - 14:22 |
|
|
![]()
Beitrag
#6
|
|
Kommt Zeit, kommt Rat, kommt Conrad! ![]() Gruppe: Mods Beiträge: 1.169 Mitglied seit: 21.11.2001 Wohnort: Altenkirchen, Westerwald Mitglieds-Nr.: 42 ![]() |
... 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. ... 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 |
|
|
![]()
Beitrag
#7
|
|
is getting harder Gruppe: User Beiträge: 14 Mitglied seit: 04.12.2007 Mitglieds-Nr.: 7.182 ![]() |
... 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. ... 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. |
|
|
![]()
Beitrag
#8
|
|
Kommt Zeit, kommt Rat, kommt Conrad! ![]() Gruppe: Mods Beiträge: 1.169 Mitglied seit: 21.11.2001 Wohnort: Altenkirchen, Westerwald Mitglieds-Nr.: 42 ![]() |
|
|
|
![]()
Beitrag
#9
|
|
Anwärter auf W3.org Mitgliedschaft ![]() ![]() ![]() ![]() ![]() Gruppe: User Beiträge: 550 Mitglied seit: 28.11.2001 Wohnort: Berlin Friedrichshain Mitglieds-Nr.: 107 ![]() |
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 |
|
|
![]()
Beitrag
#10
|
|
Weiss zuviel!! ![]() Gruppe: Mods Beiträge: 668 Mitglied seit: 19.04.2002 Wohnort: Grimmen Mitglieds-Nr.: 385 ![]() |
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. Ich habe nur das Problem, dass im Firefox sich "Termine" über "Gemeinde" legt, wenn ich drüber gehe mit der Maus. 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: QUELLTEXT ul.dropdown li * li { border:1px solid #fff; float:none; position: relative; top: 30px; } Ich prophezeie Dir aber, dass bei weiteren Verschachtelungen die Probleme erst richtig anfangen. |
|
|
Google Bot |
![]()
Beitrag
#
|
![]() Google Ads ![]() |
|
|
|
![]() ![]() |
![]() |
Vereinfachte Darstellung | Aktuelles Datum: 11.05.2025 - 6:06 |