Hallo,

ich arbeite gezwungenermaßen(schule) mit dem Programm Expression Web und werde deshalb auch weiterhin dabei bleiben müssen.

Folgendes Problem:

Ich möchte wenn ich den Browser manuell verkleinere, also kleiner ziehe, das die Website sich nicht mitbewegt, sondern die wichtigen Elemente beibehalten werden und ein scrollbar unten entsteht.

Ich häng die seite mal zum besseren Verständnis an. Ich bekomm es einfach nicht hin, irgendwas stimmt am ende immer nicht.

Index.htm

Wie ihr seht, bewegen sich alle Styleelemente mit dem verkleinern mit. Dies soll nicht sein! Sie sollten an Ort und Stelle stehen bleiben, so wie der Gelbe Menüstyle

Hi,

richte für das Layout eine Mindestbreite ein. So lässt es sich nur bis zu diesem Wert zusammenschieben, und das Layout bricht nicht mehr in sich zusammen.

Bei der derzeitigen Markup-Struktur rate ich dir, einen weiteren DIV-Block einzurichten, der den Bestand in sich aufnimmt, und mit min-width formatiert wird.

Falls du bei der Seitenentwicklung den IE6 berücksichtigst, empfehle ich dir zusätzlich http://www.brunildo.org/test/min-widthS.html, da die Vorgängerversionen des IE7 die min-width-Eigenschaft nicht unterstützen.

mfg Maik

Hallo,

ich kann dich beruhigen, das ist normal wenn man verrückt wird beim Versuch eine Homepage zu gestallten mit CSS und HTML, das CSS und die vielen verschiedenen Browser wurden nämlich extra genau so konzipiert das man dabei verrückt wird und aufgibt bevor man die Homepage fertig gebaut hat, damit es nicht zu viele schaffen etwas vernünftiges zu erstellen.

Hinzu kommt noch das sie Javascript erlaubt haben, aber das der Besucher es auch abschalten kann und man sich so nun endgültig als Versager da steht, weil man es nicht hinbekommt eine Homepage zu bauen die einfach immer funktinoert genauso einfach und schnell wie den TV ein zu schalten.

Nun wegen deinem CSS Problem, es ist schon mal sehr vorbidlich und gut das du die Datei mit kompletten Code zur Verfügung gestellt hast, so kann man es sich direkt anschauen ohne viel hin und her zu spekulieren, als nächstes ist es auch vorbildlisch erwähnenswert das du eine Fileupload Service gewählt hast zur Demonstrations deiner Datei, welcher direkt benutzt werden kann ohne eine Anmeldung vorher machen zu müssen.

Wegen dem Code in deiner Datei, ich würde einen anderen Vorschlag als in bereits unser großer Meister "Maik" dir gegeben hat, wenn man min.width benutzt wird man einfach zu viel hin und her spielen müssen weil nicht jeder Browser das versteht, deswegen empfehle ich einfach ein extra Div Tag um den bisherigen Inhalt zu legen welcher eine feste Breite hat von so und so viel Pixel, dann verschiebt sich nichts mehr, weder an Ostern nach an Weihnachten, und egal auch ob es drausen schneit oder die Sonne scheint, das wird den Browser nicht mehr daran hindern können die Breite zu ändern. Dieses extra Div Tag könntest du dann noch mit CSS *html{text-align:center} und {margin:0 auto} mittig zentrieren, das ist es fertig.

Vielen Dank für die Aufmerksamkeit und schönen Tag noch.

Zitat von son gohan

Wegen dem Code in deiner Datei, ich würde einen anderen Vorschlag als in bereits unser großer Meister "Maik" dir gegeben hat, wenn man min.width benutzt wird man einfach zu viel hin und her spielen müssen weil nicht jeder Browser das versteht

... und das ist ausschliesslich der IE6 (und älter), für den der empfohlene min-width-Workaround als "Nachhilfekurs" bereitsteht

mfg Maik

Zitat von Maik

... und das ist ausschliesslich der IE6 (und älter), für den der empfohlene min-width-Workaround als "Nachhilfekurs" bereitsteht

mfg Maik

Hi,
ja es fängt immer klein an das Übel heute ist es nur der IE6 und morgen die ganze Welt , ich mache das total ungern nur für ein speziellen Browser etwas zusammen stellen, wenn es auch anders geht, mir ist sogar schon egal ob es dann am Ende kein valides HTML mehr ist weil ich in ein HTML "a" Tag ein HTML "div" Tag rein tun muss weil ich sonst kein CSS "hover" Effekt mehr bekomme.
Vielen Dank für die Aufmerksamkeit und besten Dank.

Jo, dann steck eben nach Straußenmanier den Kopf in den Sand.

Im übrigen wird überhaupt kein div-Element in einem a-Element benötigt, um im IE6 einen CSS-Hover-Effekt (damit zielst du auf einen Tooltip ab) zum Laufen zu bringen.

mfg Maik

Danke für die Antworten.

Also wenn ich das richtig verstanden habe, soll ich jetzt um mein eigentliches Design ein "großes" Div machen, worin sich dann alles befindet und mit dem aussrichten/verschieben dieses einen großen Divs, würde sich dann alles problemlos mitverschieben und ich müsste nicht 3,4 einzelne Styleelemente versuchen sich gegenseitig anzupassen.

Nur wie richte denn so ein Allgemeines "großes" Div um alles herrum ein? Ich glaube das Problem ist viel größer als gedacht, das arbeiten mit einem Programm wie Expression Web ist mehr wie das Klicken auf Symbole in Word. Und ständig sieht es im Programm anders aus als im Browser.

"Quellcodetechnisch" stellt sich das so dar:

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">   <head> <meta http-equiv="Content-Language" content="de" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Head</title> <style type="text/css"> [B]#wrapper { min-width:1100px; }[/B] .Header {         background: url('Bilder/banner.png') no-repeat center;         background-position: center center;         margin-top: 10px;         margin-right: 150px;         margin-left: 150px;         height: 100px;         text-align: center;         font-family: Arial, Helvetica, Sans-Serif;         vertical-align: baseline;         font-size: 36px;         font-style: italic;         background-color: #333399; } .menü {         background-color: #FFFF99;         float: left;         margin-left: 220px;         margin-top: 10px;         width: 180px;         height: 500px;         font-family: Arial, Helvetica, Sans-Serif; } .grafikrechts {         background-color: #0099FF;         margin-right: 220px;         margin-top: 10px;         float: right;         width: 180px;         height: 500px;         background-repeat: no-repeat;         background-image: url('Bilder/rechts2.jpg');         font-family: Arial, Helvetica, Sans-Serif;         text-align: center;         font-size: 18px; } .newsticker {         background-color: #FFFFCC;         margin: 10px 425px 0px 425px;         height: 100px;         font-family: Arial, Helvetica, Sans-Serif;         text-align: center; } .content {         background-color: #FFFFCC;         margin: 10px 425px 0px 425px;         height: 590px;         text-align: center;         font-family: Arial, Helvetica, Sans-Serif;         font-size: large; }   </style> </head>   <body> [B]<div id="wrapper">[/B]   <div class="Header" style="height: 222px">test</div >   <div  class="menü">         <img style="border: 0" id="img1" src="Bilder/button1E.jpg" height="30" width="180" alt="Navigation" /><!-- MSComment="ibutton" fp-style="fp-btn: Corporate 3; fp-font: Arial, Helvetica, Sans-Serif; fp-font-size: 12; fp-font-color-normal: #FFFFFF; fp-img-hover: 0; fp-img-press: 0; fp-preload: 0; fp-proportional: 0" fp-title="Navigation" --><br />         <br /> &nbsp;&nbsp;&nbsp; » <a href="Index.htm">Home</a><br /> &nbsp;&nbsp;&nbsp; » Contact<br /> &nbsp;&nbsp;&nbsp; » Links<br /> &nbsp;&nbsp;&nbsp; » Impressum<br />         <br />         <img style="border: 0" id="img2" src="Bilder/button21.jpg" height="30" width="180" alt="Menu" /><!-- MSComment="ibutton" fp-style="fp-btn: Corporate 3; fp-font: Arial, Helvetica, Sans-Serif; fp-font-size: 12; fp-font-color-normal: #FFFFFF; fp-img-hover: 0; fp-img-press: 0; fp-preload: 0; fp-proportional: 0" fp-title="Menu" --><br />         <br /> &nbsp;&nbsp;&nbsp; » <a href="Kultur.htm">Kultur</a><br />         <br /> &nbsp;&nbsp;&nbsp; » Geschichte<br />         <br /> &nbsp;&nbsp;&nbsp; » Impressionen<br /> &nbsp;&nbsp;&nbsp; <br /> &nbsp;&nbsp;&nbsp; </div > <div  class="grafikrechts"> <br /> <br /> Mi Casa...<br /> ... Su Casa</div > <div class="newsticker">News<br />         <br />         20.02.09 - Website wird Online gestellt<br />         19.02.09 - neues Websitedesign </div> <div class="content">Inhalt<br />         <br />         test</div>   [B]</div><!-- / #wrapper -->[/B] </body>   </html>

mfg Maik

Super, das scheint schonmal der richtige Weg zu sein, aber dennoch läuft hier etwas nicht ganz so wie ich es möchte.. Wär super nett wenn ihr euch das nochmal ansehen könntest und gegebenfalls ausbessern. Ich wär euch unglaublich dankbar "Forumlob"

http://www.file-upload.net/download-...bsite.rar.html

Da könnt ihr sehen, das sich der Header/Banner noch einzieht und der Mittelteil. Das sollte wenn möglich auch vermieden werden.

File ist nur 500Kb groß

Dann bist du mit einer festen Breitenangabe besser bedient

mfg Maik

ich hab ja auch schon alles mit fester "width" und "margin" probiert, aber irgendwas stimmte am Ende dann doch wieder nicht.. entweder war irgendein Style dann unter dem ganzen Geschehen.. oder total Abseits, das ist ja gerade das was mich die Haare raufen lässt. Sinngemäß denk ich; jetzt müsste es doch funktionieren von den Angaben.. und dann ist doch wieder was total komisch.

Wenn du mit einer fixen Breite arbeitest, solltest du auch die horizontalen Abstände margin-left / margin-right der Seitenbereiche berücksichtigen, und diese ggfs. korrigieren oder vollständig auflösen.

mfg Maik

egal was ich mache, der rechte Style verschiebt sich immer. Ich bekomm es einfach nicht hin verflucht

Addiere ich zur Bannerbreite (973px) den linken und rechten Außenabstand hinzu, ergibt das:

Code css:

1 2 3

#wrapper { width:1273px; }

und damit verschiebt sich bei mir nichts.

mfg Maik

Zitat von Maik

Im übrigen wird überhaupt kein div-Element in einem a-Element benötigt, um im IE6 einen CSS-Hover-Effekt (damit zielst du auf einen Tooltip ab) zum Laufen zu bringen.

Demonstration?