Problem mit Homepage HTML brauche Hilfe - boote-forum.de

Green Devil · #1 05.08.2009, 16:17

Moin zusammen.

Ich versuche gerade mehr oder wenig n Homepage aufzubauen. Bis jetzt lief es eigentlich auch ganz gut mit den vorgefertigten Designs etc. Nun hab ich ein Problem undzwar möchte ich, dass meine Homepage mittig auf dem Bildschirm zu sehen ist. Links und rechts also nur die Hintergrundfarbe zu sehen ist. Im Moment befindet sich die Homepage am linken Rand. Wie kann ich das ändern?

Danke im voraus

LG André

Homepage: http://landre.oyla.de

Quelltext:

<head>
<meta http-equiv="imagetoolbar" content="false">

<Link>

<title>%titel%</title>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<style type="text/css">

html,body {
margin: 0;
padding: 0;
}
body {
font-size: 12px;
background-color: #ECF3F9;
color: #000;
font-family: Lucida Grande, Lucida Sans Unicode, sans-serif;
margin: 0;
}
a:link, a:active, a:visited {
color: #CCC;
text-decoration: none;
}
a: hover {
color: #FFF;
text-decoration: none;
}
.wrapper {
width: 740px;
margin: 0;
text-align: left;
border-right: solid 1px #FFF;

}
.pageheader {
height: 180px;
padding: 0;
border-bottom: solid 1px #B8CF01;
background: #ECF3F9 url(http://img37.imageshack.us/img37/823...ntergang2s.jpg) no-repeat left top;
}
.title {
width: 520px;
text-align: left;
padding: 12px;
}
.pagecontent {
background-color: #131818;
color: #FFF;
text-align: left;
padding: 12px 0 12px 0;
border-top: solid 3px #FFF;
}
.leftside {
padding: 0;
}
.rightside {
padding: 0 12px 0 12px ;
}
.image {
padding: 12px;
text-align: center;
}
.imageborder {
border: solid 2px #FFF;
}
.sidebartitle {
font-size: 14px;
color: #FFF;
text-transform: uppercase;
font-weight: 600;
padding: 6px 0 6px 12px;
margin: 4px 0;
}
.description {
color: #FFF;
line-height: 115%;
padding: 0 0 12px 0;
}
.entrydate {
font-size: 12px;
color: #7EE66D;
padding: 7px 0 12px 0;
}
.enrtytitle {
padding-bottom: 7px;
}
.archivetitle {
padding: 7px 0px 7px 0;
}
.entry {
color: #FFF;
line-height: 135%;
padding: 0 0 12px 0;
border-bottom: solid 1px #FFF;
}
.category {
font-size: 11px;
color: #7EE66D;
letter-spacing: 1px;
padding: 7px 0 0 0;
text-transform: uppercase;
}
.comments {
font-size: 11px;
color: #FFF;
}
.author {
font-size: 11px;
color: #7EE66D;
padding: 7px 0 0 0;
}
.comments a:link, .comments a:visited, .comments a:active,
.category a:link, .category a:visited, .category a:active {
color: #B8CF01;
text-decoration: none;
}
.comments a:hover, .category a:hover {
color: #FFF;
text-decoration: underline;
}
.default {
font-size: 12px;
color: #FFF;
line-height: 135%;
padding: 7px 0 4px 0;
}
blockquote {
text-decoration: none;
}
h1 {
font-family: Lucida Grande, Lucida Sans Unicode, sans-serif;
font-size: 24px;
color: #FFF;
font-weight: 600;
margin: 0;
padding: 0;
}
h2 {
font-family: Lucida Grande, Lucida Sans Unicode, sans-serif;
font-size: 16px;
color: #FFF;
font-weight: 600;
margin: 0;
padding: 0;
}
h3 {
font-family: Lucida Grande, Lucida Sans Unicode, sans-serif;
font-size: 14px;
color: #FFF;
font-weight: 600;
margin: 0;
padding: 0;
}
.paginate {
font-size: 11px;
color: #FFF;
padding: 4px 0 4px 0;
}
.menu {
width: 100%;
text-align: left;
margin: 0;
}
.menu a {
display: block;
padding: 5px 4px 5px 12px;
}
.menu a:link, .menu a:visited, .menu a:active {
color: #FFF;
text-decoration: none;
}
.menu a:hover {
background-color: #6E798B;
color: #FFF;
text-decoration: none;
}
.copyright {
font-size: 11px;
text-align: right;
padding: 7px 12px 0 0;
}
.copyright a:link, .copyright a:visited, .copyright a:active {
color: #FFF;
text-decoration: none;
}
.copyright a:hover {
color: #FFF;
text-decoration: underline;
}

</style>





</head>

<body>
%popup%

<div class="wrapper">


<div class="pageheader">

<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td align="left" valign="top" class="title"></td>
</tr></table>

</div>


<div class="pagecontent">

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>

<td width="177" valign="top" class="leftside">

<p style="text-align: left"><font color="#FFFFFF" style="font-size: 11pt">%navigation%</a></font><font color="#FFFFFF" size="2"><br>

</font>

<p style="text-align: left"><font color="#FFFFFF">%google4%


</font>
</td>


<td align="left" valign="top" class="rightside">

<IfArchivePage>

<div class="entry">

<div class="archivetitle"><h2>%titel%</h2></div>

</div>

</IfArchivePage>

<IfMainPage>
<Entry>
<div class="entry">

<div class="entrydate"><br>
<font size="2">%content%</font></div>

</div>

</Entry>
</IfMainPage>

</td>

</tr></table>


<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td valign="middle"><div class="copyright">
<p style="text-align: center"></p>
</div></td>
</tr></table>

</body>
</html>

Visara · #2 05.08.2009, 16:24

Versuch mal, margin-left und margin-right des 'wrappers' auf 'auto' zu setzen.

Green Devil · #3 05.08.2009, 16:34

so oder wie?

.wrapper {
width: 740px;
margin: 0 auto 0 auto;
text-align: left;
border-right: solid 1px #FFF;

Green Devil · #4 05.08.2009, 16:37

damit funzt es im firefox aba nich im explorer

Visara · #5 05.08.2009, 16:37

Ja. Versuch doch mal...

Green Devil · #6 05.08.2009, 16:40

.wrapper {
width: 740px;
margin: 0 auto 0 auto;
text-align: left;
border-right: solid 1px #FFF

wenn ich das in den quelltext eingebe sieht es im mozilla browser richtig aus... lediglich im ie is es noch verkehrt... wenigstens schonma ein brwoser korrekt ;)

woran kann es denn jetzt noch liegen, dass es unterschiedlilch aussieht

Visara · #7 05.08.2009, 16:44

Zitat:

Zitat von Green Devil

...
woran kann es denn jetzt noch liegen, dass es unterschiedlilch aussieht

An den unterschiedlichen Browsern

. Viel Spaß bei der Lektüre der IE-Bugs. An Deiner Stelle würde ich mir erstmal ein gutes Buch zu HTML/CSS besorgen ('Little Boxes' wäre mein Tipp), auf alle Fälle auf Frames und möglichst auch auf Vorlagen verzichten.

Gruß Visara.

Green Devil · #8 05.08.2009, 16:52

Habe aber keine Zeit irgendwelche Bücher zu lesen. Hau nächsten Monat für ein halbes Jahr ab. Also gibt es nicht irgendeinen Trick? Wie kann ich den Bug evtl. beheben?

Green Devil · #9 05.08.2009, 17:18

So habs mit einem bisschen Tüftelei selbst herausbekommen.
Lösung sieht wie folgt aus:

.wrapper {
width: 740px;
margin: 0 25% 0 25%;
text-align: left;
border-right: solid 1px #FFF

Trotzdem danke...

LG André

Visara · #10 06.08.2009, 08:11

Zitat:

Zitat von Green Devil

So habs mit einem bisschen Tüftelei selbst herausbekommen.
Lösung sieht wie folgt aus:

.wrapper {
width: 740px;
margin: 0 25% 0 25%;
text-align: left;
border-right: solid 1px #FFF

Trotzdem danke...

LG André

Und warum steht nun 'margin: 0 auto 0 auto' in Deinem CSS?

Visara.

Chili · #11 06.08.2009, 11:58

Also was HTML und CSS angeht, da kann ich mich als Experte anbiedern.

"margin: auto" geht erstmal sowieso nur in Verbindung mit einer Breitenangabe wie "width: 600px".

Das beides benötigt aber zuvor den richtigen Doc-Type, z.B. "
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//DE">

Als Beispiele kann ich da zwei Seiten von mir geben, die beide zentriert sind - da kannst du gerne mal das html und css auseinanderpflücken.

http://www.medrow.com
http://www.luftschiff-reklame.de

Chili · #12 06.08.2009, 12:02

Das hier:

Zitat:

Zitat von Green Devil

width: 740px;
margin: 0 25% 0 25%;

ist im Grunde genommen Quark.

Die Breite wird auf 740 Pixel festgelegt. Danach wird diese Festlegung überschrieben mit "Abstand links 25% der Bildschirmbreite" und "Abstand rechts 25% der Bildschirmbreite". Ergebnis ist 50% zentriert. 50% sind aber abhängig von der Auflösung. Bei einem Netbook mit 800 x 600 px ist das Ergebnis ein 400 Pixel breites Fenster.

Ob das so gewollt ist...

Visara · #13 06.08.2009, 14:10

Zitat:

Zitat von Chili-FFM

Das hier:ist im Grunde genommen Quark.

...

Du siehst doch, dass er da auch schon selber hinter gekommen ist...

Visara.

Chili · #14 06.08.2009, 21:42

Zitat:

Zitat von Visara

Du siehst doch, dass er da auch schon selber hinter gekommen ist...

Visara.

Warum so schroff - wollte nur helfen...

Visara · #15 07.08.2009, 07:34

Zitat:

Zitat von Chili-FFM

Warum so schroff - wollte nur helfen...

Entschuldige bitte - war nicht 'schroff' gemeint

.
Hast Du Dir die Luftschiff-Seite schonmal mit dem Firefox angesehen (--> die weißen Rahmen)?

Visara.

Chili · #16 07.08.2009, 08:59

Jupp.
Aber die nehme ich in Kauf...

Muss man immer abwägen zwischen Aufwand und Ertrag.

Gerade Rahmen werden von IE und konformen Browsern unterschiedlich gehandhabt. Das kann man zwar umgehen, aber ich finde den Aufwand nicht (immer) gerechtfertigt.

Die weissen "Rahmen" sind in diesem Fall keine "Rahmen", sondern Grafiken. Durch die unterschiedlichen Rahmeninterpretationen und dadurch verschobenen paddings verrutscht auch die Grafik.
Aber der Auftraggeber wollte es halt genau so...

Visara · #17 07.08.2009, 09:56

Zitat:

Zitat von Chili-FFM

...
Aber der Auftraggeber wollte es halt genau so...

Ist schon irgendwie komisch. Hier im Forum habe ich immerwieder den Eindruck, dass Andere (und damit bist nicht ausschließlich Du gemeint), hinsichtlich der Erstellung von Internetseiten, immer Auftraggeber bekommen, die...
- unbedingt schlecht lesbare Schriften haben wollen,
- auf Grammatik und Rechtschreibung absolut keinen Wert legen,
- auf verschobene Rahmen (oder Grafiken) nicht verzichten können,
- etc.

Offenbar bin ich der einzige Dussel, der nicht nur für jeden (gängigen) Browser eine entsprechende Anpassung an seinen Scripts vornimmt, sondern auch noch die Inhalte der Seiten prüft und Kunden hat, die da Wert drauf legen.
Irgendwas mach´ ich falsch...

Gruß Visara.

Chili · #18 07.08.2009, 10:56

Wirst wahrscheinlich auch dementsprechend bezahlt.

Bei http://www.luftschiff-reklame.de zahlt derjenige für die Seite und das komplette Hosting ganz genau nullkommanix.

Dementsprechend ist der Aufwand...

Visara · #19 07.08.2009, 11:49

Zitat:

Zitat von Chili-FFM

Wirst wahrscheinlich auch dementsprechend bezahlt.

...

Jetzt, wo Du es sagst...

Visara.