mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 12:15 Benutzername: Passwort: Auto-Login

Thema: Wie baue ich kleine Kästchen für den Contentbereich mit DIV? vom 05.05.2015


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Wie baue ich kleine Kästchen für den Contentbereich mit DIV?
Seite: 1, 2  Weiter
Autor Nachricht
ekzero
Threadersteller

Dabei seit: 04.05.2015
Ort: Berlin
Alter: 36
Geschlecht: Männlich
Verfasst Di 05.05.2015 17:22
Titel

Wie baue ich kleine Kästchen für den Contentbereich mit DIV?

Antworten mit Zitat Zum Seitenanfang

Hi, stehe vor einem Problem. Mit Tabellen kriege ich das super hin.Nur mit DIV habe ich da Probleme.

Der "Kasten" sollte "mitwachsen" können, wenn mal mehr Text dort erscheint.
Außerdem will ich mehr als einen Kasten erstellen, aber dabei dann auf die gleichen Bild-Gerüste (5Bilder), die den Kasten dann bilden, zurückgreifen.

Mit Tabellen kriege ich das wunderbar hin. Den linken und rechte verktikalen Balken als Background-Image und schon gehts.

Zur Verdeutlichung meines Problems, habe ich etwas vorgezeichnet. Der Code der .html-Datei und die CSS dazu liegen dem Bild bei.

Danke.


  View user's profile Private Nachricht senden
ekzero
Threadersteller

Dabei seit: 04.05.2015
Ort: Berlin
Alter: 36
Geschlecht: Männlich
Verfasst Di 05.05.2015 17:24
Titel

Antworten mit Zitat Zum Seitenanfang

Code:

<!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">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <title>tabelle</title>
   <link rel="stylesheet" type="text/css" href="./content.css" media="all" />
   <!--[if IE]>
   <style type="text/css" media="all">.borderitem {border-style: solid;}</style>
   <![endif]-->
</head>

<body>

<div id="Div">
</div>
<div id="Div2">
</div>
<img src="content_r1_c1.jpg" id="content_r1_c1" alt="" />
<img src="content_r2_c1.jpg" id="content_r2_c1" alt="" />
<img src="content_r2_c2.jpg" id="content_r2_c2" alt="" />
<img src="content_r2_c3.jpg" id="content_r2_c3" alt="" />
<img src="content_r4_c1.jpg" id="content_r4_c1" alt="" />
</body>
</html>


Code:
@charset "utf-8";

body {
   background-color: #888888;
   font-size: 62.5%;
   margin: 0;
   padding: 0;
}
body * {
   font-size: 100%;
}
h1, h2, h3, h4, h5, h6 {
   font-weight: normal;
}
p {
   margin-bottom: 1.1em;
   margin-top: 0;
}
#main p.lastNode {
   margin-bottom: 0;
}
a:link img, a:visited img {
   border: none;
}
div.clearFloat {
   clear: both;
   font-size: 0;
   height: 0;
   line-height: 0px;
}
li.clearFloat {
   clear: both;
}
ul.symbolList {
   display: inline;
   float: left;
   list-style-type: none;
   margin: 0;
   padding: 0;
}
.AbsWrap {
   position: relative;
   width: 100%;
}
.rowWrap {
   width: 100%;
}
#Div {
   left: 0px;
   position: absolute;
   top: -1px;
   margin-bottom: 0;
   background-color: #606060;
   border: 1px solid #000;
   width: 599px;
   padding-top: 0px;
   height: 176px;
}
html > body #Div {
   height: auto;
   min-height: 177px;
}
#Div2 {
   left: 0px;
   position: absolute;
   top: 9px;
   margin-bottom: 0;
   background-color: #c4ff13;
   width: 195px;
   padding-top: 0px;
   height: 15px;
}
html > body #Div2 {
   height: auto;
   min-height: 16px;
}
#content_r1_c1 {
   left: 0px;
   position: absolute;
   top: 0px;
   height: 3px;
   margin-bottom: 0;
   width: 601px;
}
#content_r2_c1 {
   left: 0px;
   position: absolute;
   top: 3px;
   height: 174px;
   margin-bottom: 0;
   width: 3px;
}
#content_r2_c2 {
   left: 0px;
   position: absolute;
   top: 3px;
   height: 23px;
   margin-bottom: 0;
   width: 595px;
}
#content_r2_c3 {
   left: 598px;
   position: absolute;
   top: 3px;
   height: 174px;
   margin-bottom: 0;
   width: 3px;
}
#content_r4_c1 {
   left: 0px;
   position: absolute;
   top: 177px;
   height: 3px;
   margin-bottom: 0;
   width: 601px;
}
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Morgo

Dabei seit: 10.08.2005
Ort: Von Kowelenz bis Kölle
Alter: 39
Geschlecht: Männlich
Verfasst Di 05.05.2015 19:41
Titel

Antworten mit Zitat Zum Seitenanfang

?!

http://codepen.io/anon/pen/pJjPQG
  View user's profile Private Nachricht senden
ekzero
Threadersteller

Dabei seit: 04.05.2015
Ort: Berlin
Alter: 36
Geschlecht: Männlich
Verfasst Mi 06.05.2015 06:58
Titel

Antworten mit Zitat Zum Seitenanfang

Ah cool! Das kann man also ohne Bilddateien nachbauen.Komplett in CSS!
Die Seite ist gut.Danke.

Wie würde man das bei einem komplexeren Kästchen machen, wenn man Bilddateien einsetzt?
Morgo *Thumbs up!*
  View user's profile Private Nachricht senden
Morgo

Dabei seit: 10.08.2005
Ort: Von Kowelenz bis Kölle
Alter: 39
Geschlecht: Männlich
Verfasst Mi 06.05.2015 19:14
Titel

Antworten mit Zitat Zum Seitenanfang

ekzero hat geschrieben:

Wie würde man das bei einem komplexeren Kästchen machen, wenn man Bilddateien einsetzt?


z.B. mit mehreren Hintergrundbildern. http://www.css3.info/preview/multiple-backgrounds/
  View user's profile Private Nachricht senden
ekzero
Threadersteller

Dabei seit: 04.05.2015
Ort: Berlin
Alter: 36
Geschlecht: Männlich
Verfasst Mi 06.05.2015 21:35
Titel

Antworten mit Zitat Zum Seitenanfang

genial! Mehrere Bilder übereinander und so simpler Code. Ich wusste gar nicht, dass so etwas möglich ist.
Besten Dank, Morgo *Thumbs up!* *hehe*
  View user's profile Private Nachricht senden
ekzero
Threadersteller

Dabei seit: 04.05.2015
Ort: Berlin
Alter: 36
Geschlecht: Männlich
Verfasst Sa 09.05.2015 21:48
Titel

Antworten mit Zitat Zum Seitenanfang

Morgo, ich komm mit dem iFrame nicht klar. Mit Css habe ich das nicht hinbekommen.
Kann man ein Div in ein Div einfügen?Überlagern die sich nicht?

Ich habe mal das hochgeladen. Das iFrame steckt im Verzeichnis "Content_Tabelle/content.html.


<div id="main_content"></div>
<div id="my_iframe">
<iframe src="content_tabelle/content.html" width="610px" height=565px" frameborder="0"></iframe>
</div>

Ich habe das iFrame zwischen <div> und </div> gepackt. Dreamweaver ist nicht glücklich drüber.
Der IE ist zufrieden, alles wird normal dargestellt.

### LINK Hauptseite


### LINK iFrame


Wie würdet ihr die grauen Kästen einbinden?
Danke Leute *Schnief*
  View user's profile Private Nachricht senden
Astro

Dabei seit: 14.04.2003
Ort: Lost Valley
Alter: 48
Geschlecht: Männlich
Verfasst So 10.05.2015 00:19
Titel

Antworten mit Zitat Zum Seitenanfang

Wenn ein Div in einem Div stecken soll, musst du sie verschachteln. So:

Code:
<div id="main_content">
 <div id="my_iframe">
  <iframe src="content_tabelle/content.html" width="610px" height=565px" frameborder="0"></iframe>
 </div>
</div>




Das mit den multiplen Hintergrundbildern wußte ist auch noch nicht. Fantastisch. * Ja, ja, ja... *


Zuletzt bearbeitet von Astro am So 10.05.2015 00:19, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
 
Ähnliche Themen Nav-Ebene im Contentbereich
Dreamweaver Fotogallerie auf Contentbereich einfügen
wie baue ich ein geiles icon
Wie baue ich diesen Formmailer ein?
Wie baue ich eine PDF Präsentation
Wie baue ich eine solche Seite?
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.