Website mit CSS mittig auf dem Desktop ausrichten
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
auto
code
container
datei
demo
download
fenster
forum
hilfe
http
information
inhalt
simulator
streifen
tag
team
truck
url
webseite
woche
-
Hallo,
ich habe ein Problem meine Website ist nicht in jeder Auflösung mittig ausgerichtet.
Wie bekomme ich das hin?
Cap Columbia -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
... meine Website ist nicht in jeder Auflösung mittig ausgerichtet.
Das geht mit einem Java-Script.
Wie bekomme ich das hin?
Ein Beispiel:
function start() { if(screen.width >= 1280) { if (screen.height <= 900) { window.resizeTo(880,740); } else { window.resizeTo(880,900); } window.moveTo(240,20); } else if(screen.width >= 959) { window.resizeTo(880,768); window.moveTo(100,0); } }
Dann in die Seite <body OnLoad="start()"> einbauen und es sollte gehen. -
Einfach die komplette Seite in ein Div-Tag legen und mit "margin:0 auto;" zentrieren. Fertig
Soso.
Die Frage war aber "Seite auf dem Desktop zentrieren", nicht "Inhalt in der Seite zentrieren".
Grüßchen -
Wo soll ich denn das Javascipt genau einbauen?
So sieht meine Website jetzt aus: http://www.die-technikkiste.lima-city.de/
Beitrag zuletzt geändert: 27.1.2010 14:55:06 von die-technikkiste -
Soso.
Die Frage war aber "Seite auf dem Desktop zentrieren", nicht "Inhalt in der Seite zentrieren".
Grüßchen
Du bist in der Lage Threadtitel zu lesen und zu verstehen? Dort steht CSS!
Dein Javascript zentriert nicht die Webseite, sondern das Browserfenster!
Für die Manipulation der Größe und Position des Browserfensters werden sich die Nutzer sicherlich bedanken, besonders, wenn mehrere Tabs geöffnet sind und/oder mehr als einen Monitor benutzt werden.
FF
-
Du bist in der Lage Threadtitel zu lesen und zu verstehen? Dort steht CSS!
Das stimmt allerdings. Nur --- der Begriff "Zentrieren der Seite auf dem Desktop"
bedeutet für mich halt, dass die Zentrierung eines Objekts auf dem Desktop
gemeint ist. Dass dies mit CSS nicht geht, ist zwar selbstverständlich, aber es könnte
ja sein, dass der Fragesteller sich dessen nicht bewusst war. Habe daher den
Widerspruch nach der für mich logischen Seite hin aufgelöst.
Wenn du den anderen Weg wählst, ist das sicher auch nicht verwerflich.
Und nachdem inzwischen die Adresse der Seite bekannt ist und ich sie
mir angesehen habe, stimme ich dir zu, dass du wahrscheinlich richtiger
geraten hast als ich. Ziehe meinen Vorschlag daher zurück und empfehle
dem Fragesteller deinen kompetenten Tip !
M.
Beitrag zuletzt geändert: 27.1.2010 15:18:21 von e-denzel -
Deine Webseite hat kein umschließendes DIV, was die sache komplizierter macht.
Erstelle erst mal ein DIV-Container der alle Inhalte einschließt und nennst ihn meinetwegen wrapper .
Und diesem vergibst Du in der css den code den fatfreddy gepostet hat.<div id="wrapper"> aller innherhalt von body ohne body-tag</div>#wrapper { margin: 0px auto; }
Gruß Tom
Beitrag zuletzt geändert: 27.1.2010 15:22:37 von tom-moeller -
Tut mir leid ich verstehe davon kein bissichen
-
Tut mir leid ich verstehe davon kein bissichen
Tja, dann gibt's nur eins: Studiere SELFHTML.
Siehe http://selfhtml.org/ -
also
dein HTML sieht so ca. aus:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!-- Entwickelt von Avanquest Technology v:7.1. Für Informationen besuchen Sie uns bitte im Internet unter: http://www.avanquest.com --> <html lang="de"> <head> <title> Downloads - Die Technikkiste </title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Style-Type" content="text/css;"> <link rel="stylesheet" href="die%20technikkiste_g.css" type="text/css" media="screen,projection,print"> <!--// Document Style //--> <link rel="stylesheet" href="die%20technikkiste_005_p.css" type="text/css" media="screen,projection,print"> <!--// Page Style //--> <script src="die%20technikkiste_g.js" type="text/javascript"></script> <!--// Document Script //--> <script src="die%20technikkiste_005_a.js" type="text/javascript"></script> <!--// Motion Script //--> </head> <body id="page" onload="if(IE||V5) OnWeLoad()"> DEIN INHALT </html>
und jetzt machst du das mit dem Wrapper von tom-moeller
Dann sieht es ca. so aus:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!-- Entwickelt von Avanquest Technology v:7.1. Für Informationen besuchen Sie uns bitte im Internet unter: http://www.avanquest.com --> <html lang="de"> <head> <title> Downloads - Die Technikkiste </title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Style-Type" content="text/css;"> <link rel="stylesheet" href="die%20technikkiste_g.css" type="text/css" media="screen,projection,print"> <!--// Document Style //--> <link rel="stylesheet" href="die%20technikkiste_005_p.css" type="text/css" media="screen,projection,print"> <!--// Page Style //--> <script src="die%20technikkiste_g.js" type="text/javascript"></script> <!--// Document Script //--> <script src="die%20technikkiste_005_a.js" type="text/javascript"></script> <!--// Motion Script //--> </head> <body id="page" onload="if(IE||V5) OnWeLoad()"> <div id="wrapper"> DEIN INHALT </div> </html>
und in deine CSS datei schreibt du:
body { margin: auto; padding 0; } #wrapper { margin: 0px auto; }
Jetzt solltest du es verstanden haben ! fals nicht denke ich die webseite stammt nicht von dir
-
Es tut mir leid ich weiß nicht wo ich den Code für die CSS-Datei einfügen soll und was meints du mit "DEIN INHALT"?
P.S. Die Website ist aber von mir erstellt, bin nur noch nicht gut in diesen Programmieren.
Beitrag zuletzt geändert: 28.1.2010 16:21:33 von die-technikkiste -
die-technikkiste schrieb:
Es tut mir leid ich weiß nicht wo ich den Code für die CSS-Datei einfügen soll und was meints du mit "DEIN INHALT"?
P.S. Die Website ist aber von mir erstellt, bin nur noch nicht gut in diesen Programmieren.
Den Inhalt vielleicht, aber nicht das Template, denn sonst wüßtest Du wo der Code reinkommt. Nämlich in die index.php und css Deines Templates.
"DEIN INHALT" ist von psd nur als Platzhalter für den "eigentlichen Inhalt" der index php innerhalb des body-tags gemeint. Wir können Dir gerne helfen, aber eine Onlineschulung und Basics beibringen geht wirklich nicht.
Du solltest Dich mehr mit dem Thema Template, aufbau von Joomla, HTML und CSS auseinander setzten, denn es ist alles gesagt, mehr geht nicht. Den Rest musst Du machen, denn nur Du kannst auf dein Template zugreifen. Google mal nach "Joomla Temlate erstellen", und Du wirst mehr als fündig.
Gruß Tom
Beitrag zuletzt geändert: 28.1.2010 17:16:23 von tom-moeller -
die-technikkiste schrieb:
Es tut mir leid ich weiß nicht wo ich den Code für die CSS-Datei einfügen soll und was meints du mit "DEIN INHALT"?
P.S. Die Website ist aber von mir erstellt, bin nur noch nicht gut in diesen Programmieren.
Ich nehme mal an mit WebEasy 8 "erstellt" ...
wow mehr als 500 vorlagen
http://www.avanquest.com/Deutschland/software-online/Web_Easy_Professional-126081?meta=arbeiten&cat=gestalten&sub=web-design
den Code fuegst du in die%20technikkiste_g.css oder/und die%20technikkiste_005_p.css ein.
Ansonsten schliesse ich mich e-denzel an:
e-denzel schrieb:
Tut mir leid ich verstehe davon kein bissichen
Tja, dann gibt's nur eins: Studiere SELFHTML.
Siehe http://selfhtml.org/
stichwort css oder stylesheets -
Ist das so richtig?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!-- Entwickelt von Avanquest Technology v:7.1. Für Informationen besuchen Sie uns bitte im Internet unter: http://www.avanquest.com --> <html lang="de"> <head> <title> Home - Die Technikkiste </title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Style-Type" content="text/css;"> <meta name="Author" content="Web Easy Professional Avanquest Software"> <meta name="Keywords" content="Web Easy, Avanquest"> <meta name="Description" content="Diese Website wurde mit Technologie von Avanquest Software erstellt."> <link rel="stylesheet" href="die%20technikkiste_g.css" type="text/css" media="screen,projection,print"> <!--// Document Style //--> <link rel="stylesheet" href="index_p.css" type="text/css" media="screen,projection,print"> <!--// Page Style //--> <script src="die%20technikkiste_g.js" type="text/javascript"></script> <!--// Document Script //--> <script src="index_a.js" type="text/javascript"></script> <!--// Motion Script //--> <script src="index_c.js" type="text/javascript"></script> <!--// Custom Script //--> </head> <body id="page" onload="if(IE||V5) OnWeLoad()" <div id="wrapper">> <span id="e63" class="cc01"></span> <span id="e62"></span> <span id="e61"></span> <span id="e60" class="cc02"></span> <span id="e59"></span> <div id="e58" class="cc03"> Die Technikkiste </div> <div id="e57" class="cc04"> Technology is our life. </div> <div id="e56" class="cc05"> Willkommen auf Die Technikkiste </div> <div id="e55"> <form method="get" action="http://www.google.com/search" target="blank"> <input type="hidden" name="ie" value="utf-8"> <input type="hidden" name="oe" value="utf-8"> <input type="hidden" name="domains" value="www.die-technikkiste.lima-city.de"> <input type="hidden" name="sitesearch" value="www.die-technikkiste.lima-city.de"> <input type="text" name="q" size="25" maxlength="255" value="Suchen ..."> <input type="submit" value="Suchen"> </form> </div> <img id="e54" name="e54" src="bilddatein/header.gif" title="Die Technikkiste" alt="header.gif" align="right" border="0"> <div id="e53" class="cc03"> Die Technikkiste </div> <div id="e52" class="cc06"> Technology is our life. </div> <span id="e51"></span> <div id="e50" class="cc07"> Unser Team heißt Sie herzlich willkommen. Wir sind eine kostenlose Internet-Plattform, die sich mit den Themen PC, Wii und DS beschäftigt. Hierzu bieten wir einen Newsbereich, viele Downloads, ein Forum und ein Testarchiv. Alles wird regelmäßig aktualisiert, damit Sie immer auf dem Laufendem sind. Also, nicht vergessen, sich kostenlos im Forum anzumelden.<br> Viel Spaß wünscht das Team von<br> Die-Technikkiste.lima-city.de </div> <span id="e49" class="cc08"></span> <a href="die%20technikkiste_002.htm" onmouseover="OnWeOver(0,0,0,IDP[9],Img48,'die%20technikkiste_002.htm',1)" onmouseout="OnWeOver(0,0,0,IDP[9],Img48,0,0)"> <img id="e48" name="e48" src="bilddatein/die%20technikkiste001032.gif" title="" alt="die%20technikkiste001032.gif" align="right" border="0"></a> <a href="die%20technikkiste_005.htm" onmouseover="OnWeOver(0,0,0,IDP[8],Img47,'die%20technikkiste_005.htm',1)" onmouseout="OnWeOver(0,0,0,IDP[8],Img47,0,0)"> <img id="e47" name="e47" src="bilddatein/die%20technikkiste001030.gif" title="" alt="die%20technikkiste001030.gif" align="right" border="0"></a> <a href="http://die-technikkiste.lima-city.de/index.php?sid=3dc298c18e6d1225e73e8d03bdb2848c" onmouseover="OnWeOver(0,0,0,IDP[7],Img46,'http://die-technikkiste.lima-city.de/index.php?sid=3dc298c18e6d1225e73e8d03bdb2848c',1)" onmouseout="OnWeOver(0,0,0,IDP[7],Img46,0,0)"> <img id="e46" name="e46" src="bilddatein/die%20technikkiste001028.gif" title="" alt="die%20technikkiste001028.gif" align="right" border="0"></a> <a href="die%20technikkiste_007.htm" onmouseover="OnWeOver(0,0,0,IDP[6],Img45,'die%20technikkiste_007.htm',1)" onmouseout="OnWeOver(0,0,0,IDP[6],Img45,0,0)"> <img id="e45" name="e45" src="bilddatein/die%20technikkiste001026.gif" title="" alt="die%20technikkiste001026.gif" align="right" border="0"></a> <div id="e44" class="cc09"> <a href="http://www.styleshout.com/"> Design by: styleshout</a> </div> <span id="e43" class="cc10"></span> <div id="e42" class="cc09"> <a href="http://validator.w3.org/check?uri=www.die-technikkiste.lima-city.de&charset=%28detect+automatically%29&doctype=Inline&group=0&accept=text%2Fhtml%2Capplication%2Fxhtml%2Bxml%2Capplication%2Fxml%3Bq%3D0.9%2C*%2F*%3Bq%3D0.8&accept-language=de-de%2Cde%3Bq%3D0.8%2Cen-us%3Bq%3D0.5%2Cen%3Bq%3D0.3&accept-charset=ISO-8859-1%2Cutf-8%3Bq%3D0.7%2C*%3Bq%3D0.7&user-agent=W3C_Validator%2F1.654"> Vlaid: XHTML</a> </div> <div id="e41" class="cc09"> <a href="http://jigsaw.w3.org/css-validator/validator?uri=www.die-technikkiste.lima-city.de&profile=css21&usermedium=all&warning=1&lang=de"> | CSS</a> </div> <div id="e40" class="cc11"> Aktuelle Techniknews: </div> <div id="e39" class="cc07"> Endlich steht der Europatermin für den DSi fest,<br> aber was kann der neue DSi und ändert sich nur die Bildqualität, Größe oder nur die Software? ... </div> <span id="e38" class="cc01"></span> <div id="e37" class="cc12"> <a href="#Die Technikkiste - News - Europatermin für den DSi XL"> weiter lesen ... </a> </div> <div id="e36" class="cc12"> | geschrieben am: 16.01.2010 </div> <span id="e35" class="cc01"></span> <div id="e34" class="cc13"> Europatermin für den DSi XL: </div> <div id="e33" class="cc07"> Nun ist endlich die Demo für "German Truck Simulator" erschienen. Alles weitere im Atikel. </div> <span id="e32" class="cc01"></span> <div id="e31" class="cc12"> <a href="#Die Technikkiste - News - German Truck Simulator: Demo veröffentlicht"> weiter lesen ... </a> </div> <div id="e30" class="cc12"> | geschrieben am: 16.01.2010 </div> <div id="e29" class="cc13"> Demo für "German Truck Simulator" veröffentlicht </div> <a href="index.htm" onmouseover="OnWeOver(0,0,0,IDP[5],Img28,'index.htm',1)" onmouseout="OnWeOver(0,0,0,IDP[5],Img28,0,0)"> <img id="e28" name="e28" src="bilddatein/die%20technikkiste001020.gif" title="" alt="die%20technikkiste001020.gif" align="right" border="0"></a> <a href="die%20technikkiste_002.htm" onmouseover="OnWeOver(0,0,0,IDP[4],Img27,'die%20technikkiste_002.htm',1)" onmouseout="OnWeOver(0,0,0,IDP[4],Img27,0,0)"> <img id="e27" name="e27" src="bilddatein/die%20technikkiste001018.gif" title="" alt="die%20technikkiste001018.gif" align="right" border="0"></a> <a href="die%20technikkiste_005.htm" onmouseover="OnWeOver(0,0,0,IDP[3],Img26,'die%20technikkiste_005.htm',1)" onmouseout="OnWeOver(0,0,0,IDP[3],Img26,0,0)"> <img id="e26" name="e26" src="bilddatein/die%20technikkiste001016.gif" title="" alt="die%20technikkiste001016.gif" align="right" border="0"></a> <a href="http://die-technikkiste.lima-city.de/index.php?sid=3dc298c18e6d1225e73e8d03bdb2848c" onmouseover="OnWeOver(0,0,0,IDP[2],Img25,'http://die-technikkiste.lima-city.de/index.php?sid=3dc298c18e6d1225e73e8d03bdb2848c',1)" onmouseout="OnWeOver(0,0,0,IDP[2],Img25,0,0)"> <img id="e25" name="e25" src="bilddatein/die%20technikkiste001014.gif" title="" alt="die%20technikkiste001014.gif" align="right" border="0"></a> <a href="die%20technikkiste_007.htm" onmouseover="OnWeOver(0,0,0,IDP[1],Img24,'die%20technikkiste_007.htm',1)" onmouseout="OnWeOver(0,0,0,IDP[1],Img24,0,0)"> <img id="e24" name="e24" src="bilddatein/die%20technikkiste001012.gif" title="" alt="die%20technikkiste001012.gif" align="right" border="0"></a> <div id="e23" class="cc14"> HDTV ist der TV-Standart der<br> Zukunft.<br> Das ZDF </div> <span id="e22" class="cc15"></span> <div id="e21" class="cc13"> Suchen </div> <div id="e20" class="cc13"> Aktuelle News </div> <div id="e19" class="cc13"> Sidebar Menu </div> <div id="e18" class="cc13"> News der Woche </div> <div id="e17" class="cc13"> Spruch der Woche </div> <span id="e16" class="cc16"></span> <div id="e15" class="cc14"> Der Nintendo hat am Ende der Woche den Termin für den DSi XL<br> bekanntgegeben. </div> <div id="e14" class="cc14"> Um Hilfe und Informationen zu erhalten benachrichtigen sie den Webmaster (siehe Forum). </div> <div id="e13" class="cc14"> Rondomedia veröffentlichte die Demo zu German Truck Simulator. Wie schlägt sich das Spiel? </div> <a href="die%20technikkiste_003.htm"> <img id="e12" name="e12" src="bilddatein/die%20technikkiste001009.jpg" title="" alt="die%20technikkiste001009.jpg" align="right" border="0"></a> <a href="die%20technikkiste_004.htm"> <img id="e11" name="e11" src="bilddatein/die%20technikkiste001008.jpg" title="" alt="die%20technikkiste001008.jpg" align="right" border="0"></a> <span id="e10" class="cc16"></span> <span id="e9" class="cc16"></span> <span id="e8" class="cc16"></span> <span id="e7" class="cc16"></span> <span id="e6" class="cc17"></span> <span id="e5" class="cc17"></span> <div id="e4" class="cc13"> Brauchen sie Hilfe? </div> <span id="e3" class="cc16"></span> <div id="e2" class="cc18"> Forum ist online </div> <div id="e1" class="cc14"> Unser Forum ist nun entlich online. Es war ein hartes Stück Arbeit, aber letzentlich haben wir es geschaft und bittet alles was man sich wünschen kann. <br> <br> Probiert es doch mal aus. Einfach auf Forum klinken, anmelden und mit anderen diskutieren. Viel Spaß<br> Euer Team </div> <span id="e60" class="cc01"></span> <span id="e59"></span> <span id="e58"></span> <span id="e57" class="cc02"></span> <span id="e56"></span> <div id="e55" class="cc03"> Die Technikkiste </div> <div id="e54" class="cc04"> Technology is our life. </div> <div id="e53" class="cc05"> Willkommen auf Die Technikkiste </div> <div id="e52"> <form method="get" action="http://www.google.com/search" target="blank"> <input type="hidden" name="ie" value="utf-8"> <input type="hidden" name="oe" value="utf-8"> <input type="hidden" name="domains" value="www.die-technikkiste.lima-city.de"> <input type="hidden" name="sitesearch" value="www.die-technikkiste.lima-city.de"> <input type="text" name="q" size="25" maxlength="255" value="Suchen ..."> <input type="submit" value="Suchen"> </form> </div> <img id="e51" name="e51" src="bilddatein/header.gif" title="Die Technikkiste" alt="header.gif" align="right" border="0"> <div id="e50" class="cc03"> Die Technikkiste </div> <div id="e49" class="cc06"> Technology is our life. </div> <span id="e48"></span> <div id="e47" class="cc07"> Unser Team heißt Sie herzlich willkommen. Wir sind eine kostenlose Internet-Plattform, die sich mit den Themen PC, Wii und DS beschäftigt. Hierzu bieten wir einen Newsbereich, viele Downloads, ein Forum und ein Testarchiv. Alles wird regelmäßig aktualisiert, damit Sie immer auf dem Laufendem sind. Also, nicht vergessen, sich kostenlos im Forum anzumelden.<br> Viel Spaß wünscht das Team von<br> Die-Technikkiste.lima-city.de </div> <span id="e46" class="cc08"></span> <a href="die%20technikkiste_002.htm" onmouseover="OnWeOver(0,0,0,IDP[9],Img45,'die%20technikkiste_002.htm',1)" onmouseout="OnWeOver(0,0,0,IDP[9],Img45,0,0)"> <img id="e45" name="e45" src="bilddatein/die%20technikkiste001029.gif" title="" alt="die%20technikkiste001029.gif" align="right" border="0"></a> <a href="die%20technikkiste_005.htm" onmouseover="OnWeOver(0,0,0,IDP[8],Img44,'die%20technikkiste_005.htm',1)" onmouseout="OnWeOver(0,0,0,IDP[8],Img44,0,0)"> <img id="e44" name="e44" src="bilddatein/die%20technikkiste001027.gif" title="" alt="die%20technikkiste001027.gif" align="right" border="0"></a> <a href="http://die-technikkiste.lima-city.de/index.php?sid=3dc298c18e6d1225e73e8d03bdb2848c" onmouseover="OnWeOver(0,0,0,IDP[7],Img43,'http://die-technikkiste.lima-city.de/index.php?sid=3dc298c18e6d1225e73e8d03bdb2848c',1)" onmouseout="OnWeOver(0,0,0,IDP[7],Img43,0,0)"> <img id="e43" name="e43" src="bilddatein/die%20technikkiste001025.gif" title="" alt="die%20technikkiste001025.gif" align="right" border="0"></a> <a href="die%20technikkiste_007.htm" onmouseover="OnWeOver(0,0,0,IDP[6],Img42,'die%20technikkiste_007.htm',1)" onmouseout="OnWeOver(0,0,0,IDP[6],Img42,0,0)"> <img id="e42" name="e42" src="bilddatein/die%20technikkiste001023.gif" title="" alt="die%20technikkiste001023.gif" align="right" border="0"></a> <div id="e41" class="cc09"> <a href="http://www.styleshout.com/"> Design by: styleshout</a> </div> <span id="e40" class="cc10"></span> <div id="e39" class="cc09"> <a href="http://validator.w3.org/check?uri=www.die-technikkiste.lima-city.de&charset=%28detect+automatically%29&doctype=Inline&group=0&accept=text%2Fhtml%2Capplication%2Fxhtml%2Bxml%2Capplication%2Fxml%3Bq%3D0.9%2C*%2F*%3Bq%3D0.8&accept-language=de-de%2Cde%3Bq%3D0.8%2Cen-us%3Bq%3D0.5%2Cen%3Bq%3D0.3&accept-charset=ISO-8859-1%2Cutf-8%3Bq%3D0.7%2C*%3Bq%3D0.7&user-agent=W3C_Validator%2F1.654"> Vlaid: XHTML</a> </div> <div id="e38" class="cc09"> <a href="http://jigsaw.w3.org/css-validator/validator?uri=www.die-technikkiste.lima-city.de&profile=css21&usermedium=all&warning=1&lang=de"> | CSS</a> </div> <div id="e37" class="cc11"> Aktuelle Techniknews: </div> <div id="e36" class="cc07"> Endlich steht der Europatermin für den DSi fest,<br> aber was kann der neue DSi und ändert sich nur die Bildqualität, Größe oder nur die Software? ... </div> <span id="e35" class="cc01"></span> <div id="e34" class="cc12"> <a href="#Die Technikkiste - News - Europatermin für den DSi XL"> weiter lesen ... </a> </div> <div id="e33" class="cc12"> | geschrieben am: 16.01.2010 </div> <span id="e32" class="cc01"></span> <div id="e31" class="cc13"> Europatermin für den DSi XL: </div> <div id="e30" class="cc07"> Nun ist endlich die Demo für "German Truck Simulator" erschienen. Alles weitere im Atikel. </div> <span id="e29" class="cc01"></span> <div id="e28" class="cc12"> <a href="#Die Technikkiste - News - German Truck Simulator: Demo veröffentlicht"> weiter lesen ... </a> </div> <div id="e27" class="cc12"> | geschrieben am: 16.01.2010 </div> <div id="e26" class="cc13"> Demo für "German Truck Simulator" veröffentlicht </div> <a href="index.htm" onmouseover="OnWeOver(0,0,0,IDP[5],Img25,'index.htm',1)" onmouseout="OnWeOver(0,0,0,IDP[5],Img25,0,0)"> <img id="e25" name="e25" src="bilddatein/die%20technikkiste001017.gif" title="" alt="die%20technikkiste001017.gif" align="right" border="0"></a> <a href="die%20technikkiste_002.htm" onmouseover="OnWeOver(0,0,0,IDP[4],Img24,'die%20technikkiste_002.htm',1)" onmouseout="OnWeOver(0,0,0,IDP[4],Img24,0,0)"> <img id="e24" name="e24" src="bilddatein/die%20technikkiste001015.gif" title="" alt="die%20technikkiste001015.gif" align="right" border="0"></a> <a href="die%20technikkiste_005.htm" onmouseover="OnWeOver(0,0,0,IDP[3],Img23,'die%20technikkiste_005.htm',1)" onmouseout="OnWeOver(0,0,0,IDP[3],Img23,0,0)"> <img id="e23" name="e23" src="bilddatein/die%20technikkiste001013.gif" title="" alt="die%20technikkiste001013.gif" align="right" border="0"></a> <a href="http://die-technikkiste.lima-city.de/index.php?sid=3dc298c18e6d1225e73e8d03bdb2848c" onmouseover="OnWeOver(0,0,0,IDP[2],Img22,'http://die-technikkiste.lima-city.de/index.php?sid=3dc298c18e6d1225e73e8d03bdb2848c',1)" onmouseout="OnWeOver(0,0,0,IDP[2],Img22,0,0)"> <img id="e22" name="e22" src="bilddatein/die%20technikkiste001011.gif" title="" alt="die%20technikkiste001011.gif" align="right" border="0"></a> <a href="die%20technikkiste_007.htm" onmouseover="OnWeOver(0,0,0,IDP[1],Img21,'die%20technikkiste_007.htm',1)" onmouseout="OnWeOver(0,0,0,IDP[1],Img21,0,0)"> <img id="e21" name="e21" src="bilddatein/die%20technikkiste001009.gif" title="" alt="die%20technikkiste001009.gif" align="right" border="0"></a> <div id="e20" class="cc14"> HDTV ist der TV-Standart der<br> Zukunft.<br> Das ZDF </div> <div id="e19" class="cc13"> Suchen </div> <div id="e18" class="cc13"> Aktuelle News </div> <div id="e17" class="cc13"> Sidebar Menu </div> <div id="e16" class="cc13"> News der Woche </div> <div id="e15" class="cc13"> Spruch der Woche </div> <span id="e14" class="cc15"></span> <div id="e13" class="cc14"> Der Nintendo hat am Ende der Woche den Termin für den DSi XL<br> bekanntgegeben. </div> <div id="e12" class="cc14"> Um Hilfe und Informationen zu erhalten benachrichtigen sie den Webmaster (siehe Forum). </div> <div id="e11" class="cc14"> Rondomedia veröffentlichte die Demo zu German Truck Simulator. Wie schlägt sich das Spiel? </div> <a href="die%20technikkiste_003.htm"> <img id="e10" name="e10" src="bilddatein/die%20technikkiste001007.jpg" title="" alt="die%20technikkiste001007.jpg" align="right" border="0"></a> <a href="die%20technikkiste_004.htm"> <img id="e9" name="e9" src="bilddatein/die%20technikkiste001006.jpg" title="" alt="die%20technikkiste001006.jpg" align="right" border="0"></a> <span id="e8" class="cc15"></span> <span id="e7" class="cc15"></span> <span id="e6" class="cc15"></span> <span id="e5" class="cc15"></span> <div id="e4" class="cc13"> Brauchen sie Hilfe? </div> <span id="e3" class="cc15"></span> <div id="e2" class="cc16"> Forum ist online </div> <div id="e1" class="cc14"> Unser Forum ist nun entlich online. Es war ein hartes Stück Arbeit, aber letzentlich haben wir es geschaft und bittet alles was man sich wünschen kann. <br> <br> Probiert es doch mal aus. Einfach auf Forum klinken, anmelden und mit anderen diskutieren. Viel Spaß<br> Euer Team </div> </form> </body> </html>
Wenn es falsch ist, dann drückt es bitte einfach aus.
Beitrag zuletzt geändert: 28.1.2010 22:13:23 von die-technikkiste -
die-technikkiste schrieb:
Ist das so richtig?
Nein!
Das ist das Problem von diesen Baukastsnsystemen. Ich treffe das immer wieder in den Foren an, wo es um Webdesign geht. Man kann alles schön zusammenklicken, begnügt sich mit schlechtem Quellcode, da man ihn eh nicht versteht. Und wenn man mal was spezielles haben möchte, steht man davor, weil man nur Bahnhof versteht. Will aber auch nicht dazulernen um HTML und CSS zu lernen.
Ich hätte an deiner Stelle die Finger solange vom Quellcode gelassen, bis ich HTML verstanden habe. Jetzt haben wir den Salat, wenn Du Dir mal das verbogene Layout Deiner Webseite ansiehst! *frustabgelassen*
So... ich nehme Dich jetzt ans Händchen, damit wir endlich diesen Thread schließen können und Deine HP wiede nach was aussieht!
Ich kann mich nicht noch einfacher ausdrücken. Es gibt keine Vereinfachung von Standardausdrücke.
Du hast das DIV innerhalb des body-tags geschreiben und nicht danach. Und den End-Tag des DIVs nicht wirklich am Schluss des Bodys, sondern noch innherhalb des Formulars.
Dein Code (Ausschnitt):
<body id="page" onload="if(IE||V5) OnWeLoad()" <div id="wrapper">> ...... </div> </form> </body> </html>
Richtig wäre:
<body id="page" onload="if(IE||V5) OnWeLoad()"> <div id="wrapper"> ...... </form> </div> </body> </html>
Und nicht vergessen, den Eintrag in die "die technikkiste_g.css" zu machen. Dort steht sie nämlich immer noch nicht drin. (Wahnsinn, dieser Baukasten macht fast 600 Zeilen CSS-Code) Appopos CSS. Dateinamen im Web gibt man keine Leerzeichen, weil es diese dort nicht gibt. Der Dateiname Deiner CSS wird nämlich fürs Web so "die%20technikkiste_g.css" umgesetzt.
Gruß Tom
Beitrag zuletzt geändert: 29.1.2010 9:29:14 von tom-moeller -
Ich wollte mich nur noch mal bedanken für eure Unterstützung. Ich habe mir überlegt, meine Website noch mal neu zu machen.
Danke für eure Hilfestellungen
Beitrag zuletzt geändert: 30.1.2010 10:49:11 von die-technikkiste -
Hier ein kleines Tutorial dazu:
Eine Website zentrieren
Statt dass die Seite oben links im Fenster anfängt möchte man dass sie, mit fester Breite
mittig im Fenster schwebt, dahinter ein irgendwie gestylter Hintergrund.
Ein Auszug aus dem HTML sieht so aus:
<body>
<div id="container">
...
... hier der gesamte Inhalt der Seite
...
</div> <!‐‐ Ende container ‐‐>
</body>
Direkt in dem <body>, und ihn ausfüllend, ist ein verschachtelter Behälter, hier
„container“ genannt. Er beinhaltet das HTML für die gesamte Seite.
Das CSS dazu (die fettgedruckten Bereiche sind ausschlaggebend):
body {
background‐color: #f0f0f0;
color: #444;
font‐family: Helvetica, Arial, sans‐serif;
font‐size: 1em;
line‐height: 1.3;
width: 100%; /*Zwingt body auf 100% Breite des Fensters.*/
margin: 0; /*Entfernt browsereigene
Ränder ums Fenster*/
padding: 0; /*damit die 100% genau hineinpassen.*/
}
#container {
background‐color: #fff; /*Malt den zentrierten Bereich weiß aus.*/
width: 80em; /*Die gewünschte Breite der zentrierten Website.*/
margin: 0 auto; /*0 oben und unten, auto links und rechts ergibt*/
} /*einen zentrierten Streifen*/
Der width des zentrierten Bereichs ist hier mit 80em angegeben. Pixel‐ sowie %‐
Angaben wären auch möglich. em‐ und, bei Browsern neueren Typs, Pixel‐Angaben für
den width bewirken dass, wenn über den Browser die Schrift vergrößert wird, die
Breite des zentrierten Streifens mitwächst und ggf. aus der rechten Seite des
Browserfensters fließt. %‐width‐Angaben ergeben ein sogenanntes „liquid layout“: bei
Schriftvergrößerung bleibt die Breite des Streifens fest, der darin geschriebene Schrift
wird größer und fließt nach unten. Dagegen bei Fenstervergrößerung durch Mausziehen
wächst die Breite des mit % angegebenen zentrierten Streifens.
Im Beispiel könnte der body und/oder der Container selbstverständlich mit
Hintergrundbildern und/oder ‐verläufen versehen werden.
Dieses Muster zum Zentrieren kann auf jedes beliebige Blockelement angewandt
werden, das eine definierte Breite hat und in einem umklammernden Block zentriert
werden soll. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
