[SUCHE] CSS - Tabellen Responsiv

TheSoulrester · 28. März 2016

Hey Leute,
ich bin auf der Suche nach einer Person, welche mir bei einem relativ einfachen und weniger umfangreichen CSS-Grundgerüst einer kleinen HTML-Seite hilft.

Das eigentliche Grundgerüst zur Strukturierung der Ordnung und Einhaltung der Platzierung ist mit Tabellen realisiert.

Nun ist aber das eigentliche Problem, dass es auch in gewisser Hinsicht für die normale Mobile Ansicht funktionieren soll.
Zunächst einmal wie die Tabellenstruktur aufgebaut ist:

Die Einzelnen Farben bedeuten einzelne Tabellenbereiche,

HTML: MUSTER.html

<!DOCTYPE html>
<html>
	<head>
		<title>MUSTERTITEL</title>
		<style>
		</style>
	</head>
	<body>
		<table id="wrapper" width="1000px" align="center">
			<tr>
				<td>
					<table id="headerwrap" width="100%" align="left">
						<tr>
							<td>
								<table id="header" bgcolor="#FF6633" width="100%">
									<tr>
										<td><img src="images/logo.png" alt="Logo"/></td>
										<td align="right"></td>
									</tr>
								</table>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td>
					<table id="contentwrap" bgcolor="#FFFFFF" width="100%" frame="box">
						<tr>
							<td id="content" bgcolor="#FAFAFA">
							<td id="rightcolumn" bgcolor="#CC33FF" width="25%"></td>
					        </tr>
					</table>
				</td>
			</tr>
			<tr>
				<td>
					<table id="footerwrap" bgcolor="#33FF66" width="100%">
						<tr>
							<td id="footer"></td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
	</body>
</html>

Alles anzeigen

Das ganze soll ab einer gewissen Bildschirmauflösung (auch im Browser durch Skalieren des Browserfensters) in solch eine Struktur gebracht werden

Ich würde mich freuen, wenn sich jmd finden könnte, der mir bei dieser kleinen aber feinen Aufgabe zur Seite stehen kann,
Ich habe ebenfalls schon das Web dafür durchforstet und herausgefunden, dass das ganze über Media-Elemente machbar sein soll, jedoch bin ich mit CSS weder vertraut noch habe ich im Moment den richtigen Durchblick dafür, da bald meine Ausbildungsprüfung Teil 1 ansteht.

Gerne schreibt mich über eine Private Nachricht an oder unter diesem Beitrag.
Bei Fragen oder Ähnliches, scheut euch nicht, diese zu stellen.

LG

**schmivi** · 29. März 2016

Hi, schau mal ob du hiermit was anfangen kannst:

HTML: muster.html

<!DOCTYPE html>
<html>
<head>
<title>TITEL</title>
<style type="text/css">


body{line-height: 10em;} /* Feldhöhe */


#Table1{
float: left;
width: 100%;
}


#T1Spalte1{
background: #FF0000;
}


#T1Spalte2{
float: left;
width: 200px; 
margin-left: -200px;
background: #FF8282
}


#Table2{
float: left;
width: 100%;
}


#T2Spalte1{
background: #FF00D8;
}


#T2Spalte2{
float: left;
width: 300px; 
margin-left: -300px;
background: #FF9AF0
}


@media (max-width: 700px){ /* Unter diesem Wert bricht er um  */


  #Table1{ float: none; }
  #T1Spalte1{  margin-right: 0;  }
  #T1Spalte2{    float: none;	width: 100%; margin-left: 0; }


  #Table2{ float: none; }
  #T2Spalte1{  margin-right: 0;  }
  #T2Spalte2{    float: none;	width: 100%; margin-left: 0; }


}


</style>
</head>


<body bgcolor="#545454">


<div id="Table1">
<div id="T1Spalte1">
<div <b>Dynamisch</b></div>
</div>
</div>
<div id="T1Spalte2">
<div <b>Fix 200px</b></div>
</div>


<div id="Table2">
<div id="T2Spalte1">
<div <b>Dynamisch</b></div>
</div>
</div>
<div id="T2Spalte2">
<div <b>Fix 300px</b></div>
</div>


</body>
</html>

Alles anzeigen

Viel Zeit hab ich auch nicht. Wenn du noch ein paar Beispiele brauchst, schau mal hier: Dynamic Drive CSS Layouts- Liquid Layouts

Grüße

TheSoulrester · 29. März 2016

Hi schmivi,
Danke dir für den Code Ausschnitt, auch wenn es jedoch so funktionieren würde, ohne es getestet zu haben, jedoch soll mein HTML-Gerüst in späteren Newslettern eingesetzt werden (E-Mail) und da sollen Div-Container mehr als hinderlich (ja laut Internet gar nicht funktionieren) sein.

Ich schau mich mal auf der von dir geschriebenen Seite um, dennoch würde ich mich freuen, wenn sich weitere der Sache annehmen und mit dabei helfen.

LG

Gesendet mit Tapatalk

**schmivi** · 29. März 2016

Dann ein Versuch mit Table :

HTML: muster2.html

<!DOCTYPE html>
<html>
<head>
<title>TITEL</title>
<style type="text/css">


#Table1{
float: left;
height: 60px;
width: 70%;
background: #FF0000;
}


#Table2{
float: left;
height: 60px;
width: 30%;
background: #FF8282;
}


#Table3{
float: left;
height: 120px;
width: 60%;
background: #FF00D8;
}


#Table4{
float: left;
height: 120px;
width: 40%;
background: #FF9AF0;
}


@media (max-width: 800px){ /* Unter diesem Wert bricht er um  */


  #Table1{  margin-right: 0; width: 100%;}
  #Table2{  float: none;     width: 100%;}
  #Table3{  margin-right: 0; width: 100%;}
  #Table4{  float: none;     width: 100%;}
}


</style>
</head>
<body bgcolor="#545454">

<table id="Table1">
 <tr>
  <td>Table1 70% Breite</td>
 </tr>
</table>


<table id="Table2">
 <tr>
  <td>Table2 30% Breite</td>
 </tr>
</table>


<table id="Table3">
 <tr>
  <td>Table3 60% Breite</td>
 </tr>
</table>


<table id="Table4">
 <tr>
  <td>Table4 40% Breite</td>
 </tr>
</table>	


</body>
</html>

Alles anzeigen

Gruß

TheSoulrester · 29. März 2016

Danke dir schonmal dafür,

ich denke mal damit lässt sich nun etwas anfangen und an meine Bedürfnisse anpassen.
Ich melde mich, sollte ich dennoch bisschen Hilfe gebrauchen

PvE1 The Island (0/50)	PvE2 The Center (0/30)
PvE3 Scorched Earth (0/30)	PvE4 Ragnarok (0/30)
PvE5 Aberration (0/30)	PvE6 Extinction (0/50)
PvE7 Valguero (0/50)	PvE8 Genesis (0/50)
PvE9 Crystal Isles (0/50)	PvE10 Fjördur (0/50)

PvE1 The Island (0/50)	PvE2 The Center (0/50)
PvE3 Scorched Earth (5/25)	PvE4 Ragnarok (1/10)
PvE5 Aberration (0/50)	PvE6 Extinction (0/10)
PvE7 Valguero (0/10)	PvE8 Genesis (0/10)
PvE9 Crystal Isles (0/50)

Herzlich Willkommen! Melde dich an oder registriere dich.

Um schreiben oder kommentieren zu können, benötigst du ein Benutzerkonto.

[SUCHE] CSS - Tabellen Responsiv

Tom 14. August 2019

Präge Einstellung und Server

In game shop hinzufügen

Unofficial Dedicated Server Info!

kurze Frage - kurze Antwort (ATLAS)

ATLAS DEDICATED SERVER 4X4

Teilen

Benutzer online in diesem Thema