zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Einige Einsteigerfragen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #11 (permalink)  
Alt 26.07.2005, 22:28
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

@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
Mit Zitat antworten
Sponsored Links
  #12 (permalink)  
Alt 26.07.2005, 23:06
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von IChao
@fricca: wer "Buuh!" ruft, muss auch "Du!" (bist dran) vernehmen.
Wie meinen


@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
Mit Zitat antworten
Sponsored Links
  #13 (permalink)  
Alt 26.07.2005, 23:43
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.04.2005
Beiträge: 30
Don Stefano befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #14 (permalink)  
Alt 27.07.2005, 02:43
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.04.2005
Beiträge: 30
Don Stefano befindet sich auf einem aufstrebenden Ast
Standard

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>
Das Ergebnis dieser Formatierung sehr ihr hier mit farbigen Boxen und hier so wie es eigentlich werden soll.

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
__________________
Viele Grüße
Euer Don
http://www.profilingportal.de
Mit Zitat antworten
  #15 (permalink)  
Alt 27.07.2005, 09:50
Benutzer
neuer user
 
Registriert seit: 24.05.2004
Beiträge: 40
malo.conny befindet sich auf einem aufstrebenden Ast
Standard

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 */
}
ansonsten hilft dir vielleicht folgende Übersicht:
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
Mit Zitat antworten
  #16 (permalink)  
Alt 27.07.2005, 10:52
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

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>
Du findest meinen Vorschlag weiter oben. Ich vermeide hier mal px-Angaben, lass einfach den Nutzer bestimmen, wie groß er es gern hätte. Ich hab es erst einmal farbig gelassen.

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
Mit Zitat antworten
  #17 (permalink)  
Alt 27.07.2005, 11:08
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von Don Stefano
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?
Der IE5 braucht für's horizontale Zentrieren ein text-align:center in body.
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:
3. Was passiert in geringeren Auflösungen (800x600) oder bei größerer Schrift? Quillt der Text dann u.U. aus den Boxen heraus?
Ja, wenn du die Größen der Boxen nicht in em angibst. Ausprobieren kannst du's, wenn du im FF die Schrift vergrößerst bzw. das Fenster verkleinerst...

Zitat:
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 ?
Bitte überleg nochmal genau, wo du tatsächlich ein div-Element brauchst. Das um die h1-Überschrift herum kann weg und für die Menüs brauchst du auch nicht unbedingt welche - #menu_geruest genügt.
Code:
<h3>Menü-Überschrift</h3>
<ul>[*]Link1
   ..[/list]
Zitat:
Muss ich dazu noch 2 weitere Boxen definieren, und diese dann jeweils in die beiden Menuboxen einfügen.
Wozu sollten diese (div-)Boxen gut sein? Du hast doch deine Überschriften schon. Den Rahmen um die Menüpunkte gibst du dem ul-Element der Menüliste - diese sind dann auch "Boxen"

Grüße
fricca

edit: IChaos Posting hatte ich noch nicht gesehen...
Mit Zitat antworten
  #18 (permalink)  
Alt 27.07.2005, 12:05
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.03.2004
Beiträge: 1.838
RoToRa wird schon bald berühmt werden
Standard

Zitat:
Zitat von malo.conny
12pt 16px 1em 100%
Das ist mit Verlaub gesagt Schwachsinn. Da die Größen vom "em" and "pt" von den jeweilen Benutzereinstellungen, dem Betriebssystem, dem Monitor, etc. abhängen keine eine solche Gleichstellung nicht erfolgen.

Robin
Mit Zitat antworten
  #19 (permalink)  
Alt 27.07.2005, 13:49
Benutzer
neuer user
 
Registriert seit: 24.05.2004
Beiträge: 40
malo.conny befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Das ist mit Verlaub gesagt Schwachsinn.
An sich richtig, aber das soll und ist auch keine Gleichstellung!
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
Mit Zitat antworten
Sponsored Links
  #20 (permalink)  
Alt 27.07.2005, 17:34
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.04.2005
Beiträge: 30
Don Stefano befindet sich auf einem aufstrebenden Ast
Standard

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:
Versuch nicht immer, für Alles und Jedes eine Höhe zu definieren, lass es einfach fließen.
Ja das ist auch ein guter Hinweis. Allerdings möchte ich des einheitlichen Erscheinungsbildes wegen gern, dass die Inhaltsbox immer eine bestimmte MIndesthöhe hat (z.B. 500px - k.A. was das wieder in em ist).

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?
__________________
Viele Grüße
Euer Don
http://www.profilingportal.de
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
CSS Einsteigerfragen zu "div class/id" eastfrisian CSS 10 17.01.2008 13:39


Alle Zeitangaben in WEZ +2. Es ist jetzt 19:51 Uhr.