Dynamisches Webseiten Design
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
anpassen
auslese
beispiel
berechnen
bildschirm
boxen
code
dank
design
dynamisches design
element
file
glauben
http
klappen
nehmen
problem
tip
trick
url
-
Hallo, ich habe gerade den Versuch gestartet ein Dynamisches CSS Design zu erstellen, je nachdem wie Hoch/Breit der Bildschirm ist:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Der Wurf</title> <style id="style" type="text/css"> body { width: 100%; height: 100%; padding: 0px; margin: 0px; } .Deafult_Header{ position:absolute; left: 0px; top: 0px; width: 100%; height: 70px; color: white; padding: 5px; background:-moz-linear-gradient(bottom,#2b7ce7,#0957be); /* Firefox */ background:-webkit-gradient(linear,left top,left bottom,from(#2b7ce7),to(#0957be)); /* Chrome, Safari */ filter: progid:DXImageTransform.Microsoft.gradient(start Colorstr='#2b7ce7',endColorstr='#0957be'); /* Internet Explorer */ box-shadow: 0px 1px 2px black; } .Settings{ background-color: #f4f0ea; position:absolute; left: 0px; top: 82px; width: 100%; height:100px; font-size: 20px; padding: 10px; } .Canvas_Box{ background-color:white; position:absolute; left: 0px; top: 205px; width: 100%; padding: 20px; text-align: center; } .Bottom_Box{ background-color: #3c495b; position:absolute; left: 0px; bottom: 0px; width: 100%; height: 20px; font-size: 20px; padding: 20px; } </style> <script type="text/javascript"> function box_scale(){ var Canvas_Box = screen.height - 403; var Canvas_Height = Canvas_Box - 50; document.getElementById('Canvas_Box').setAttribute('style', 'height:'+Canvas_Box+'px;') document.getElementById('Diagramm').setAttribute('height', Canvas_Height) } </script> </head> <body onload="box_scale();"> <div class="Deafult_Header">Der Wurf</div> <div class="Settings"> <table align="center" cellpadding="5px"> <tr> <td width="200" align="center">Anfangsgeschwindigkeit</td> <td width="200" align="center">Winkel</td> <td width="200" align="center">Anfangshöhe</td> <td width="200" align="center">Planet</td> </tr> <tr> <td width="200" align="center"><input name="Anfangsgeschwindigkeit" type="text"></input></td> <td width="200" align="center"><input name="Winkel" type="text"></input></td> <td width="200" align="center"><input name="Anfangshöhe" type="text"></input></td> <td width="200" align="center"><span onmouseover="alert(1);">Erde</span></td> </tr> <tr><td><button>Start</button></td></tr> </table> </form> </div> <div id="Canvas_Box" class="Canvas_Box"><canvas class="canvas" id="Diagramm" width="940" style="border: 3px solid black"></div> <div class="Bottom_Box"></div> </body>
Die JS-Funktion box_scale() fügt ein Attribut hinzu. Zu meinen Problemen:
Die Abstände der Boxen sind für mich alle unlogisch. Ich habs nur mit ausprobieren hinbekommen. Die höhe des Headers ist 70, dann müsste doch top von der nächsten Box auch 70 sein, also der Abstand von oben. Wie gesagt, alles komische Abstände, wegen dem ausprobieren, kann mir jemand erklären wieso?
Das zweite problem ist, ich hab alle Boxen bei der Breite auf 100%, aber trotzdem sind alle verschieden lang und nicht 100%.
Den Canvas wollte ich auch Dynamisch, bekomms aber nicht hin, eig einfach Padding von der Canvasbox auf 20px, also überall am Rand endlang mit 20px Abstand sollte eig der Canvas sein, egal wie der Bildschirm ist. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Ein wenig mehr Struktur wäre gut^^ Ich weiß nicht direkt was das Problem ist.
Also: 100% bedeutet, dass 100% vom Parent ausgefüllt wird. Wenn also heißt:
<div style="height:10px;width:30px;"><div style="height:100%; width:100%;"></div></div>
ist auch die interne Box 30*10px groß. Die relative Größe orientiert sich immer am Parent.
Und: Padding addiert sich zur Boxgröße dazu:
<div style="height:50px;width:50px;padding:50px;"></div>
Diese Box ist tatsächlich 150*150px groß. Weil 50px an jeder Seite der 50*50px großen Box dazu kommt. Das ist doof, aber wichtig zu wissen.
Könntest du sonst das "problem" noch ein wenig genauer beschreiben? Oder vllt eine HTML auf deiner Seite zur Verfügung stellen, die das Bild zeigt?
An sich, mein Tipp, solltest du vllt nicht relative Größen nutzen, sondern die Größen lieber mit Javascript nachberechnen. Das ist, finde ich, leichter.
Liebe Grüße -
War zwar jemand schneller, aber dennoch:
Zunächst mal hast du keinen eindeutigen Doctype, so weiss kein Browser der Welt, was er wie darstellen soll. Alle Browser schalten so in einen Kompatibilitätsmodus. Dadurch kann es vorkommen, das dir einige CSS und HTML Elemente nicht zur Verfügung stehen.
100% heisst nicht, dass es über die volle Bildschirmbreite gehen muss. Es heisst nur, das der Inhalt in 100% Breite angezeigt wird. In der Höhe ist es ebenso. Du musst also irgendwo feste Breiten definieren, die Höhen ergeben sich immer automatisch und hängen vom Inhalt ab. Man kann aber auch mindest Höhen und mindest Breiten festlegen. -
ggamee schrieb:
Ein wenig mehr Struktur wäre gut^^ Ich weiß nicht direkt was das Problem ist.
Also: 100% bedeutet, dass 100% vom Parent ausgefüllt wird. Wenn also heißt:
<div style="height:10px;width:30px;"><div style="height:100%; width:100%;"></div></div>
ist auch die interne Box 30*10px groß. Die relative Größe orientiert sich immer am Parent.
Und: Padding addiert sich zur Boxgröße dazu:
<div style="height:50px;width:50px;padding:50px;"></div>
Diese Box ist tatsächlich 150*150px groß. Weil 50px an jeder Seite der 50*50px großen Box dazu kommt. Das ist doof, aber wichtig zu wissen.
Könntest du sonst das "problem" noch ein wenig genauer beschreiben? Oder vllt eine HTML auf deiner Seite zur Verfügung stellen, die das Bild zeigt?
An sich, mein Tipp, solltest du vllt nicht relative Größen nutzen, sondern die Größen lieber mit Javascript nachberechnen. Das ist, finde ich, leichter.
Liebe Grüße
Danke, Doctype ist jetzt drinnen, hab ich total vergessen.
Link: https://dl.dropbox.com/u/23477673/183645.html
Einmal nach rechts scrollen: Die Boxen sind nicht 100%, Body hab ich ja auf 100% gesetzt, von da her sollte es eig gehen, oder bin ich da falsch? Ging zumindest mal, aber mit den ganzen Sachen, die ich hinzugefügt habe jetzt nicht mehr.
Der Canvas sollte sich auch am Fenster anpassen.
Beitrag zuletzt geändert: 17.1.2013 22:47:34 von c143 -
Arbeite mal ohne Body, das machts leichter:
<body> <div style="position: absolute;top:0px;left:0px;width:100%;height:100%;"> <!-- deine seite --> </div> </body>
Den Body nicht stylen. Das hat den Vorteil, dass diese Box, die da jetzt drum wäre, wirklich 100% von allem einnimmt, und wirklich alles einnimmt. Daran könntest du dich orientieren. So sollte das besser klappen.
Liebe Grüße -
ggamee schrieb:
Arbeite mal ohne Body, das machts leichter:
<body> <div style="position: absolute;top:0px;left:0px;width:100%;height:100%;"> <!-- deine seite --> </div> </body>
Den Body nicht stylen. Das hat den Vorteil, dass diese Box, die da jetzt drum wäre, wirklich 100% von allem einnimmt, und wirklich alles einnimmt. Daran könntest du dich orientieren. So sollte das besser klappen.
Liebe Grüße
Hab ich probiert, immernoch das gleiche. -
Weil deine inneren Boxen auch größer als 100% sind ...
Nehmen wir als Beispiel deine Default_Header CSS Klasse. Die ist 100% + padding 5px breit, also 100% + 10px breit. Dazu kommt, dass ich glaube der box-shadow kommt auch noch dazu.
Denk dran, dass Margin und Padding immer noch auf die Weite dazu kommt, aber erst NACH der Kalkulation. Also sowas nehmen:
<div style="width:100%;" class="parent"> <div class="realcontent" style="margin: 5px;"> content... blah und muh </div> </div>
Dadurch wird das Padding genutzt, wenn es gebraucht wird.
Du kannst das Padding auch mit einem negativen Margin ausgleichen:
<div style="width: 100%;padding:5px;margin: -5px;"></div>
Denn das negative Margin verkleinert die Größe der div. Ist aber eigentlich kein schöner Trick.
Liebe Grüße -
ggamee schrieb:
Weil deine inneren Boxen auch größer als 100% sind ...
Nehmen wir als Beispiel deine Default_Header CSS Klasse. Die ist 100% + padding 5px breit, also 100% + 10px breit. Dazu kommt, dass ich glaube der box-shadow kommt auch noch dazu.
Denk dran, dass Margin und Padding immer noch auf die Weite dazu kommt, aber erst NACH der Kalkulation. Also sowas nehmen:
<div style="width:100%;" class="parent"> <div class="realcontent" style="margin: 5px;"> content... blah und muh </div> </div>
Dadurch wird das Padding genutzt, wenn es gebraucht wird.
Du kannst das Padding auch mit einem negativen Margin ausgleichen:
<div style="width: 100%;padding:5px;margin: -5px;"></div>
Denn das negative Margin verkleinert die Größe der div. Ist aber eigentlich kein schöner Trick.
Liebe Grüße
Wieso klappt es dann, wenn ich zb nur die erste Box nehme?
body { width: 100%; height: 100%; padding: 0px; margin: 0px; } .Deafult_Header{ position:absolute; left: 0px; top: 0px; width: 100%; height: 70px; color: white; padding: 5px; background:-moz-linear-gradient(bottom,#2b7ce7,#0957be); /* Firefox */ background:-webkit-gradient(linear,left top,left bottom,from(#2b7ce7),to(#0957be)); /* Chrome, Safari */ filter: progid:DXImageTransform.Microsoft.gradient(start Colorstr='#2b7ce7',endColorstr='#0957be'); /* Internet Explorer */ box-shadow: 0px 1px 2px black; }
Dann geht sie schön bis zum Rand und fertig. Wenn sich das immer dazuadiert ist das doch völlig blöde. Ich hab mal gelesen es gibt die calc Funktion in CSS, aber will bei mir nicht funktionieren. Gibt es dann eine elegante lösung für ein Dynamisches Design? -
Bei mir geht der default_header schon zu weit, der ist schon außerhalb des Bildschirmes.
Entweder du kennst die ganzen CSS Tricks, um Designs immer passend zu Strukturieren, mit margins und Paddings, parent und child Elemente usw. Oder du benutzt eine Javascriptfunktion um die größen dynamisch zu berechnen. Da kannst du die Bildgröße auslesen mittels
undwindow.innerHeight
auslesen, und entsprechend deine Boxen berechnen. Das geht immer. Aber um die doofen Padding und Margin Eigenschaften wirst du nicht herum kommen.window.innerWidth
Es braucht Übung mit Paddings und Margins um zu können, ich glaube das solltest du vorher mal in Angriff nehmen.
Liebe Grüße -
ggamee schrieb:
Bei mir geht der default_header schon zu weit, der ist schon außerhalb des Bildschirmes.
Entweder du kennst die ganzen CSS Tricks, um Designs immer passend zu Strukturieren, mit margins und Paddings, parent und child Elemente usw. Oder du benutzt eine Javascriptfunktion um die größen dynamisch zu berechnen. Da kannst du die Bildgröße auslesen mittels
undwindow.innerHeight
auslesen, und entsprechend deine Boxen berechnen. Das geht immer. Aber um die doofen Padding und Margin Eigenschaften wirst du nicht herum kommen.window.innerWidth
Es braucht Übung mit Paddings und Margins um zu können, ich glaube das solltest du vorher mal in Angriff nehmen.
Liebe Grüße
Das alles sind Übungen. Ohne JS kann man doch garkein Dynamisches Design machen, oder wie soll das mit 'CSS Tricks' gehen? Naja.. Danke für die Tips, ich Versuch später mal weiter. -
c143 schrieb:
Ohne JS kann man doch garkein Dynamisches Design machen, oder wie soll das mit 'CSS Tricks' gehen?
Natürlich geht das (zumindest in aktuellen Browsern, ansonsten hilft Javascript). Das Stichwort heißt "Responsive Design". Lies dich da mal ein wenig ein. -
fatfreddy schrieb:
c143 schrieb:
Ohne JS kann man doch garkein Dynamisches Design machen, oder wie soll das mit 'CSS Tricks' gehen?
Natürlich geht das (zumindest in aktuellen Browsern, ansonsten hilft Javascript). Das Stichwort heißt "Responsive Design". Lies dich da mal ein wenig ein.
Laut Wikipedia<head> <link rel="stylesheet" type="text/css" href="css/all.css" /> <link rel="stylesheet" type="text/css" media="all and (max-device-width: 480px)" href="css/smartphones.css" /> </head>
Einfach das css file zb bei nem Smartphone ändern, das kenn ich schon, aber ich wills ja an die Bildschirmgrösse anpassen. -
c143 schrieb:
Laut Wikipedia<head> <link rel="stylesheet" type="text/css" href="css/all.css" /> <link rel="stylesheet" type="text/css" media="all and (max-device-width: 480px)" href="css/smartphones.css" /> </head>
Einfach das css file zb bei nem Smartphone ändern, das kenn ich schon, aber ich wills ja an die Bildschirmgrösse anpassen.
Eventuell solltest Du Google etwas genauer befragen, wwenn Du das, was in der Wikipedia steht, schon kennst und damit nicht weiterkommst.
Bevor Du nichts findest, hier etwas Lesestoff:
Responsive Design Tutorials
Responsive Design Beispiele
Beitrag zuletzt geändert: 20.1.2013 20:17:15 von fatfreddy -
fatfreddy schrieb:
c143 schrieb:
Laut Wikipedia<head> <link rel="stylesheet" type="text/css" href="css/all.css" /> <link rel="stylesheet" type="text/css" media="all and (max-device-width: 480px)" href="css/smartphones.css" /> </head>
Einfach das css file zb bei nem Smartphone ändern, das kenn ich schon, aber ich wills ja an die Bildschirmgrösse anpassen.
Eventuell solltest Du Google etwas genauer befragen, wwenn Du das, was in der Wikipedia steht, schon kennst und damit nicht weiterkommst.
Bevor Du nichts findest, hier etwas Lesestoff:
Responsive Design Tutorials
Responsive Design Beispiele
Ich dachte das ist alles was du meinst, css Files tauschen, deshalb wärs auch unnötig wenn ich weiter google, aber da es anscheinend ja noch mehr ist, werd ich weiterlesen, danke. -
Vlt solltest du dir auch mal CSS Frameworks ansehen.
Welches ich gerne verwende ist Bootstrap von Twitter (http://twitter.github.com/bootstrap/) -
c143 schrieb:
yo mey! die zeiten sind vorbei!
..., aber ich wills ja an die Bildschirmgrösse anpassen.
ich habe es tatsächlich gesehen! 1x1 pixel bildschirm! ähhhmmmm!? ob das jetzt ein fehler oder ein feature ist, lassen wir in der luft hängen!
ich bin der meinung, du kannst nicht jeden demnach bedienen, was er hat! du solltest dich an die statistiken richten, was üblich ist.
mein bildschirm ist unüblich und hat die 'ausmaße' von (BxH): 3200 x 1080. wie willst du dich da anpassen, un vor allem warum? auf meinem bildschirm sieht deine seie eh anständig aus, nur ...
hast du schon auf der seite nach '<form' auch gesucht? ('</form' ist ja vorhanden ;) -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
