CSS DIV automatische Länge?

Caos · 1. Juni 2013

Hi

ich habe ein DIV den ich gerne immer von oben nach unten durchgängig hätte.
Das funktioniert leider nicht wie ich es mir vorstelle.

Der einzige Inhalt ist das Bild das drinnen ist

.main-container2{
background-image: url(../images/DSC_0571-3.jpg);
background-repeat: repeat;
height: 100%;
width: 1000px;
position: absolute;
top: 0px;
left: 50%;
z-index: 1;
margin-left: -500px;
}

muss ich noch etwas eintragen?

Hellblazer · 1. Juni 2013

schonmal mit min-height versucht?

Gajel · 1. Juni 2013

Deine infos sind für eine korrekte antwort leider zu mangelhaft.

Agratos · 1. Juni 2013

Hellblazer schrieb:
schonmal mit min-height versucht?

Ich glaube das wäre kontraproduktiv, denn schließlich soll der div immer 100% der Höhe abdecken so wie ich das verstehe?
Aber wie gesagt, zu wenig Infos.

Augen1337 · 1. Juni 2013

Setz als Höhe ein Wert, der niemals von der Seite erreicht wird.

Daaron · 1. Juni 2013

Was genau willst du für eine Höhe: 100% Content oder 100% Bildschirm? Content kann ja deutlich länger als der Bildschirm sein.
Wenn du nur die volle Fenster-Höhe haben willst: position:fixed; top: 0; bottom:0;

omaliesschen · 1. Juni 2013

Code:

.parent{position:relative;}
.child{position:absolute;height:100%;}

Code:

<div class="parent">
    <div class="child">
    </div>
</div>

Caos · 2. Juni 2013

Das sieht etwas komisch aus, da hier das Bild wirklich fix bleibt und nicht mit scrollt. Aber das wäre schon mal was für den Anfang.

Daaron schrieb:
Was genau willst du für eine Höhe: 100% Content oder 100% Bildschirm? Content kann ja deutlich länger als der Bildschirm sein.
Wenn du nur die volle Fenster-Höhe haben willst: position:fixed; top: 0; bottom:0;

Daaron · 2. Juni 2013

Wenn du präziser angibst, was genau dein Ziel ist, kann dir auch präziser geholfen werden. Hast du ein vollflächiges oder zumindest großformatiges Hintergrundbild? Einen CSS3-Hintergrund-Verlauf? Einfach nur eine HG-Farbe? Gerade bei dem Hintergrundbild kann ich dir nur raten, dir mal die Definitionen für CSS3 Background-Size genau anzugucken. Da gibts geile neue Magie.

Caos · 2. Juni 2013

Ich möchte eine Holztextur (DSC_0571-3.jpg) in ein Magento Design integrieren.
Die Holztextur soll von ganz oben bis ganz nach unten durchlaufen.

Das designen für Magento hab ich noch nicht so ganz durchblickt

Man benötigt eine .css Datei und eine .phtml Datei

Die PHTML Datei sieht dann so aus:

<?php
/**
* Magento
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE_AFL.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to license@magentocommerce.com so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade Magento to newer
* versions in the future. If you wish to customize Magento for your
* needs please refer to http://www.magentocommerce.com for more information.
*
* @category design
* @package base_default
* @copyright Copyright (c) 2009 Irubin Consulting Inc. DBA Varien (http://www.varien.com)
* @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0)
*/
?>
<?php
/**
* Template for Mage_Page_Block_Html
*/
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->getLang() ?>" lang="<?php echo $this->getLang() ?>">
<head>
<?php echo $this->getChildHtml('head') ?>
</head>
<body<?php echo $this->getBodyClass()?' class="'.$this->getBodyClass().'"':'' ?>>
<?php echo $this->getChildHtml('after_body_start') ?>
<div class="wrapper">
<?php echo $this->getChildHtml('global_notices') ?>
<div class="page">
<?php echo $this->getChildHtml('header') ?>

<div class="main-container2"></div>

<div class="main-container col3-layout">

<?php echo $this->getChildHtml('top_slider') ?>
<?php echo $this->getChildHtml('breadcrumbs') ?>

<div class="main">
<div class="col-wrapper">

<div class="col-main">
<?php echo $this->getChildHtml('global_messages') ?>
<?php echo $this->getChildHtml('content') ?>
</div>

<div class="col-left sidebar"><?php echo $this->getChildHtml('left') ?></div>

</div>

<div class="col-right sidebar"><?php echo $this->getChildHtml('right') ?></div>

</div>

</div>
<?php echo $this->getChildHtml('footer') ?>
<?php echo $this->getChildHtml('before_body_end') ?>
</div>
</div>

<?php echo $this->getAbsoluteFooter() ?>
</body>
</html>

Daaron · 2. Juni 2013

Und die Textur soll vertikal kacheln und mitscrollen, hm?

Wenn du immer sicher bist, dass dein Content höher als der höchste zu erwartende Monitor ist, kannste einfach deinem Body die Textur mit repeat-y als Background mitgeben. Dein Stylesheet dürfte irgendwo in /styles/frontend/default/DeinTheme/css/ liegen, glaub ich.
Wenn du dir hinsichtlich der Höhe nicht sicher bist: Gib einfach html und body jeweils eine Höhe und Mindesthöhe von 100%. Das sollte klappen.

Am Magento-Themes herumzupfuschen ist aber eine Wissenschaft für sich. Da wirst du ziemlich schnell ziemlich viel Frustration erleben. Das Ding ist gelinde gesagt komplex und unübersichtlich. Kleiner Tip: Wenn du eine Datei suchst (z.B. eine Template-phtml), dann such zuerst in local, dann in community und am Ende erst in core. Überschreibe niemals eine Datei aus dem Core, und lass auch die Finger von Community, sondern kopier sie mitsamt des korrekten Pfades in das jeweilige local-Verzeichnis, bevor du daran herum fuhrwerkst. Sonst ist beim nächsten Update alles futsch.

Caos · 2. Juni 2013

Danke Imaliesschen, ich habe nun den DIV page die Eigenschaft relative gegeben und jetzt funktioniert die automatische länge Wunderbar

@ Daaron danke für die Hilfe
Ja es ist echt frustrierend wenn man wegen jeder kleinen Änderung ewig suchen muss, aber schon langsam komme ich dahinter

omaliesschen · 2. Juni 2013

Hi,

kein Problem.

Nachdem Du das Div von Hand gezeichnet und den HTML Tag semantisch korrekt getanzt hättest hätte auch Daaron Dir eine korrekte Lösung anbieten können.^-^

Suche

CSS DIV automatische Länge?

Caos

Cadet 4th Year

Hellblazer

Lt. Commander

Gajel

Banned

Agratos

Lt. Commander

Augen1337

Captain Pro

Daaron

Fleet Admiral

omaliesschen

Gast

Caos

Cadet 4th Year

Daaron

Fleet Admiral

Caos

Cadet 4th Year

Daaron

Fleet Admiral

Caos

Cadet 4th Year

omaliesschen

Gast

Ähnliche Themen