Antworten zum Thema „Hilfe in CSS“

adler32 · 21.08.2008

Hallo, ich mach die ganze Zeit schon rum, damit ich das Theme (siehe Bild unten) hin bekomme, endlich habe ich es geschaft, das ich rechts auch einen Container habe, nun ist aber das Problem, wenn ich im Backend die Größe des Themplates verändere, (70%, 80%, 95%, 900px, 1000px) dann bleibt der rechte Container immer an der selben Stelle stehen und der mittlere verschiebt sich, je größer die Einstellung ist nach unten.
Wer kann mir hier bitte helfen???

Im mitleren Container ist unten noch das Modul eingebunden, das ich aber nun rechts habe, wie bringe ich das untere Modul weg?

Schnoobby · 21.08.2008

AW: Hilfe in CSS

wäre praktisch wenn die seite schon online wäre bzw. du mal deine CSS file zeigst. da liegen sicher einige container drinne die ne bestimmte breite haben. dort einfach mal nachschauen, evtl. mit Firebug oder WebDeveloper überprüfen.

adler32 · 21.08.2008

AW: Hilfe in CSS

Template CSS

/* template.css */

body {
font-size: 100%;
margin: 0;
font-family: Tahoma, Verdana;
font-size: 12px;
}

#container_1 {
text-align: center;
width: 80%;
}

#container_2 {
text-align: left;
margin: 0 auto;
background: none;
}

#container_3 {
text-align: center;
width: 80%;
}

/* header */
#header {
height: 155px;
margin: 0 auto;
}

/* top menu (user3) */

#topmenu {
height: 30px;
}

/* module left */
#left {
width: 23%;
float: left;
}

#placeholder {
width: 1%;
height: 20px;
float: left;
}

#left_m {
background: #fff;
}

#left_r {
padding: 1px 22px 0;
min-height: 330px;
}

/* content */
#pathway_outer {
padding: 8px;
}

#pathway_inside {
padding: 3px;
font-weight: bold;
}

#content_outer {
width: 76%;
float: left;
}

#content_outer_full {
width: auto;
margin-left: 0;
}

.clr {
clear: both;
}

#content_m {
background: #fff;
}

#content_r {
min-height: 330px;
}

#content_inside {
margin: 0 22px;
border-top: 1px solid #fff;
text-align: justify;
}

#component {
padding: 10px 0 10px 8px;
}

#component_inside {
width: 100%;
float: left;
display: inline;
padding-right: 1.5%;
}

#component_inside_full {
width: auto;
float: none;
padding-right: 8px;
}

#right {
width: 23%;
float: left;
text-align: left;
}

#component a:link, #component a:visited, #left_r a:link , #left_r a:visited {
text-decoration: none;
font-size: 11px;
font-weight: bold;
}

#left_r {
border: 0 none;
}

/* module right */
#right {
width: 23%;
float: right;
}

#placeholder {
width: 1%;
height: 20px;
float: left;
}

#right_m {
background: #fff;
}

#right_r {
padding: 1px 22px 0;
min-height: 330px;
}

/* footer */
#footer {
width: 100%;
height: 51px;
}

#footer_1 {
height: 50px;
margin: 0 auto;
text-align: right;
padding-top: 10px;
}

#footer_1 a:link, #footer_1 a:visited {
padding: 3px 5px 3px 21px;
border: 0 none !important;
font-weight: bold;
}

#footer_2 {
text-align: center;
font-size: 10px;
font-weight: bold;
margin: 0 auto;
}

#footer a:link, #footer a:visited {
font-size: 10px;
text-decoration: bold;
}

#top_user {
padding: 0 8px;
}

#user1 {
float: left;
width: 49.5%;
padding-right: 0.5%;
display: inline;
}

#user2 {
float: left;
width: 49.5%;
padding-left: 0.5%;
display: inline;
}

#user1_full, #user2_full {
float: none;
width: auto;
}
---------------------------------------
Grey CSS

body {
color: #888;
background: #fff url(../images/grey/bg_top_grey.png) center top repeat-x;
}

a:link, a:visited {
color: #888;
text-decoration: none;
font-weight: bold;
}

a:hover {
color: #888;
}

#header {
background: url(../images/grey/header_grey.png) no-repeat 0 0;
}

/* module left */
#left_l {
background: url(../images/grey/cont_shadow_l_grey.png) top left no-repeat;
}

#left_r {
background: url(../images/grey/cont_shadow_r_grey.png) top right no-repeat;
}

/* content */
#content_l {
background: url(../images/grey/cont_shadow_l_grey.png) top left no-repeat;
}

#content_r {
background: url(../images/grey/cont_shadow_r_grey.png) top right no-repeat;
}

#pathway_inside {
border: 1px dotted #ddd;
}

.inputbox {
border: 1px solid #888;
background: #f4f4f4;
padding: 2px;
color: #888;
}

.inputbox:hover, .inputbox:focus {
border: 1px solid #888;
background: #fff;
}

.button {
background: #888;
}

.button:hover {
background: #222;
}

/* module right */
#right_l {
background: url(../images/grey/cont_shadow_l_grey.png) top left no-repeat;
}

#right_r {
background: url(../images/grey/cont_shadow_r_grey.png) top right no-repeat;
}

/* footer */
#footer {
background: #fff url(../images/grey/bg_bottom_grey.png) center bottom repeat-x;
}

#footer a:link, #footer a:visited {
color: #888;
border-bottom: 1px dashed #888;
}

#footer a:hover {
color: #fff;
border-bottom: 1px dashed #fff;
}

#footer_1 a {
background: url(../images/grey/top_bg.gif) no-repeat;
}

/* topmenu (user3) */
#current a:link, #active_menu-nav.mainlevel-nav {
background: url(../images/grey/topmenu_shadow_l_grey.png) no-repeat top left;
}

#topmenu {
background: url(../images/grey/topmenu_bg_grey.png) repeat-x top center;
}

#mainlevel-nav li:hover {
background: url(../images/grey/topmenu_shadow_l_grey.png) no-repeat top left;
}

#mainlevel-nav li a:link, #mainlevel-nav li a:visited {
color: #888;
}

#mainlevel-nav li a:hover {
color: #888;
background: url(../images/grey/topmenu_shadow_r_grey.png) no-repeat top right;
}

.componentheading, .contentheading {
border-bottom: 1px solid #888;
}

.contentheading {
border-left: 5px solid #888;
}

.module_menu h3, .module h3 {
background: url(../images/grey/topmenu_bg_grey.png);
}

.article_separator {
border-bottom: 1px dashed #888;
}

ul.menu li a:link span, ul.menu li a:visited span {
color: #888;
border-bottom: 1px dotted #888;
}

ul.menu li a:hover span {
color: #888;
border-bottom: 1px dotted #888;
background: #f4f4f4;
}

tr.sectiontableentry1 td {
background: #f4f4f4;
}

tr.sectiontableentry2 td {
background: #fbfbfb;
}
--------------------------
Index PHP

<?php
// Copyright (C) 2008 by SCHAFFENSKRAFT.INFO
// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );
JHTML::_('behavior.mootools');
?>
<!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="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >

<head>

<jdoc:include type="head" />
<link rel="shortcut icon" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/<?php echo $this->params->get('templatecolor'); ?>/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/joomla.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/<?php echo $this->params->get('templatecolor'); ?>.css" type="text/css" />

<?php if ($this->params->get('TopLink')) : ?>
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/smoothscroll.js"></script>
<?php endif; ?>
<?php if ($this->params->get('Link type of Left')) : ?>
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/moomenu.js"></script>
<?php endif; ?>

<?php
if($this->countModules('left') == 0) $contentwidth = "_full";
if($this->countModules('right') == 0) $componentwidth = "_full";
if($this->countModules('user2') == 0) $user1width = "_full";
if($this->countModules('user1') == 0) $user2width = "_full";
?>

<style type="text/css">
#header { width: <?php echo $this->params->get('TemplateWidth'); ?>; }
#container_2 { width: <?php echo $this->params->get('TemplateWidth'); ?>; }
#footer_1 { width: <?php echo $this->params->get('TemplateWidth'); ?>; }
#footer_2 { width: <?php echo $this->params->get('TemplateWidth'); ?>; }
</style>

</head>

<body>

<div><a id="top" name="top"></a></div>

<jdoc:include type="message" />

<div id="header">

</div>

<div id="container_3">
<?php if($this->countModules('right')) : ?>
<div id="right">
<div id="right_m">
<div id="right_l">
<div id="right_r">
<jdoc:include type="modules" name="right" style="rounded" />
</div>
</div>
</div>
</div>
<?php endif; ?>
<div id="container_1">
<div id="container_2">
<?php if($this->countModules('left')) : ?>
<div id="left">
<div id="left_m">
<div id="left_l">
<div id="left_r">
<jdoc:include type="modules" name="left" style="rounded" />
</div>
</div>
</div>
</div>
<?php endif; ?>
<div id="placeholder"></div>
<div id="content_outer<?php echo $contentwidth; ?>">
<div id="content_m">
<div id="content_l">
<div id="content_r">
<div id="content_inside">
<div id="topmenu">
<jdoc:include type="modules" name="user3" />
</div>
<div id="pathway_outer">
<div id="pathway_inside">
<?php echo JText::_('You are here'); ?>:
<jdoc:include type="modules" name="breadcrumb" />
</div>
</div>
<div id="top_user">
<?php if($this->countModules('user1')) : ?>
<div id="user1<?php echo $user1width; ?>">
<jdoc:include type="modules" name="user1" style="rounded" />
</div>
<?php endif; ?>
<?php if($this->countModules('user2')) : ?>
<div id="user2<?php echo $user2width; ?>">
<jdoc:include type="modules" name="user2" style="rounded" />
</div>
<?php endif; ?>
<div class="clr"></div>
</div>
<div id="component">
<div id="component_inside<?php echo $componentwidth; ?>">
<jdoc:include type="component" />
</div>
<?php if($this->countModules('right')) : ?>
<div id="right">
<jdoc:include type="modules" name="right" style="rounded" />
</div>
<?php endif; ?>
<div class="clr"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clr"></div>
</div>
</div>

<div id="footer">
<div id="footer_1">
<?php if ($this->params->get('TopLink')) : ?>
<a href="#top"><?php echo JText::_('to top') ?></a>
<?php endif; ?>
</div>
<div id="footer_2">
<?php echo JText::_('Powered by'); ?> <a target="_blank" href="http://www.schaffenskraft.info" title="<?php echo JText::_('go to'); ?> schaffenskraft.info">schaffenskraft.info</a>
<?php echo JText::_(' - and conformistly © 2008 by'); ?> <a target="_blank" href="http://www.adlerweb.eu" title="<?php echo JText::_('go to'); ?> Eagle">Eagle</a>
<?php if ($this->params->get('Valid CSS/XHTML')) : ?>
| <?php echo JText::_('Valid') ?> <a target="_blank" href="http://validator.w3.org/check/referer" title="<?php echo JText::_('valid XMTHL'); ?>">XHTML</a> <?php echo JText::_('and'); ?> <a target="_blank" href="http://jigsaw.w3.org/css-validator/check/referer" title="<?php echo JText::_('valid CSS'); ?>">CSS</a>
<?php endif; ?>
<?php if ($this->params->get('Syndicate')) : ?>
|<br />
<jdoc:include type="modules" name="syndicate" />
<?php endif; ?>
</div>
</div>

<jdoc:include type="modules" name="debug" />

</body>

</html>
---------------------------------------------------------------

mit Firebug oder WebDeveloper überprüfen.

Ich kenne mich noch nicht so aus, was zeigen diese Programme denn an?
-----------------------------------------------------------------
Egal, ob ich Schlüßelkonzepte oder Umfragen oder etwas anderes nehme, es erscheint immer 2x

gegenwind · 22.08.2008

AW: Hilfe in CSS

Junge, editier mal! Guckst du - Scrollbalken

hp]Code[/php.] ohne .

adler32 · 22.08.2008

AW: Hilfe in CSS

-----------
Sorry, hab vergessen zu schreiben, das das oben die Seite ist
----------
Ich habe es geschafft, die Seite ist nun so, wie ich sie wollte.
Danke für Euere Hilfe.

Gruß.
adler32