Probleme mit der Größe der Website

Status
Nicht offen für weitere Antworten.
V

vintage1

Grünschnabel
hallo

bin ziemlich neu und anfänger was dreamweaver mx 2004 betrifft.

ich hab mir jetzt ein website layout gemacht und es passt jetzt genau auf meinen bildschirm, ohne scrollbalken.
öffne ich jedoch meine seite auf nem 19" bildschirm, wird meine seite kleiner und verschwindet nach links oben.
meine seite sitzt eigentlich mittig, nicht vollbild, sondern nur ein "streifen" von oben nach unten. wie hier: http://www.nicolaymusic.com
was kann ich den nun tun, damit die website wenigstens auf dem 19" mittig sitz, auch wenn sie kleiner ist?

und wie umgehe ich dieses problem generell

das ist mein quellcode:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
background-image: url();
background-color: #FFFFFF;
}
.style2 {
font-family: "Times New Roman", Times, serif;
font-size: 14px;
color: #FFFFFF;
}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>

<body>
<div id="header" style="position:absolute; left:136px; top:0px; width:750px; height:125px; z-index:1; background-image: url(images/Justus4Ever_Header_Fond.jpg); layer-background-image: url(images/Justus4Ever_Header_Fond.jpg); border: 1px none #000000;">
<div align="center"></div>
</div>
<div id="content" style="position:absolute; left:136px; top:155px; width:750px; height:325px; z-index:2; background-image: url(images/content.jpg); layer-background-image: url(images/content.jpg); border: 1px none #000000; overflow: auto;">
<p align="center" class="style2">&nbsp;</p>
<p align="center" class="style2"><img src="images/welcome...gif" width="637" height="77"><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </p>
<p align="center" class="style2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
</div>
<div id="footer" style="position:absolute; left:136px; top:480px; width:750px; height:125px; z-index:3; background-image: url(images/Justus4Ever_Footer.jpg); layer-background-image: url(images/Justus4Ever_Footer.jpg); border: 1px none #000000;"></div>
<div id="Layer1" style="position:absolute; left:136px; top:127px; width:750px; height:25px; z-index:4">
<table width="200" border="0" align="center" cellpadding="0" cellspacing="2">
<tr>
<td><div align="center"><a href="home.htm"><img src="images/button_home%20copy.gif" name="home" width="105" height="23" border="0" id="home"></a></div></td>
<td><a href="news.htm"><img src="images/button_news%20copy.gif" name="news" width="105" height="23" border="0" id="news"></a></td>
<td><a href="pictures.htm"><img src="images/button_pictures%20copy.gif" name="pictures" width="105" height="23" border="0" id="pictures"></a></td>
<td><a href="downloads.htm"><img src="images/button_downloads%20copy.gif" name="downloads" width="105" height="23" border="0" id="downloads"></a></td>
<td><a href="store.htm"><img src="images/button_store%20copy.gif" name="store" width="105" height="23" border="0" id="store"></a></td>
<td><a href="personal.htm"><img src="images/button_personal%20copy.gif" name="personal" width="105" height="23" border="0" id="personal"></a></td>
<td><a href="links.htm"><img src="images/button_links%20copy.gif" name="links" width="105" height="23" border="0" id="links"></a></td>
</tr>
</table>
</div>
<div id="Layer2" style="position:absolute; left:887px; top:1px; width:134px; height:605px; z-index:5"><img src="images/NC%20Layer%20copy.gif" width="134" height="605"></div>
<div id="Layer3" style="position:absolute; left:1px; top:0px; width:134px; height:605px; z-index:6"><img src="images/NC%20Layer%20copy.gif" width="134" height="605"></div>
</body>
</html>
 
Hallo!

Zuerst einmal Willkommen an Bo(a)rd!
Dann möchte ich Dich noch auf die hier gültige Netiquette aufmerksam machen. Da steht z. B. etwas über die Groß-/Kleinschreibung im Forum.
Und dann gibt es die Möglichkeit, wenn Du einen Beitrag erstellst, den HTML-Code auch als solchen zu kennzeichnen. Dazu musst Du den entsprechenden Text markieren und dann auf "< >" (oberhalb des Eingabefeldes in der Funktionsleiste) klicken. Dadurch wir dann auch die Anzeige des Beitrages übersichtlicher gestaltet.

Zum Thema:
Da Du überall style="position:absolute; [...]" definiert hast, wird Deine Seite immer da positioniert, wo Du sie jetzt siehst. position:absolute bedeutet, dass das entsprechende Feld (also das <div>) an einer festen Position sitzt. Diese Position wird mit "left" und "top" gesetzt. "left" gibt an wieviele Pixel das <div> vom linken Rand entfernt sein soll und "top" gibt die Pixel von oben an.
Ich kenne mich mit Dreamweaver nicht wirklich gut aus, aber da gibt es sicher die Möglichkeit, die Seite mittig darstellen zu lassen.

Übrigens hat das nicht unbedingt was mit der Größe des Monitors zu tun, sondern eher mit der Auflösung.
Wenn Du an einem 17" Monitor eine Auflösung von 1024x768 Pixel hast, dann kann es sein, dass die Seite genau auf den Bildschirm passt.
Wenn Du aber auf einem 19" Monitor nur eine 800x600 Pixel Auflösung hast, wird die Seite größer dargestellt und Du musst scrollen (horizontal und vertikal).

redlama
 
Vorweg: Obwohl wir über solch ein abstraktes Medium wie dem Internet kommunizieren, bitte ich dich dennoch um Einhaltung der deutschen Rechtschreibung, insbesondere die Regelungen der Groß- und Kleinschreibung und Interpunktion. Auch wäre es hilfreich, wenn du die foreneigenen Formatierungsfunktionen benutzt.


Zu deinem Problem: Du könntest folgendes Konstrukt verwenden:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title></title>
</head>

<body>
<div id="container">
	<div id="header">Kopfbereich</div>
	<div id="body">Eigentlicher Inhalt</div>
	<div id="footer">Fußbereich</div>
</div>
</body>
</html>
CSS:
Code: 
* {
	margin:			0;
	padding:		0;
	border-style:		none;
}
body {
	margin:			0 2%;
	text-align:		center;
}

#container {
	margin:			0 auto;
	width:			750px;
	background-color:	#fe0;
}
html>body #container {
	min-width:		750px;
	max-width:		48em;
}
#header {
	height:			5em;
	background-color:	#f33;
}
#body {
	height:			40em;
	background-color:	#3e3;
}
#footer {
	height:			5em;
	background-color:	#36f;
}
 
Danke ihr zwei.
Sorry nochmal.
Gumbo, könntest du mir vielleicht das in meinem Quellcode berichtigen, weil ich blick da nämlich nicht so durch, bin noch Anfänger und weiß jetzt nicht was ich da ersetzten muss.
Ich wär dir wirklich dankbar, oder irgend jemand anderen, der das lösen kann.
Danke!
 
Ehrlich gesagt blicke ich durch deinen Quelltext auch nicht durch. Es gibt auch kaum auszuzeichnende Inhalte (außer ein paar Grafiken und erzwungene Leerzeichen).
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück