• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Divs passen sich dem Brauser an, haben aber doch ne feste mindestbreite

C

crofthunter

New member
Folgende Frage,

man stelle sich ein klassisches 3-Spalten-Layout vor, bei dem der Content sich bei grossen Browsergrössen anpasst. kommt man aber beispielsweise unter eine browserbreite von 800px soll das Layout dann nicht mehr mitlaufen. Bin da grad etwas kombinierschwach ;)

der code der divs könnte etwa so aussehn. vielleicht kann ja jemand das css dazu ergänzen. floats und sowas sind mir nat. klar... Mir gehts nur um die fixe breite unter 800px, damit sich die float nicht untereinander anordnen...

<!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>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
@import url(css/project_styles.css);
</style>
</head>
<body>
<div id="container">
<div id="header">Header</div>
<div id="links">Linke Spalte</div>
<div id="mitte">Mittlere Spalte</div>
<div id="rechts">Rechte Spalte</div>
</div>
</body>
</html>
 
Mein Lösungsvorschlag:
Code: 
<div id="container" style="width:100%;">
<script type="text/javascript" src="fensterbreite.js"></script>
das restliche Zeugs...
</div>
das JS:
Code: 
if(screen.width > 800)
document.getElementById("container").style.width = "800px";
 
Muss natürlich so lauten:
Code: 
if(screen.width [COLOR=Navy]<[/COLOR] 800)
document.getElementById("container").style.width = "800px";
Oder? JavaScriptler? Hallo?
 
Zuletzt bearbeitet:
sollte eigentlich funktionieren, besser wäre aber so

if(screen.width < 800)
{
document.getElementById("container").style.width = "800px";
}

wobei 800px vielleicht ein wenig zu groß ist, da immer noch ein paar pixel an die Scrollbar und eventuellen rand des Browser verloren gehen
 
"min-width"
"Der Internet Explorer 5.x interpretiert diese Angabe noch nicht." Zitat aus self html
Es wäre nett wenn einige leute nicht, vielleicht Ideen oder das könnte und probier mal das, posten würden.. sondern ihre Vorschläge vorher überprüfen. Sonst ist es keine Hilfe.

MfG madesign
 
@madesign
Na wenigstens sagen diese Nutzer nicht immer nur was nicht geht.
Im Grunde kannst Du Dir Deine Kommentare _auch_ sparen.
 
moin, so hab n bissel rumgewühlt und rumgegoogelt.

Also bin über min-width gestoplert, standarderklärung findet man hier: http://www.w3schools.com/css/pr_dim_min-width.asp

kann man sicherheitshalber für Mozillafreunde einbaun.

Bez. IE und weitere Browser wurds schon schwieriger.

Es gibt 2 Ansätze die halbwegs was taugen, aber ohne JS gehts tatsächlich nicht:

1. JS per exspression direkt im Stylesheet, wer was drüber lesen möchte (hab jetzt nur was zur maxwidth parat, min width geht aber ähnlich):
http://www.svendtofte.com/code/max_width_in_ie/

2. Eine ganz gute JS Extension von Project Seven, wer was drüber lesen möchte:
http://www.projectseven.com/tutorials/css/minwidth/index.htm

Mein Fazit zu CSS Fluid Layouts: Man solls lieber bleiben lassen, weil die Designs in kleineren Browsern fast alle krüppelig aussehen. Dennoch heisst die Devise: NIEMALS AUFGEBEN :)
 
madesign schrieb:
Es wäre nett wenn einige leute nicht, vielleicht Ideen oder das könnte und probier mal das, posten würden.. sondern ihre Vorschläge vorher überprüfen. Sonst ist es keine Hilfe.

MfG madesign
Zum Vergrößern anklicken....
Du hast offensichtlich das Prinzip von Foren, gemeinsam eine Lösung zu finden, nicht ganz verstanden :brainless . Da hilft nur: Üben, üben üben! :D
Wo kämen wir denn hin, wenn hier nur Leute, die sich ihrer Antwort 100%ig sicher sind, posten dürften...

Nächste Idee: IE interpretiert soweit ich weiß 'width' als 'min-width', wie wärs, so etwas wie
PHP: 
body{ width: 780px;
 min-width: 790px;
}
zu versuchen? IE setzt dann die (min-)width auf 780px, Browser müßten noch die zweite Zeile interpretieren und mit etwas Glück wird die width-Eigenschaft überschrieben, weil ja die min-width etwas größer ist.

Aber scheint wohl nicht zu funktionieren, wenn sich schon andere daran die Zähne ausgebissen haben ;-)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben