nicht angemeldet
Gunnar Bittersmann
Der Martin
Der Martin
Gunnar Bittersmann
Struppi
Gunnar Bittersmann
apsel
Gunnar Bittersmann
Gunnar Bittersmann
Hallo,
ich habe ein Seite erstellt:
<html>
<head><title>Startseite</title>
<link rel="stylesheet" media="screen" type="text/css" href="darstellung.css">
</head>
<body bgcolor="#C0C0C0" >
<center>
<div lang="de" id="seite" >
<a style="text-decoration:none;" href="/index.html"><img border="0" src="grafiken/logo.gif" id="logo" width="150" height="125" align="left" ></a>
<div id="schrift" ><h1 style="position: relative; top: 0.6em;">Lore ipsum dolor sit amet</h1> </div>
<div id="navi"><p>Navigation</p></div>
</div>
</center>
</body>
</html>
darstellung.css
#seite {
margin-top:1.5%;
margin-bottom: 1%;
width:94%;
background-color:#FFFFFF;
text-align:left;
height: 96.2%
}
#logo { margin-top:0px;
margin-bottom: 0px;
}
#schrift { background-color:#FFFF00;
font-family:'Courier New', monospace;
text-align: center;
height: 125px;
margin-top:0px;
margin-bottom: 0px;
}
#navi { background-color:#C0C0C0;
width: 150px;
position: relative;
margin-top: 0px;
top:0px;
height: 100%;
}
Doch jetzt sieht meine Seite so aus, dass unter dem Logo ein weißer Balken ist, und erst dann meine graue Navigation beginnt.
---------------
' Logo '
' '
' '
---------------
###############
***************
***************
***************
Legende:
* Graue Navigation
Vielen Dank für Antworten schon mal im Voraus!
Gruß,
Fireball
Deine Seite sollte mit einer DOCTYPE Angabe beginnen.
<html>
<head>
Deine Seite sollte als erstes im Head eine charset Angabe als meta Element enthalten.
<title>Startseite</title>
<link rel="stylesheet" media="screen" type="text/css" href="darstellung.css">
Schön dass du ein Stylesheet einbindest.
Plane auch für ein media=print Stilesheet.
</head>
<body bgcolor="#C0C0C0" >
CSS ist für diese Angabe zuständig
<center>
CSS ist dafür zuständig
<div lang="de" id="seite" >
Wenn deine Spache für das ganze Dokument gelten soll, dann bringe diesde Angabe im HTML Element unter.
An dieser Stelle sugerierst du eher, dass deutsch eine sekundäre Sprach insel in deinem Dokument ist.
<a style="text-decoration:none;" href="/index.html"><img border="0" src="grafiken/logo.gif" id="logo" width="150" height="125" align="left" ></a>
nutze deine CSS Datei statt inline Styles.
Nutze CSS statt align
img Elemente brauchen zwingend ein alt Attribut.
<div id="schrift" ><h1 style="position: relative; top: 0.6em;">Lore ipsum dolor sit amet</h1> </div>
Warum dieses überflüssige div Element?
Willst du den Titel ausblenden?
<div id="navi"><p>Navigation</p></div>
Ich vermute, du möchtest hier eine Liste von Links verwenden. Dann nutz auch eine Liste.
</div>
</center>
</body>
</html>
> darstellung.css
...
> Doch jetzt sieht meine Seite so aus, dass unter dem Logo ein weißer Balken ist, und erst dann meine graue Navigation beginnt.
Das kann an dem nicht formatierten <h1> Element liegen.
Wie gesagt: Zuerst die DOCTYPE definieren. Danach gibt es Rat.
Und bitte auch validieren.
mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische
Vielen Dank für deine Antwort!
Also umgesetzt, also meine Seite sieht so aus:
index.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Startseite</title>
<!-- META-Daten -->
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<!-- Styles -->
<link rel="stylesheet" media="screen" type="text/css" href="darstellung.css">
</head>
<body >
<div id="Seite">
<!-- Kopf -->
<div id="kopf">
<img src="grafiken/logo.gif" width="180px" height="135" align="left" alt="Unser Logo" id="logo" >
<h1 id="titel">Meine erste Seite</h1>
</div>
<!-- Kopf Ende -->
<!-- "Zweite Zeile" -->
<div id="Darunter">
<h2>Navigation</h2>
<ul id="navi">
<li class="nav">Navi1</li>
<li>Navi2</li>
</ul>
<div id="Inhalt">
</div>
</div>
<!-- Ende "Zweite Zeile" -->
<div id="fuss">
© Fireball
</div>
</div>
</body>
</html>
und darstellung.css:
body {
color: black; background-color: #C0C0C0;
font-size: 105%;
font-family: Arial,Helvetica,sans-serif;
text-align: center; /* Zentrierung im Internet Explorer */
}
div#Seite {
text-align: left; /* Seiteninhalt wieder links ausrichten */
margin: 1% auto; /* standardkonforme horizontale Zentrierung */
width: 95%;
height: 95.2%;
padding: 0px;
background-color: #ffffff ;
border: 2px ridge black;
}
logo {
margin: 0 0;
}
h1#titel {
position:relative;
top:0;
left:0;
padding-top:0em;
margin: 0 0;
text-align:center;
font-family: 'Courier New', monospace;
font-weight:normal;
background-color: #FFFF00;
height: 135px;
}
div#Darunter {
position:relative;
top:0px;
left:0px;
padding: 0;
margin: 0 0;
text-align:justify;
}
ul#navi {
background-color:#C0C0C0;
list-style-type:none;
padding: 10px;
margin-top: 5;
margin-bottom: 5px;
margin-left: 3px;
margin-right: 3px;
width: 157px;
color: #000000;
}
li#nav:hover {
background-color:#FFFF00;
}
div#fuss {
background-color: #FFFFFF;
font-size: 67%;
width:93.5%;
margin-top: 5;
margin-bottom: 5;
margin-left: 3;
margin-right: 3;
text-align: center;
border: 1px dashed black;
position:absolute;
bottom:4.5%;
}
strong {
font-weight:bold;
}
li#nav {
color: #000000;
}
a#nav {
text-decoration: none;
color: #000000;
}
br#abs-ocss {
visibility:hidden;
}
Doch es treten verschiedene Probleme auf:
1. In Firefox wird mein Logo gar nicht angezeigt (Firefox 3.5.6) (IM Internet Explorer dagegen schon
2. Ich bekomme beim Validieren folgende Meldung:
»»Error Line 27, Column 63: Attribute "ALIGN" is not a valid attribute. »»Did you mean "align"?
»»
»»…f" width="180px" height="135" align="left" alt="Unser logo"
»»
»»You have used the attribute named above in your document, but the »»document type you are using does not support that attribute for this »»element. This error is often caused by incorrect use of the "Strict" »»document type with a document that uses frames (e.g. you must use the »»"Transitional" document type to get the "target" attribute), or by using »»vendor proprietary extensions such as "marginheight" (this is usually »»fixed by using CSS to achieve the desired effect instead).
»»
»»This error may also result if the element itself is not supported in the »»document type you are using, as an undefined element will have no »»supported attributes; in this case, see the element-undefined error »»message for further information.
Viele Grüße
Fireball
@@Fireball:
nuqneH
<div id="Seite">
Dieses 'div' ist wohl überflüssig.
Qapla'
@@Fireball:
nuqneH
<div id="Seite">
Dieses 'div' ist wohl überflüssig.
Qapla'
Nein, denn hättest du dir den Code angeguckt, soll ein weißes "Laken" zentriert werden.
Fireball
PS: Lässt sich das align nicht mir CSS ersetzten???
@@Fireball:
nuqneH
Nein
Vorsicht!
denn hättest du dir den Code angeguckt
Warum ich deinem Code wenig Aufmerksamkeit schenke, hatte ich bereits gesagt.
soll ein weißes "Laken" zentriert werden.
Und dass mit 'html' und 'body' bereits zwei Elemente zur Verfügung stehen, die sich stylen lassen und damit ein allumspannendes 'div' überflüssig machen, auch.
Qapla'
1. Entschuldigung, dass ich so unfreundlich war, du hast recht. Mit html und body kann man die div "Seite" ersetzten
2. Ich habe eine Lösung für das height-Problem: ~~~css
html {height: 100%;}
body {height: 100%;}
Gruß,
Fireball
Und noch eine Lösung:
Mit logo { float: left;}
konnte ich das align="left" im img-Tag ersetzen
Also aus
<img src="grafiken/logo.gif" width="180" height="135" alt="Unser Logo" id="logo" align="left">
#logo { margin: 0 0; }
wurde
<img src="grafiken/logo.gif" width="180" height="135" alt="Unser Logo" id="logo">
#logo { margin: 0 0; float:left; }
Damit ist das Dokument HTML 4.01 Strict konform.
Gruß,
Fireball
Also ich habe jetzt die Seite gehostet:
http://ziegenproblem.ohost.de/testseite.html
Sie ist: 
Die Quelltexte:
testseite.html
darstellung.txt
Und so soll es aussehen:
Endergebnis
Zu den Problemen:
1. Der graue Navigationsstreifen soll bis unten gehen (und bei Änderung der
Fenstergröße mitwachsten/schrupfen)
2. Die (c)-Zeile soll zentriert werden
Ein Art "Vorbild", dass so ähnlich ist:
http://ago.tanfa.co.uk/css/layouts/flexi_floats/
Vielen Dank für Eure Bemühungen schon mal im Voraus:
Fireball
PS: Ich bitte Euch nur produktive Postings hier zu setzten!
@@Fireball:
nuqneH
1. Der graue Navigationsstreifen soll bis unten gehen (und bei Änderung der
Fenstergröße mitwachsten/schrupfen)
„Faux columns“ ist dein Suchbegriff.
2. Die (c)-Zeile soll zentriert werden
Ist sie doch.
PS: Ich bitte Euch nur produktive Postings hier zu setzten!
Threaddrift überlass mal uns.
Qapla'
Das mit den Faux Columns funktioniert nicht, da ich gerne die Hintergundfarbe nicht durch ein Hintergrundbild ersetzten würde.
Viele Grüße
Fireball
Hallo,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
[...]
<img src="grafiken/logo.gif" width="180px" height="135" align="left" alt="Unser Logo" id="logo" >
abgesehen von der Meldung des Validators: "180px" ist kein gültiger Wert für das width-Attribut in HTML. Merke: Der Wert des width-Attributs wird entweder in Pixel angegeben (dann ohne Einheit!), oder in Prozent. In CSS ist dagegen die Angabe einer Einheit (auch px) notwendig.
> 1. In Firefox wird mein Logo gar nicht angezeigt (Firefox 3.5.6) (IM Internet Explorer dagegen schon
Möglicherweise stört sich der Firefox am fehlerhaften width-Attribut und interpretiert es als width="0".
> 2. Ich bekomme beim Validieren folgende Meldung:
> > Error Line 27, Column 63: Attribute "ALIGN" is not a valid attribute. Did you mean "align"?
Diese Fehlermeldung ist sehr, sehr irreführend; ich halte sie für einen Bug des Validators. Der eigentliche Fehler ist: Der angegebene Strict-DOCTYPE kennt kein Attribut 'align'.
> Noch ein Problem tritt auf:
> height: 95%; in darstellung.css funktioniert mit doctype nicht mehr?
Doch, und zwar im Gegensatz zum Quirks Mode (ohne DOCTYPE) sogar korrekt: Eine Höhenangabe in Prozent bezieht sich immer auf die Höhe des Elternelements. Ich sehe in deinem CSS aber keine Höhenangabe für die beiden Vorfahrenelemente von div#seite. Also richtet sich deren Höhe nach ihrem Inhalt.
> Mit was ist es zu ersetzten???
Nicht ersetzen. Ergänze die Höhenangabe für das Elternelement von div#seite und für dessen Elternelement.
So long,
Martin
--
Ich liebe Politiker auf Wahlplakaten.
Sie sind tragbar, geräuschlos, und leicht wieder zu entfernen.
(Loriot, deutscher Satiriker)
Ja, aber mit den 95% sind 95% der Höhe des Teils, der im Browser die Webseite anzeigt. Also z.B.: im Vollbildmodus die Höhe des Bildschirm. Und diese möchte ich ja nicht mit Javascript feststellen.
Gruß,
Fireball
Hallo,
Ja, aber mit den 95% sind 95% der Höhe des Teils, der im Browser die Webseite anzeigt.
nein, eben nicht. Die Lösung hast du ja, wie du selbst berichtest, inzwischen gefunden.
Tatsächlich hattest du diese Element-Hierarchie:
<html>
<body>
<div>
</div>
</body>
</html>
Für das div-Element hattest du eine Höhe von 95% angegeben, das bedeutet: 95% der Höhe von body. Aber body hatte keine Angabe für height, damit gilt als Default height:auto, und das heißt, das Element ist exakt so hoch wie sein Inhalt.
Nur beim html-Element, das ja kein Elternelement mehr hat, bezieht sich eine Höhenangabe stattdessen auf die Höhe des Browserfensters.
Also z.B.: im Vollbildmodus die Höhe des Bildschirm.
Nein. Der Bildschirm ist für dich als Autor sowieso nicht zugänglich; du kannst nur innerhalb des Browserfensters agieren (ja, es gibt das screen-Objekt in JS, es ist aber relativ nutzlos).
Ciao,
Martin
Hallo,
noch eine Frage zu meinem Code:
Bis jetzt ist meine Navigation (also die DIV "Darunter") so groß, wie der Inhalt. Wie aber kann ich diese so groß "aufziehen", dass sie bis zum unteren Rand der DIV "Seite" reicht?
Viele Grüße
Fireball
Bis jetzt ist meine Navigation (also die DIV "Darunter") so groß, wie der Inhalt. Wie aber kann ich diese so groß "aufziehen", dass sie bis zum unteren Rand der DIV "Seite" reicht?
html,body {height:100%}
mfg Beat
Bis jetzt ist meine Navigation (also die DIV "Darunter") so groß, wie der Inhalt. Wie aber kann ich diese so groß "aufziehen", dass sie bis zum unteren Rand der DIV "Seite" reicht?
html,body {height:100%}
mfg Beat
Hab ich gemacht, ändert aber nichts!
Hier mein Code
index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Startseite</title>
<!-- META-Daten -->
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<!-- Styles -->
<link rel="stylesheet" media="screen" type="text/css" href="darstellung.css">
</head>
<body >
<!-- Kopf -->
<div id="kopf">
<img src="grafiken/logo.gif" width="180" height="135" alt="Unser Logo" id="logo" >
<h1 id="titel">Startseite</h1>
</div>
<!-- Kopf Ende -->
<!-- "Zweite Zeile" -->
<div id="darunter">
<div id="navigation">
<h2>Navigation</h2>
<ul id="navi">
<li class="nav">Navi1</li>
<li>Navi2</li>
</ul>
</div>
<div id="Inhalt">
</div>
</div>
<!-- Ende "Zweite Zeile" -->
<div id="fuss">
© Fireball
</div>
</body>
</html>
dastellung.css
html {
color: black; background-color: #C0C0C0;
font-size: 105%;
font-family: Arial,Helvetica,sans-serif;
height: 98%;
text-align: center; /* Zentrierung im Internet Explorer */
}
body {
text-align: left;/* Seiteninhalt wieder links ausrichten */
margin: 1% auto;/* standardkonforme horizontale Zentrierung */
width: 95%;
height: 95.2%;
padding: 0px;
background-color: #ffffff ;
border: 2px ridge black;
overflow: auto;
}
#kopf {
background-color: #FFFF00;
height: 135px;
}
#logo {
margin: 0 0;
float:left;
}
h1#titel {
position:relative;
top:0.6em;
left:0px;
padding-top:0em;
margin: 0 0;
text-align:center;
font-family: 'Courier New', monospace;
font-weight:normal;
}
div#navigation {
position:relative;
top: 0px;
bottom: 0px;
left:0px;
text-align:justify;
background-color:#C0C0C0;
height: 100ex;
padding: 10px;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 3px;
margin-right: 3px;
width: 157px;
color: #000000;
}
ul#navi {
list-style-type:none;
padding: 10px;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 3px;
margin-right: 3px;
width: 140px;
color: #000000;
}
.nav:hover {
background-color:#FFFF00;
}
div#fuss {
background-color: #FFFFFF;
font-size: 67%;
width:93.5%;
text-align: center;
border: 1px dashed black;
position:absolute;
bottom:4%;
}
strong {
font-weight:bold;
}
li#nav {
color: #000000;
}
a#nav {
text-decoration: none;
color: #000000;
}
.abs-ocss {
visibility:hidden;
}
Und so soll es aussehen:
http://www.imgbox.de/?img=m23636x122.png
Vielen Dank für Eure bisherige Mühe und auch schon mal 'Danke' im Vorraus!
Fireball
html,body {height:100%}
Hab ich gemacht, ändert aber nichts!
Doch das tut es, und zwar gegenüber dem Code, den welcher im Parent-Posting deiner Frage stand.
Tut mir leid. habe anderes zu tun...
mfg Beat
html,body {height:100%}
Hab ich gemacht, ändert aber nichts!Doch das tut es, und zwar gegenüber dem Code, den welcher im Parent-Posting deiner Frage stand.
Tut mir leid. habe anderes zu tun...
mfg Beat
Tut mir Leid. Ich verstehe das nicht.
Wenn ich nun sage
div#navigation {position: relative; top: 0px; bottom 0px; width 135px; }
wird meine DIV trotzdem nicht aufgezogen. Was mache ich falsch?
Gruß,
Fireball
Wenn ich nun sage
div#navigation {position: relative; top: 0px; bottom 0px; width 135px; }
wird meine DIV trotzdem nicht aufgezogen. Was mache ich falsch?
Du missverstehst position:relative;
Du willst offenbar position:absolute; nutzen.
mfg Beat
Wenn ich nun sage
div#navigation {position: relative; top: 0px; bottom 0px; width 135px; }
wird meine DIV trotzdem nicht aufgezogen. Was mache ich falsch?Du missverstehst position:relative;
Du willst offenbar position:absolute; nutzen.mfg Beat
Jein. Ich will sozusagen den top-Punkt als relative (automatisch unter dem Logo), da ich ihn nicht anders angeben kann (Abstand von der Viewport-Oberkante zum Header: relative; Höhe der Grafik: fest (px) ==> wenn absolute-Angabe, dann gemischt ???),
den bottom-Punkt als absolute, da ich ihn genau festlegen kann (Abstand unterer Rand bis Viewport-Unterkante: relativ ==> absolute-Angabe relativ)
Vielen Dank für deine Bemühungen!
Fireball
Hallo,
Wenn ich nun sage
div#navigation {position: relative; top: 0px; bottom 0px; width 135px; }
wird meine DIV trotzdem nicht aufgezogen. Was mache ich falsch?
du verwendest position:relative, hast aber offensichtlich nicht verstanden, was das genau bedeutet und meinst anscheinend etwas anderes. Der obige CSS-Code bedeutet:
"Verschiebe die Oberkante und die Unterkante um 0px gegenüber
der Lage, die sie ohne Positionsangaben hätten."
Wobei ich mir im Moment nicht einmal sicher bin, ob die Angabe von top *UND* bottom im Zusammenhang mit relativer Postionierung überhaupt definiert ist.
Möglicherweise meinst du position:absolute anstatt relative, und möchtest relative stattdessen dem Elternelement geben, damit div#navigation sich daran ausrichten kann. Das ist aber nur meine Vermutung ...
So long,
Martin
Also der Inhalt (im Bild lore ipsum) ist mit overflow:scroll; versehen.
Die graue Navigation soll also so lang sein:
Ganze Bildschirmhöhe
- Oberer Rand (1%)
- Grafikhöhe (135px)
- Fußzeile (relative Angabe)
- Unterer Rand (1%)
----------------------------------
= Höhe Navigation
Gruß,
Fireball
Das mit dem Hosten mach ich gleich morgen. Aber nur mal so:
Ich habe das hier gefunden: http://ago.tanfa.co.uk/css/layouts/flexi_floats/
Das ist so ähnlich wie meins (left-content). Doch wie machen die das??
Fireball
Ich habe das hier gefunden: http://ago.tanfa.co.uk/css/layouts/flexi_floats/
Das ist so ähnlich wie meins (left-content). Doch wie machen die das??
Steht doch im Quelltext.
Struppi.
Steht doch im Quelltext.
Struppi.
Doch der ist rießig und ich verstehe ihn nicht!
Fireball
@@Fireball:
nuqneH
Doch der ist rießig
Ein weiser Rieße.
Qapla'
Ich komm echt nicht weiter.
Kann mir niemand mal erklären was ich an meinem Code ändern muss?
Fireball
Om nah hoo pez nyeetz,
Ein weiser Rieße.
der weiße Helge.
Matthias
Om nah hoo pez nyeetz,
Ein weiser Rieße.
der weiße Helge.
Matthias
Ich glaube ich mache mal eine Neue Nachricht aus, das versandet hier total!
Fireball
@@Fireball:
nuqneH
Ich glaube ich mache mal eine Neue Nachricht aus, das versandet hier total!
Ich glaube nicht.
Qapla'
@@Fireball:
nuqneH
Doch wie machen die das??
Unflexibel. Wenn drei Boxen nicht nebeneinander in den Viewport passen, werden sie nicht untereinander dargestellt, sondern horizontales Scrollen erzwungen.
Vielleicht sind die A-List-Apart-Artikel Multi-Column Layouts Climb Out of the Box und In Search of the Holy Grail was für dich.
Qapla'
Nachtrag:
Noch ein Problem tritt auf:
height: 95%; in darstellung.css funktioniert mit doctype nicht mehr? Mit was ist es zu ersetzten???
Fireball
@@Fireball:
nuqneH
weißer Balken, der weg soll!
Ich vermute, „Unterlänge“ ist dein Suchbegriff. Ich hab aber keine Lust, dein Problem nachzubauen.
Qapla'
