|
|||
@fricca: wer "Buuh!" ruft, muss auch "Du!" (bist dran) vernehmen.
Habe im Moment keine Zeit, hab mich grad am Whitespacebug ausgetobt. @Don: einfach mal anfangen. Ed: hört sich doch ganz gut an. Die Überschrift kommt als h1 daher. Nimm friccas Weg, den Inhalt in einen Container rechts floaten, und lass die beiden Navigationscontainer dann links dran vorbei nach oben fließen. Ich für meinen Teil würde alles noch in einen übergeordneten Container=wrapper umschließen (buuh), damit man das in einem nächsten Schritt dann auf der Seite einfacher zentrieren kann. Ingo |
Sponsored Links |
|
|||
Zitat:
@DonStefano So, wie IChao beschrieben hat, würd' ich's auch machen (einschließlich wrapper ) Stell doch deinen bisherigen Ansatz hier ein - dann gibt's auch konkrete Antworten. Grüße fricca |
Sponsored Links |
|
|||
Danke - dann weiß ich zumindest, dass ich auf dem richtigen Weg bin.
Meinen Code stelle ich gern nachher hier rein. Ich möchte aber gern erst probieren, wie weit ich alleine komme. So lerne ich es am Besten. Wenn ich dann merke, dass ich nicht mehr weiterkomme oder ein bestimmtes Problem habe, poste ich den Code und kann euch konkrete Fragen stellen. Also bis vermutlich in einigen Stunden (bzw. morgen) ... Gruß Stefan |
|
|||
So, ich glaube, ich habe fürs erste das Wichtigste erreicht.
Zuerst einmal der Code. Danach findet ihr Links zum direkten ansehen des Ergebnisses und noch ein paar kleine Fragen: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>Erster Versuch mit CSS</title> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- body {background-color:#D8D8D8; margin: 0; padding: 0; font: 85% arial, hevetica, sans-serif; color: black;} h1 { color:black; font-size:1.8em; font-family:Arial,hevetica,sans-serif; text-align:left; font-weight:bold} h2 { color:darkred; font-size:1.2em; font-family:Arial,hevetica,sans-serif; text-align:center; font-weight:bold} #header /*ist fuer die Ueberschrift da*/ { margin:0.1em auto; width:760px; height:30px; text-indent:140px; background-color: white; } #container /*enthaelt dann alle weiteren Boxen*/ { margin:0.1em auto; width:760px; height:600px; text-align:left; background-color: red; } #inhalt /*der eigentliche Inhalt der Seite*/ { border-width:1px; border-color:darkred; border-style:solid; float:right; width:620px; margin: 0; padding: 0; height:550px; background-color: white; } #menu_geruest /*ein "Wrapper", der dann die beiden einzelnen, voneinander abzugrenzenden Menus enthalten soll */ { margin-right:620px; height: 450px; padding-right:15px; background-color: yellow; } #menu1 /*der erste Menublock, der links oben erscheinen soll*/ { border-width:1px; border-color:darkred; border-style:solid; height: 200px; padding: 0 1em; background-color: blue; } #menu2 /*der zweite Menublock, der links unter dem ersten Menublock erscheinen soll*/ { border-width:1px; border-color:darkred; border-style:solid; margin-top:10px; height: 200px; padding: 0 1em; background-color: green; } #footer /*enthaelt Link zum Impressum und Copyrighthinweis*/ { margin:0.1em auto; width:760px; height:30px; text-indent:140px; background-color: white; } /* ... bis hierher werden die Formate also definiert ... */ --> </style> </head> <body> <div id="header"><h1>www.profilingportal.de</h1></div> <div id="container"> <div id="inhalt">Inhalt der Seite</div> <div id="menu_geruest"> <div id="menu1"></div> <div id="menu2"></div> </div> <div id="footer">Footer</div> </div> </body> </html> Und hier noch einmal die Vorlage ohne CSS (mit Tabellen). Das kann sich doch für den Anfang schon sehen lassen, oder ? Ohne eure Tipps hätt ich das so allerdings nicht hinbekommen (mit dem nach rechts floaten des Inhalts). Nun aber noch mal einige Fragen: 1. Wie kann ich in dem obigen Code die px-Angaben durch em-Angaben ersetzen? (also mit welchem Faktor muss ich das umrechnen?) 2. Gibt es in dem Code jetzt noch Fehler oder etwas nicht optimales, so dass es bei einigen Browsern falsch dargestellt wird? Bei Internet Explorer 6.0.2 und Firefox 0.8 klappt es bei mir. Brauche ich trotzdem noch Browserweichen oder sonstiges, um den Code zu verbessern? 3. Was passiert in geringeren Auflösungen (800x600) oder bei größerer Schrift? Quillt der Text dann u.U. aus den Boxen heraus? 4. Und das letzte große Problem: Wie bekomme ich nun in meine beiden Menus auf der linken Seite, so wie in der Vorlage zu sehen, jeweils oben eine dunkelrote "Überschriften-Zelle" hin, in der die Überschriften "Menu" und "Login" in weißer Schrift stehen ? Muss ich dazu noch 2 weitere Boxen definieren, und diese dann jeweils in die beiden Menuboxen einfügen. Denn dann hätte ich ja schon eine Box, in einer Box, in einer Box, in einem Hauptcontainer. Das klingt sehr verschachtelt, ich weiß aber nicht ob das etwas ausmacht oder ich das so machen sollte. Danke für weitere Hilfe vorab und viel Spaß auch allen Anfängern beim herumprobieren mit dem obigen Code. Stefan |
|
|||
zu1: Wenn du folgenden code am anfang deiner css-datei hinterlegst, dann werden al em-angaben 1:1.
Code:
body { font-size: 62.5% /* dadurch werden 1em = 10px */ } Points Pixels Ems Percent 6pt 8px 0.5em 50% 7pt 9px 0.55em 55% 7.5pt 10px 0.625em 62.5% 8pt 11px 0.7em 70% 9pt 12px 0.75em 75% 10pt 13px 0.8em 80% 10.5pt 14px 0.875em 87.5% 11pt 15px 0.95em 95% 12pt 16px 1em 100% 13pt 17px 1.05em 105% 13.5pt 18px 1.125em 112.5% 14pt 19px 1.2em 120% 14.5pt 20px 1.25em 125% 15pt 21px 1.3em 130% 16pt 22px 1.4em 140% 17pt 23px 1.45em 145% 18pt 24px 1.5em 150% 20pt 26px 1.6em 160% 22pt 29px 1.8em 180% 24pt 32px 2em 200% 26pt 35px 2.2em 220% 27pt 36px 2.25em 225% 28pt 37px 2.3em 230% 29pt 38px 2.35em 235% 30pt 40px 2.45em 245% 32pt 42px 2.55em 255% 34pt 45px 2.75em 275% 36pt 48px 3em 300% oder als Date zum download: http://www.bueltge.de/wk-referenz-webdesign/12/ Gruss Frank |
|
|||
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>Das Profiling-Portal</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <meta name="author" content="Don Stefano"> <style type="text/css"> body { margin: 0; padding: 0; text-align: center; font: 1em arial, helvetica, sans-serif; /*hel... */ color: black; background: #D8D8D8; } #container { width: 40em; margin: 0 auto 0 auto; padding: 0.5em 0; text-align: left; background: red; } h1 { text-align: center; background-color: white; } h1, h2, h3 { margin: 0.5em 0; font-weight: normal; } #inhalt { float: right; width: 30em; margin: 0; padding: 0; background: white; border: 1px solid darkred; } #inhalt p { margin: 0 0 0.5em 0.5em; padding: 0; } #menu_geruest { width: 9em; background: yellow; } #menu_geruest h3 { color: white; background: maroon; margin-top: 0; padding: 0.25em 0 0.25em 0.25em; } #menu1, #menu2 { height: 10em; background: blue; border: 1px solid darkred; } #menu2 { margin-top: 1em; background: green; } #footer { clear: both; text-align: center; background: white; } </style> </head> <body> <div id="container"> <h1>Das Profiling-Portal</h1> <div id="inhalt"> <h2>Inhalt der Seite</h2> und so weiter</p> und so fort</p> </div> <div id="menu_geruest"> <div id="menu1"> <h3>menu</h3> </div> <div id="menu2"> <h3>login</h3> </div> </div> <div id="footer">Footer</div> </div> </body> </html> Der einzige strukturelle Unterschied ist, dass ich den kompletten Seiteninhalt in den container gestellt habe. Die h1 braucht keinen eigenen div. Versuch nicht immer, für Alles und Jedes eine Höhe zu definieren, lass es einfach fließen. Es gibt natürlich immer viele Pfade nach Rom, manche sind ausgetreten, andere steinig. Es ist nur ein Vorschlag. Auch: Eine webadresse ist keine Überschrift, dass ist soo 90er. Schreib doch mal rein, worum es sich auf deiner Seite dreht, übernimm es für die SEO in den <title>, und google ist deine Freundin. ("Das Profiling-Portal - Die psychologische Testkompetenz") Der Sherlock Holmes schielt mir zu sehr, er sollte seinen Monitor-Augenabstand überprüfen. Am Inhalt fehlt mir der Hinweis, warum ich mein Potential kennen lernen soll, warum eine bessere Testkompetenz mir hilft, mein Leben zu genießen oder so. Viel Spaß Ingo |
|
||||
Zitat:
Zum Testen solltest du dir einige gebräuchliche Browser installieren - auch einige ältere Versionen. Hier gibt's eine Sammlung auch älterer Browserversionen (auch Standalone IEs): http://browsers.evolt.org/ Zitat:
Zitat:
Code:
<h3>Menü-Überschrift</h3> <ul>[*]Link1 ..[/list] Zitat:
Grüße fricca edit: IChaos Posting hatte ich noch nicht gesehen... |
|
|||
Zitat:
Robin |
|
|||
Zitat:
Es dient nur dem verständniss beim Layouten. Man kann sich einfach mehr darunter vorstellen, wenn man in px denkt. Aber da hat auch sicher jeder seine eigene Ansicht und Arbeitsweise. Gruss Frank |
Sponsored Links |
|
|||
Vielen Dank für die weiteren Tipps. Das hilft mir schon einmal wieder weiter.
Nun kann ich px in em umrechnen und weiß auch wie ich in den Menus die Beschriftung farbig hinbekomme ohne weitere Boxen zu definieren. Zu IChaos Hinweisen: Das mit der Webadresse als erster Überschrift würde ich gerne lassen, weil man später auch über Unterseiten, die sich inhaltlich mit Testverfahren beschäftigen die Seiten hoffentlich findet. Und die URL sollte sich als eine Art "Marke" dann schon einprägen. Daher sollte sie auch immer über dem Container stehen. (ist vermutlich Geschmacksache) Das das inhaltlich nicht viel Sinn macht ist natürlich richtig. Vielleicht wäre es daher sinnvoll, diese Überschrift nicht als Überschrift zu definieren sondern einfach nur so etwas größer und fett zu formatieren? Die eigentliche Überschrift z.B. "Absolvieren Sie kostenlos Testverfahren" sollte dann in der Inhaltsbox stehen. Darunter das Logo. Dann eine weitere Überschrift, die den Inhalt in einem Satz beschreibt. Dann Text... Den Inhalt dahingehend zu erweitern, dass man schon auf der ersten Seite lesen kann, was man von der Teilnahme hat ist sicherlich eine gute Idee. (Das steht bislang nur in den FAQ). Der Inhalt wird aber eh noch mal überarbeitet und für einige Suchbegriffe zugeschneidert, bei denen man meine Seite dann hoffentlich findet. Ich hoffe ich schaffe das heute oder spätestens morgen und stelle es dann auch gern noch mal vor. Zitat:
Diese Box soll nur dann höher sein, wenn entsprechend viel Inhalt drinsteht (geht das bei em eh automatisch so)? Oder was passiert wenn ich eine Höhe angebe und dann mehr Text eingebe, als in diese Höhe passt? |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
CSS Einsteigerfragen zu "div class/id" | eastfrisian | CSS | 10 | 17.01.2008 13:39 |