PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : [CSS] Float,position, Abstand Probleme


Bluerock
2006-02-20, 23:03:37
Hi, ich steige zur Zeit Design technisch von Tabellen auf das boxenmodell um.

Aller Anfang ist schwer, jedoch habe ich mich zur Zeit bis einen gewissen Zeitpunkt vorgeschlagen, bei dem ich nicht mehr weiterkomme.

Zu aller erstmal weiss ich nicht warum, wenn man Float einsetzt er das div element mit dem Float tag, bei mir die Linke seite, bei der berechnung nicht einbezieht. Ich muss um den Inhalt bereich mit einen margin abstand hinzubekommen margin= bereite der linken seite + den gewuenschten Abstand machen. Breite des link Menue ist 200px, abstand soll 10 px sein, also muss ich margin-left:210px;. Frage: Warum wird float nicht beachtet. Weitere Frage ist ich moechte die Seite immer voll hoehe haben, meint: Wenn die Linke Seite nicht so hoch ist wie der Inhaltsbereich soll der bereich trotzdem so hoch sein wie der inhaltsbereich.

Zur Zeit ist alles noch auf FF optimiert, jedoch werde ich ne extra IE version vom CSS machen, das mach weniger arbeit. Seite (benutzt CMS Joomla):www.duff-world.space4free.net. Header etc. ist zur Zeit nur luecken fueller.

CSS-Codebody {
text-align:left;
font-family:Verdana, Tahoma, sans-serif;
font-size:12px;
margin:0;
padding:0;
background-color:#FFF;
}

/* Layout */


#seiteninfo {
width:100%;
height:14px;
background-color:#E2E2E2;
color:#000000;
text-align:left;
}

#uhrzeit {
text-align:right;
position:absolute;
right:2px;
top:0px;
}

#headerbereich {
background-image:url(../images/header.png);
background-repeat:repeat-x;
height:100px;
width:100%;
}

#headerwerb {
text-align:right;
position:absolute;
top:35px;
right:20px;
}

#inhaltsbereich {
width:100%;
background-color:#F9F9F9;
color:#000;
margin:0;
padding:0;
}
#linkmenue {
float:left;
background-color:#F9F9F9;
width:199px;
border-right:1px solid #CCCCCC;
line-height:150%;
}
#navigation {
height:30px;
color:#FFF;
text-align:left;
margin-top:1px;
border:1px solid #EBEBEB;
background-image:url(../images/modulebg.png);
background-repeat:repeat-x;
background-color:#FFF;
}

#standort {
text-align:left;
background-color:#F9F9F9;
color:#000000;
margin-top:10px;
margin-bottom:4px;
border:1px solid #E7E7E7;

}
#inhalt {
background-image:url(../images/spacer.gif);
background-repeat: repeat;
background-color:#FFF;
line-height:150%;
padding-left:9px;
margin-left:200px;
padding-bottom:10px;
}
#artikel {
width:49%;
padding-right:1%;
border-right:1px solid #CCCCCC;
text-align: left;
}

#newsbox {
width:49%;
padding-left:1%;
float:right;
}


#unten {
width:100%;
background-color:#F9F9F9;
border-top:1px solid #CCCCCC;
text-align:center;
clear:both;
font-weight:bold;
}

#formal {
text-align:right;
font-size:10px;
position:absolute;
right:2px;
}

#ueber {
background-image:url(../images/ueber.png);
background-repeat:repeat-x;
padding-left:4px;
border:1px solid #EBEBEB;
color:#FFF;
height:20px;
font-weight:bold;
font-size:14px;
text-align:left;

}


#ueber_2 {
background-image:url(../images/ueber.png);
background-repeat:repeat-x;
padding-left:4px;
border:1px solid #EBEBEB;
color:#FFF;
font-weight:bold;
font-size:14px;
height: 20px;
text-align:left;
}

/* Tags */
img, img a {
border:0px;
}

hr {
background-color:#CCCCCC;
height:1px;
width:100%;
}

/* allgemeinelinks */
a:link {
color:#1B29AD;
text-decoration: none;
}

a:hover {
color:#85C101;
text-decoration: underline;
}

a:visited {
color:#1B29AD;
text-decoration: none;
}

/*Joomlaintern*/

/*mehr...link*/
a.readon {
color:#1B29AD;
width:100%;
border-bottom:1px dashed #cccccc;

}

/* farbe: 9ED81E (Gruen) und 7AA1CE(Blau)
9CBBDF (blau F7FBFF
*/
/* Menue aufbau */
table.moduletable th {
background-image:url(../images/ueber.png);
background-repeat:repeat-x;
color: #FFF;
width:199px;
/*background-color:#F7F7F7; */
padding-left:4px;
border-top:1px solid #EBEBEB;
border-bottom:1px solid #EBEBEB;
border-right:1px solid #EBEBEB;
height:20px;
vertical-align: middle;
font-family:Verdana, Tahoma, sans-serif;
font-size:14px;
margin-bottom: 4px;

}

a.mainlevel{
margin-bottom: 4px;
color:#000000;
text-align:left;
text-decoration: none;
}
a.mainlevel:link {
color:#000000;
text-align:left;
text-decoration: none;
}

a.mainlevel:hover {
color:#85C101;
text-decoration:underline;
}

a.mainlevel:visited {
color:#000000;
text-decoration:none;
}

.inputbox {
color:#000000;
padding:2px;
border:1px solid #CCCCCC;
background-color:#FFFFFF;
font-size:10px;
}

.button {
color:#85C101;
text-align:center;
font-size:10px;
font-weight:bold;
border:3px double #cccccc;
width:auto;
background:url(../images/button_bg.png);
background-repeat:repeat-x;
padding:5px;
line-height:18px;
height:26px;
margin:1px;
}

sectiontableentry1 {
background-color:#FFFFFF;
}

sectiontableentry2 {
background-color:#F9F9F9;
}

/* inhalt*/
.contentheading {
font-size:14px;
color:#1B29AD;
text-align:left;
font-weight:bold;
}

.contentpagetitle {
font-size:14px;
color:#1B29AD;
text-align:left;
font-weight:bold;
}

a.contentpagetitle {
font-size:14px;
color:#1B29AD;
text-align:left;
font-weight:bold;
}

div.mosimage {
border: 1px solid #ccc;
}

.mosimage {
border:1px solid #cccccc;
margin:5px
}

.mosimage_caption {
margin-top:2px;
background:#efefef;
padding:1px 2px;
color:#666;
font-size:10px;
border-top:1px solid #cccccc;
}

.createdate {
color:#CC3333;
font-size:10px;
}

.small {
color:#cccccc;
}
/* Suche */
#search {
margin: 0px;
width: 180px;
padding-top: 2px;
vertical-align: top;
}

#search .inputbox {
width:160px;
color:#000000;
padding-right:2px;
border:1px solid #CCCCCC;
background-color:#FFFFFF;
font-size:10px;
}

#search .button {
color:#85C101;
text-align:center;
font-size:10px;
font-weight:bold;
border:3px double #cccccc;
width:auto;
background:url(../images/button_bg.png);
background-repeat:repeat-x;
padding:5px;
line-height:18px;
height:26px;
margin:1px;
}

#search form {
margin: 0px;
padding: 0px;
}

.pathway {
color:#000000;
font-weight: bold;
text-decoration: none;
padding-left:4px;
}


a.pathway:link {
color:#000000;
text-decoration: none;
}

a.pathway:hover {
color:#000000;
text-decoration: underline;
}

a.pathway:visited {
color:#000000;
text-decoration: none;
}

.mainlevel-nav{
color:#FFF;
font-size:14px;
vertical-align:bottom;
font-weight: bold;
text-decoration: none;
padding-left:4px;
}

table.pagenav {
background-color:#F7F7F7;
border:1px solid #E7E7E7;

}

Index.php
<?php
$iso = explode( '=', _ISO );
echo '<?xml version="1.0" encoding="' . $iso[1] . "\"?>\n";
defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' );
?>
<!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" lang="<?php echo _LANGUAGE; ?>">
<head>
<?php echo "<link rel=\"stylesheet\" href=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_css.css\" type=\"text/css\"/>" ; ?><?php echo "<link rel=\"shortcut icon\" href=\"$GLOBALS[mosConfig_live_site]/images/favicon.ico\" />" ; ?>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<?php
if ($my->id) {
initEditor();
}
?>
<?php mosShowHead(); ?>

</head>
<body>
<div id="seiteninfo">Celby.de - Immer Informativ im Computerbereich <div id="uhrzeit"><?php echo mosCurrentDate(); ?></div></div>
<div id="headerbereich"> <a href="http://www.celby.de" title="Celby"> <img src="http://www.duff-world.space4free.net/templates/celby/images/logo.png" alt="celby" /></a><div id="headerwerb"><?php mosloadmodules ('user5'); ?></div></div>
<div id="inhaltsbereich">
<div id="linkmenue"> <?php mosLoadModules ('left')?></div>
<div id="inhalt">
<div id="navigation"><?php mosLoadModules ('top') ?></div>
<div id="standort"> <?php mosPathway(); ?></div>
<?php
if ( moscountmodules ('user8')){
echo "<div id='newsbox'>";
echo "<div id='ueber_2'>News</div>";
mosLoadModules ( 'user8');
echo "<hr />";
mosloadmodules ( 'user7');
echo "</div>"; } ?>

<?php
if ( moscountmodules ('user8')){
echo "<div id='artikel'>";
echo "<div id='ueber'>Artikel</div>";
mosMainBody ();
echo "</div>"; }
else { mosMainbody (); } ?>

</div>

</div>
<div id="unten"> Celby.de Copyright 2006<span id="formal"> <a href="http://www.celby.de/impressum/" title="Impressum">Impressum</a>|<a href="http://www.celby.de/partner/" title="Partner, Sponsoren">Partner</a>|<a href="http://www.celby.de/kontakt/" title="Kontakt">Kontakt</a></span></div>
</body>
</html>

Gast
2006-02-21, 21:44:03
man schafft es auch locker, _ein_ stylesheet für den Fx und den IE zu machen.

body, html { height: 100%; }
div {height: 100%;} /* wo der content dann drinsteht*/
sollte dein problem lösen.


das mit float ist nunmal so...