[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:
(7171 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!
Beste Grüße! matmax

macOS 10.15 Adobe CC (2021)

(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:
(7142 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
Gruß Sabine


als Antwort auf: [#431796]

Div innerhalb eines divs soll dieses vergrößern

FSt
  
Beiträge gesamt: 1961

28. Jan 2010, 09:58
Beitrag # 3 von 5
Beitrag ID: #431818
Bewertung:
(7135 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


Wer noch mehr HDS will – PremiumMember wissen wieso
https://www.hilfdirselbst.ch/...m.cgi?do=membership;
http://www.wpms.ch


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:
(7104 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;
}

Beste Grüße! matmax

macOS 10.15 Adobe CC (2021)


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:
(7095 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
Gruß Sabine


als Antwort auf: [#431889]
X

Aktuell

PDF / Print
Wolken_300

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
29.09.2022

IDUGS#85 Press2id

Zoom Meeting
Donnerstag, 29. Sept. 2022, 19.00 - 21.00 Uhr

Vortrag

Kennst du WordPress? Vielleicht. Verwendest du WordPress? Ja, klar! WordPress ist das am weitesten verbreitete System für die Erstellung von Webseiten. Um Webseitenbau soll es auf dieser IDUG aber nicht gehen. Gregor zeigt press2id (github.com/grefel/press2id). Seine Open-Source-Lösung für die Verbindung von Web und InDesign. Richtig gelesen: InDesign liest mithilfe von press2id die Inhalte der WordPress-Webseiten und generiert daraus Zeitschriften, Kataloge, Programmhefte oder Bierdeckel (das zeigen wir natürlich auch!). So wird die „Content First“ Theorie zu einer konkret anwendbaren Praxis, ohne gleich die ganz großen Räder zu drehen. Versprochen: Jeder kann nach der IDUG innerhalb kürzester Zeit Daten von WordPress nach InDesign importieren. Aber Achtung: Prinzipiell kann press2id aus jeder Website, oder besser Contentmanagementsystem (CMS) Daten auslesen und nach InDesign importieren! Spannend, oder? Danach geht es in die Praxis: Stefan hat die Webseite des Parktheater Iserlohn (parktheater-iserlohn.de) gestaltet. Die gedruckten Spielpläne (parktheater-iserlohn.de/interaktive-spielplaene) werden mit press2id realisiert. Wir schauen in den Maschinenraum und zeigen, wie die Lösung des Projekts realisiert wurde.

Nein

Organisator: InDesign Usergroup Stuttgart

Kontaktinformation: Christoph Steffens, E-Mailidug AT satzkiste DOT de

https://idugs85.eventbrite.de/

Von Wordpress nach InDesign
Veranstaltungen
08.11.2022

Frankfurt, Fraport Conference Center
Dienstag, 08. Nov. 2022, 13.30 - 18.00 Uhr

Seminar

Auf der Enfocus World Tour stellen wir Ihnen gemeinsam mit Enfocus die aktuellen Highlights von Enfocus Switch und dem Impressed Workflow Server (IWS) vor. Wir präsentieren Ihnen anhand typischer Aufgabenstellungen in einem modernen Produktionsbetrieb die Möglichkeiten, die Enfocus Switch für die Automatisierung und Standardisierung von Abläufen bietet. Wir haben sowohl für Produktionsverantwortliche als auch technisch Interessierte ein spannendes Programm vorbereitet, bei dem Sie sicherlich viel Neues erfahren werden, welches Sie in Ihrem eigenen Betrieb umsetzen können. Die Veranstaltung bietet darüber hinaus eine hervorragende Möglichkeit, sich mit anderen Anwendern und Workflow-Spezialisten auszutauschen und Antworten auf konkrete Aufgabenstellungen zu erhalten, welche Sie mit Hilfe von Enfocus Switch/IWS umsetzen möchten.

Wir sind jeweils an 2 Tagen in Frankfurt, Hamburg und München vor Ort. Der erste (halbe) Tag richtet sich in erster Linie an Betriebsleiter und Produktionsverantwortliche in Druckereien - ist also weniger technisch orientiert - sondern gibt einen Überblick zu den heutigen Möglichkeiten einer automatisierten Produktion.

Der zweite Tag (Switch Anwender-Treffen) richtet sich an bestehende Switch-Anwender und Administratoren.

Anmeldung und weitere Infos: https://www.impressed.de/schulung.php?c=sDetail&sid=310

Ja

Organisator: Enfocus/Impressed

Kontaktinformation: Silvia Noack, E-Mailsnoack AT impressed DOT de

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

Enfocus World Tour 2022