Anzeige

Hilfe in CSS

Hilfe in CSS | PSD-Tutorials.de

Erstellt von adler32, 21.08.2008.

  1. adler32

    adler32 Nicht mehr ganz neu hier

    Dabei seit:
    21.04.2008
    Beiträge:
    148
    Geschlecht:
    männlich
    Ort:
    Metten
    Software:
    Photoshop, Dreamweaver
    Kameratyp:
    KONICA MINOLTA DIMAGE E500
    Hilfe in CSS
    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?
    [​IMG]
     
    #1      
  2. Schnoobby

    Schnoobby Nicht mehr ganz neu hier

    Dabei seit:
    16.01.2005
    Beiträge:
    132
    Geschlecht:
    männlich
    Ort:
    Würzburg
    Software:
    Adobe CS4, Corel Suite X4, Corel Painter XI, VIM
    Hilfe in CSS
    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.
     
    #2      
  3. adler32

    adler32 Nicht mehr ganz neu hier

    Dabei seit:
    21.04.2008
    Beiträge:
    148
    Geschlecht:
    männlich
    Ort:
    Metten
    Software:
    Photoshop, Dreamweaver
    Kameratyp:
    KONICA MINOLTA DIMAGE E500
    Hilfe in CSS
    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" />
    <!--[if IE]><style type="text/css" media="screen">body {behavior: url(<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/csshover.htc);}</style><![endif]-->
    <?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 &copy; 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>
    ---------------------------------------------------------------
    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
     
    Zuletzt von einem Moderator bearbeitet: 22.08.2008
    #3      
  4. gegenwind

    gegenwind liebt Pizza.

    Dabei seit:
    18.01.2006
    Beiträge:
    806
    Geschlecht:
    männlich
    Software:
    CS6
    Hilfe in CSS
    AW: Hilfe in CSS

    Junge, editier mal! Guckst du - Scrollbalken ;)
    hp]Code[/php.] ohne .
     
    Zuletzt bearbeitet: 22.08.2008
    #4      
  5. adler32

    adler32 Nicht mehr ganz neu hier

    Dabei seit:
    21.04.2008
    Beiträge:
    148
    Geschlecht:
    männlich
    Ort:
    Metten
    Software:
    Photoshop, Dreamweaver
    Kameratyp:
    KONICA MINOLTA DIMAGE E500
    Hilfe in CSS
    AW: Hilfe in CSS

    Willkommen auf ROLOSSAL.de
    -----------
    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
     
    Zuletzt von einem Moderator bearbeitet: 22.08.2008
    #5      
x
×
×
teststefan