Hallo,
hab mich jetzt mal hier angemeldet, da ich bei meinem homepagebau ein bisschen hilfe gebrauchen könntehabe mir vor ein paar jahren schon mal die grundlegenden dinge über html und css angeeignet, welche mir aber anscheinend schon wieder entfallen sind.
mein problem:
ich will jetzt erstmals listen statt tabellen verwenden, da dies ja anscheinend zukunftssicherer (und leichter?) ist.
meine website habe ich mir so vorgestellt: oben der banner, an den direkt darunter die navigationsleite mit hintergrundbildern anschließt(es soll kein pixel zwischen beidem sein), so dass das bild fließend übergeht (siehe Anhang, ich glaube man versteht es)
die drei spalten sollen natürlich in einer linie sein, was schon das nächste problem ist.
HTML-Code:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <title>index</title> <link href="main.css" rel="stylesheet" type="text/css"> </head> <body> <div align="center"> <div width="800px"> <img width="800px" height="119px" alt="1" src="http://www.traum-projekt.com/forum/images/banner1.jpg"><br/> <ul> <li style="background-image:url(images/banner2.jpg)">Startseiteeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</li> <li style="background-image:url(images/banner3.jpg)">Über mich</li> <li style="background-image:url(images/banner2.jpg)">Ideen</li> <li style="background-image:url(images/banner3.jpg)">Kontakt</li> </ul> </div> </div> </body> </html>Sorry für die vielen "e"s, aber ich wollte nur demonstrieren, dass der eintrag über das listenende hinaus weiterläuft.Code:body {background-color: #90CCF0; color: #FFFFFF; alink:#000099; link:#00009; vlink:#990099} img {display: block} ul { width:800px; height:40px; text-align: center; vertical-align:middle; border-style: none; padding:0px; margin:0px; margin-right:0px; margin-left:0px; table-layout: fixed } ul li {height:40px;width:200px; text-align: center; vertical-align:middle; border-style: none; margin-right:0px; margin-left:0px; margin:0px; display: inline-table; table-layout: fixed} * {margin: 0; padding: 0;}
das nächste und letzte problem ist dann noch dass ich z.B. "Startseite" nicht vertikal mittig innerhalb der "zelle"(listenabschnitt?) ausrichten kann.
habe dafür auch schon die suchfunktion benutzt, einige tipps dadurch in den code eingefügt, hat jedoch bisher alles noch nichts gebracht.
achja: die 4 kleinen bilder sind sicher 200px breit und das große 800px
ich hoffe es kann mir jemand helfen
mfg michi
Hallo michi!
Warum trennst du nicht html und css?
Ich würde den div`s --> id vergeben (structure, header, navi, main, footer, usw.) und die per class in Css gestalten.
Was mir noch aufgefallen ist, Text-align ist veraltert und wenn der Wert bei margin: 0; ist kannst du die px weglassen, es genügt auch nur 1x 0 zu vergeben und nicht
margin-left: 0;
margin: right:0;
Ein paar abschliessende semikolon`s ; fehlen auch.
Wünsche dir gutes Gelingen!!!
Anstelle
zentriere die Seite so: Horizontale ZentrierungCode:<div align="center"> <div width="800px">
Für den Abstand könnte der Zeilenwechsel nach dem image verantwortlich sein und/oder das: http://www.ohne-css.gehts-gar.net/0009.php
Ansonsten poste mal einen Link zur Problemseite, da scheinen noch weitere Fehler drin zu sein.
Hey! Also danke schon mal für die Tipps, haben mir auch schon ein bisschen geholfen.
Funktioniert leider bisher nur mit Google Chrome!
http://www.natur-deko.de/index2.htm
Im Anhang ist ein Bild das zeigt, wie es aussehen soll.
Die Hintergrundbilder von Ideen und Kontakt sind noch falsch, nicht verwirren lassen! Das Ganze soll fließend übergehen.
Habe nun also den divs ids vergeben, außer dem ersten, denn hier konnte ich die komplette Seite nur mittig ausrichten, indem ich die ältere HTML-Variante benutzt habeHabe auch versucht das über die id center zu richten, (Code:align="center"da ging allerdings gar nichts. Komisch!?Code:.center {text-align:left; }
@illufan: Stimmt, die Semikolons haben noch gefehlt, danke. Was ist die modernere Variante zu text-align?
@ sejuma: Habe das <br/>-Tag entfernt, jetzt funktioniert es, danke. Dumm nur wenn man einen Zeilenumbruch machen will ohne solch einen großen Abstand. Die Angabe display:inline hat auch gefehlt, wie du schon getippt hast.
Allerdings erschien mir deine Variante der Zentrierung der Seite nicht für alle Auflösungen kompatibel, da die Angabe margin: 30px ja konstant ist, kann das sein?
Habe jetzt noch ganz schön rumexperimentiert. Mit Google Chrome sieht die Seite jetzt genauso aus wie ich sie haben will, wenn auch mit Trickserei (Minuswerte bei Margin, damit die Abstände zwischen den Listenpunkten verschwanden). Bei Firefox und IE sieht das Ergebnis allerdings ganz anders aus.
Was habe ich falsch gemacht?
Weiß jemand was für eine Lösung zu allen Browsern kompatibel ist?
Hier noch der Quellcode:
HTML-Code:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <title>index</title> <link href="main.css" rel="stylesheet" type="text/css"> </head> <body> <div align="center"> <div class="top"> <img width="800px" height="119px" alt="1" src="images/bannergr.jpg"> <ul> <li style="background-image:url(images/banner2.jpg)"><a href="index.htm" alt="Startseite">Startseite</a></li> <li style="background-image:url(images/banner3.jpg)"><a href="ueber.htm" alt="Über mich">Über mich </a></li> <li style="background-image:url(images/banner2.jpg)"><a href="ideen.htm" alt="Ideen">Ideen </a></li> <li style="background-image:url(images/banner3.jpg)"><a href="kontakt.htm" alt="Kontakt">Kontakt </a></li> </ul> <div class="main"> TESTTESTTESTTESTTESTTESTTESTTESTTESTTEST TESTTESTTESTTESTTEST TESTTESTTESTTESTTEST TESTTESTTESTTESTTEST TESTTESTTESTTESTTEST </div> </div> </div> </body> </html>Code:* {margin: 0; padding: 0; } body {background-color: #339933; color: #FFFFFF;margin: 0; padding: 0; } a:link { color: #FFFFFF; text-decoration:none; font-weight:bold ;} a:visited { color: #FFFFFF; text-decoration:none; font-weight:bold; } a:focus { color: #FFFFFF; text-decoration:none; font-weight:bold; } a:hover { color: #FFFFFF; text-decoration:none; font-weight:bold; } a:active { color: #FFFFFF; text-decoration:none; font-weight:bold; } img {display: block; } ul li {height:40px; width:200px; display: inline-table; margin-left:-2px; margin-right:-2px; padding:10px; } .center {text-align:left; } .top {width:800px; } .main {width:800px; height:600px; background-color:#006600; text-align: left; margin: -5px;}
Nur mal kurz: also die Navielemente können nicht in eine Zeile passen. 4 mal width 200px + 4 mal padding left und right 10px macht 880px breite. <div class="top"> ist aber nur 800px breit. Mach mal testweise bei ul li { ... padding: 0; ... } und die Navi sieht schon so ähnlich aus wie sie wohl mal aussehen soll. (Ausser den falschen Hintergrundbildern)
ERSETZE in deiner CSS
ul li {height:40px; width:200px; display: inline-table; margin-left:-2px; margin-right:-2px; padding:10px; }
und verwende lieber das hier:
ul li {height:40px; width:200px; display: table-cell; }
ich habs ausprobiert, funktioniert!!!
Noch ein kleiner Nachtrag:
Der Text ist durch den Eingriff (siehe post zuvor) ein wenig falsch positioniert. Justiere das in HTML mit valign:middle
<li style="valign:middle background-im.....
Mal abgesehen davon, daß display:table-cell nicht überall funktioniert, kenne ich persönlich auch kein "valign" im CSS, sondern nur "vertical-align". Was aber meines Wissens auch nur dann klappt, wenn das display:table-cell richtig umgesetzt wird ..
Also danke nochmal an euch, jetzt hab ichs endlich hinbekommen.
Die entscheidenen Dinge waren letztendlich:
- table-cell anstatt inline-table, Danke an themaster3000
- padding: 0; mit table-cell hats dann auch so funktioniert, Danke an max.m
- vertical-align anstatt valign, Danke an wildmieze
Wichtig war auch, die Verschachtelung dabei zu beachten. In den falschen divs brachten die Einstellungen nichts.
Das Ergebnis kann man hier sehen:
www.natur-deko.de/index2.htm
Mal sehen, ob sich noch Probleme beim Aufbau der Homepage auftun.
Najo .. im IE6 und IE7 funktionierts nicht. Ist allerdings son bissl ne Glaubensfrage, ob Dich das stört, oder ob es Dir reicht, daß es in modernen Browsern gut aussieht^^
EDIT:
... bei 2 "meiner" Seiten - privates Blog und eine Tourismus-Seite - werden IE6 und IE7 immer noch von knapp über 20% der Besucher genutzt, bei webhits.de sieht die Statistik noch schlimmer aus (ca. 50% .. erscheint mir persönlich etwas hoch ..) .. kommt vermutlich auch stark auf die Zielgruppe an.
Ich selbst mache mir immer noch die Mühe, auch für die beiden Browser zu "optimieren". D.h., es sollte zumindest ansprechend aussehen und vollständig nutzbar sein .. n bissl Schwund is immer *g* ..
Einige Webdesigner machen es wohl nicht mehr, damit die Nutzer einen Grund sehen, sich einen moderneren Browser zu besorgen .. dummerweise zieht das Argument bei meinen Kunden nicht
Geändert von wildmieze (06.08.2010 um 01:45 Uhr)
Also die Seite sollte auf jeden Fall auch zu IE6 und IE7 kompatibel sein, wenn die beiden Versionen noch so oft benutzt werden.
Ich weiß leider nur nicht, wie ich das Ganze kompatibel mache.
@wildmieze: weißt du, womit IE6,7 ihre Probleme haben? vll mit table-cell?
Wenn nicht, dann werde ich einfach ein bisschen rumprobieren.
Jepp, soweit ich weiß verstehen IE6 und IE7 display:table-cell nicht. Jedenfalls zeigen beide die Navigation einfach untereinander an.
Hmm .. ich würde vermutlich mit float arbeiten. Vertikal zentrieren könnte über line-height gehen, solange die Menüpunkte einzeilig bleiben.
Also sowas wie:
ul li {float:left; height:40px; width:200px; text-align:center; line-height:40px;}
.. ok, ich persönlich würde diese Eigenschaften eher <a> zuweisen nebst jeweils passendem Hintergrundbild, damit ich komfortabel beim hovern das Hintergrundbild wechseln kann .. aber muss ja nicht
Alles ungetestet, hab gerade leider nicht die Zeit zum selbst rumprobieren ..
Super, danke
Mit float funktioniert das Ganze. Dazu noch list-style:none und die Punkte sind weg. Und mit line-height stehts in der Mitte. Wieso funktioniert aber statt line-height vertical-align nicht?
Ich habs auch mal probiert, dem a das Hintergrundbild zuzuweisen, also a:hover{...background-image:...; height:40px;}. Das Hintergrundbild war aber dann leider keine 40px mehr groß, sondern nur noch so groß wie die Schrift.
Wäre aber noch ne ganz nette Idee, mit dem wechselnden Hintergrundbild..
http://natur-deko.de/index2.htm
Man kann dem a keine Höhe zuweisen, weil es ein sogenanntes "Inline-Element" ist. Für Höhen- und Breitenangaben muss es ein Blockelement sein .. das kann man zB durch ein float erreichen, oder auch durch ein display:block; .. ohne float wird es dann aber vermutlich erstmal wieder untereinander angezeigt. Probier da einfach mal rum. Vielleicht reicht es schon, wenn Du dem a genau die gleichen Eigenschaften gibst wie dem li. Wenn das nicht geht, könntest Du stattdessen ausprobieren, dem li alle Eigenschaften wegzunehmen. Oder ein display:inline zu geben, falls es danach wieder untereinander stehen sollte. Irgendwie sowas. Versuch macht kluch *g*
Tja .. daß das vertical-align im Prinzip nur in Tabellenzellen funktioniert, ärgert mich auch schon ewig. Ich glaub, in anderen Elementen bewirkt es nur eine zeilenweise Ausrichtung, sprich: wenn Du zwei verschiedene Schriftgrößen in einer Zeile hast, steht der kleine Text quasi mittig zur großen Schrift, statt auf der unteren Linie zu stehen. Oder so. Kann mich auch irren. Habs noch nie gebraucht
Also nach langer Pause hab ich mich jetzt mal wieder mit der Homepage beschäftigt und bin einige Schritte weitergekommen.
Mein Problem ist nun eigentlich keins mehr, denn ich habe schon die Lösung gefunden. Jedoch versteh ich einfach nicht, warum das nur so hinhaut:
Meine Startseite sah zuerst so aus wie im Anhang. Nun wollte ich aber aus gestalterischen Gründen, dass der Kasten, in dem sich der Text befindet, noch weiter bis zum Boden geht.
Mein Quellcode:
main.css:HTML-Code:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <title>index</title> <link href="main.css" rel="stylesheet" type="text/css"> </head> <body> <p> </p> <div align="center" class="hoehe"> <img src="images/balken2.jpg"> <div class="structure"> <img width="800px" height="289px" alt="1" src="images/banner1.jpg"> <ul> <li class="nav" style="background-image:url(images/bannerkl1.jpg)"><a href="index2.htm" alt="Startseite">Startseite</a></li> <li class="nav" style="background-image:url(images/bannerkl2.jpg)"><a href="ueber.htm" alt="Über mich">Über mich </a></li> <li class="nav" style="background-image:url(images/bannerkl3.jpg)"><a href="ideen.htm" alt="Ideen">Ideen </a></li> <li class="nav" style="background-image:url(images/bannerkl4.jpg)"><a href="kontakt.htm" alt="Kontakt">Kontakt </a></li> </ul> [B][I]<div class="main" height="1000px">[/I][/B] <p> <h1> Willkommen!</h1> Mein Hobby ist das Entwerfen und Basteln mit Yton und Naturmaterialien. Es handelt sich hierbei immer um Unikate, die ich in alleiniger Handarbeit herstelle. Einige Beispiele meiner bisherigen Arbeiten finden Sie in der Rubrik "Fotos". </p> <br/> Falls Ihnen meine Figuren gefallen und Sie auch ein spezielles Exemplar bei mir bestellen möchten, so bitte ich Sie um eine kurze E-mail mit Ihrem Wunsch und ich werde mich sobald möglich mit Ihnen in Verbindung setzen.<br/> <br/> <p> Bitte planen Sie jedoch eine gewisse Lieferzeit mit ein, da die Herstellung doch sehr zeitintensiv ist. </p> </div> <img src="images/balken.jpg"> <a href="impressum.htm"><div class="impressum">Impressum</div> </a> </div> </body> </html>
Wie man vll an den markierten Stellen sieht, habe ich versucht, das main-div mit einer direkten Höhenangabe zu verändern. Das funktioniert allerdings nicht, ich muss die Höhenangabe stattdessen in die main-class schreiben. Wieso?Code:*{margin: 0; padding: 0;} body{background-color: #FFFFFF; color: #004503;margin: 0; padding: 10px; background-image:url(images/backgr2.jpg); background-repeat:repeat-y; background-position: center; font-family:'Arial'; font-weight:normal;} a:link{color: #FFFFFF; text-decoration:none; font-weight:normal ;} a:visited{color: #FFFFFF; text-decoration:none; font-weight:normal;} a:focus{color: #FFFFFF; text-decoration:none; font-weight:normal;} a:hover{color: #FFFFFF; text-decoration:none; font-weight:normal;} a:active{color: #FFFFFF; text-decoration:none; font-weight:normal;} img{display: block;} .nav {height:40px; width:200px; float: left; line-height: 40px; list-style: none;} .structure {width:800px;} .main {background-color:#FFFFFF; text-align: left; padding:20px; background-image:url(images/backgr.jpg); background-repeat:repeat-y;} .impressum {color: #035803; text-decoration:underline; } .ideen {list-style: none; display: inline-block; width: 650px;} .ideen2 {display: inline-block; padding: 10px; width:250px; vertical-align: top; text-align:left;} .ueber {list-style: none; display: inline-block;} .ueber2 {display: inline-block; padding: 10px; width:300px; vertical-align:top; text-align:left;}
Nun wollte ich noch eine Prozentangabe in der css-datei in der main-classe statt height versuchen, jedoch bleibt das ohne Wirkung. Wieso?
Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
LinkBack URL
About LinkBacks
Zitieren