nicht angemeldet
Matthias Apsel
Matthias Apsel
Matthias Apsel
Matthias Apsel
Matthias Apsel
Matthias Apsel
Guten Abend! ;-)
Ich hänge leider mal wieder bei einer Aufgabe:
Mein bisheriger Stand:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" >
<title>Aufgabe 3</title>
<style type="text/css">
#header
{
height: 150px; text-align: center;
}
#navigation
{
width: 200px;
}
#content
{
}
#footer
{
height: 50px; text-align: center;
}
* { border-color: grey; border-width: 1px; border-style: dashed; }
</style>
</head>
<body>
<div id="header">Header</div>
<div id="navigation">Navigation</div>
<div id="content">Content</div>
<div id="footer">Footer</div>
</body>
</html>
Ich habe dazu zwei Fragen:
Vielen Dank für Eure Hilfe!
Gruß
HTML-Newbie
Guten Morgen allerseits,
ich wollte nur kurz Bescheid geben, dass das Thema noch aktuell ist - mir dämmert es leider noch immer nicht.
Hilfe ist also nachwievor willkommen.
Danke
&
Gruß
HTML-Newbie
Hallo,
ich bin hier total am verzweifeln. Am meisten Kopfschmerzen bereitet mir die Breitenanpassung an den verfügbaren Platz! :-(
Mein Code soweit:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" >
<title>Aufgabe 3</title>
<style type="text/css">
#navigation
{
width:200px; float:left;
}
#header
{
height:150px; text-align:center; float:right;
}
#content
{
float:right; clear:right;
}
#footer
{
height:50px; text-align:center; float:right; clear:right;
}
#navigation { border-color: grey; border-width: 1px; border-style: dashed; }
#header { border-color: grey; border-width: 1px; border-style: dashed; }
#content { border-color: grey; border-width: 1px; border-style: dashed; }
#footer { border-color: grey; border-width: 1px; border-style: dashed; }
</style>
</head>
<body>
<div id="header">Header</div>
<div id="navigation">Navigation</div>
<div id="content">Content</div>
<div id="footer">Footer</div>
</body>
</html>
Ich bin für jeden noch so kleinen Tipp nachwievor sehr dankbar.
Gruß
HTML-Newbie
Sorry, ich verstehe Deine Frage nicht...
Welche Breite willst du denn an welchen verfügbaren Platz anpassen? Und in welchem Verhältnis sollen "header", "navigation", "content" und "footer" denn zueinander stehen?
Versuche es mal mit Blindtext, content nach links floaten und bei width mit Prozentangaben. Und dann schaue Dir das Ergebnis mit unterschiedlichen Browsern und Ausgabengeräten an.
Gruß pippo
Om nah hoo pez nyeetz, HTML-Newbie!
Ich habe dazu zwei Fragen:
- Mit welchen Befehlen setzt man die "Anpassung an verfügbaren Platz" vs. "Anpassung an den Inhalt" um?
Es gibt weder in HTML noch in CSS Befehle. Vereinfacht gesprochen: Ohne Vorgaben für Breite und Höhe nehmen Block-Elemente immer die gesamten zur Verfügung stehende Breite ein und die Höhe richtet sich nach dem Inhalt.
Ich würde die Navigation floaten und die drei anderen Elemente in ein gruppierendes packen.
- Wie schafft man es, dass der Rahmen so aussieht wie auf dem Photo (etliche Versuche von mir sind leider fehlgeschlagen und der Stern ist nur ein Platzhalter)?
garnicht, da die Browser die Darstellung (Länge der Striche) etwas anders interpretieren. Schau ins wiki unter border.
Matthias
Hallo Matthias,
erstmal Danke für Deine Antwort.
Ich würde die Navigation floaten und die drei anderen Elemente in ein gruppierendes packen.
Ich denke mal Du meinst damit ein div-Element. Ich habe meinen Code überarbeitet, aber leider haut es noch nicht hin. Es wäre sehr nett, wenn Du mal einen kurzen Blick darauf werfen könntest:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" >
<title>Aufgabe 3</title>
<style type="text/css">
#navigation
{
width:200px; float:left;
}
#gruppe
{
float:right;
}
#header
{
height:150px; text-align:center;
}
#content
{
}
#footer
{
height:50px; text-align:center;
}
#navigation { border-color: grey; border-width: 1px; border-style: dashed; }
#header { border-color: grey; border-width: 1px; border-style: dashed; }
#content { border-color: grey; border-width: 1px; border-style: dashed; }
#footer { border-color: grey; border-width: 1px; border-style: dashed; }
</style>
</head>
<body>
<div id="navigation">Navigation</div>
<div id="gruppe">
<div id="header">Header</div>
<div id="content">Content</div>
<div id="footer">Footer</div>
</div>
</body>
</html>
Wie bekommt man das mit der Breite hin?
Gruß
HTML-Newbie
Om nah hoo pez nyeetz, HTML-Newbie!
Wie bekommt man das mit der Breite hin?
Du hast sicher gemerkt, dass die gefloateten Elemente ohne Breitenangabe nur noch so breit wie der Inhalt sind.
Es braucht nur die Navigation nach links gefloatet werden, die 'gruppe' bekommt nur einen entsprechenden Außenabstand.
Matthias
Hi Matthias,
Wie bekommt man das mit der Breite hin?
Du hast sicher gemerkt, dass die gefloateten Elemente ohne Breitenangabe nur noch so breit wie der Inhalt sind.
Es braucht nur die Navigation nach links gefloatet werden, die 'gruppe' bekommt nur einen entsprechenden Außenabstand.
das ist der aktuelle Stand:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" >
<title>Aufgabe 3</title>
<style type="text/css">
#navigation
{
width:200px; float:left;
}
#gruppe
{
}
#header
{
height:150px; text-align:center;
}
#content
{
}
#footer
{
height:50px; text-align:center;
}
#navigation { border-color: grey; border-width: 1px; border-style: dashed; }
#header { border-color: grey; border-width: 1px; border-style: dashed; }
#content { border-color: grey; border-width: 1px; border-style: dashed; }
#footer { border-color: grey; border-width: 1px; border-style: dashed; }
</style>
</head>
<body>
<div id="navigation">Navigation</div>
<div id="gruppe">
<div id="header">Header</div>
<div id="content">Content</div>
<div id="footer">Footer</div>
</div>
</body>
</html>
Wenn ich nur die navigation floate, wie in diesem Code, dann sieht es so aus:
Ich bin mit meinem Latein am Ende... :-(
Gruß
HTML-Newbie
Om nah hoo pez nyeetz, HTML-Newbie!
Es braucht nur die Navigation nach links gefloatet werden, die 'gruppe' bekommt nur einen entsprechenden Außenabstand.
Ich bin mit meinem Latein am Ende... :-(
Du solltest Postings bis zum Ende lesen. :-P
Matthias
Hallo Matthias,
Es braucht nur die Navigation nach links gefloatet werden, die 'gruppe' bekommt nur einen entsprechenden Außenabstand.
Ich bin mit meinem Latein am Ende... :-(
Du solltest Postings bis zum Ende lesen. :-P
ich lese die Postings aufmerksam, aber neige manchmal dazu, sie leider falsch zu interpretieren...
Ich habe jetzt im Gruppenselektor "float:right;" eingebaut und den float im Navigationselektor gelöscht. Das Gruppenelement ist jetzt aber etwas tiefer als der Navigationsbereich...
Wie meinst du das mit dem Außenabstand?
Nochmals vielen Dank für Deine Hilfe!
Gruß
HTML-Newbie
Om nah hoo pez nyeetz, HTML-Newbie!
Hallo Matthias,
Es braucht nur die Navigation nach links gefloatet werden, die 'gruppe' bekommt nur einen entsprechenden Außenabstand.
Ich habe jetzt im Gruppenselektor "float:right;" eingebaut und den float im Navigationselektor gelöscht.
weil ich geschrieben habe, 'Es braucht nur die Navigation nach links gefloatet werden'?
Das Gruppenelement ist jetzt aber etwas tiefer als der Navigationsbereich...
ja. Works as designt.
Wie meinst du das mit dem Außenabstand?
Was hast du denn bisher im SELFHTML-Wiki über Außenabstände in Erfahrung bringen können?
Matthias
Hi Matthias,
weil ich geschrieben habe, 'Es braucht nur die Navigation nach links gefloatet werden'?
ehrlich: genau deshalb. :-)
Das Gruppenelement ist jetzt aber etwas tiefer als der Navigationsbereich...
ja. Works as designt.
Das leuchtet mir nicht ein... Hat das etwas mit dem Außenabstand zu tun?
Was hast du denn bisher im SELFHTML-Wiki über Außenabstände in Erfahrung bringen können?
Im Prinzip das was hier steht: http://de.selfhtml.org/css/eigenschaften/randabstand.htm
Diverse Experimente mit wie z.B. margin-left:auto; haben nicht zum gewünschten Ergebnis geführt...
Matthias
Gruß
HTML-Newbie
Om nah hoo pez nyeetz, HTML-Newbie!
Das Gruppenelement ist jetzt aber etwas tiefer als der Navigationsbereich...
ja. Works as designt.
Das leuchtet mir nicht ein... Hat das etwas mit dem Außenabstand zu tun?
Nein, float schiebt das Element nach links oder rechts, entfernt es aus dem Textfluss, für nachfolgende Elemente sind gefloatete Elemente praktisch nicht vorhanden, wie du schon sehen konntest (13:32 Uhr). Es schiebt aber keine Elemente nach oben oder unten.
Diverse Experimente mit wie z.B. margin-left:auto; haben nicht zum gewünschten Ergebnis geführt...
Du hast eine Navigation mit einer _festen_ Breite, rechts davon soll sich das Element 'gruppe' befinden. Mit welchem (festen) Außenabstand solltest du experimentieren?
Matthias
Hi Matthias,
Nein, float schiebt das Element nach links oder rechts, entfernt es aus dem Textfluss, für nachfolgende Elemente sind gefloatete Elemente praktisch nicht vorhanden, wie du schon sehen konntest (13:32 Uhr). Es schiebt aber keine Elemente nach oben oder unten.
ich habe jetzt probeweise ein "float:left;" zum Selektor für 'navigation' hinzugefügt und jetzt sind sie auf gleicher Höhe. Ist das so technisch O.K.?
Diverse Experimente mit wie z.B. margin-left:auto; haben nicht zum gewünschten Ergebnis geführt...
Du hast eine Navigation mit einer _festen_ Breite, rechts davon soll sich das Element 'gruppe' befinden. Mit welchem (festen) Außenabstand solltest du experimentieren?
margin-right innerhalb des 'navigation'-Selektor?
Allerdings habe ich es auch damit nicht hinbekommen...
Danke für Deine Geduld!
Matthias
Gruß
HTML-Newbie
Om nah hoo pez nyeetz, HTML-Newbie!
ich habe jetzt probeweise ein "float:left;" zum Selektor für 'navigation' hinzugefügt und jetzt sind sie auf gleicher Höhe. Ist das so technisch O.K.?
floate _nur_ die Navigation.
Du hast eine Navigation mit einer _festen_ Breite, rechts davon soll sich das Element 'gruppe' befinden. Mit welchem (festen) Außenabstand solltest du experimentieren?
margin-right innerhalb des 'navigation'-Selektor?
Allerdings habe ich es auch damit nicht hinbekommen...
Welches Element möchtest du beeinflussen, nachdem die Navigation schon richtig ist?
neuer Versuch.
Matthias
Hallo Matthias,
sorry für die späte Rückmeldung, aber der Router hat am Samstag-Abend seinen Geist aufgegeben und ich habe erst seit gestern wieder Internet...
Ich denke ich habe die Aufgabe jetzt gelöst - zumindest sieht das so aus wie auf dem Bild der Aufgabenstellung.
Es wäre aber sehr nett, wenn Du einen Blick in den Code werfen und Deine Meinung dazu schreiben könntest:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" >
<title>Aufgabe 3</title>
<style type="text/css">
#navigation
{
width:200px; float:left;
border-color: grey; border-width: 1px; border-style: dashed;
}
#gruppe
{
margin-left:12.5em;
}
#header
{
height:150px; text-align:center;
border-color: grey; border-width: 1px; border-style: dashed;
}
#content
{
border-color: grey; border-width: 1px; border-style: dashed;
}
#footer
{
height:50px; text-align:center;
border-color: grey; border-width: 1px; border-style: dashed;
}
</style>
</head>
<body>
<div id="navigation">Navigation</div>
<div id="gruppe">
<div id="header">Header</div>
<div id="content">Content</div>
<div id="footer">Footer</div>
</div>
</body>
</html>
Danke für Deine Hilfe und Geduld!
Gruß
HTML-Newbie
Om nah hoo pez nyeetz, HTML-Newbie!
#navigation { width:200px; ... #gruppe { margin-left:12.5em; }
Welchen Grund gibt es für die Verwendung unterschiedlicher Einheiten?
Matthias
Guten Morgen Matthias,
Welchen Grund gibt es für die Verwendung unterschiedlicher Einheiten?
keinen. :-)
Ich habe die margin-left nun in px angegeben.
Matthias
Gruß
HTML-Newbie