Gast michaeljomarron Geschrieben 9. Februar 2009 Geschrieben 9. Februar 2009 Hallo, kann mir jemand weiter helfen? Bevor ich lange versuche mein Problem zu erklären; Hirt-EDV noch als kleine Info; Dahinter steckt ein CMS (Typo3) Bin Azubi im ersten Lernjahr und habe mich noch nicht wirklich viel mit css Beschäftigt. Im Internet Explorer wird alles so wie es sein soll angezeigt aber im Firefox ist der Hintergrund nur bis zur Hälfte weiß. Schauts euch einfach mal an. Danke schonmal im vorraus !! [CSS CODE] /******************************************** HTML ELEMENTS ********************************************/ /* top elements */ * { padding: 0; margin: 0; } body { margin: 0; padding: 0; font: .70em/1.5em Verdana, Tahoma, Helvetica, sans-serif; color: #666666; background: #A9BAC3 url(bg.gif) repeat-x; text-align: center; } /* links */ a { color: #4284B0; background-color: inherit; text-decoration: none; } a:hover { color: #9EC068; background-color: inherit; } /* headers */ h1, h2, h3 { font: bold 1em 'Trebuchet MS', Arial, Sans-serif; color: #333; } h1 { font-size: 1.5em; color: #6297BC; } h2 { font-size: 1.4em; text-transform:uppercase;} h3 { font-size: 1.3em; } p, h1, h2, h3 { margin: 10px 15px; } ul, ol { margin: 10px 30px; padding: 0 15px; color: #4284B0; } ul span, ol span { color: #666666; } /* images */ img { border: 2px solid #CCC; } img.no-border { border: none; } img.float-right { margin: 5px 0px 5px 15px; } img.float-left { margin: 5px 15px 5px 0px; } a img { border: 2px solid #568EB6; } a:hover img { border: 2px solid #CCC !important; /* IE fix*/ border: 2px solid #568EB6; } code { margin: 5px 0; padding: 10px; text-align: left; display: block; overflow: auto; font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace; /* white-space: pre; */ background: #FAFAFA; border: 1px solid #f2f2f2; border-left: 4px solid #4284B0; } acronym { cursor: help; border-bottom: 1px solid #777; } blockquote { margin: 15px; padding: 0 0 0 20px; background: #FAFAFA; border: 1px solid #f2f2f2; border-left: 4px solid #4284B0; color: #4284B0; font: bold 1.2em/1.5em Georgia, 'Bookman Old Style', Serif; } /* form elements */ form { margin:10px; padding: 0; border: 1px solid #f2f2f2; background-color: #FAFAFA; } label { display:block; font-weight:bold; margin:5px 0; } input { padding: 2px; border:1px solid #eee; font: normal 1em Verdana, sans-serif; color:#777; } textarea { width:300px; padding:2px; font: normal 1em Verdana, sans-serif; border:1px solid #eee; height:100px; display:block; color:#777; } input.button { margin: 0; font: bold 1em Arial, Sans-serif; border: 1px solid #CCC; background: #FFF; padding: 2px 3px; color: #4284B0; } /* search form */ form.searchform { background: transparent; border: none; margin: 0; padding: 0; } form.searchform input.textbox { margin: 0; width: 120px; border: 1px solid #9EC630; background: #FFF; color: #333; height: 14px; vertical-align: top; } form.searchform input.button { margin: 0; padding: 2px 3px; font: bold 12px Arial, Sans-serif; background: #FAFAFA; border: 1px solid #f2f2f2; color: #777; width: 60px; vertical-align: top; } /*********************** LAYOUT ************************/ #wrap { background: #FFF; width: 820px; height: 100%; margin: 0 auto; text-align: left; } #content-wrap { clear: both; margin: 0; padding: 0; background: #FFF; } /* header */ #header { position: relative; height: 85px; background: #000 url(headerbg.gif) repeat-x 0% 100%; } #header h1#logo { position: absolute; margin: 0; padding: 0; font: bolder 4.1em 'Trebuchet MS', Arial, Sans-serif; letter-spacing: -2px; text-transform: lowercase; top: 0; left: 5px; } #header h2#slogan { position: absolute; top:37px; left: 95px; color: #666666; text-indent: 0px; font: bold 11px Tahoma, 'trebuchet MS', Sans-serif; text-transform: none; } #header form.searchform { position: absolute; top: 0; right: -12px; } /* main */ #main { float: left; margin-left: 15px; padding: 0; width: 50%; } .post-footer { background-color: #FAFAFA; padding: 5px; margin: 20px 15px 0 15px; border: 1px solid #f2f2f2; font-size: 95%; } .post-footer .date { background: url(clock.gif) no-repeat left center; padding-left: 20px; margin: 0 10px 0 5px; } .post-footer .comments { background: url(comment.gif) no-repeat left center; padding-left: 20px; margin: 0 10px 0 5px; } .post-footer .readmore { background: url(page.gif) no-repeat left center; padding-left: 20px; margin: 0 10px 0 5px; } /* sidebar */ #sidebar { float: left; width: 18%; margin: 0; padding: 0; display: inline; } #sidebar ul.sidemenu { list-style:none; margin:10px 0 10px 15px; padding:0; } #sidebar ul.sidemenu li { margin-bottom:1px; border: 1px solid #f2f2f2; } #sidebar ul.sidemenu a { display:block; font-weight:bold; color: #333; text-decoration:none; padding:2px 5px 2px 10px; background: #f2f2f2; border-left:4px solid #CCC; min-height:18px; } * html body #sidebar ul.sidemenu a { height: 18px; } #sidebar ul.sidemenu a:hover { padding:2px 5px 2px 10px; background: #f2f2f2; color: #FF0000; border-left:4px solid #FF0000; } /* rightbar */ #rightbar { float: right; width: 20%; padding: 0; margin:0; } /* Footer */ #footer { clear: both; color: #FFF; background: #A9BAC3; border-top: 5px solid #568EB6; margin: 0; padding: 0; height: 50px; font-size: 95%; } #footer a { text-decoration: none; font-weight: bold; color: #FFF; } #footer .footer-left{ float: left; width: 65%; } #footer .footer-right{ float: right; width: 30%; } /* menu tabs */ #header ul { z-index: 999999; position: absolute; margin:0; padding: 0; list-style:none; right: 0; bottom: 6px !important; bottom: 5px; font: bold 13px Arial, 'Trebuchet MS', Tahoma, verdana, sans-serif; } #header li { display:inline; margin:0; padding:0; } #header a { float:left; background: url(tableft.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #header a span { float:left; display:block; background: url(tabright.gif) no-repeat right top; padding:6px 15px 3px 8px; color: #FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #header a span {float:none;} /* End IE5-Mac hack */ #header a:hover span { color:#FFF; } #header a:hover { background-position:0% -42px; } #header a:hover span { background-position:100% -42px; } #header #current a { background-position:0% -42px; color: #FFF; } #header #current a span { background-position:100% -42px; color: #FFF; } /* end menu tabs */ /* alignment classes */ .float-left { float: left; } .float-right { float: right; } .align-left { text-align: left; } .align-right { text-align: right; } /* additional classes */ .clear { clear: both; } .green { color: #9EC630; } .gray { color: #BFBFBF; } Zitieren
JHPML Geschrieben 9. Februar 2009 Geschrieben 9. Februar 2009 background: #A9BAC3 url(bg.gif) repeat-x; ich seh kein bg.gif! tu mal im body statt: text-align: center; body{ margin-left: auto; margin-right: auto; } /* IE hack */ * html body { text-align: center; } /* /IE hack */ nehmen das hat zwar nichts mit dem problem zu tun wird aber in den meisten browsern besser angezeigt! Zitieren
JHPML Geschrieben 9. Februar 2009 Geschrieben 9. Februar 2009 musst du unbedingt die ganzen hacks nehmen? das kommt nich gut rüber! die * html hacks kannst du ja als Conditional Commend auslagern! <!--[if lt IE 7]-> <style type='text/css'> body { text-align: center; } </style> <![endif]--> Zitieren
Gast michaeljomarron Geschrieben 9. Februar 2009 Geschrieben 9. Februar 2009 ok ich probiers mal aus danke erstmal für deine Hilfe. Wäre nett wenn noch mehr Vorschläge kommen könnten, falls das hier nicht klappen sollte. ich seh kein bg.gif! hää?? bg.gif gibts aber ; ) keine Ahnung ich bin sowieso schon am verzweifeln. Zitieren
Gast michaeljomarron Geschrieben 9. Februar 2009 Geschrieben 9. Februar 2009 die * html hacks kannst du ja als Conditional Commend auslagern! Wie mache ich das weiß grad nicht was du genau meinst ;D Sry wie gesagt bin gerade erst dabei mich in CSS und HTML und in dem andere Kram einzuarbeiten. Habe mich erstmal mit Typo3 Beschäftigt und froh das ich das hinbekommen habe. Jetzt kommt das andere : ) Zitieren
JHPML Geschrieben 9. Februar 2009 Geschrieben 9. Februar 2009 die google suche iet "nicht schön auss" nehm doch die sohier: <form method='get' action='http://www.google.com/search'> <input type=text name=q size=30 maxlength=255 value=""> <input type=submit name=sa value="Google Suche"> </form> oder auf die seite würde das folgende gut passen: <form method='get' action='http://www.google.com/search' style='display: inline; position: fixed; left: 0; right: 0; top: 0; background-color: #FFF; text-align: center;'> <input type=text name=q size=30 maxlength=255 value=""> <input type=submit name=sa value="Google Suche"> </form> Zitieren
JHPML Geschrieben 9. Februar 2009 Geschrieben 9. Februar 2009 Wie mache ich das weiß grad nicht was du genau meinst ;D Sry wie gesagt bin gerade erst dabei mich in CSS und HTML und in dem andere Kram einzuarbeiten. Habe mich erstmal mit Typo3 Beschäftigt und froh das ich das hinbekommen habe. Jetzt kommt das andere : ) Conditional commands sind so ähnlich wie kommentare die aber nur vom IE gelesen werden bsp: <!--[if IE]-> Anweisungen <![endif]--> man kann das natürlich verfeinern weil das obere alle arten von ie's ansprechen würde (auch IE/MAC) man kann zb versionsnummern angeben: <!--[if IE 7]-> Anweisungen <![endif]--> würde (ohh wunder) nur den IE 7 ansprechen (das geht noch genauer:) <!--[if IE 7.9685]-> Anweisungen <![endif]--> würde version 7.9.6.8.5 ansprechen und nur die und dann kann man das noch umdrehen mit !: <!--[if !IE 7]-> Anweisungen <![endif]--> was was alle IE's ausser IE 7 ansprechen würde und dann gibts noch anweisungen zb: <!--[if lt IE 7]-> Anweisungen <![endif]--> was alle IE's unter V7 ansprechen würde (lt == lower than) und so gibts noch viele anweisungen! (einfach mal googlen) und sachen für NETSCAPE kannst du einfach als JS machen (bei manchen funzt css sowieso nur mit aktiviertem JavaScript): bsp: <script type='text/Javascript'> if (document.layers) { document.write("anweisungen"); } </script> den document.layers gibts sowieso nur in NETSCAPE und so gibts noch viele sachen so das man keine css hacks bnutzen muss! Zitieren
JHPML Geschrieben 9. Februar 2009 Geschrieben 9. Februar 2009 hää?? bg.gif gibts aber ; ) keine Ahnung ich bin sowieso schon am verzweifeln. ^^kans sein das der pfad falsch iss? schick mir mal den ganzen code ich kann den bstimmt mal ordentlich überareiten;) wenn du unbedingt (gutes) css lernen willst/musst: dieses buch hilft dir weiter Zitieren
JHPML Geschrieben 9. Februar 2009 Geschrieben 9. Februar 2009 (bearbeitet) das bild () könnte fast überall ins design ausser da wo es jetzt iss!:confused: (geb im margin-top: 20px; )und nicht der navigation margin-bottom wie ich sehe hast du meinen vorschlag mit margin: auto; angenommen. dein css ist schlimm (hast du einen offline webserver (bsp apache-xampp)?) wenn ja tu die seite erst offline machenund dan online stellen Bearbeitet 9. Februar 2009 von JHPML Zitieren
JHPML Geschrieben 9. Februar 2009 Geschrieben 9. Februar 2009 (bearbeitet) schreib dein PHP content manager selber das geht vil leichter! (wie ichs hier gemacht hab. (hab dafür ne halbe stunde gebraucht(sch#iss design ds iss nich von mir)) und noch was das margin: auto; muss nich in den body sondern in #wrap { } ^^sry denkfehler von mir Bearbeitet 9. Februar 2009 von JHPML Zitieren
Gast michaeljomarron Geschrieben 9. Februar 2009 Geschrieben 9. Februar 2009 Ja ich poste mal den kompletten Code. Aber es handelt sich hier auch um eine Seite die über ein Content Managementsystem läuft. Mit einer css. Datei, einer Html und Header und BG Grafiken. Also wird das statische in der HTML Datei durch Typo3 Inhalten aus der Datenbank ersetzt : ) Den CSS Code habe ich dir ja schon geposted. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta name="Description" content="Information architecture, Web Design, Web Standards." /> <meta name="Keywords" content="your, keywords" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta name="Distribution" content="Global" /> <meta name="Author" content="Erwin Aligam - ealigam@gmail.com" /> <meta name="Robots" content="index,follow" /> <link rel="stylesheet" href="images/BrightSide.css" type="text/css" /> <title>Bright Side of Life</title> </head> <body> <!-- ###DOCUMENT_BODY### start --> <!-- wrap starts here --> <div id="wrap"> <div id="header"> <!-- ###TOPNAVI### start --> <!-- Menu Tabs --> <ul> <li id="current"><a href="index.html"><span>Home</span></a></li> <li><a href="index.html"><span>News</span></a></li> <li><a href="index.html"><span>Downloads</span></a></li> <li><a href="index.html"><span>Services</span></a></li> <li><a href="index.html"><span>Support</span></a></li> <li><a href="index.html"><span>About</span></a></li> </ul> <!-- ###TOPNAVI### stop --> </div> <!-- content-wrap starts here --> <div id="content-wrap"> <table width="820" height="127" border="0" cellspacing="17" bordercolor="#000000"> <tr> <td width="1"><img src="fileadmin/HIRT-EDV/images/logo150.gif" width="120" height="120" /></td> <td width="1"><img src="fileadmin/HIRT-EDV/images/tastatur2.jpg" width="640" height="100" /></td> </tr> </table> <div id="sidebar" > <!-- ###NAVI_LINKS_1### start --> <h1>Sidebar Menu</h1> <ul class="sidemenu"> <li><a href="index.html">Home</a></li> <li><a href="#TemplateInfo">Template Info</a></li> <li><a href="#SampleTags">Sample Tags</a></li> <li><a href="http://www.styleshout.com/">More Free Templates</a></li> <li><a href="http://www.4templates.com/?aff=ealigam">Premium Templates</a></li> </ul> <!-- ###NAVI_LINKS_1### stop --> <!-- ###NAVI_LINKS_2### start --> <h1>Site Partners</h1> <ul class="sidemenu"> <li><a href="http://www.dreamhost.com/r.cgi?287326">Dreamhost</a></li> <li><a href="http://www.4templates.com/?aff=ealigam">4templates</a></li> <li><a href="http://store.templatemonster.com/?aff=ealigam">TemplateMonster</a></li> <li><a href="http://www.fotolia.com/partner/114283">Fotolia.com</a></li> <li><a href="http://www.text-link-ads.com/?ref=40025">Text Link Ads</a></li> </ul> <!-- ###NAVI_LINKS_2### stop --> <!-- ###NAVI_LINKS_3### start --> <h1>Site Partners</h1> <ul class="sidemenu"> <li><a href="http://www.dreamhost.com/r.cgi?287326">Dreamhost</a></li> <li><a href="http://www.4templates.com/?aff=ealigam">4templates</a></li> <li><a href="http://store.templatemonster.com/?aff=ealigam">TemplateMonster</a></li> <li><a href="http://www.fotolia.com/partner/114283">Fotolia.com</a></li> <li><a href="http://www.text-link-ads.com/?ref=40025">Text Link Ads</a></li> </ul> <!-- ###NAVI_LINKS_3### stop --> <!-- ###NAVI_LINKS_4### start --> <h1>Site Partners</h1> <ul class="sidemenu"> <li><a href="http://www.dreamhost.com/r.cgi?287326">Dreamhost</a></li> <li><a href="http://www.4templates.com/?aff=ealigam">4templates</a></li> <li><a href="http://store.templatemonster.com/?aff=ealigam">TemplateMonster</a></li> <li><a href="http://www.fotolia.com/partner/114283">Fotolia.com</a></li> <li><a href="http://www.text-link-ads.com/?ref=40025">Text Link Ads</a></li> </ul> <!-- ###NAVI_LINKS_4### stop --> <!-- ###NAVI_LINKS_5### start --> <h1>Site Partners</h1> <ul class="sidemenu"> <li><a href="http://www.dreamhost.com/r.cgi?287326">Dreamhost</a></li> <li><a href="http://www.4templates.com/?aff=ealigam">4templates</a></li> <li><a href="http://store.templatemonster.com/?aff=ealigam">TemplateMonster</a></li> <li><a href="http://www.fotolia.com/partner/114283">Fotolia.com</a></li> <li><a href="http://www.text-link-ads.com/?ref=40025">Text Link Ads</a></li> <!-- ###NAVI_LINKS_5### stop --> <!-- ###CONTENT_LINKS### start --> <h1>Wise Words</h1> <p>"Men are disturbed, not by the things that happen, but by their opinion of the things that happen."</p> <p class="align-right">- Epictetus</p> <!-- ###CONTENT_LINKS### stop --> </div> <div id="main"> <!-- ###CONTENT_MAIN### start --> <a name="TemplateInfo"></a> <h1>Template <span class="green">Info</span></h1> <p><strong>Bright Side of Life 1.0</strong> is a free, W3C-compliant, CSS-based website template by <strong><a href="http://www.styleshout.com/">styleshout.com</a></strong>. This work is distributed under the <a rel="license" href="http://creativecommons.org/licenses/by/2.5/"> Creative Commons Attribution 2.5 License</a>, which means that you are free to use and modify it for any purpose. All I ask is that you include a link back to <a href="http://www.styleshout.com/">my website</a> in your credits.</p> <p>For more free designs, you can visit <a href="http://www.styleshout.com/">my website</a> to see my other works.</p> <p>Good luck and I hope you find my free templates useful!</p> <p class="post-footer align-right"> <a href="index.html" class="readmore">Read more</a> <a href="index.html" class="comments">Comments (7)</a> <span class="date">Oct 15, 2006</span> </p> <a name="SampleTags"></a> <h1>Sample <span class="green">tags</span></h1> <h3>Code</h3> <p><code> code-sample { <br /> font-weight: bold;<br /> font-style: italic;<br /> } </code></p> <h3>Example Lists</h3> <ol> <li><span>example of ordered list</span></li> <li><span>uses span to color the numbers</span></li> </ol> <ul> <li><span>example of unordered list</span></li> <li><span>uses span to color the bullets</span></li> </ul> <h3>Blockquote</h3> <blockquote><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat....</p></blockquote> <h3>Image and text</h3> <p><a href="http://getfirefox.com/"><img src="images/firefox-gray.jpg" width="100" height="120" alt="firefox" class="float-left" /></a> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo. Donec mattis, purus nec placerat bibendum, dui pede condimentum odio, ac blandit ante orci ut diam. Cras fringilla magna. Phasellus suscipit, leo a pharetra condimentum, lorem tellus eleifend magna, eget fringilla velit magna id neque. Curabitur vel urna. In tristique orci porttitor ipsum. Aliquam ornare diam iaculis nibh. Proin luctus, velit pulvinar ullamcorper nonummy, mauris enim eleifend urna, congue egestas elit lectus eu est. </p> <h3>Example Form</h3> <form action="#"> <p> <label>Name</label> <input name="dname" value="Your Name" type="text" size="30" /> <label>Email</label> <input name="demail" value="Your Email" type="text" size="30" /> <label>Your Comments</label> <textarea rows="5" cols="5"></textarea> <br /> <input class="button" type="submit" /> </p> </form> <br /> <!-- ###CONTENT_MAIN### stop --> </div> <div id="rightbar"> <!-- ###CONTENT_BORDER### start --> <h1>Support Styleshout</h1> <p>If you are interested in supporting my work and would like to contribute, you are welcome to make a small donation through the <a href="http://www.styleshout.com/">donate link</a> on my website - it will be a great help and will surely be appreciated.</p> <h1>Lorem Ipsum</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo. Donec mattis, purus nec placerat bibendum, dui pede condimentum odio, ac blandit ante orci ut diam.</p> <!-- ###CONTENT_BORDER### stop --> </div> <!-- content-wrap ends here --> </div> </div> <!-- footer ends here --> <!-- wrap ends here --> </div> <!-- ###DOCUMENT_BODY### stop --> </body> </html> Zitieren
JHPML Geschrieben 11. Februar 2009 Geschrieben 11. Februar 2009 ich hab's zwar schonmal angekugt (mit web developer toolber FF plugin) ma gucken Zitieren
JHPML Geschrieben 11. Februar 2009 Geschrieben 11. Februar 2009 #main (linie 218) { float: left; margin-left: 15px; padding-top: 0pt; padding-right: 0pt; padding-bottom: 0pt; padding-left: 0pt; width: 50%; background-color: #FFF; } Zitieren
JHPML Geschrieben 11. Februar 2009 Geschrieben 11. Februar 2009 #sidebar /* linie 245 */ { float: left; width: 18%; margin-top: 0pt; margin-right: 0pt; margin-bottom: 0pt; margin-left: 0pt; padding-top: 0pt; padding-right: 0pt; padding-bottom: 0pt; padding-left: 0pt; display: inline; background-color: #FFF; } eine menü überschrift ist zu empfehlen Zitieren
Gast michaeljomarron Geschrieben 11. Februar 2009 Geschrieben 11. Februar 2009 Danke schonmal für deine Hilfe ! Könntest du mir das schon fertig in einer HTML Datei Posten was dir so einfällt? ^^ Weil mit meinem Editor, ja keine Ahnung da gibts keine Linie 245 Zitieren
Empfohlene Beiträge
Dein Kommentar
Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.