New site with phpwcms for Bau-facts.de

Nordlicht · Post by **Nordlicht** » Tue 6. Mar 2007, 13:33

Hello World,
I'm setting up our new website using phpwcms.
It's still in construction but getting closer to letting it out.

http://www.bau-facts.de/phpwcms

What do you think about it?
Especially header, h1 and h2 title.

Thanks in advance

Nordlicht · Post by **Nordlicht** » Wed 7. Mar 2007, 21:59

Now I've changed the headers to a much more simple variant.

How can it be that the footer text apears outsite the footer-div
when the site needs to be scrolled (in FF 1.5x and Opera 9.1x).
Just make the browser in the height smaler than the page
and you will se what I mean. In IE 7 it works fine.

Nordlicht · Post by **Nordlicht** » Thu 8. Mar 2007, 12:39

I'm going crazy. How can the text jump out of the div-container?
And why does it only happens in Opera and Firefox and not in IE?

Doing the W3.org check says:
This Page Is Valid XHTML 1.0 Transitional!

DeXXus · Post by **DeXXus** » Thu 8. Mar 2007, 20:55

Nordlicht wrote:I'm going crazy. How can the text jump out of the div-container?
And why does it only happens in Opera and Firefox and not in IE?

You need to play around with your CSS .clearer to see what is going on! To see what I mean... set height: to 20px instead of 1px and observe the change. Also, take note of your cornerbkgrnd.gif both between IE and FF/Opera AND note the "chopping off" (overlay) effect on a page like http://www.bau-facts.de/phpwcms/baustoffe.phtml

Nordlicht wrote:Doing the W3.org check says:
This Page Is Valid XHTML 1.0 Transitional!

BTW, being "Valid" DOES NOT mean the "layout" (programmed in XHTML) is correct...only that the tags and their syntax ARE!

Post by **juergen** » Fri 9. Mar 2007, 05:49

Code: Select all

<div class="clearer"></div>
<!-- ==== Anfang Fußzeile ========================================= -->
<div id="footer"><!-- ==== Anfang Copyright Zeile ================================ -->Copyright © 2005-2006 by Ingenieurbüro Norbert Meyer &nbsp;·&nbsp; <script type="text/javascript">/* <![CDATA[ */var v2="VW4VQE64QEK4IJ8NC";var v7=unescape("%3F9R9%11%27WA%7C%23*W%3D9%16*%26");var v5=v2.length;var v1="";for(var v4=0;v4<v5;v4++){v1+=String.fromCharCode(v2.charCodeAt(v4)^v7.charCodeAt(v4));}document.write('<a href="javascript:void(0)" onclick="window.location=\'mail\u0074o\u003a'+v1+'?subject=Anfrage%20%FCber%20Bau-facts.de'+'\'">'+'E-Mail</a>'); /* ]]> */
</script><a href="javascript:void(0)" onclick="window.location='mailto:info@bau-facts.de?subject=Anfrage%20%FCber%20Bau-facts.de'">E-Mail</a><noscript><a href='http://w2.syronex.com/jmr/safemailto/de/#noscript'>E-Mail (Spam-Schutz)</a></noscript> &nbsp;·&nbsp; powered by <a href="http://www.phpwcms.de" target="_blank">php<strong>wcms</strong></a><!-- ==== Ende Copyright Zeile ================================= -->

</div><!-- ==== Ende footer ==== -->
<!-- ==== Ende Fußzeile =========================================== -->
<div style="display: none;" id="overlay"></div><div style="display: none;" id="lightbox"><div id="outerImageContainer"><div id="imageContainer"><img id="lightboxImage"><div id="hoverNav"><a href="#" id="prevLink"></a><a href="#" id="nextLink"></a></div><div id="loading"><a href="#" id="loadingLink"><img src="images/loading.gif"></a></div></div></div><div class="clearfix" id="imageDataContainer"><div id="imageData"><div id="imageDetails"><span id="caption"></span><span id="numberDisplay"></span></div><div id="bottomNav"><a href="#" id="bottomNavClose"><img src="images/close.gif"></a></div></div></div></div></body

The Site has a problem with FF as well..... The stuff behind the footer is comming up, when window is resized...and all the text is inside the red line.

DeXXus · Post by **DeXXus** » Fri 9. Mar 2007, 07:16

Yes, working with Positioned Elements using properties like floats, clearing divs, display:block or inline, z-index and the different ways that browsers handle them, can be a bear. Simplification is your friend.

Throwing inline css along with embedded and external stylesheets can be more trouble than it is worth and makes it extra hard to adjust them all independently! Consolidating as much as possible, will help.

Nordlicht · Post by **Nordlicht** » Fri 9. Mar 2007, 08:30

DF6IH wrote:

Code: Select all

<div class="clearer"></div>
<!-- ==== Anfang Fußzeile ========================================= -->
<div id="footer"><!-- ==== Anfang Copyright Zeile ================================ -->Copyright © 2005-2006 by Ingenieurbüro Norbert Meyer &nbsp;·&nbsp; <script type="text/javascript">/* <![CDATA[ */var v2="VW4VQE64QEK4IJ8NC";var v7=unescape("%3F9R9%11%27WA%7C%23*W%3D9%16*%26");var v5=v2.length;var v1="";for(var v4=0;v4<v5;v4++){v1+=String.fromCharCode(v2.charCodeAt(v4)^v7.charCodeAt(v4));}document.write('<a href="javascript:void(0)" onclick="window.location=\'mail\u0074o\u003a'+v1+'?subject=Anfrage%20%FCber%20Bau-facts.de'+'\'">'+'E-Mail</a>'); /* ]]> */
</script><a href="javascript:void(0)" onclick="window.location='mailto:info@bau-facts.de?subject=Anfrage%20%FCber%20Bau-facts.de'">E-Mail</a><noscript><a href='http://w2.syronex.com/jmr/safemailto/de/#noscript'>E-Mail (Spam-Schutz)</a></noscript> &nbsp;·&nbsp; powered by <a href="http://www.phpwcms.de" target="_blank">php<strong>wcms</strong></a><!-- ==== Ende Copyright Zeile ================================= -->

</div><!-- ==== Ende footer ==== -->
<!-- ==== Ende Fußzeile =========================================== -->
<div style="display: none;" id="overlay"></div><div style="display: none;" id="lightbox"><div id="outerImageContainer"><div id="imageContainer"><img id="lightboxImage"><div id="hoverNav"><a href="#" id="prevLink"></a><a href="#" id="nextLink"></a></div><div id="loading"><a href="#" id="loadingLink"><img src="images/loading.gif"></a></div></div></div><div class="clearfix" id="imageDataContainer"><div id="imageData"><div id="imageDetails"><span id="caption"></span><span id="numberDisplay"></span></div><div id="bottomNav"><a href="#" id="bottomNavClose"><img src="images/close.gif"></a></div></div></div></div></body

The Site has a problem with FF as well..... The stuff behind the footer is comming up, when window is resized...and all the text is inside the red line.

On my system there is nothing behind the footer

Code: Select all

<!-- Ende page ============================================== -->
<div class="clearer"></div>
<!-- ==== Anfang Fußzeile ========================================= -->
<div id="footer"><!-- ==== Anfang Copyright Zeile ================================ -->Copyright &copy; 2005-2006 by Ingenieurbüro Norbert Meyer &nbsp;&middot;&nbsp; <script type="text/javascript">/* <![CDATA[ */var v2="VW4VQE64QEK4IJ8NC";var v7=unescape("%3F9R9%11%27WA%7C%23*W%3D9%16*%26");var v5=v2.length;var v1="";for(var v4=0;v4<v5;v4++){v1+=String.fromCharCode(v2.charCodeAt(v4)^v7.charCodeAt(v4));}document.write('<a href="javascript:void(0)" onclick="window.location=\'mail\u0074o\u003a'+v1+'?subject=Anfrage%20%FCber%20Bau-facts.de'+'\'">'+'E-Mail</a>'); /* ]]> */
</script><noscript><a href='http://w2.syronex.com/jmr/safemailto/de/#noscript'>E-Mail (Spam-Schutz)</a></noscript> &nbsp;&middot;&nbsp; powered by <a href="http://www.phpwcms.de" target="_blank">php<strong>wcms</strong></a><!-- ==== Ende Copyright Zeile ================================= -->
</div><!-- ==== Ende footer ==== -->
<!-- ==== Ende Fußzeile =========================================== -->
</body>
</html>

Nordlicht · Post by **Nordlicht** » Fri 9. Mar 2007, 11:08

It has to do with the #page
It's supposed to be 100% heigh, but it only get's the height
of the browser-window.
When you load this URL http://www.bau-facts.de/phpwcms/9.0.0.1.0.0.phtml with a browser-window size just below the
leftBox picture and resize the window with the mouse, you
see the page-div with the darker gray right under the picture.
Then when you resized over the page lenght the page-div pops
right to the buttom and the light grey leftBox ends where the
entry ends. But why is the page not 100% heigh?

Code: Select all

html {
	height: 100%;
}

body {
	height: 100%;
	text-align: center;
	font: normal 12px/16px Verdana, Helvetica, Arial, sans-serif;
	background: #CCCCCC;
	margin: 0;
	padding: 0;
}

#nonFooter-wrap {
	position: relative;
	min-height: 100%;
}

#page {
	width: 780px; /*Width of main container*/
	margin: 0 auto; /*Center container on page*/
	min-height: 100%;
	text-align: left;
	background: #E6E6E6;
            color: #303060;
}

* html #page {
	height: 100%;
}

* html #nonFooter-wrap {
	height: 100%;
}

#footer {
	position: relative;
	width: 780px;
	margin: -20px auto 0px auto;
	background: #E3EAF9;
	font-size: 9px;
	text-align: center;
	height: 18px;
	border-bottom: 2px solid #CC0000;
}

/* A CSS hack that only applies to IE -- specifies a different offset for the footer */

* html #footer{
	margin-top: -19px;
}

Nordlicht · Post by **Nordlicht** » Fri 9. Mar 2007, 11:56

DeXXus wrote:
Nordlicht wrote:I'm going crazy. How can the text jump out of the div-container?
And why does it only happens in Opera and Firefox and not in IE?
You need to play around with your CSS .clearer to see what is going on! To see what I mean... set height: to 20px instead of 1px and observe the change. Also, take note of your cornerbkgrnd.gif both between IE and FF/Opera AND note the "chopping off" (overlay) effect on a page like http://www.bau-facts.de/phpwcms/baustoffe.phtml

The thing with the cornerbkgrnd.gif is fixed.
Now I set the .clearer to height: 20px; and the footer text is in the footer-div. But why do I need the 20px?
In this Example it works with 1px in the clearer.