Frage Top-Margin einer table = height aller Vorgänger

NotSAN · 9 Februar 2018

Naja, der Titel sagt es ja...
Ich möchte eine Website für ein Projekt erstellen und suche jetzt nach einer Möglichkeit, dass der top-margin von meinen Objekten mit den Höhen aller bisherigen Vorgänger gleichgestellt wird. Ginge natürlich, wenn man das alles manuell machen würde, aber da ich ne ganze Menge Unterseiten habe ist das ne Menge Arbeit, die ich mir hoffentlich ersparen kann...

Also: Ist das möglich?

PS: Am liebsten nur mit HTML/CSS, Java, jQuery usw. kann ich nicht...

Sailor · 9 Februar 2018

CSS in einem externen Stylesheet sollte das richten können.

Aaron3219 · 9 Februar 2018

Ich glaube er meint:

Code:

<div style="margin-top: 100px;">content</div>
<div style="margin-top: 100px;">content</div>
<div style="margin-top: 100px;">content</div>
<div style="margin-top: 100px;">content</div>
<div style="margin-top: 100px;">content</div>
<div style="margin-top: 100px;">content</div>
<div style="margin-top: 100px;">content</div>
<div style="margin-top: 100px;">content</div>
<div style="margin-top: 100px;">content</div>
<div style="margin-top: 100px;">content</div>

In das hier:

Code:

<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div><div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>

und das mit einem CS File

basti1012 · 9 Februar 2018

NotSAN schrieb:
dass der top-margin von meinen Objekten mit den Höhen aller bisherigen Vorgänger gleichgestellt wird.

Ich dachte immer das meine erklärungen rätselhaft sind:). Aber wenn er sein style="" noch direkt im Html stehen hat ,ohne css ausendatei, wird sie wohl schon etwas älter sein.In den Fall würde ich auf Js verzichten und eine externe Css erstellen.Ist einfacher, schöner und leichter änderbar ,wenn mal was ändern muss .So könnte man mit einen Satz alle Elemente um X Pixel verschieben ,ohne großen aufwand.

NotSAN · 12 Februar 2018

basti1012 schrieb:
Ich dachte immer das meine erklärungen rätselhaft sind:)

Okay, dachte nicht das das so rätselhaft ist

Also, nochmal erklärt:

Ich habe mehrere Unterseiten und möchte nun gerne die top-margin eines Objekts (Tabelle, die über den ganzen Bildschirm gestreckt ist und position:absolute; hat) mit den Höhen (height

) SÄMTLICHER vorheriger Objekte gleichsetzen.

D.h. vor meiner Tabelle befindet sich ein Header mit der Höhe sagen wir mal 350px. Danach folgt eine Tabelle mit 700px und eine weitere mit 400px.

Also ist meine Top-Margin für die oben genannte Tabelle 350+700+400=1450px.
Soweit so gut.

Könnte ich jetzt manuell für jede Tabelle einzeln machen, z.B. mit Klassen oder ähnliches...

Sailor schrieb:
CSS in einem externen Stylesheet sollte das richten können.

Ein externes Stylesheet habe ich übrigens...

Aber da ich ne ganze Menge unterschiedlicher Tabellen habe die auf unterschiedlichen Seiten unterschiedliche Höhen haben, suche ich nach einem weg, dass die top-margin meiner oben genannten Tabelle = die height aller vorherigen Objekte ist.

D.h. dass ich nicht immer hinschreiben muss: top-margin:1450px; usw., sondern will irgendwie dafür sorgen, dass top-margin von meinen Objekten IMMER die addierte height aller bisherigen Objekte ist.

Beispiel.

HTML

<header>

</header>

<table class="A">

</table>

<table class="B">

</table>

<table class="C">

</table>

CSS:

header {
height:350px;
postion:absolute
right:0;
left:0;
top:0;
}

table.A {
height:700px;
postion:absolute
right:0;
left:0;
top:0;
top-margin:350px;
}

table.B {
height:400px;
postion:absolute
right:0;
left:0;
top:0;
top-margin:1050px;
}

table.C {
height:200px;
postion:absolute
right:0;
left:0;
top:0;
top-margin:1450px;
}

Ich möchte aber dass ich in meinem CSS soetwas in der Art haben

top-margin: (height aller Vorgänger automatisch zusammengerechnet, also für .C: 350px+700px+400px=1450px, das soll aber automatisch gemacht werden);

Also soll top-margin AUTOMATISCH mit der Höhe aller Vorgänger gleichgesetzt werden.

Vielleicht geht das ja auch garnicht, dann ist das so, hab ich halt mehr Arbeit

Der Punkt ist nämlich, dass ich das auch für verschiedene Bildschirmgrößen definieren will, und ich habe echt kein Bock, den ganzen Kram in @media nochmal zu machen

Also hoffentlich geht das was ich mir da erhoffe

Aaron3219 · 12 Februar 2018

Ist mit CSS theoretisch möglich, sofern du die (veralteten) height-Attribute benutzt (z.B.: height='350'). Du musst dann die attr() von CSS benutzen und diese in Variablen setzen... lass es lieber.
Ansonsten mit Javascript.

Ich habe allerdings den Verdacht, dass du hier position absolute völlig falsch anwendest und einen völlig falschen Aufbau des HTML-Codes machst und dein Vorhaben überhaupt nicht notwendig ist.
Würdest du mal den Seitenlink oder den HTML-Quellcode + CSS reinposten (Wenn möglich, bitte den Seitenlink)?

MrMurphy · 12 Februar 2018

Hallo

Einfach auf position: absolute, top, left und right verzichten. margin löschen oder auf Null setzen. Dann stehen die Elemente automatisch untereinander.

Gruss

MrMurphy

NotSAN · 13 Februar 2018

HTML

<!DOCTYPE html>
<html>
<head>
<link type="text/CSS" rel="stylesheet" href="stylesheet.css">
<meta charset="UTF-8">
<link rel="shortcut icon" type="image/x-icon" href="Bilder/favicon.ico">
<title>
Biomembran - Grundgerüst
</title>
</head>
<body>

<header class="header"><div class="headerimg">.</div></header>
<header class="side"></header>
<nav>
<ul class="topnav">
<li>
<img class="A" src="Bilder/Topnav.png">
</li>
</ul>
</nav>

<table class="table">
<tr>
<td>

<nav>
<ul>
<li><a href="Index.html"><br>DIE BIOMEMBRAN</a><br><hr></li>
<li><a href="Wofür.html">WOFÜR GIBT ES BIOMEMBRANEN</a><br><hr></li>
<li>
<a href="Wie.html">WIE SIND BIOMEMBRANEN AUFGEBAUT<br><div class="placeholder">.</div></a>
<a href="Sandwichmodell.html">DAS SANDWICHMODELL<br></a>
<a href="Fluid-Mosaik.html">DAS FLUID-MOSAIK-MODELL<br></a>
<a href="NeuesModell.html">DAS NEUE MEMBRANMODELL<br></a><hr>
</li>
<li>
<a href="Hydro.html">HYDROPHIL UND HYDROPHOB<br><div class="placeholder">.</div></a>
<a href="Hydro.html#Hydrophil">HYDROPHIL<br></a>
<a href="Hydro.html#Hydrophob">HYDROPHOB<br></a><hr>
</li>
<li>
<a href="Stofftransport.html">STOFFTRANSPORT<br><div class="placeholder">.</div></a>
<a href="Stofftransport.html#Diffusion">EINFACHE DIFFUSION<br></a>
<a href="Stofftransport.html#Kanal">KANALVERMITTELTE DIFFUSION<br></a>
<a href="Stofftransport.html#Carrier-p">PASSIVER CARRIER<br></a>
<a href="Stofftransport.html#Carrier-a">AKTIVER CARRIER<br></a>
<a href="Stofftransport.html#Vesikel">VESIKELTRANSPORT<br></a>
</li>
</ul>
</nav>

</td>
</tr>
</table>
<table class="transparent">
<tr>
<td>

</td>
</tr>
</table>
<table class="mini">
<tr>
<td>

</td>
</tr>
</table>
<footer>
<table>
<tr>
<td>
<a href="Index.html"><div class="BioM">.</div></a>
</td>
<td>
<a href="Wofür.html"><div class="Wofür">.</div></a>
</td>
<td>
<a href="Wie.html"><div class="Wie">.</div></a>
</td>
<td>
<a href="Hydro.html"><div class="Hydro">.</div></a>
</td>
<td>
<a href="Stofftransport.html"><div class="StoffT">.</div></a>
</td>
</tr>
</table>
</footer>
</body>
</html>

CSS

body {
font-family:'Helvetica';
background-image:url(Bilder/BG-IMG.png);
background-size: cover;
background-attachment:fixed;
background-position:center;
background-repeat:no-repeat;
margin-top:370px;
margin-left:40px;
color:#111;
}

.headerimg {
border:none;
margin:0;
padding:0;
top:0;
left:0;
right:0;
bottom:0;
position:absolute;
z-index:2;
background-repeat:no-repeat;
}

@media only screen and (width:1280px) {
.headerimg {
background-image:url(Bilder/Header-klein.png)
}

.header {
height:24.6%;
}

.table {
top:24.6%;
height:75.4%;
}
}

@media only screen and (width:1240px) {
.headerimg {
background-image:url(Bilder/Header-klein.png)
}

.header {
height:24.6%;
}

.table {
top:24.6%;
height:75.4%;
}
}

@media only screen and (width:1920px) {
.headerimg {
background-image:url(Bilder/Header.png)
}

.header {
height:30%;
}

.table {
top:30%;
height:70%;
}
}

.header {
margin:0;
padding:0;
top:0;
left:0;
right:0;
width:100%;
position:absolute;
z-index:2;
overflow:hidden;
}

.side {
background-image:none;
margin:0;
padding:0;
top:0;
width:35%;
right:0;
left:65%;
height:1980px;
position:fixed;
z-index:2;
background-color:rgba(96,116,118,.2)

}

img {
margin:auto;
border:3px solid black;
}

img.A {
border:none;
height:90%;
}

hr {
width:100%;
}

table.table {
background-color:#F5F5F5;
font-size:20px;
width:100%;
margin:0;
padding:0;
padding-left:20px;
left:0;
position:absolute;
}

table.mini {
background-color:#F5F5F5;
font-size:20px;
width:100%;
margin:0;
top:164%;
padding:0;
padding-left:20px;
left:0;
position:absolute;
height:56%;
}

tr, .transparent tr, .mini tr {
vertical-align:top;
}

table.transparent {
background-color:rgba(180,220,190,0.8);
width:100%;
margin:0;
top:100%;
padding:0;
padding-left:40px;
left:0;
position:absolute;
height:65%;
}

h1 {
font-family:'Calibri Light';
}

h2 {
font-family:'Calibri Light';
}

h3 {
font-family:'Calibri Light';
}

h4 {
font-family:'Calibri Light';
}

a {
text-decoration:none;
color:#333;
}

a:hover {
text-decoration:none;
color:#555;
}

a.anchor {
color:#111;
}

a.anchor:hover {
color:#111;
}

ul {
list-style-type:none;
position:absolute;
font-family:'Calibri Light';
z-index:6;
margin:0;
padding:0;
top:0;
bottom:0;
right:100px;
width:20%;
font-size:20px;
text-align:left;
}

ul.topnav {
list-style-type:none;
position:absolute;
z-index:2;
margin:0;
padding:0;
top:0;
bottom:0;
font-size:20px;
text-align:left;
width:20%;
height:30%;
overflow:hidden;
}

ul.topnav img.A {
height:100%;
position:absolute;
}

li a:hover {
color:#388;
text-decoration:none;
}

li a.current {
color:#388;
pointer-events:none;
}

li a.currentsub {
color:#3AA;
pointer-events:none;
}

.invisible {
visibility:invisible;
}

.placeholder {
visibility:invisible;
font-size:5px;
}

footer {
width:100%;
z-index:4;
height:20%;
background-color:#134347;
position:absolute;
top:215%;
margin:0;
left:0;
padding:0;
text-align:center;
font-size:30px;
color:#EEE;
font-size:16px;
font-family:'Calibri Light';
}

footer table {
position:absolute;
z-index:5;
background-color:rgba(0,0,0,0);
margin:0;
padding:0;
height:100%;
font-size:20px;
width:50%;
position:absolute;
text-align:center;
margin-left:25%;
margin-right:25%;
}

footer table tr {
vertical-align:middle;
}
footer table tr td {
height:100px;
width:100px;
}

footer a div {
width:100px;
height:100px;
color:rgba(0,0,0,0);
margin:0;
padding:0;
}

footer a div:hover {
color:rgba(0,0,0,0);
}

footer a div.BioM {
width:100px;
height:100px;
background-image:url(Bilder/footer-Biom.png);

}

footer a div.Wofür {
width:100px;
height:100px;
background-image:url(Bilder/footer-Warum.png);
}

footer a div.Wie {
width:100px;
height:100px;
background-image:url(Bilder/footer-Wie.png);
}

footer a div.Hydro {
width:100px;
height:100px;
background-image:url(Bilder/footer-Hydro.png);
}

footer a div.StoffT {
width:100px;
height:100px;
background-image:url(Bilder/footer-StoffT.png);
}

footer a div.BioM:hover {
width:100px;
height:100px;
background-image:url(Bilder/footer-Biom-H.png);

}

footer a div.Wofür:hover {
width:100px;
height:100px;
background-image:url(Bilder/footer-Warum-H.png);
}

footer a div.Wie:hover {
width:100px;
height:100px;
background-image:url(Bilder/footer-Wie-H.png);
}

footer a div.Hydro:hover {
width:100px;
height:100px;
background-image:url(Bilder/footer-Hydro-H.png);
}

footer a div.StoffT:hover {
width:100px;
height:100px;
background-image:url(Bilder/footer-StoffT-H.png);
}

NotSAN · 13 Februar 2018

Bilder: https://www.file-upload.net/download-12976489/Bilder.zip.html

NotSAN · 13 Februar 2018

MrMurphy schrieb:
Hallo

Einfach auf position: absolute, top, left und right verzichten. margin löschen oder auf Null setzen. Dann stehen die Elemente automatisch untereinander.

Gruss

MrMurphy

Hey, das Problem bei der Lösung ist, dass sie zwar untereinander stehen aber nicht mehr den kompletten Bildschirm ausfüllen

Und genau darum geht es mir ja

NotSAN · 13 Februar 2018

Aaron3219 schrieb:
Ansonsten mit Javascript.

Wie würde es mit Javascript denn aussehen?

Kannst du mir es vielleicht schicken und so erklären, dass ich es auch erklären kann?

MrMurphy · 13 Februar 2018

Hallo

Hey, das Problem bei der Lösung ist, dass sie zwar untereinander stehen aber nicht mehr den kompletten Bildschirm ausfülle

Welchen Bildschirm? Nur deinen? Und was ist wenn der Inhalt größer als der Bildschirm wird?

Machst du die Seite nur für dich?

JavaScript sollte nicht für ein Layout verwendet werden.

Auch ohne position kann durch entsprechende Höhenangaben der ganze Bildschirm gefüllt werden.

Im Endeffekt wirst du aber mit aktuellem HTML und CSS die wenigsten Probleme haben, Stichwort Flexbox.

Gruss

MrMurphy

NotSAN · 13 Februar 2018

MrMurphy schrieb:
Hallo

Einfach auf position: absolute, top, left und right verzichten. margin löschen oder auf Null setzen. Dann stehen die Elemente automatisch untereinander.

Gruss

MrMurphy

Hab genau das jetzt mal gemacht und das komplette Design neu überarbeitet. Klappt jetzt einwandfrei :)

Danke nochmal, da hätte ich aber eigentlich auch selbst drauf kommen können

Frage Top-Margin einer table = height aller Vorgänger

NotSAN

Neues Mitglied

Sailor

Aktives Mitglied

Aaron3219

Senior HTML'ler

basti1012

Senior HTML'ler

NotSAN

Neues Mitglied

Aaron3219

Senior HTML'ler

MrMurphy

Senior HTML'ler

NotSAN

Neues Mitglied

NotSAN

Neues Mitglied

NotSAN

Neues Mitglied

NotSAN

Neues Mitglied

MrMurphy

Senior HTML'ler

NotSAN

Neues Mitglied

Neueste Beiträge