HTML/CSS Problem

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; }

JHPML · 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!

JHPML · 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]-->

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.

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 : )

JHPML · 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>

JHPML · 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!

JHPML · 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

JHPML · 9. Februar 2009

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

JHPML · 9. Februar 2009

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

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>

JHPML · 11. Februar 2009

ich hab's zwar schonmal angekugt (mit web developer toolber FF plugin)

ma gucken

JHPML · 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;

}

JHPML · 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

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

Anmelden

HTML/CSS Problem

Empfohlene Beiträge

Gast michaeljomarron

JHPML

JHPML

Gast michaeljomarron

Gast michaeljomarron

JHPML

JHPML

JHPML

JHPML

JHPML

Gast michaeljomarron

JHPML

JHPML

JHPML

Gast michaeljomarron

Dein Kommentar

Fachinformatiker Jobs

Fachinformatiker.de, 2024 by SE Internet Services

Links

Fachinformatiker.de App

Kontakt

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

Umsehen

Aktivitäten

Stellenanzeigen

Blog

Über Fachinformatiker.de