Autor |
Nachricht |
ekzero
Threadersteller
Dabei seit: 04.05.2015
Ort: Berlin
Alter: 36
Geschlecht:
|
Verfasst Di 05.05.2015 17:22
Titel Wie baue ich kleine Kästchen für den Contentbereich mit DIV? |
|
|
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.
|
|
|
|
|
ekzero
Threadersteller
Dabei seit: 04.05.2015
Ort: Berlin
Alter: 36
Geschlecht:
|
Verfasst Di 05.05.2015 17:24
Titel
|
|
|
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;
}
|
|
|
|
|
|
Anzeige
|
|
|
Morgo
Dabei seit: 10.08.2005
Ort: Von Kowelenz bis Kölle
Alter: 39
Geschlecht:
|
|
|
|
|
ekzero
Threadersteller
Dabei seit: 04.05.2015
Ort: Berlin
Alter: 36
Geschlecht:
|
Verfasst Mi 06.05.2015 06:58
Titel
|
|
|
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
|
|
|
|
|
Morgo
Dabei seit: 10.08.2005
Ort: Von Kowelenz bis Kölle
Alter: 39
Geschlecht:
|
|
|
|
|
ekzero
Threadersteller
Dabei seit: 04.05.2015
Ort: Berlin
Alter: 36
Geschlecht:
|
Verfasst Mi 06.05.2015 21:35
Titel
|
|
|
genial! Mehrere Bilder übereinander und so simpler Code. Ich wusste gar nicht, dass so etwas möglich ist.
Besten Dank, Morgo
|
|
|
|
|
ekzero
Threadersteller
Dabei seit: 04.05.2015
Ort: Berlin
Alter: 36
Geschlecht:
|
Verfasst Sa 09.05.2015 21:48
Titel
|
|
|
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
|
|
|
|
|
Astro
Dabei seit: 14.04.2003
Ort: Lost Valley
Alter: 48
Geschlecht:
|
Verfasst So 10.05.2015 00:19
Titel
|
|
|
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.
Zuletzt bearbeitet von Astro am So 10.05.2015 00:19, insgesamt 1-mal bearbeitet
|
|
|
|
|
|
|
|
Ä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?
|
|