• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

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

NotSAN

Neues Mitglied
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...
 
Werbung:
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
 
Werbung:
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.
 
Ich dachte immer das meine erklärungen rätselhaft sind:)
Okay, dachte nicht das das so rätselhaft ist :D

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 :D) 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...

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 :D

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 :p


Also hoffentlich geht das was ich mir da erhoffe :rolleyes:
 
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)?
 
Werbung:
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
 
Zuletzt bearbeitet:
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);
}
 
Werbung:
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 :p

Und genau darum geht es mir ja :D
 
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
 
Werbung:
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 :confused:
 
Zurück
Oben