CSS Problem - Browserdarstellung (Ich werde verrückt)

P

pepybot

Grünschnabel
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.
 
son gohan hat gesagt.:
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
Zum Vergrößern anklicken....
... und das ist ausschliesslich der IE6 (und älter), für den der empfohlene min-width-Workaround als "Nachhilfekurs" bereitsteht :p

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

mfg Maik
Zum Vergrößern anklicken....

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.
 
:offtopic:

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. :mad:
 
"Quellcodetechnisch" stellt sich das so dar:

Code: 
<!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">
#wrapper {
min-width:1100px;
}
.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>
<div id="wrapper">

<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>

</div><!-- / #wrapper -->
</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-1469198/website.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ß
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück