[GastForen Web allgemein HTML und CSS / Stylesheets Div innerhalb eines divs soll dieses vergrößern

  • Suche
  • Hilfe
  • Lesezeichen
  • Benutzerliste
Themen
Beiträge
Moderatoren
Letzter Beitrag

Div innerhalb eines divs soll dieses vergrößern

matmax
Beiträge gesamt: 626

28. Jan 2010, 02:19
Beitrag # 1 von 5
Bewertung:
(7648 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Liebes Forum!
Ich möchte einen Container haben, der im Browserfenster zentriert ist. Innerhalb des Containers befindet sich ein schmales Bild (Logoleiste), dass unten am Containerrand kleben soll. Ebenso ein rechteckiges Bild das hinter der Logoleiste links unten in der Ecke ebenfalls am Containerrand kleben soll. Innerhalb des Containers befindet sich ein Menu-div und ein Inhalt-div.
Das Inhalt-div soll nun, je nach größe des Inhalts, sich nach unten vergrößern und dabei den Container (inkl. Logoleiste + Bild) mit vergrößern.
Ich schaffe es nicht. Der Container vergrößert sich zwar, aber nicht genug. Ein Teil des Inhalt-divs wandert unten aus dem Container raus …
(Den divs im CSS Hintergrundbilder zu bestimmen hat von Anfang an nicht funktioniert … sie wurden einfach nicht angezeigt …)

Hier der Code:
Code
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>

<link rel="stylesheet" type="text/css" href="stylesheet/screen.css" media="screen" />

</head>

<body>

<div id="container" style="background-image:url(bilder/hintergrund.jpg)">

<div id="menu">
<ul>
<li><a href="menu1.html">Menu1</a></li>
<li><a href="menu2.html">Menu2</a></li>
<li><a href="menu3.html">Menu3</a></li>
<li><a href="menu4.html">Menu4</a></li>
<li><a href="menu5.html">Menu5</a></li>
<li><a href="menu6.html">Menu6</a></li>
</ul>
</div>

<div id="bild_unten_links"><img src="bilder/bild_unten_links.jpg" alt="" /></div>

<div id="inhalt">
<h1>Überschrift</h1>
<p>Text</p>
</div>

<div id="leiste"><img src="bilder/logoleiste.gif" alt="" /></div>
</div>

</body>
</html>


Hier das CSS
Code
* {	 
padding: 0px;
margin: 0px;
border:0;
}

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight:normal;
line-height: 18px;
text-align: left;
color:black;
}

#container {
width: 990px;
min-height:756px;
margin-left:auto;
margin-right:auto;
background-image:url(../bilder/kg_hg.jpg);
background-repeat:no-repeat;
background-color:#324b4f;
}



/* Inhalt
----------------------------------------------- */


#inhalt {
position:absolute;
top:200px;
left: 180px;
min-height:400px;
width: 561px;
padding:22px;
padding-top:15px;
background-color:#FFFFFF;
}


#bild_unten_links {
position: absolute;
bottom:39px;
background-image:url(../bilder/bild_unten_links.jpg);
background-repeat:no-repeat;
}

#leiste {
position: absolute;
bottom:-5px;
}

/* Menu
----------------------------------------------- */

#menu {
position:absolute;
top:200px;
width:160px;
padding-top:15px;
}


Kann mir jemand helfen?
Danke!

(Dieser Beitrag wurde von matmax am 28. Jan 2010, 02:24 geändert)
X

Div innerhalb eines divs soll dieses vergrößern

SabineP
Beiträge gesamt: 7586

28. Jan 2010, 09:42
Beitrag # 2 von 5
Beitrag ID: #431814
Bewertung:
(7619 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo matmax,

mit absolut positionierten Bereichen wirst Du das nicht erreichen.
Lies mal hier nach:
http://css.maxdesign.com.au/floatutorial/index.htm


als Antwort auf: [#431796]

Div innerhalb eines divs soll dieses vergrößern

FSt
  
Beiträge gesamt: 1965

28. Jan 2010, 09:58
Beitrag # 3 von 5
Beitrag ID: #431818
Bewertung:
(7612 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo matmax

Ich spiel dann mal den Advocatus diaboli:
Mit der guten, alten Tabelle wärst Du in 2 Minuten am Ziel.
Ich bin ja auch schon wieder weg ...

Gruss
Martin


als Antwort auf: [#431796]

Div innerhalb eines divs soll dieses vergrößern

matmax
Beiträge gesamt: 626

28. Jan 2010, 15:12
Beitrag # 4 von 5
Beitrag ID: #431889
Bewertung:
(7581 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo!
Danke! Tolles Tutorial. Und: Ich habe es sogar geschafft! Unglaublich!
Allerdings fehlt noch EINE kleine (oder große) Sache: Das Bild "bild_unten_links.jpg" soll vom div "Inhalt" teilweise überdeckt sein. Also hinter "inhalt" liegen. Jetzt ist es so, dass das Bild sich direkt unter "inhalt" platziert. Wenn ich aber position: absolute; mache liegt es immer vor "inhalt" (auch wenn ich es im html-code nach oben schiebe)
Kann man das lösen?!
Am Ende doch die Tabelle?!

Hier mein momentaner CSS-Code:
Code
* {	 
padding: 0px;
margin: 0px;
border:0;
}

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight:normal;
line-height: 18px;
text-align: left;
color:black;
}

#container {
width: 990px;
height:80%;
margin: 10px auto;
background-color:#324b4f;
}

#menu {
float: left;
width: 160px;
margin: 0;
margin-top:180px;
}

#inhalt {
float: left;
margin-left: 0px;
margin-top:180px;
margin-bottom:40px;
max-width: 36em;
min-height:450px;
background-color:#FFFFFF;
}

#kopf {
clear: both;
margin: 0;
}

#leiste {
clear: both;
margin: 0;
}



als Antwort auf: [#431814]

Div innerhalb eines divs soll dieses vergrößern

SabineP
Beiträge gesamt: 7586

28. Jan 2010, 17:56
Beitrag # 5 von 5
Beitrag ID: #431941
Bewertung:
(7572 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Du könntest das Bild als Hintergrundbild des Containers einsetzen und positionieren:
http://www.w3.org/.../20070302/sec536.htm


als Antwort auf: [#431889]
X

Veranstaltungskalender

Hier können Sie Ihre Anlässe eintragen, welche einen Zusammenhang mit den Angeboten von HilfDirSelbst.ch wie z.B. Adobe InDesign, Photoshop, Illustrator, PDF, Pitstop, Affinity, Marketing, SEO, Büro- und Rechtsthemen etc. haben. Die Einträge werden moderiert freigeschaltet. Dies wird werktags üblicherweise innert 24 Stunden erfolgen.

pdf-icon Hier eine kleine Anleitung hinsichtlich Bedeutung der auszufüllenden Formularfelder.

Veranstaltungen
18.06.2024

Online
Dienstag, 18. Juni 2024, 10.00 - 10.30 Uhr

Webinar

In diesen beiden kostenlose Webinaren erfahren Sie, wie Sie mit Hilfe von Enfocus Griffin und dem Impressed Workflow Server Ihren LFP-Workflows optimieren können. 18.06.2024: So optimieren Sie Ihre Prozesse mit Enfocus Griffin 02.07.2024: So sparen Sie Zeit und Geld mit Impressed Workflow Server in der LFP-Edition Griffin: Griffin ist das leistungsstarke Kraftpaket für das automatische Nesting im Großformatdruck. Dank eines ausgeklügelten, KI-basierten Nesting-Algorithmus können Sie mit Griffin Vorlagen schnell und effizient vernutzen – und das klappt auch mit unregelmäßigen Formen perfekt. Das spart Ihnen unzählige Stunden, die Sie bisher mit dem manuellen Nesting und Ausschießen verbracht haben. Einige wichtige Funktionen ≡ Anlage von Beschnittzugaben ≡ Automatische Erzeugung der Schnittkontur ≡ Erstellung von Strichcodes, Textmarkierungen und Registrierungen IWS LFP Edition: Komplizierte, kleinteilige Aufträge; alles sehr speziell; seit Jahren bewährte Prozesse – da können wir nichts standardisieren und automatisieren! Das sagen viele Großformatdrucker – aber stimmt das wirklich, ist dem tatsächlich so? Mit dem IWS LFP Edition automatisieren Sie Ihre Produktion von der Übernahme der Daten aus dem ERP-System bis zur Erzeugung der verschachtelten Druckform und der Übergabe an den RIP. Phoenix Core ist eine hochentwickelte KI-Technologie für die Planung und das Nesting von Druckerzeugnissen. Anders als herkömmliche Ausschießlösungen arbeitet Phoenix nicht auf Basis von Vorlagen, sondern erzeugt entsprechend der Maschinen- und Produktionsanforderungen druckfertige Layouts „on-the-fly“.

kostenlos

Ja

Organisator: Impressed GmbH

https://www.impressed.de/schulung.php?c=sDetail&sid=328

So optimieren Sie Ihren LFP-Workflow
Veranstaltungen
02.07.2024

Online
Dienstag, 02. Juli 2024, 10.00 - 10.30 Uhr

Webinar

In diesen beiden kostenlose Webinaren erfahren Sie, wie Sie mit Hilfe von Enfocus Griffin und dem Impressed Workflow Server Ihren LFP-Workflows optimieren können. 18.06.2024: So optimieren Sie Ihre Prozesse mit Enfocus Griffin 02.07.2024: So sparen Sie Zeit und Geld mit Impressed Workflow Server in der LFP-Edition Griffin: Griffin ist das leistungsstarke Kraftpaket für das automatische Nesting im Großformatdruck. Dank eines ausgeklügelten, KI-basierten Nesting-Algorithmus können Sie mit Griffin Vorlagen schnell und effizient vernutzen – und das klappt auch mit unregelmäßigen Formen perfekt. Das spart Ihnen unzählige Stunden, die Sie bisher mit dem manuellen Nesting und Ausschießen verbracht haben. Einige wichtige Funktionen ≡ Anlage von Beschnittzugaben ≡ Automatische Erzeugung der Schnittkontur ≡ Erstellung von Strichcodes, Textmarkierungen und Registrierungen IWS LFP Edition: Komplizierte, kleinteilige Aufträge; alles sehr speziell; seit Jahren bewährte Prozesse – da können wir nichts standardisieren und automatisieren! Das sagen viele Großformatdrucker – aber stimmt das wirklich, ist dem tatsächlich so? Mit dem IWS LFP Edition automatisieren Sie Ihre Produktion von der Übernahme der Daten aus dem ERP-System bis zur Erzeugung der verschachtelten Druckform und der Übergabe an den RIP. Phoenix Core ist eine hochentwickelte KI-Technologie für die Planung und das Nesting von Druckerzeugnissen. Anders als herkömmliche Ausschießlösungen arbeitet Phoenix nicht auf Basis von Vorlagen, sondern erzeugt entsprechend der Maschinen- und Produktionsanforderungen druckfertige Layouts „on-the-fly“.

kostenlos

Ja

Organisator: Impressed GmbH

Kontaktinformation: E-Mailschulungen AT impressed DOT de

https://www.impressed.de/schulung.php?c=sDetail&sid=328

So optimieren Sie Ihren LFP-Workflow