Anpassung an den Bildschirm, Abstände zwischen zwei Tabellen
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
anpassen
arbeiten
beantworten
bereich
code
element
fehler
feld
frage
gesamte fenster
grundlage
hauptteil
http
layout
minute
page
problem
sponsor
tabelle
url
-
Liebes Forum,
ich habe bei einer Webseite so umgearbeitet, dass sie sich an die vielen Bildschirme auf dieser welt anpasst und fast immer gleich aussieht. Nun möchtet ich aber auch bereichte haben, die sich nicht umendern und abstönde, die auch immer gleich sind!
Hier ist der Link zur Seite:http://www.mag-page.lima-city.de/testlayout.htm
Hier der Code: (den könnt ihr auch im Brouser ansehen)
<html> <link rel="stylesheet" href="style.css" type="text/css"> <link rel="shortcut icon" type="image/x-icon" href="pictures/volti2.ico"> <head> <title>Titel der Seite</title> <link rel="stylesheet" href="styles.css" type="text/css"> </head> <body text="#DCDEF2" link="#F0E59E" vlink="#C7B767" alink="#dec3a9"> <table border="0" cellspacing="0" cellpadding="0" width="100%" id="layout"> <tr> <td rowspan="5" valign="top"> <div align="left"></div> </td> <td valign="top" colspan="5"></td> </tr> <tr> <!--Logo vom Verein--> <td valign="middle" bgcolor="#FFFF99" width="15%"> <div align="center"> <center>LOGOS</center> </td> <td rowspan="3" valign="top" width="1%" ></td> <td bgcolor="#FFFF99" width="59%" valign="top" height="120"> <div align="right"> <p><br> <!-- Menüleiste --> <a href="www.google.de"><h3><center>Google</center></h3></a> <center>NAVILEISTE</center> </div> </td> <td bgcolor="#FFFF99" width="23%"> </td> <td width="1%" rowspan="5" valign="top"> </td> </tr> <tr> <td width="21%"></td> <td width="100%"><FONT color=#FFFFFF>.</FONT color=#FFFFFF></td> <td width="23%" ></td> </tr> <tr> <td width="15%" valign="top" bgcolor="FFFF99"> <!--Sponsoren--> <center>AKUTELLES</center> <!-- main--> </div><td bgcolor="#FFFF99" width="59%" valign="top"> <div> <table border="0" width="780" height="49"> <tr> <td><center>HAUPTTEIL</center></td> h<br> h<br> h<br> h<br> h<br> h<br> h<br> h<br> h<br> </body> </html>
Hier noch mal mein Problem:
Ich möchte, dass dich der Abstand zwischen Akuelles und Hauptteil nicht verändern und das Weiße Kreuz auf den Kompletten Seite nicht verändert (zusammenschiebt)
Ihr könnte es ausprobiersen, in dem ihr das Brouserfenster von links nach recht verkleinert!
danke schon mal für alle Antwortet und Schöne Weihnachten! -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Sobald die Vorgabe nach HTML aussieht, schreibe ich dir einen Vorsschlag, der auch funktioniert, aber vorher entfernst du diese komischen center-tags und versuchst zumindest dein Tabellenlayout zu korrigieren (rechnen war offenbar nicht deine Stärke: 21%+100%+23% != 100%)!
So als Tipp, mit einem Tabellenlayout geht das zwar wesentlich leichter hinzubekommen, als mit echtem HTML, aber es ist ebensoviel schwerer es zu warten, ansonsten wären da auch nicht so viele Fehler drin.
Mit freundlichen Grüßen -
Das Layout mit einer Tabelle zu gestalten ist ein eher altes und mittlerweile ziemlich verpöntes Konzept.
Versuche mit so genannten <div> Elementen zu arbeiten. Diesen kannst du auch (am besten via ausgelagerter CSS Date) Attribute wie width und height verpassen und sie somit dynamisch anpassen. Mit dem Attribut position kannst du dann jedes beliebige Layout erstellen, auch das von dir mit einer Tabelle realisierte.
Wenn du nach "HTML DIV" googelst findest du unmengen an Tutorials und Hilfen, lies dich da mal ein wenig durch, dann sollte der Rest kein Problem sein. -
Mensch Leute,
antwortet doch bitte auf die Frage von mag-page. Es ist zwar richtig, dass man Seiten nicht mehr mit Tabellen-Layout gestaltet und dass der Code auch besser hätte strukturiert werden können usw. -- Das war aber nicht gefragt!
Map-Page, hast Du es schon mit den Parametern cellpadding und cellspacing versucht? Damit solltest Du feste Abstände zwischen Spalten und Zeilen hinbekommen. Schlags einfach mal nach.
Trotzdem wäre es ratsam, Du würdest Deinen Code etwas strukturieren, z.B. durch Einrückungen. Das erleichtert auch denen, die Dir helfen sollen, sich durch Deinen Code zu arbeiten.
Und nun kurz zur Schreibweise:
Es heißt Browser und nicht Brouser
Es heißt umändern und nicht umendern
Es heißt Abstände und nicht Abstönde
LG
BigBaer -
Is ja schön, dass es solche gibt, die meine Rechtschreibung korrigiren... - naja ich hab den Beitrag in 10 minuten geschiben...
OK ich denke auch, dass man es nicht mer mit Tabellen machen sollte. Hab mich bei SELFHTML mal mit dem Tehma befasst http://de.selfhtml.org/css/layouts/mehrspaltige.htm#zweispaltig <--- zweispaltiges Layout http://de.selfhtml.org/css/layouts/anzeige/2spaltig_links.htmaber wie bekomme ich es denn hin, dass ich nun wie mit den Tabellen 4 Felder bekomme, in die ich etwas eintagen kann, wie bei meinem Beispiel http://www.mag-page.lima-city.de/testlayout.htm??? -
Wenn du dich 10 Minuten mit den Grundlagen beschäftigen würdest anstatt in der Zeit X Fehler in einem Beitrag zu setzen und danach noch stolz darauf zu sein hättest deine Frage selbst beantworten können. Falls es dir dann doch zulange dauert kurz danach zu googeln hier ein Artikel dazu: http://www.thestyleworks.de/tut-art/layout_div.shtml
-
Wenn du dich 10 Minuten mit den Grundlagen beschäftigen würdest anstatt in der Zeit X Fehler in einem Beitrag zu setzen und danach noch stolz darauf zu sein hättest deine Frage selbst beantworten können.
warum habe ich auf einmal keine Lust mehr hier weider zu schreiben?????!!!!!!
na egal!...
Ich habe die Seite noch mal mit CSS nachgebaut. http://www.mag-page.lima-city.de/start.html
Nun habe ich noch ein Problem mit der Positionierung. Die Beiden Felder Links und Hauptteil sollen sich an die Bildschirmgröße anpassen. Der abstand zwischen den Feldern (schwarzes Kreuz) und die Felder Bereich für Logo und Sponsoren Bereich sollen so bleiben und sich nicht verändern (Position und Größe)
UND WENN DU WIEDER MEIST ICH HÄTTE MICH NICHT MIT DEM THEMA BESCHÄFTIGT!?
ich hab mich bei Selfhtml erhundigt:
<div style="float:left; width:5em; border:2px solid gray;"> links floatende Box</div> <div style="border:2px solid blue;">nachfolgende Box</div>
Sinngemäß so meine ich das, nur das der Teil, der sich anpassen soll mitten in der Seite beginnt.
CSS und HTML Datei sind als auch als Quelltext im Browser aufrufbar. -
Da <div>-Elemente Block-Elemente sind, passt sich ihre Breite bei statischer Positionierung automatisch an. Hier ein Beispiel wie das ohne absolute Positionierung und mit Hilfe von float aussieht (der Code ist, um Platz zu sparen, gekürzt und in einer Datei zusammengefasst):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Startseite | Reitanlage Böhlitz- Ehrenberg</title> <style type="text/css"> body { padding: 10px; background-color: black; } div { padding: 5px; } #header { width: 200px; height: 150px; background-color: #FFFF99; float: left; } #mainnav { height: 150px; background-color: #FF0000; margin-left: 230px; } #finaeier { width: 200px; height: 300px; background-color: #FFFF00; margin-top: 20px; float: left; } #contents { min-height: 400px; background-color: #0000FF; margin-top: 20px; margin-left: 230px; overflow: auto; } </style> </head> <body> <div id="header">Bereich für Logo</div> <div id="mainnav">Links</div> <div id="finaeier">Sponsoren Bereich</div> <div id="contents">Hauptteil</div> </body> </html>
Ein Problem ist nur, die Höhe der Elemente automatisch anzupassen: die Entwickler des w3c gehen davon aus, dass sich die Elemente an die Größe des Inhalts anpassen, nicht an die des Ausgabefensters. Zwar gibt es die Möglichkeit, mit %-Werten zu arbeiten, diese beziehen sich dann aber auf das gesamte Fenster, spricht mit heigtht: 100%; wäre das Element genau so hoch wie das gesamte Fenster.
Du kannst aber mit min-height zumindest eine Minimalhöhe festlegen, die sich ggf. ändert, wenn mehr Platz benötigt wird (ist im obigen Beispiel zu sehen).
Ein Workarround, um die Größe dynamisch anzupassen ist nur mit Javascript möglich - nicht unbedingt professionell, aber erfüllt seinen Zweck:... <head> ... <script type="text/javascript"> function resize() { document.getElementById('contents').style.height = innerHeight - 230 + 'px'; } </script> </head> <body onload="setInterval('resize()', 500);"> ... -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
