div richtig anordnen - wie gehts richtig?
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
anpassen
beispiel
bild
browser
code
container
editor
fenster
frage
hintergrund
hintergrundbild
http
image
klasse
lernen
liste
navigation
problem
rand
url
-
Hallo zusammen.
Ich hab mal ne Frage zu divs.
Hier ist meine Seite:
http://actionfactory2.de.vu/
Bei mir sieht das alles ganz normal aus. Bei einem Bekannten, der wahrscheinlich andere Bildschirmmaße hat, passt das aber nicht so wie bei mir. Bei dem geht das Logo und die Navi links über den Rand des schwarzen Feldes (div). Wie kann ich das richtig anordnen? Also das schwarze Feld ist bei mir ein div (main) und das Logo ist ein div (logo) und die Navigation ist ein div (navi), die sich in dem div main befinden. Der Style sieht so aus:
<style type="text/css"> #main { height: 100%; width: 82%; margin-top: 5px; margin-right: 9%; margin-bottom: 5px; margin-left: 9%; padding: 5px; background-color: #000; border: medium double #FFF; } #navi { height: 25px; width: 1000px; margin-right: auto; margin-left: auto; border-top-style: ridge; border-right-style: ridge; border-bottom-style: ridge; border-left-style: ridge; border-top-color: #FF9; border-right-color: #FF9; border-bottom-color: #FF9; border-left-color: #FF9; } #logo { color: #FFF; height: 100%; width: 98%; margin-right: 1%; margin-left: 1%; } </style>
Wie kann ich das also für jede Bildschirmmaße einheitlich machen? Das Problem kommt bei mir auch, wenn ich ranzoome. Also dann geht das Logo und die Navi über den Rand. Vielleicht ist die Lösung simple, aber ich weiß nicht wie es geht :) Freue mich über Hilfe.
Liebe Grüße
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Also bei mir läufts recht über den Rand hinaus...
Das Problem (würde ich jedenfalls spontan sagen) ist, dass du der Navigation eine feste Breite zugewiesen hast.
Wenn du Prozent als Einheit angiebst, müsste zumindest die Navigation in den Grenzen bleiben.
Das mit dem Logo erschließt sich mir jetzt auch irgendwie nicht...
Hast du html oder body auch width und height zugewiesen bzw. padding und margin überschrieben, damit sich die Werte mit deinen Vorstellungen decken ? -
Also bei mir läufts recht über den Rand hinaus...
Ja meine rechts :)
Das mit dem Logo erschließt sich mir jetzt auch irgendwie nicht...
Habe einfach anstatt das Bild in dem div auszugeben das Bild als Hintergrundbild des div eingestellt und das div in den Größen des Bildes gemacht. Jetzt geht es nicht mehr über den Rand.
Aber das geht ja nicht mit der Navigation. Da muss ja alles seine feste Größe haben oder nicht? Also ich habe die Navi mit Adobe Fireworks erstellt und über Adobe Dreamweaver eingefügt. Das ist der Code für die Navi:
<table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0" width="1000"> <!-- fwtable fwsrc="navi2.png" fwpage="Seite 1" fwbase="navigation.gif" fwstyle="Dreamweaver" fwdocid = "1407579402" fwnested="0" --> <tr> <td><img src="images/navi/spacer.gif" alt="" name="undefined_2" width="115" height="1" border="0" /></td> <td><img src="images/navi/spacer.gif" alt="" name="undefined_2" width="106" height="1" border="0" /></td> <td><img src="images/navi/spacer.gif" alt="" name="undefined_2" width="118" height="1" border="0" /></td> <td><img src="images/navi/spacer.gif" alt="" name="undefined_2" width="91" height="1" border="0" /></td> <td><img src="images/navi/spacer.gif" alt="" name="undefined_2" width="84" height="1" border="0" /></td> <td><img src="images/navi/spacer.gif" alt="" name="undefined_2" width="110" height="1" border="0" /></td> <td><img src="images/navi/spacer.gif" alt="" name="undefined_2" width="174" height="1" border="0" /></td> <td><img src="images/navi/spacer.gif" alt="" name="undefined_2" width="73" height="1" border="0" /></td> <td><img src="images/navi/spacer.gif" alt="" name="undefined_2" width="129" height="1" border="0" /></td> <td><img src="images/navi/spacer.gif" alt="" name="undefined_2" width="1" height="1" border="0" /></td> </tr> <tr> <td><a href="index.htm" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('navigation_r1_c1_s1','','images/navi/navigation_r1_c1_s2.gif',1);"><img name="navigation_r1_c1_s1" src="images/navi/navigation_r1_c1_s1.gif" width="115" height="25" border="0" id="navigation_r1_c1_s1" alt="" /></a></td> <td><a href="http://www.youtube.com/user/ActionFactory2" target="_blank" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('navigation_r1_c2_s1','','images/navi/navigation_r1_c2_s2.gif',1);"><img name="navigation_r1_c2_s1" src="images/navi/navigation_r1_c2_s1.gif" width="106" height="25" border="0" id="navigation_r1_c2_s1" alt="" /></a></td> <td><a href="mitglieder.htm" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('navigation_r1_c3_s1','','images/navi/navigation_r1_c3_s2.gif',1);"><img name="navigation_r1_c3_s1" src="images/navi/navigation_r1_c3_s1.gif" width="118" height="25" border="0" id="navigation_r1_c3_s1" alt="" /></a></td> <td><a href="videos.htm" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('navigation_r1_c4_s1','','images/navi/navigation_r1_c4_s2.gif',1);"><img name="navigation_r1_c4_s1" src="images/navi/navigation_r1_c4_s1.gif" width="91" height="25" border="0" id="navigation_r1_c4_s1" alt="" /></a></td> <td><a href="bilder.htm" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('navigation_r1_c5_s1','','images/navi/navigation_r1_c5_s2.gif',1);"><img name="navigation_r1_c5_s1" src="images/navi/navigation_r1_c5_s1.gif" width="84" height="25" border="0" id="navigation_r1_c5_s1" alt="" /></a></td> <td><a href="actionen.htm" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('navigation_r1_c6_s1','','images/navi/navigation_r1_c6_s2.gif',1);"><img name="navigation_r1_c6_s1" src="images/navi/navigation_r1_c6_s1.gif" width="110" height="25" border="0" id="navigation_r1_c6_s1" alt="" /></a></td> <td><a href="treffen.htm" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('navigation_r1_c7_s1','','images/navi/navigation_r1_c7_s2.gif',1);"><img name="navigation_r1_c7_s1" src="images/navi/navigation_r1_c7_s1.gif" width="174" height="25" border="0" id="navigation_r1_c7_s1" alt="" /></a></td> <td><a href="faq.htm" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('navigation_r1_c8_s1','','images/navi/navigation_r1_c8_s2.gif',1);"><img name="navigation_r1_c8_s1" src="images/navi/navigation_r1_c8_s1.gif" width="73" height="25" border="0" id="navigation_r1_c8_s1" alt="" /></a></td> <td><a href="impressum.htm" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('navigation_r1_c9_s1','','images/navi/navigation_r1_c9_s2.gif',1);"><img name="navigation_r1_c9_s1" src="images/navi/navigation_r1_c9_s1.gif" width="129" height="25" border="0" id="navigation_r1_c9_s1" alt="" /></a></td> <td><img src="images/navi/spacer.gif" alt="" name="undefined_2" width="1" height="25" border="0" /></td> </tr> </table>
Hast du html oder body auch width und height zugewiesen bzw. padding und margin überschrieben, damit sich die Werte mit deinen Vorstellungen decken ?
An dem body habe ich nichts geändert. -
Grundsätzlich "muss" nichts seine feste Größe haben, man kann alles über Prozentwerte mit Höhen, Breiten und Positionsangaben umsetzen.
Hast du schonmal daran gedacht die Navigation vielleicht als Liste zu realisieren, dann müsstest du nur ul bzw. li stylen.
Tabellen können schnell unübersichtlich werden.
Und wofür brauchst du das Javascript ?
Wenn's für den Hovereffekt sein soll, den bekommt man auch über CSS hin (jeder der Javascript deaktiviert hat, bekommt evtl. Darstellungsprobleme, jenachdem wofür das Script verantwortlich war)
EDIT:
Könntest du das Logo nicht einfach per <img> in den Container packen und die Größe und Breite in % als Parameter mitgeben?
Beitrag zuletzt geändert: 22.5.2012 19:34:09 von der-kay -
Hast du schonmal daran gedacht die Navigation vielleicht als Liste zu realisieren, dann müsstest du nur ul bzw. li stylen.
Tabellen können schnell unübersichtlich werden.
Also ich habe die Navigationsleiste mit den Rollover Effekten mit Adobe Fireworks erstellt und der hat mir den Code als Tabelle ausgegeben. Ich wüsste nicht wie man das als Liste macht und ich weiß auch nicht wie man Rollover Effekte mit CSS macht. Könntest du mir da evtl helfen und meinen oben genannten Code anpassen? Oder ist das viel Arbeit?
Könntest du das Logo nicht einfach per <img> in den Container packen und die Größe und Breite in % als Parameter mitgeben?
Hab ich gemacht klappt auch :) -
Also...
Wenn deine Klasse z.B. #menu heißt dann würde der Code bzw. das Gerüst erstmal so aussehen:
#menu:hover{};
Je nachdem was du machen willst kommen dann noch Anweisungen zur Formatierung in die Klammern:
font-weight:bold; text-decoration:underline;
usw.
Die Liste würde (unformatiert) so aussehen:
<ul> <li>Startseite</li> <li>Youtube</li> <li>Mitglieder</li> ... <li>Impressum</li> </ul>
Falls du des englischen mächtig bist gibt es hier noch alle Hintergrundinfos zu
CSS Allgemein: http://www.w3schools.com/css/
Listen http://www.w3schools.com/css/css_list.asp
Ansonsten fördert Google auch noch 'ne Menge Blogs und Hilfeseiten wie Selfhtml u.ä. zu Tage.
Da kann man super lernen
Anpassen könnte ich's vielleicht aber dann lernst du ja nichts bei der ganzen Sache
Es sieht am Anfang vielleicht 'n Bissel fremd aus, aber wenn du die Grundlagen einigermaßen drauf hast und vor allem weißt auf welchen Internetseiten du Lösungen zu Problemen finden kannst die dir vielleicht noch unterkommen werden (Stichwort: Collapsing Margins), dann sind weder HTML noch CSS ein Hexenwerk.
PS: Ich glaube Frames verwendet man heutzutage eigentlich nicht mehr.
EDIT:
Dein Logo ist nicht per <img> eingebunden (dann würde es in dem Container liegen), sonder es ist der Hintergrund des Containers (background-image). Das Hintergrundbild ist immer genauso groß, wie der Container dem es zugewiesen wurde. Das Bild im Container kann eine Größe unanhängig von der Containergröße annehmen. Deswegen würde ich in diesem Fall vorschlagen das ganze etwa so zu machen
oder so ähnlich. Näheres in der HTML-Referenz. HTML-Seminar ist auch sehr gut zum lernen geeignet (einfach mal googeln).<img src="Pfad zum Logo" width="100%" height="100%" alt="Text der beim Mouseover oder falls das Bild fehlen sollte angezeigt wird"></img>
Beitrag zuletzt geändert: 22.5.2012 20:17:42 von der-kay -
Ok danke dir :)
Dann werde ich mal einige Seiten durchstöbern :) -
Ist vielleicht 'n Bisschen hart, aber man kann viele Dinge mit HTML-Editoren wie Dreamwaver machen.
Spätestens wenn es dann aber an's Anpassen von Designs geht, braucht man wenigstens HTML uns CSS-Kenntnisse, also nicht böse sein, wenn das nicht die erhofte Hilfe war.
-
der-kay schrieb:
Wenn deine Klasse z.B. #menu heißt dann würde der Code bzw. das Gerüst erstmal so aussehen:
#menu:hover{};
Vorsicht, Klassen werden in CSS mit einem vorangestellten Punkt angesprochen. #menu wäre eine ID.
der-kay schrieb:
Dein Logo ist nicht per <img> eingebunden (dann würde es in dem Container liegen), sonder es ist der Hintergrund des Containers (background-image). Das Hintergrundbild ist immer genauso groß, wie der Container dem es zugewiesen wurde.
Das stimmt so nicht ganz. Ein Hintergrund kann sich mit der Eigenschaft background-repeat:repeat; kachelnd wiederholen und sich so auf die Größe seines Containers ausdehnen. Mit background-repeat:no-repeat; kann man ein Hintergrundbild aber zum Beispiel auch nur ein anzeigen. Es vergrößert sich dann nicht auf die Größe des Div-Containers.
der-kay schrieb:
Ist vielleicht 'n Bisschen hart, aber man kann viele Dinge mit HTML-Editoren wie Dreamwaver machen.
Spätestens wenn es dann aber an's Anpassen von Designs geht, braucht man wenigstens HTML uns CSS-Kenntnisse, also nicht böse sein, wenn das nicht die erhofte Hilfe war.
Zum Thema HTML-Editoren muss ich dir allerdings zustimmen. Will man in diese Marterie einsteigen und etwas lernen, dann kommt man nicht darum die Grundlagen, die sehr wichtig sind, zu lernen und zu verstehen. Gerade, wenn es darum geht, wie sich Klassen und IDs nutzen lassen, wie man Container positioniert und sie sich entsprechend verhalten und nicht zuletzt wie man sauberen Quellcode schreibt.
Beitrag zuletzt geändert: 26.5.2012 19:31:07 von cyclobox -
cyclobox schrieb:
Vorsicht, Klassen werden in CSS mit einem vorangestellten Punkt angesprochen. #menu wäre eine ID.
Ja, das habe ich ID's und Klassen durcheinander geschmissen ... ich bitte das zu entschuldigen
Das stimmt so nicht ganz. Ein Hintergrund kann sich mit der Eigenschaft background-repeat:repeat; kachelnd wiederholen und sich so auf die Größe seines Containers ausdehnen. Mit background-repeat:no-repeat; kann man ein Hintergrundbild aber zum Beispiel auch nur ein anzeigen. Es vergrößert sich dann nicht auf die Größe des Div-Containers.
Ja, das ist richtig, aber ich meinte das Bild solle mit <img> in den Container, damit man ihm per width und height (je 100%) sagen kann, dass es immer den verfügbaren Platz des Containers einnehmen soll.
Meines Wissens nach (korrigiert mich, wenn ich da falsch liege) ändern sich die Abmaße eines Bildes das einem DIV per Background-Image zugewiesen wurde, beim resizen des Fensters nicht.
Diesem trägen Verhalten könnte man mit der <img> Variante relativ leicht aus dem Weg gehen.
Zum Thema HTML-Editoren muss ich dir allerdings zustimmen..
Das ist leider immer das Große Problem. Wer es sich Anfangs "schnell und dreckig besorgt", hat bei Wartungsarbeiten oder eigenen Anpassungswünschen Riesenprobleme.
Wobei es einem in CSS auch nicht leicht gemacht wird: Browser die nicht konsequent alles korrekt interpretieren und so (in meinen Augen) relativ sinnlose "Funktionen" wie Collapsing Margins. Dazu fehlt meiner Meinung nach noch ein Bisschen Logik um z.B. die Ausrichtung einfach gestalten zu können.
Da ist ein grafischer Editor für Anfänger doch verlockend. -
der-kay schrieb:
Das stimmt so nicht ganz. Ein Hintergrund kann sich mit der Eigenschaft background-repeat:repeat; kachelnd wiederholen und sich so auf die Größe seines Containers ausdehnen. Mit background-repeat:no-repeat; kann man ein Hintergrundbild aber zum Beispiel auch nur ein anzeigen. Es vergrößert sich dann nicht auf die Größe des Div-Containers.
Ja, das ist richtig, aber ich meinte das Bild solle mit <img> in den Container, damit man ihm per width und height (je 100%) sagen kann, dass es immer den verfügbaren Platz des Containers einnehmen soll.
Meines Wissens nach (korrigiert mich, wenn ich da falsch liege) ändern sich die Abmaße eines Bildes das einem DIV per Background-Image zugewiesen wurde, beim resizen des Fensters nicht.
Diesem trägen Verhalten könnte man mit der <img> Variante relativ leicht aus dem Weg gehen.
Stimmt, Backgroundbilder ändern sich nicht in ihrer Größe beim "Ziehen" des Fensters oder ähnlichem.
Es stellt sich allerdings die Frage, wie sinnvoll es ist ein Bild vom Browser in der Größe verändern zu lassen. Bei Gradienten, Farbverläufen und ähnlichem kann ich mir das aber noch vorstellen. -
cyclobox schrieb:
Stimmt, Backgroundbilder ändern sich nicht in ihrer Größe beim "Ziehen" des Fensters oder ähnlichem.
Es stellt sich allerdings die Frage, wie sinnvoll es ist ein Bild vom Browser in der Größe verändern zu lassen. Bei Gradienten, Farbverläufen und ähnlichem kann ich mir das aber noch vorstellen.
Es ging darum das einem DIV eine Breite in Prozent zugewiesen wird, damit das Layout auch bei kleineren Bildschirmauflösungen als der Threadersteller sie hatte, funktioniert.
Der besagte DIV sollte als Header fungieren und das Logo der Seite beeinhalten.
Mein Vorschlag sollte nun dafür sorgen, dass das Logo nicht, wie bei einer Breitenangabe für den Header in Pixeln, "abgeschnitten" wird, wenn die Auflösung des Besuchers zu gering ist.
Das Logo könnte so, mit der Auflösung "mitwachsen" bzw. "schrumpfen"
-
Das habe ich auch so verstanden. Ich wollte viel mehr darauf hinweisen, dass eben dieses verhalten nicht immer sinnvoll ist.
Als Beispiel seien da Landschaften oder Portraits im Header bzw. als Seitenhintergrund genannt, bei denen das Seitenverhältnis wichtig, so dass es nicht "komisch" aussieht.
Zugegeben, mein Kommentar war ein wenig Offtopic, es ist daher eher als weiterführender Hinweis zu diesem Thema zu verstehen. ;) -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
