$Skeezy$
Prophet
Hallöchen,
Ich habe ein Problem bezüglich meiner Webseite, nämlich die Formatierung.
Da ich mit DIV-Containern schreibe, muss ich auch das sogenannte Clearfix anwenden. Nun ist es aber unüblich heutzutage nur clear:both anzuwenden, weswegen ich nach verschiedenen Möglichkeiten gesucht habe, dies zu umgehen bzw zu verbessern. Ich komme aber nicht vorwärst und hänge nur noch an diesem Punkt fest, der mich die Webseite nicht freigeben lässt. ...
Das Problem bei Firefox/IE/Safari ist, dass Hintergründe in den Parent-Containern nicht angezeigt werden, was wohl mit dem clear zusammenhängt. Bei Opera funktioniert alles, aber bei dem Browser kann man fast alles schreiben und es klappt.
Ich hoffe ihr könnt mir da weiterhelfen!
Beim aktuellen IE habe ich es irgendwie hinbekommen, aber für die ältere funktioniert es nicht.
Als Beispiel nehme ich mal die Index-Seite (Inhalt ist nur mit Platzhaltern gefüllt):
Index Bild
links in Opera; rechts in den anderen Browsern
index.php (Meta-tags entfernt)
website.css
Wie gesagt, es geht mir nur um das Clearfix Problem, ich nehme aber auch gerne andere Kritik entgegen!
Gruß
Ich habe ein Problem bezüglich meiner Webseite, nämlich die Formatierung.
Da ich mit DIV-Containern schreibe, muss ich auch das sogenannte Clearfix anwenden. Nun ist es aber unüblich heutzutage nur clear:both anzuwenden, weswegen ich nach verschiedenen Möglichkeiten gesucht habe, dies zu umgehen bzw zu verbessern. Ich komme aber nicht vorwärst und hänge nur noch an diesem Punkt fest, der mich die Webseite nicht freigeben lässt. ...
Das Problem bei Firefox/IE/Safari ist, dass Hintergründe in den Parent-Containern nicht angezeigt werden, was wohl mit dem clear zusammenhängt. Bei Opera funktioniert alles, aber bei dem Browser kann man fast alles schreiben und es klappt.
Ich hoffe ihr könnt mir da weiterhelfen!
Beim aktuellen IE habe ich es irgendwie hinbekommen, aber für die ältere funktioniert es nicht.
Als Beispiel nehme ich mal die Index-Seite (Inhalt ist nur mit Platzhaltern gefüllt):
Index Bild
links in Opera; rechts in den anderen Browsern
index.php (Meta-tags entfernt)
HTML:
<?php
include("bamdu.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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="icon" href="img/favicon.ico" type="image/x-icon" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="http://www.timm-breitner.de/tb/rss.php" />
<link href="css/website.css" rel="stylesheet" type="text/css" />
<link href="css/font.css" rel="stylesheet" type="text/css" />
<link href="css/lightbox.css" rel="stylesheet" />
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/lightbox.js"></script>
<title>Welcome to my portfolio / Timm Breitner</title>
</head>
<body>
<div id="wrapper"> <!-- Wrapper -->
<div id="site">
<div id="header"> <!-- Header -->
<a href="http://www.timm-breitner.de" title="Home" ><div id="header_logo"></div></a>
<div id="header_spacer1"></div>
<a href="aboutme.html"><div id="header_n_1"></div></a>
<div id="header_spacer2"></div>
<a href="gallery.html"><div id="header_n_2"></div></a>
<div id="header_spacer2"></div>
<a href="blog.php"><div id="header_n_3"></div></a>
<div id="header_spacer2"></div>
<a href="projects.html"><div id="header_n_4"></div></a>
</div> <!-- Header END -->
<div id="main">
<div id="content">
<a href="#"><div id="index_tleft">
<div id="index_tleft_in">
my latest Project is about making a mod for "Amnesia: The Dark Decent" from Frictional Games.<br />It'll be a full conversion mod and takes place in a complete other era.<br />Stay tuned!
</div>
</div></a>
<a href="img/gallery/featured.png" rel="lightbox" title="featured"><div id="index_tright"></div></a>
<div id="index_bot">
<?php
$news_SQL="SELECT * FROM tbg_blog ORDER BY blog_datetime DESC LIMIT 0, 1";
$news_result=mysql_query($news_SQL);
?>
<?php
while($news=mysql_fetch_array($news_result)) {
$blog_id = $news['blog_ID'];
echo "<h2 id='index'>".$news['blog_title']."</h2><i id='index'>Latest Blog Entry</i>";
echo "<table><tr><td><i>".$news['blog_datetime']."</i>";
echo " | ".$news['blog_category']."</td></tr><tr></tr>";
$Text = $news['blog_content'];
if (strlen($Text) > 300) {
$shortText = substr($Text, 0, 300);
$shortText .= '...<br /><b><a href="blog.php?id=' . $blog_id . '">[read more...]</b></a>';
}else {
$shortText = $Text;
}
echo "<tr><td>".$shortText."</td></tr></table>";
}
mysql_close();
?>
</div>
</div> <!-- Content END -->
</div> <!-- Main END -->
<div id="footer"> <!-- Footer -->
<div id="footer_c">
<a href="http://www.facebook.com/timm.breitner" target="_blank" title="visit my Facebook profile" ><div id="footer_c1"></div></a>
<div id="footer_c_spacer1"></div>
<a href="http://twitter.com/voryth27" target="_blank" title="follow me on twitter" ><div id="footer_c2"></div></a>
<div id="footer_c_spacer1"></div>
<a href="http://www.timm-breitner.de/tb/rss.php" target="_blank" title="subscribe to my RSS-Feed" ><div id="footer_c3"></div></a>
<div id="footer_c_spacer1"></div>
<a href="mailto:tbg@timm-breitner.de" title="write an email to me" ><div id="footer_c4"></div></a>
<div id="footer_c_spacer2"></div>
<a href="http://www.timm-breitner.de/tb/imprint.html"><div id="footer_c5"></div></a>
<div id="footer_c_spacer2"></div>
<div id="footer_c6"></div>
<div id="footer_c7"></div>
<a href="#top" title="go to top" ><div id="footer_c8"></div></a>
</div>
</div> <!-- Footer END -->
<div id="footer_space"></div>
</div>
</div> <!-- Wrapper END -->
</body>
</html>
website.css
HTML:
@charset "utf-8";
body {
background-color:#0b0b0b;
margin:auto;
padding:auto;
}
/* Hides from IE-mac */
* html #wrapper
{height: 1%;}
#wrapper
{display: block;
}
/* End hide from IE-mac */
<!-- Wrapper -->
#wrapper {
width:907px;
height:auto;
min-height:680px;
margin:auto;
overflow:hidden;
}
#wrapper:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#site {
width:907px;
height:auto;
margin:auto;
}
<!-- Header -->
#header {
background-image:url(../img/head.png);
width:907px;
height:77px;
float:left;
}
#header_logo {
background-image:url(../img/logo.png);
width:189px;
height:20px;
margin-top:44px;
margin-bottom:13px;
float:left;
}
#header_spacer1 {
width:56px;
height:77px;
float:left;
}
#header_spacer2 {
width:80px;
height:77px;
float:left;
}
#header_n_1 {
background-image:url(../img/n_aboutme.png);
width:77px;
height:20px;
margin-top:44px;
margin-bottom:13px;
float:left;
}
#header_n_1_f {
background-image:url(../img/n_aboutme_h.png);
width:77px;
height:20px;
margin-top:44px;
margin-bottom:13px;
float:left;
}
#header_n_1:hover {
background-image:url(../img/n_aboutme_h.png);
width:77px;
height:20px;
margin-top:44px;
margin-bottom:13px;
float:left;
}
#header_n_2 {
background-image:url(../img/n_gallery.png);
width:56px;
height:20px;
margin-top:44px;
margin-bottom:13px;
float:left;
}
#header_n_2_f {
background-image:url(../img/n_gallery_h.png);
width:56px;
height:20px;
margin-top:44px;
margin-bottom:13px;
float:left;
}
#header_n_2:hover {
background-image:url(../img/n_gallery_h.png);
width:56px;
height:20px;
margin-top:44px;
margin-bottom:13px;
float:left;
}
#header_n_3 {
background-image:url(../img/n_blog.png);
width:34px;
height:20px;
margin-top:44px;
margin-bottom:13px;
float:left;
}
#header_n_3_f {
background-image:url(../img/n_blog_h.png);
width:34px;
height:20px;
margin-top:44px;
margin-bottom:13px;
float:left;
}
#header_n_3:hover {
background-image:url(../img/n_blog_h.png);
width:34px;
height:20px;
margin-top:44px;
margin-bottom:13px;
float:left;
}
#header_n_4 {
background-image:url(../img/n_projects.png);
width:61px;
height:20px;
margin-top:44px;
margin-bottom:13px;
float:left;
}
#header_n_4_f {
background-image:url(../img/n_projects_h.png);
width:61px;
height:20px;
margin-top:44px;
margin-bottom:13px;
float:left;
}
#header_n_4:hover {
background-image:url(../img/n_projects_h.png);
width:61px;
height:20px;
margin-top:44px;
margin-bottom:13px;
float:left;
}
<!-- Header END -->
<!-- Content -->
#main {
width:907px;
height:auto;
min-height:500px;
float:left;
}
#content {
margin-top:40px;
margin-bottom:20px;
margin-left:20px;
margin-right:20px;
width:867px;
height:auto;
float:left;
}
<!-- About me only -->
#aboutme_left{
background-image:url(../img/profil.png);
width:280px;
height:400px;
float:left;
}
#aboutme_right {
width:577px;
height:auto;
float:left;
margin-left:10px;
}
<!-- About me only END -->
<!--Blog only -->
#blog_bg {
background-image:url(../img/blog_bg1.png);
background-repeat:repeat-y;
padding-left:3px;
padding-right:3px;
margin:0px;
width:867px;
height:auto;
min-height:119px;
float:left;
}
<!-- Blog only END -->
<!--Projecty only -->
#project_h_1 {
background-image:url(../img/projects/project1.png);
width:860px;
height:150px;
float:left;
}
#project_h_1_in {
width:365px;
height:140px;
margin-left:490px;
margin-bottom:5px;
margin-right:5px;
margin-top:5px;
float:left;
font-family:Verdana, Geneva, sans-serif;
font-size:18px;
color:#FFFFFF;
font-style:italic;
}
<!-- Projects only END -->
<!-- Index only -->
#index_tleft {
background-image:url(../img/projects/index_bg.png);
width:600px;
height:300px;
float:left;
}
#index_tleft_in {
width:365px;
height:290px;
margin-left:230px;
margin-bottom:5px;
margin-right:5px;
margin-top:5px;
float:left;
font-family:Verdana, Geneva, sans-serif;
font-size:18px;
color:#FFFFFF;
font-style:italic;
}
#index_tright {
background-image:url(../img/gallery/featured_s.png);
margin-left:10px;
width:257px;
height:300px;
float:left;
}
#index_bot {
background-image:url(../img/blog_index_bg.png);
background-repeat:no-repeat;
padding-left:3px;
padding-right:3px;
margin-top:10px;
width:867px;
height:auto;
min-height:150px;
float:left;
}
<!-- Index only END -->
<!-- Content END -->
<!-- Footer -->
#footer {
background-image:url(../img/footer.png);
width:907px;
height:25px;
float:left;
}
#footer_c {
margin-top:9px;
width:907px;
height:16px;
float:left;
}
#footer_c_spacer1 {
width:8px;
height:16px;
float:left;
}
#footer_c_spacer2 {
width:12px;
height:16px;
float:left;
}
#footer_c1 {
background-image:url(../img/f_facebook.png);
width:16px;
height:16px;
float:left;
}
#footer_c2 {
background-image:url(../img/f_twitter.png);
width:16px;
height:16px;
float:left;
}
#footer_c3 {
background-image:url(../img/f_rss.png);
width:16px;
height:16px;
float:left;
}
#footer_c4 {
background-image:url(../img/f_email.png);
width:16px;
height:16px;
float:left;
}
#footer_c5 {
background-image:url(../img/f_imprint.png);
width:43px;
height:16px;
float:left;
}
#footer_c5:hover{
background-image:url(../img/f_imprint_h.png);
width:43px;
height:16px;
float:left;
}
#footer_c6 {
background-image:url(../img/f_cr.png);
width:293px;
height:16px;
float:left;
}
#footer_c7 {
width:443px;
height:16px;
float:left;
}
#footer_c8 {
background-image:url(../img/f_top.png);
width:16px;
height:16px;
float:left;
}
#footer_space {
width:907px;
height:50px;
float:left;
}
<!-- Footer END -->
<!-- Wrapper END -->
Wie gesagt, es geht mir nur um das Clearfix Problem, ich nehme aber auch gerne andere Kritik entgegen!

Gruß