nicht angemeldet
css layout
hallo!
nachdem ich mir die grundlagen angelesen habe und mein problem sich von html auf css verlagert hat, hielt ich es für sinnvoll, einen neuen thread zu öffnen:
hier erstmal ein bild und eine kleine erläuterung, was ich eigentlich machen will:
die seite hat, wie man sieht ein zusammenhängendes layout.
der banner ist oben mittig zentriert und soll sich nicht bewegen. darunter sitzt der bereich für den inhalt. daneben hab ich eine navileiste, bzw. den hintergrund dazu platziert.
die navileiste soll auch beim zoomen an dieser stelle bleiben, momentan habe ich sie durch einen <div></div> tag per position:absolute an ihre stelle gesetzt. was allerdings beim zoomen nicht funktioniert...
außerdem soll der inhaltsbereich mit längerem text mitwachsen. was ich bisher auch hinbekommen habe.
momentan ist eigentlich nur das problem: wie ich die navileiste verwirkliche.
hier mal der bisherige code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
body {
background-color:#5f5f5f;
text-align: center;
}
div#Seite {
text-align: left;
margin: 0 auto;
width: 594px;
padding: 0;
background: url(Inhalt.jpg) repeat-y;
}
div#Inhalt {
margin: 0px 5px 0px 150px;
padding: 0;
}
div#Inhalt p {
margin: 0px 0px 0px 0px;
padding: 0;
}
div#navi {
position:absolute;
top: 220px;
left: 300px;
width: 107px;
height: 189px;
background: url(Navi.jpg)
}
h1 {
width: 594px;
height: 204px;
margin: 0 auto;
padding: 0;
text-align: center;
background: url(banner.jpg) no-repeat 100% 100%;
}
p#Fusszeile {
clear: both;
margin: 0;
padding: 0;
text-align: center;
background-image: url(Foot.jpg) no-repeat 100% 100%;
}
</style>
</head>
<body>
<h1></h1>
<div id="navi"></div>
<div id="Seite">
<div id="Inhalt">
</div>
</div>
</body>
</html>
vllt. kann mir der ein oder andere noch sagen wie ich das komplette layout per css besser verwirkliche. mir kommt es nämlich so vor, dass das layout zwar halbwegs funktioniert aber eigentlich totaler mist ist^^
vielen dank schonmal für eure hilfe!!!
mfg
iiks
-
Yerf!
die seite hat, wie man sieht ein zusammenhängendes layout.
Sollte auch nicht so schwer lösbar sein.
der banner ist oben mittig zentriert und soll sich nicht bewegen.
Also trotz scrollens immer sichtbar? Das verschwendet einiges an Platz für ein vernünftiges lesen. Wenn du es aber unbedingt so willst, dann sollte position:fixed im CSS weiterhelfen (für IE6 muss ein entsprechender Workaround eingebaut werden)
darunter sitzt der bereich für den inhalt. daneben hab ich eine navileiste, bzw. den hintergrund dazu platziert.
die navileiste soll auch beim zoomen an dieser stelle bleiben, momentan habe ich sie durch einen <div></div> tag per position:absolute an ihre stelle gesetzt. was allerdings beim zoomen nicht funktioniert...position:absolute würde ich erst mal weglassen, vor allem als Anfänger. Das ganze ist recht "undurchsichtig" am Anfang. Besser ist es die Navi in den DIV "Seite" zu packen und mittels float:left zu positionieren.
außerdem soll der inhaltsbereich mit längerem text mitwachsen. was ich bisher auch hinbekommen habe.
Das sollte eigentlich automatisch passsieren und ich sehe keinen Grund der dagegen spricht...
vllt. kann mir der ein oder andere noch sagen wie ich das komplette layout per css besser verwirkliche. mir kommt es nämlich so vor, dass das layout zwar halbwegs funktioniert aber eigentlich totaler mist ist^^
Ein paar Beispiele gibts hier bei http://de.selfhtml.org/css/layouts/mehrspaltige.htm@title=SelfHTML.
Gruß,
Harlequin
--
<!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->-
Yerf!
die seite hat, wie man sieht ein zusammenhängendes layout.
Sollte auch nicht so schwer lösbar sein.
der banner ist oben mittig zentriert und soll sich nicht bewegen.
Also trotz scrollens immer sichtbar? Das verschwendet einiges an Platz für ein vernünftiges lesen. Wenn du es aber unbedingt so willst, dann sollte position:fixed im CSS weiterhelfen (für IE6 muss ein entsprechender Workaround eingebaut werden)
nein, der soll ganz oben fest sein und beim scrollen verschwinden, hab mich falsch ausgedrückt.
darunter sitzt der bereich für den inhalt. daneben hab ich eine navileiste, bzw. den hintergrund dazu platziert.
die navileiste soll auch beim zoomen an dieser stelle bleiben, momentan habe ich sie durch einen <div></div> tag per position:absolute an ihre stelle gesetzt. was allerdings beim zoomen nicht funktioniert...position:absolute würde ich erst mal weglassen, vor allem als Anfänger. Das ganze ist recht "undurchsichtig" am Anfang. Besser ist es die Navi in den DIV "Seite" zu packen und mittels float:left zu positionieren.
ok das werd ich probieren!
außerdem soll der inhaltsbereich mit längerem text mitwachsen. was ich bisher auch hinbekommen habe.
Das sollte eigentlich automatisch passsieren und ich sehe keinen Grund der dagegen spricht...
vllt. kann mir der ein oder andere noch sagen wie ich das komplette layout per css besser verwirkliche. mir kommt es nämlich so vor, dass das layout zwar halbwegs funktioniert aber eigentlich totaler mist ist^^
Ein paar Beispiele gibts hier bei http://de.selfhtml.org/css/layouts/mehrspaltige.htm@title=SelfHTML.
ja die kenn ich, an denen hab ich mich ja orientiert^^
Gruß,
Harlequin
thx, iiks
-
das mit der navi box hat jetzt scheinbar auch geklappt :)
bin aber trotzdem für jeden tipp dankbar!
-
Hallo!
Die Seite ist fertig und funktioniert :)
Danke dür die Tipps und an selfhtml... ist echt eine super informationsquelle!
mfg
iiks
-
Hallo!
Die Seite ist fertig und funktioniert :)
Danke dür die Tipps und an selfhtml... ist echt eine super informationsquelle!
mfg
iiks
verdammt... zu früh gefreut :(
die seite wirt mit opera wunderbar angezeigt... mit dem IE und firefox seh ich aber nur einen grauen hintergrund... alles adere wird nicht angezeigt... an was könnte das liegen?
thx
iiks
-
Yerf!
die seite wirt mit opera wunderbar angezeigt... mit dem IE und firefox seh ich aber nur einen grauen hintergrund... alles adere wird nicht angezeigt... an was könnte das liegen?
Kannst du die Seite auf einen Webspace hochladen, damit man sich das mal live anschauen kann?
Gruß,
Harlequin
--
<!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->-
Yerf!
die seite wirt mit opera wunderbar angezeigt... mit dem IE und firefox seh ich aber nur einen grauen hintergrund... alles adere wird nicht angezeigt... an was könnte das liegen?
Kannst du die Seite auf einen Webspace hochladen, damit man sich das mal live anschauen kann?
Gruß,
Harlequin
hier ist eine version ohne inhalt... sie funktioniert unter opera perfekt und unter firefox und IE wird nur der graue hintergrund angezeigt...
thx
iiks-
Yerf!
hier ist eine version ohne inhalt... sie funktioniert unter opera perfekt und unter firefox und IE wird nur der graue hintergrund angezeigt...
Mein FF2 zeigt sie zwar auch an, aber "perfekt funktionieren" ist dann doch was anderes ;-) Ich war dann doch erst etwas über den leeren DOM-Baum im IE verwundert, aber der Validator kann dir sagen, weshalb das so ist. (STYLE-Elemente sollte man doch besser schließen, aber beachte bitte auch den anderen gemeldeten Fehler und entferne die <br>)
Gruß,
Harlequin
--
<!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->-
STYLE-Elemente sollte man doch besser schließen, aber beachte bitte auch den anderen gemeldeten Fehler und entferne die <br>
die style-elemente sind in der html datei geschlossen?!?!
warum zeigt er dann an, dass sie offen sind???und wie mach ich sonst zeilenumbrüche ohne diese <br>?
-
Yerf!
die style-elemente sind in der html datei geschlossen?!?!
warum zeigt er dann an, dass sie offen sind???Also in der HTML-Datei, die ich von der Seite bekomme steht in Zeile 6-7:
<style type="text/css"> </head>Opera (und mein FF2) scheinen hier per Fehlerkorrektur das Style-Element zu schließen, der IE nimmt so wie es aussieht den Rest des Dokumentes als Inhalt für <style>
Da du das CSS ausgelagert hast kannst du die Zeile 6 (<style...) einfach löschen.
und wie mach ich sonst zeilenumbrüche ohne diese <br>?
Die <li>s sollten doch sowieso schon jeweils in einer eigenen Zeile stehen (ansonsten hilft
display:block). Für mehr Abstand nutze die CSS-Eigenschaft margin.Gruß,
Harlequin
--
<!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->-
achso, der style-tag war offen^^ ich dachte da fehlt was am </head>...
ich hab den fehler korrigiert... ejtzt wird auch im firefox alles angezeigt... nur im IE ist die navileiste verschoben...
an was kann das denn jetzt liegen? einen fehler im stylsheet?-
achso, der style-tag war offen^^ ich dachte da fehlt was am </head>...
ich hab den fehler korrigiert... ejtzt wird auch im firefox alles angezeigt... nur im IE ist die navileiste verschoben...
an was kann das denn jetzt liegen? einen fehler im stylsheet?ok ich hab im stylesheet ne korrektur eingefügt...
jetzt wirds auh im IE angezeigt...nur die kleinen gelben kreise, welche zur auflistung der navileiste da sind, die werden im IE nicht angezeigt... warum net?^^
-
Yerf!
ich hab den fehler korrigiert... ejtzt wird auch im firefox alles angezeigt... nur im IE ist die navileiste verschoben...
an was kann das denn jetzt liegen? einen fehler im stylsheet?Weniger Fehler, mehr ungünstige Werte... du gibst dem IE ja schon per * html-Hack andere Werte, allerdings ergibt sich im IE eine etwas breitere Schrift + sind die 10em etwas überdimesioniert für die Breite von UL.
8em als Breite kommt bei mir hier besser hin, allerdings solltest du die Hintergrundgrafik mit der Box etwas verbreitern, damit mehr Luft ist.
Außerdem braucht der IE ein Padding an der UL, damit die Listenpunkte erscheinen (margin muss dann entsprechend verkleinert werden).
Solche Detailarbeiten sind immer etwas "Fummelei", am besten geht sowas mit einem Online-Editor, mit dem man die CSS-Eigenschaften direkt im Browser verändern kann. Für den Firefox gibts da FireBug, für den IE gibts von Microsoft die "Developer-Toolbar".
Gruß,
Harlequin
--
<!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->
-
-
-
-
-
-
-
-
-
-
-