Bluerock
Commander
- Registriert
- Dez. 2003
- Beiträge
- 2.978
[CSS] hoehen Probleme
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. Mein Float problem hat sich geloest jedoch wuerde ich immer noch gerne wissen wie ich machen, dass sich die hoehe von der linken Seite nicht nur am Inhalt sondern auch am "content" orientiert.
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-Code
Index.php
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. Mein Float problem hat sich geloest jedoch wuerde ich immer noch gerne wissen wie ich machen, dass sich die hoehe von der linken Seite nicht nur am Inhalt sondern auch am "content" orientiert.
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-Code
Code:
body {
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:
<?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>
Zuletzt bearbeitet: