Nicht gesetzten Wert mit Firebug oder WebDevToolbar ermitteln

Jan-Frederik Stieler · 9. Januar 2009

Hi,
weiß einer wie ich den nicht gesetzte Werte z.B. hight mittels Firebug bzw. WebDevToolbar temporär hinzufügen kann oder mir anzeigen lassen kann?
Ich habe auf einer Seite einige Divs die sich dem Inhalt automatisch anpassen und hab jetzt keine Lust alle Höhen zusammen zu addieren. Müßte aber die Gesamtgröße des Umschließenden Divs wissen.

Viele Grüße

Maik · 9. Januar 2009

Hi,

du könntest auf die offsetHeight-Eigenschaft des umschliessenden Elements zurückgreifen.

mfg Maik

Jan-Frederik Stieler · 9. Januar 2009

Hi,
danke für den Tipp! Bei mir funktioniert dasnur nicht. Liegt vielleicht daran das die Seite mit Joomla aufgebaut wurde. Obwohl mich das doch etwas wundert.
HTML Validator gibt mir aus das nun zweimal der Height wert gesetzt wurde. Kann das daran liegen das daas nicht funktioniert?

Gruß

Maik · 9. Januar 2009

Ist die Seite erreichbar, um sich das erstmal näher anschauen zu können?

mfg Maik

Jan-Frederik Stieler · 9. Januar 2009

Hi,
nein noch nicht. Da sich kein wirklicher Inhalt in dieser befindet.

menu.css

PHP:

/* ################  topright-Menu  ################  */

ul#mainlevel
{
list-style-type: none;
}

ul#mainlevel-main li
{
display: inline;
float: right;
}

a.mainlevel-main {display: block; margin: 0 0 0 13px; padding: 23px 0 0 0; font-family: verdana, helvetica, arial, normal, sans-serif; color:#000; background-color: #fff; font-size: 9pt; text-decoration:none;}
a.mainlevel-main:hover, a.mainlevel_current-main, a.mainlevel_active-main {display: block; border-bottom: 7px solid #000; color:#000; font-size: 9pt; text-decoration:none; background-color:#fff; margin: 0 0 0 13px; padding: 23px 0 10px 0;}


/* ################  topleft(Sub)-Menu  ################  */



ul#mainlevel-submain li
{
display: inline;
float: left;
}

a.mainlevel-submain {display: block; margin: 0 13px 0 0; padding: 23px 0 0 0; font-family: verdana, helvetica, arial, normal, sans-serif; color:#000; background-color: #fff; font-size: 9pt; text-decoration:none;}
a.mainlevel-submain:hover, a.mainlevel_current-submain, a.mainlevel_active-submain {display: block; border-bottom: 7px solid #000; color:#000; font-size: 9pt; text-decoration:none; background-color:#fff; margin: 0 13px 0 0; padding: 23px 0 10px 0;}


/* ################  left(SubSub)-Menu  ################  */

ul#mainlevel-subsubmain li
{
display: inline;
}

a.mainlevel-subsubmain {display: block; margin: 13px 0 13px 0; padding: 0 0 0 20px; font-family: verdana, helvetica, arial, normal, sans-serif; color:#000; background-color: #fff; font-size: 9pt; text-decoration:none; text-align: left;}
a.mainlevel-subsubmain:hover, a.mainlevel_current-subsubmain, a.mainlevel_active-subsubmain {display: block; border-left: 7px solid #000; color:#000; font-size: 9pt; text-decoration:none; background-color:#fff; margin: 13px 0 13px 0; padding: 0 0 0 13px;}



/* ################  foot-Menu  ################  */

ul#menulist_root-footright, ul#menulist_root-footleft
{
list-style-type: none;
}

ul#menulist_root-footright li
{
display: inline;
float: right;
}


a.mainlevel-footright {display: block; font-family: verdana, helvetica, arial, normal, sans-serif; color:#000000; font-size: 9pt; text-decoration:none; margin-top: 13px; padding-top: 20px;}
a.mainlevel-footright:hover, a.mainlevel_current-footright, a.mainlevel_active-footright {display: block; border-top: 7px solid #000; color:#000000; font-size: 9pt; text-decoration:none; background-color:#fff; margin-top: 13px; padding-top: 13px;}

a#menulink_1-footright
{
margin: 13px 0 0 13px;
}

a#menulink_2-footright
{
margin-top: 13px;
}

ul#menulist_root-footleft li
{
display: inline;
float: left;
}

a#menulink_1-footleft
{
}

a.mainlevel-footleft {display: block; font-family: verdana, helvetica, arial, normal, sans-serif; color:#000000; font-size: 9pt; text-decoration:none; margin-top: 13px; padding-top: 20px;}
a.mainlevel-footleft:hover, a.mainlevel_current-footleft, a.mainlevel_active-footleft {display: block; border-top: 7px solid #000; color:#000000; font-size: 9pt; text-decoration:none; background-color:#fff; margin-top: 13px; padding-top: 13px;}

position.css

PHP:

/* ################  Position  ################  */

*
{
	margin:0;
	padding:0;
}

body
{
	text-align: left;
}

#wrapper
{
        	margin: 0 auto;
	width: 792px;
	padding: 20px;
}

#header
{
	position: relative;
	z-index: 2;
}

#top
{
	float: left;
	top: -43px;
	height: 29px;
         width: 792px;

}

#topmenu
{
	position: relative;
	top: -13px;
}


#left
{
    	width: 140px;
         padding: 100px 0 0 0;
	height: 314px;
         float: left;
}

#subsubabstand
{
	min-height: 20px;
	margin: 0 0 0 -20px;
}

div > #content
{
         padding: 100px 0 0 0;
         margin: 0 0 0 0;
         float: right;
         height: auto;
	min-height: 314px;
	width:616px;
}

#content  /*für Browser kleiner als  version IE6*/
{
	display: inline;
         padding: 100px 0 0 0;
         height: 314px;
         float: left;
}

#contentabstand
{
	position:relative;
	float: left;
	height: 30px;
         width: 792px;
}

#footer
{
	float: left;
	height: 29px;
         width: 792px;
}

#footerleft
{

         position:relative;
	top:-10px;
	float:left;
         width: 50%;
         margin: -20px 0 0 0;
}

#footerright
{
	position:relative;
	top:-10px;
         float: left;
         width: 50%;
         margin: -20px 0 0 0;
         text-align: right;
}

#nofloat
{
	clear: both;
}

.leading
{
         height: auto;
	min-height: 314px;
	width:616px;
}

layout_normal.css

PHP:

/* ################  Layout  ################  */

body
{
	font-family: verdana, helvetica, arial, normal, sans-serif; color:#000000; font-size: 9pt;
}

.hruler
{
	border-top:1px solid #000;
}


#wrapper
{

}

#header
{

}

#top
{
	border-bottom: 1px solid #000;

}

#left
{

}

#content
{
	text-align: left;
}

#footer

{
	border-top: 1px solid #000;

}

img table th td tr .contentpaneopen
{

}

table
{
	border-collapse:collapse;
	border-spacing: 0;
}

.leading_separator
{
	display: none;
}

index.php

PHP:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-de" lang="de-de" >
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="robots" content="index, follow" />
  <meta name="keywords" content="birkenhof, hofladen, gemüse, erdbeeren" />
  <meta name="description" content="Seite des Birkenhof Bauernhofes und des Birkenhof Hofladens" />
  <meta name="generator" content="Joomla! 1.5 - Open Source Content Management" />
  <title>Birkenhof</title>
  <link href="/joomla1.5_birkenhof/templates/birkenhof/favicon.ico" rel="shortcut icon" type="image/x-icon" />

  <script type="text/javascript" src="/joomla1.5_birkenhof/media/system/js/mootools.js"></script>
  <script type="text/javascript" src="/joomla1.5_birkenhof/media/system/js/caption.js"></script>

<link rel="stylesheet" href="/joomla1.5_birkenhof/templates/_system/css/general.css" type="text/css" />
<link rel="stylesheet" href="/joomla1.5_birkenhof/templates/birkenhof/css/layout_normal.css" type="text/css" />
<link rel="stylesheet" href="/joomla1.5_birkenhof/templates/birkenhof/css/position.css" type="text/css" />
<link rel="stylesheet" href="/joomla1.5_birkenhof/templates/birkenhof/css/menu.css" type="text/css" />

</head>
<body>

<!-- wrapper -->
<div id="wrapper" id="DieseDatei"><script type="text/javascript">
alert(document.all.DieseDatei.offsetHeight);

</script>
<!-- header -->
<div id="header">		<div class="moduletable">
					<img src="http://localhost/joomla1.5_birkenhof/images/header_images/header_i56.png" title="" alt="" class="" />		</div>
	</div>
<!-- top -->
<div id="top">
<!-- topmenu -->
<div id="topmenu">		<div class="moduletable-sub">
					<ul  id="mainlevel-submain"><li><a href="/joomla1.5_birkenhof/index.php?option=com_content&amp;view=category&amp;id=34&amp;Itemid=57" class="mainlevel-submain">Schaffers</a></li><li><a href="/joomla1.5_birkenhof/index.php?Itemid=&amp;option=" class="mainlevel-submain">Anbau</a></li><li><a href="/joomla1.5_birkenhof/index.php?Itemid=&amp;option=" class="mainlevel-submain">Methoden</a></li><li><a href="/joomla1.5_birkenhof/index.php?Itemid=&amp;option=" class="mainlevel-submain">Gute Gründe</a></li></ul>		</div>

			<div class="moduletable-main">
					<ul  id="mainlevel-main"><li><a href="/joomla1.5_birkenhof/index.php?option=com_content&amp;view=section&amp;id=2&amp;Itemid=62" class="mainlevel-main">Hofladen</a></li><li><a href="/joomla1.5_birkenhof/index.php?option=com_content&amp;view=frontpage&amp;Itemid=56" class="mainlevel_current-main" id="active_menu-main">Landwirtschaft</a></li></ul>		</div>
	</div>
</div>
<!-- left-->
<div id="left">
<div class="hruler"></div>
<div id="subsubabstand">

</div>
<div class="hruler"></div>

</div>
<!-- content -->
<div id="content">

<div class="blog">

			<div class="leading">
			









<img title="heuwagen" src="/joomla1.5_birkenhof/images/contentimages/andere/heuwagen.jpg" border="0" alt="heuwagen" />

		</div>
		<span class="leading_separator">&nbsp;</span>
	
	
	
	</div>

</div>
<!-- contentabstand -->
<div id="contentabstand"></div>
<!-- footer -->
<div id="footer">
<!-- footerleft -->
<div id="footerleft">		<div class="moduletable">
					<ul  id="menulist_root-footleft" class="mainlevel-footleft"><li id="menuitem_1-footleft"><a href="/joomla1.5_birkenhof/index.php?option=com_contact&amp;view=contact&amp;id=1&amp;Itemid=53" class="mainlevel-footleft" id="menulink_1-footleft">Kontakt</a></li></ul>		</div>
	</div>
<!-- footerright -->
<div id="footerright">		<div class="moduletable">

					<ul  id="menulist_root-footright" class="mainlevel-footright"><li id="menuitem_1-footright"><a href="/joomla1.5_birkenhof/index.php?option=com_content&amp;view=article&amp;id=50&amp;Itemid=54" class="mainlevel-footright" id="menulink_1-footright">Impressum</a></li><li id="menuitem_2-footright"><a href="/joomla1.5_birkenhof/index.php?option=com_content&amp;view=article&amp;id=51&amp;Itemid=55" class="mainlevel-footright" id="menulink_2-footright">Geschäftsbedingungen</a></li></ul>		</div>
	</div>
</div>
<!-- float clear-->
<div id="nofloat"></div>
<!-- wrapper end -->
</div>
</body>
</html>

Ich habe das Script bei wrapper (jetzt nichts zu dem Wort Wrapper sagen, ich weiß das ich das hier falsch verwende

) hinzugefügt.

Gruß

Maik · 9. Januar 2009

Das kann so auch nicht funktionieren, denn ein Element kann nur ein id-Attribut besitzen, und der Script-Aufruf muß am Ende des Elements erfolgen - aus:

Code:

<div id="wrapper" id="DieseDatei"><script type="text/javascript">
alert(document.all.DieseDatei.offsetHeight);

</script>

wird:

Code:

<div id="wrapper">

        <!-- Elementinhalt -->

        <script type="text/javascript">
        alert(document.getElementById("wrapper").offsetHeight) // DOM-Methode mit getElementById()
        </script>

</div><!-- /#wrapper -->

mfg Maik

Jan-Frederik Stieler · 9. Januar 2009

denn ein Element kann nur ein id-Attribut besitzen

Äh mist ja.
Bei Selfhtml war es nicht ersichtilichdas es erst am Ende hinzugefügt werden muß.
Und des Javascriptes bin ich eigentlich nicht mächtig

.

Gruß

Nicht gesetzten Wert mit Firebug oder WebDevToolbar ermitteln

Jan-Frederik Stieler

Monsterator

Maik

Jan-Frederik Stieler

Monsterator

Maik

Jan-Frederik Stieler

Monsterator

Maik

Jan-Frederik Stieler

Monsterator

Neue Beiträge