✔ "Verzerrtes" Design!

Boostergermany · 30. April 2010

Verzerrtes Design

HeY ho, ich hab n riesen Problem mit meinem CSS, nämlich arbeite ich nich so oft an Designs und so...nunja...aufjedenfall versuche ich mich gerade an Divs, nur hab ich jetzt folgendes Problem:

Siehe Bild:

http://www.eazy-share.net/pix/32ed55.png

Das Problem ist, dass der Header auf breite 100% eingestellt wurde, und wenn man die seite aufruft passt das so auch, nur kann man nach rechts scrollen und da is dann eben dieser graue rand...wie bekomme ich den bitte los ?

ich ärger mich scho seit ner Stunde mit rum....

hier ist der komplette code vom template:

HTML:

<html>
<head>
	<title>Dörferspiel</title>

	<link rel=stylesheet type="text/css" href="template/style.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">
<!--
a:link {
	color: #0099FF;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #0099FF;
}
a:hover {
	text-decoration: none;
	color: #0099FF;
}
a:active {
	text-decoration: none;
	color: #0099FF;
}
-->
</style>	    <script type="text/javascript">
        var GB_ROOT_DIR = "./greybox/";
    </script>

    <script type="text/javascript" src="greybox/AJS.js"></script>
    <script type="text/javascript" src="greybox/AJS_fx.js"></script>
    <script type="text/javascript" src="greybox/gb_scripts.js"></script>
    <link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" media="all" /></head>

<body><center><br>
<div id="top">

	  <div align="left" style="position: absolute; top:0; right: 30;">
	    <div style="position:
		absolute; right: 0px;"><img src="http://www.tutorials.de/forum/images/bg/header_right.jpg"></div>
	  </div>
</div>
</div><div id="links" style=" width: 100%; height:23; position:absolute; top: 185; right:0; background-color:#000000; font-size:16px; font-family:Hobo ,Trendy, Impact; text-shadow: 0.1em 0.1em 0.2em #4f4f4f"><font color="#CCCCCC"><a href="index.php">Startseite</a> &bull; <a href="statistiken.php">Welt</a> &bull; <a href="handel.php">Handel</a> &bull;
    <?reg?>
&bull; <a href="view.php">Mein Dorf</a> &bull;
<?online?>
</font></b></div>
<div style="position:absolute; top: 0; left: 5;"><img src="http://www.tutorials.de/forum/images/bg/header_left.jpg"></div>
<div style="position:absolute; top:20px; right: 45%;"><img src="http://www.tutorials.de/forum/images/bg/logo.png"></div><br>

<div id="inhalt" style="position:absolute">
<table width="100%">
	<tr>
		<td class="inhalt"><?inhalt?></td>
	</tr>
</table>
</div>


<div style="position:absolute; top:200; width:100%;"><center><img src="http://www.tutorials.de/forum/images/trans.png"></center></div>
</center>
</body>
</html>

Und hier ist das dazugehörige CSS:

HTML:

@font-face { font-family: "Trendy";
 	src: url(http://www.winarapid.com/images/trendy.TTF); }

@font-face { font-family: "Hobo";
 	src: url(http://www.winarapid.com/images/HOBOSTD.OTF); }

body {
	font-family: Verdana, Arial;
	font-size: 11px;
	color: #3A3A2A;
	line-height: 16px;
	text-align: center;
	background-color:#666;



}

small {
	font-family: Verdana, Arial;
	font-size: 10px;
}

hr {
	color: #CCCCCC;
	height: 1px;
}

a:link {
	font-family: Verdana, Arial;
	color: #77471D;
	text-decoration: none;
}

a:visited {
	color: #77471D;
	text-decoration: none;
}

a:active {
	color: #846850;
}

a:hover	{
	color: #3A3A2A;
	text-decoration: underline;
}

a.user {
	color: #77471D;
	text-decoration: underline;
}

a.user:active {
	color: #846850;
}

a.user:hover {
	color: #3A3A2A;
	text-decoration: underline;
}

a.foren {
	font-family: "Trebuchet MS", Tahoma, Arial;
	font-size: 13px;
}

a.forum {
	font-family: "Trebuchet MS", Tahoma, Arial;
	font-size: 18px;
	line-height: 22px;
}

input {
	font-family: Verdana, Arial;
	height: 18px;
	background-color: #FFFFFF;
	border: 1px solid #3A3A2A;
	font-size: 11px;
	color: #3A3A2A;
}
.button {
	font-family: Verdana, Arial;
	height: 18px;
	color: #3A3A2A;
	font-size: 11px;
	background-color: #EFEFEF;
	border: 1px solid #3A3A2A;
	cursor: pointer;
}
.checkbox {
	background-color:#EFEFEF;
	border: 0px;
	font-family: Verdana, Arial;
	font-size: 11px;
	cursor: pointer;
}
.select {
	border: 1px solid #3A3A2A;
	font-family: Verdana, Arial;
	font-size: 11px;
	cursor: pointer;
}
.radio {
	background-color:#EFEFEF;
	border: 0px;
	font-family: Verdana, Arial;
	font-size: 11px;
	crusor: pointer;
}
textarea {
	background-color: #FFFFFF;
	border: 1px solid #3A3A2A;
	font-family: Verdana, Arial;
	font-size: 11px;
	color: #3A3A2A;
}

#top {
	width: 100%;
	height: 210px;
       position: absolute;
       top: 0;
		left: 0;
	background-image:url(images/bg/header.jpg);
	background-repeat:repeat-x;
	
}

#inhalt {
	width: 730px;
	padding: 10px;
	position: fixed;
    top: 220;
	left: 50%;
	margin-left: -371px;
	border:#000000 solid 4px;
	border-top: solid 0px;
	background-color: #FFFFFF;
	text-align: left;
}

#inhalt td {
	font-size: 11px;
	color: #3A3A2A;
	line-height: 16px;
}

#inhalt td.inhalt {
	height: 300px;
	vertical-align: top;
}

#inhalt table.table {
	border: 2px solid #e6e6e6;
	width: 100%;
}

#inhalt td.form {
	background-image: url(../images/balken.png);
	height: 5px;
	font-weight: bold;
	font-size: 10px;
	text-align: center;
}

#inhalt a.user {
	text-decoration: underline;
}

#inhalt a.forum {
	font-size: 18px;
	line-height: 22px;
}

#inhalt div.seite a {
	font-family: Verdana, Arial;
	background-color: #FFFFFF;
	border: 1px solid #8E8573;
	color: #756032;
	height: 8px;
	font-size: 9px;
	line-height: 11px;
	padding: 0px 1px 0px 1px;
}
#inhalt div.seite a:visited {
	color: #756032;
}
#inhalt div.seite a:active {
	color: #756032;
}
#inhalt div.seite a:hover {
	background-color: #4C473D;
	border: 1px solid #4C473D;
	color: #FFFFFF;
	height: 8px;
	font-size: 9px;
	line-height: 11px;
	padding: 0px 1px 0px 1px;
	text-decoration: none;
}
#inhalt div.seite a.hide {
	background-color: #4C473D;
	border: 1px solid #4C473D;
	color: #FFFFFF;
	height: 8px;
	font-size: 9px;
	line-height: 11px;
	padding: 0px 1px 0px 1px;
	text-decoration: none;
}
#links a:link  {
        font-family:Hobo ,Trendy, Impact;
		color: #666666;
		text-decoration: none;
          }
#links a:visited  {
        color: #666666;
		text-decoration: none;
          }
#links a:hover  {
        color: #CC0000;
          }

#links a:active {
	color: #846850;
}

Ich hoffe ihr könnt mir weiterhelfen dass ich das wieder loswerde....danke schonma im Vorraus für jeden der sich zumindest die mühe macht und versucht mir zu helfen ^^

Maik · 30. April 2010

Hi,

deinem letzten DIV-Block im HTML-Code fehlt die Positionsangabe left:0, und weil er 100% breit formatiert ist, ragt er um das Maß über den rechten Fensterrand hinaus.

Mit Browsererweiterungen wie Firebug für Frefox lassen sich die Zusammenhänge ganz einfach, und im Null-Komma-Nichts analysieren - der hellblaue Balken ist besagtes Element.

Und gewöhne dir besser an, bei Wertangaben, die größer oder kleiner "0" sind, eine Einheit (z.B. "px") anzugeben.

Was den kleinen aber entscheidenden Unterschied ausmacht, erfährst du, wenn du z.B. diesen Doctype für dein HTML-Dokument deklarierst, womit die Browser im standardkonformen Modus laufen, und dein Design von ihnen weitaus mehr als nur verzerrt dargestellt wird:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

mfg Maik

Marschal · 30. April 2010

@Boostergermany: Für Webdeveloper und Webdesigner kann ich dir 2 Firefox Addons empfehlen, für mich ein absolutes "must-have"

1. Firebug
2. Web Developper

Firebug eigent sich hervoragend um während der "Laufzeit" css-styles anzu passen und "gerade zu schieben".
Web Developper hat eine ausgezeivhnete Fehlerkonsole, die dir die meisten (auchtung, nicht alle) Fehler, die die Seite produziert (CSS, HTML, Javascript) anzeigt.
Vorsicht, nicht alles, was Web Developper bemeckert ist auch falsch

Aber das meiste

Und wie Maik schon gesagt hat, achte darauf, dass deine Seiten WC3 Konform sind, und valide

MfG

EDIT: Oh^^ war ich zu langsam

Maik hat ja schon auf Firebug verwiesen

Boostergermany · 30. April 2010

ich danke euch vielmals...die beiden addons lad ich mir jetz runter...^^ danke wirklich...

✔ "Verzerrtes" Design!

Boostergermany

Erfahrenes Mitglied

Maik

Marschal

Großer Enumerator

Boostergermany

Erfahrenes Mitglied

Neue Beiträge