DIV-Element mit JavaScript stylen

B

BitMan

Erfahrenes Mitglied
Hallo Leute,

folgender Code will nicht. Kann mir jemand sagen wo mein Denkfehler ist?

Code: 
...
<script type="text/javascript">
	getElementbyId(content_wrapper).style.margin-top = "10px";
	//document.write(window.innerHeight);
</script>


	<DIV ID="top_wrapper"></DIV>
    
    <DIV ID="content_wrapper"></DIV>

	<div id="navi_wrapper">...

Ich möchte in diesem Fall die Bildschrimgröße ermitteln und den Div in der Höhe mittig ausrichten.
Leider muss ich bei der Seite mit festen Größen und mehreren CSS Templates arbeiten. Bis auf dieses Element funktioniert das...

LG BitMan
 
Da sind gleich mehrere Fehler drin:

  1. Du hast getElementById falsch geschrieben (Groß-, Kleinschreibung!), oft wird noch ein document. vorgesetzt, es ist aber nicht nötig.
  2. Man muss Strings in Anführungsstrichen übergeben (getElementById("..."))
  3. CSS-Eigenschaften werden in JS zusammengeschrieben, wobei das zweite Wort groß ist (spricht marginTop)

So ist es richtig:
Javascript: 
	document.getElementById("content_wrapper").style.marginTop = "10px";
	//document.write(window.innerHeight);
 
Zuletzt bearbeitet:
Hi.
BitMan hat gesagt.:
Ich möchte in diesem Fall die Bildschrimgröße ermitteln und den Div in der Höhe mittig ausrichten.
Zum Vergrößern anklicken....
Sowas lässt sich auch ohne JS mit CSS umsetzen, und ist dem vorzuziehen, denn wer in seinem Browser die JS-Unterstützung (wegen Sicherheitsgründen, administrativer Direktiven) deaktiviert haben sollte, kommt nicht in den Genuß dieser JS-gestützten Formatierung, sprich das Element klebt am oberen Fensterrand.


mfg Maik
 
Guten Morgen,

beide Tips hören sich erst mal vielversprechend an und ich werde morgen oder Montag weiter machen.
Es geht um eine Foto-Seite wo ich eine Klasse Idee hatte. Header oben fixiert, Navigation unten fixiert und in der Mitte ein Frame 2x3.
Leider muss ich da mit JavaScript arbeiten um die verschiedenen Größen ab zu fangen.

Montag werde ich hier sicher mit Dank oder weiteren Fragen aufschlagen.

Schönes Wochenende wünsche ich Euch..

cu BitMan
 
ComFreek hat gesagt.:
Da sind gleich mehrere Fehler drin:

  1. Du hast getElementById falsch geschrieben (Groß-, Kleinschreibung!), oft wird noch ein document. vorgesetzt, es ist aber nicht nötig.
  2. Man muss Strings in Anführungsstrichen übergeben (getElementById("..."))
  3. CSS-Eigenschaften werden in JS zusammengeschrieben, wobei das zweite Wort groß ist (spricht marginTop)

So ist es richtig:
Javascript: 
	document.getElementById("content_wrapper").style.marginTop = "10px";
	//document.write(window.innerHeight);
Zum Vergrößern anklicken....

getElementById("content_wrapper").style.marginTop = "25px"; geht leider auch nicht. *grummel*

Problem ist das ich das nicht, in der Höhe, mittig auf dem Blidschrim platzieren muss, sondern mittig in der Höhe zwischen zwei DIV'S mit unterschiedlicher Höhe, welche per Absolute oben und unten platziert sind. Geht das überhaupt ohne Javascript?
 
BitMan hat gesagt.:
Problem ist das ich das nicht, in der Höhe, mittig auf dem Blidschrim platzieren muss, sondern mittig in der Höhe zwischen zwei DIV'S mit unterschiedlicher Höhe, welche per Absolute oben und unten platziert sind. Geht das überhaupt ohne Javascript?
Zum Vergrößern anklicken....
Selbstverständlich :)

Diese Demonstration basiert auf den beiden genannten Beispielen http://www.cssplay.co.uk/layouts/fixit.html und http://www.pmob.co.uk/temp/vertical-align11.htm:

HTML: 
<!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="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="author" content="Maik" />
<meta name="date" content="2010-07-03" />

<title>tutorials.de | DIV-Element mit JavaScript stylen</title>

<style type="text/css">
/* <![CDATA[ */
/* Allgemeine Seitenformatierungen */
* {
  margin:0;
  padding:0;
}
body {
  height:100%;
  max-height:100%;
  background:#fff;
  overflow:hidden;
  font:normal 1em verdana,sans-serif;
}


/* Drei vertikale DIV-Hauptblöcke im Viewport */
div#topWrapper {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:116px;
  overflow:hidden;
  background:#53829d;
  border-bottom:4px solid #73a2bd;
}
div#middleWrapper {
  position:absolute;
  top:120px;
  right:0;
  bottom:50px;
  left:0;
  overflow:auto;
  background:#fff;
  text-align:center;
}
div#bottomWrapper {
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:45px;
  overflow:hidden;
  background:#73a2bd;
  border-top:5px solid #53829d;
}
div#topWrapper h1, div#bottomWrapper h1 {
  font-size:1.4em;
}


/* DIV-Blöcke zur vertikalen Zentrierung von div#content */
div#outerWrapper{
  height:100%;
  width:100%;
  display:table;
  vertical-align:middle;
}
div#innerWrapper{
  display:table-cell;
  vertical-align:middle;
}
div#contentWrapper{
  position:relative;
  left:50%;
  float:left;
}
div#content{
  position:relative;
  left:-50%;
  padding:20px 50px;
  background:#efefef;
  border:5px solid #dadada;
}
/* ]]> */
</style>

</head>
<body>

<div id="topWrapper">
    <h1>topWrapper</h1>
</div>

<div id="middleWrapper">
    <div id="outerWrapper">
        <div id="innerWrapper">
            <div id="contentWrapper">
                <div id="content">content</div>
            </div>
        </div>
    </div>
</div>

<div id="bottomWrapper">
    <h1>bottomWrapper</h1>
</div>

</body>
</html>


mfg Maik
 
Hmmm... sah schon besser aus. Aber der IE macht da Probleme.
Schad, das Konzept für die Seite wäre klasse gewesen, wenn das gleich mit CSS ohne JavaScript ginge.
Aber JavaScript muss ich sowieso nehmen um zwischen den CSS - Stylen der einzelnen Screen-Größen zu switchen.
 
Der aktuelle IE8 interpretiert das CSS meiner Demoseite anstandslos, wie auch die Konkurrenz-Browser Firefox, Opera, Safari, Google Chrome, usw.

Für seine Vorgängerversionen wird in http://www.pmob.co.uk/temp/vertical-align11.htm mittels eines "Conditional Comments" (http://de.selfhtml.org/css/layouts/browserweichen.htm#alternative) ein zusätzliches Stylesheet definiert, da sie die hier genutzten Tabelleneigenschaften (table, table-cell) der display-Eigenschaft nicht interpretieren, die hier im Zusammenspiel mit vertical-align:middle vonnöten sind, um den Elementinhalt vertikal zentrieren zu können.

Nebenfrage: Was definierst du mit "Screen"-Größe? Die Monitorauflösung, oder den Anzeigebereich im Browserfenster?

Nur letzteres ergibt einen Sinn, da die ermittelte Bildschirmauflösung keine brauchbare Aussage zur tatsächlichen Größe des Viewports liefert, denn der Nutzer muß sich ja nicht zwingend mit maximierten Browserfenster im Netz bewegen. Zusätzlich kann er ja weitere Side- / Toolbars im Browserfenster aktiviert haben, die den Viewport zusätzlich verringern.

mfg Maik
 
Maik hat gesagt.:
Nebenfrage: Was definierst du mit "Screen"-Größe? Die Monitorauflösung, oder den Anzeigebereich im Browserfenster?
Zum Vergrößern anklicken....
Eigentlich den Anzeigebereich. Dachte eben noch ich hätte es. Aber im Bildschirm ohne TaksBar geht es optimal, wenn ich aber die Taskbar einblende dann nicht mehr.

Bei onLoad:
Code: 
function setStyles()
{
	scrWdt = screen.width;		
	scrHgt = screen.height;
	
	avHgt = window.innerHeight;
	
	if(avHgt==null)
		avHgt = screen.availHeight;	
		
	curMargin = avHgt;
	
	if(scrWdt==1280)
	{
		curMargin -=125;
		curMargin -=54;
		curMargin -=540;
		curMargin /=2;
		
		mStr = curMargin + "px";

		
		document.getElementById("content_wrapper").style.marginTop = mStr;
		document.getElementById("content_wrapper").style.visibility = "visible";
	}
}
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück