XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   CSS dynamisches Layout Problem (http://xhtmlforum.de/showthread.php?t=54834)

Rilana 04.12.2008 01:28

CSS dynamisches Layout Problem
 
Hallo alle zusammen. Bin grad an einem dynamischen CSS layout und schlage mich mit einem Problem rum.

Das ganze hat eigentlich einen Linken Teil und einen rechten Teil. Wenn man nun den Bildschirm verkleinert, dann sollte der rechte Teil sich verkleiner bis auf's minimum und dann aber stehen bleiben und nicht ans Ende der Seite rücken. Hier der Link für's bessere Verständniss Untitled Document

Wie krieg ich dass blos hin dass der rechte Teil rechts floated und der linke Teil links floated aber wenn es eng wird der rechte Teil auf's minimum geht und dann stehen bleibt und ein seitlicher scrollbalken erscheint?

css:
Code:

@charset "UTF-8";
body {
        background-image: url(pics/wandGanzBG.jpg);
        font-family: verdana;
        font-size: 13px;
        color: #FFF;
}
#full {
        width: 99%;
        height: 99%;
}
#logo {
        margin-left: 70px;
        float: left;
        width: 273px;
}
#sideNav {
        width: 210px;
        background-image: url(pics/blackBox.jpg);
        background-repeat: no-repeat;
        float: left;
        margin-top: 50px;
}
#contentbox {
        float: right; /* since this element is floated, a width must be given */
        width: 55%;
        padding-right: 70px;
}
#nav {
        text-align: left;
        margin-right: -50px;
}
#text {
        text-align: left;
        margin-top: 230px;
}

html:
HTML-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-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="styleNew.css" rel="stylesheet" type="text/css" />

</head>

<body>
<div id="full">
<div id="logo">
logo
      </div>
 
  <div id="sideNav">
    <p>&nbsp;</p>
 
  </div>
 
 
</div>

<div id="contentbox">
<div id="nav">
<? include("topNav.html"); ?>
</div>

<div id="text">

 <h1>karte</h1>
    <p>Die Hauskarte ist für Jedermann-frau ab dem 28igsten Lebensjahr erh&auml;ltlich.<br />
Sie wird kostenlos abgegeben. Anmelden kann man sich nur direkt im Haus. Tags&uuml;ber in der Ladenstrasse und im Kafe , Abends im Klub und im Kafe. Sie ist nicht zu Verwechseln mit einer Klub Member Karte. Denn neben dem verg&uuml;nstigtem und problemlosen Einlass in den Klub und den w&ouml;chentlichen Newsletter bietet sie auch diverse Vorteile in der Ladenstrasse. Ein Stamm Rabatt von 10%, kostenlose &Auml;nderung der gekauften Jeans, Pre Sale vor dem offiziellen Ausverkauf und das Beste: ab 10 Personen bieten wir durch Anmeldung unter <a href="mailto:reservation@dashaus4.ch">reservation@dashaus4.ch</a> ein privates Night Shopping in der Ladenstrasse an.
</p> 
    <a href="anmeldung.php">Hauskarte anfordern</a>
</div>

</div>
</div>


</body>
</html>

Wäre wirklich froh wenn mir jemand einen Tipp geben könnte. Danke! Rilana

heiko_rs 04.12.2008 01:42

Du kannst z.B. body min-width geben - der IE < 7 versteht das zwar nicht, aber Abhilfe gibt's hier: Stu Nicholls | CSSplay | Min-Width for Internet Explorer

Rilana 04.12.2008 08:51

Hy, danke für dein feedback, nee leider geht dass nicht, habe es im body versucht und im #full. Ich glaub ich muss das ganze wohl anders aufbauen, abur wie? es soll ja so sein dass das rechte rechts floating ist und das linke links floating.... wäre wirklich froh um jeden imput.

andir 04.12.2008 12:51

Ja, musst Du.

Wenn du ein halbwegs flexibles Layout haben willst, verzichte zunächst auf die margins und paddings in #logo und #contentbox. Browser können noch nicht richtig rechnen, aber dazu später mehr.

Du versuchst wohl die Seite zu zentrieren, das geht aber in #full besser mit einer festen Breite, die eh vorgibst und margin: 0 auto;

Dann gibst Du #logo und #contentbox jeweils eine min-width - nach Bedarf- und prozentuale Größen, z.B. 44% und 55% ( keine hundert insgesamt wegen Rundungsfehlern der Browser) in Bezug auf #full.
Das sollte für den Anfang reichen :)

Rilana 04.12.2008 15:38

Danke für deine Tipps. Habe alles geändert. Doch leider jumpt die rechte Seite immernoch unter die linke Seite beim verkleinern des Browserfensters. Ich möchte einfach dass es bei min. stehen bleibt und dann der horizontale scrollbalken kommt... Untitled Document

Hier ist mein aktuelles CSS, vielleicht hab ich ja was falsch verstanden:
Code:

@charset "UTF-8";
body {
        background-image: url(pics/wandGanzBG.jpg);
        font-family: verdana;
        font-size: 13px;
        color: #FFF;
}
#full {
        width: 99%;
        margin-top: 0px;
        margin-right: auto;
        margin-bottom: auto;
        margin-left: auto;
}
#logo {
        float: left;
        width: 15%;
        min-width: 273px;
        max-width: 350px;
}
#sideNav {
        background-image: url(pics/blackBox.jpg);
        background-repeat: no-repeat;
        margin-top: 50px;
        float: left;
        width: 15%;
        min-width: 273px;
        max-width: 350px;
}
#contentbox {
        float: right; /* since this element is floated, a width must be given */
        width: 70%;
        max-width: 1000px;
        min-width: 320px;
}
#nav {
        text-align: left;
        margin-right: -50px;
}
#text {
        text-align: left;
        margin-top: 230px;
}
ul#navlist
{
        white-space: nowrap;
        margin-right: 0px;
        margin-bottom: 20px;
        float: right;
}

#navlist li
{
display: inline;
list-style-type: none;
}

#navlist a {
        padding-right: 2px;
        padding-top: 2px;
        padding-bottom: 2px;
        padding-left: 2px;
}

#navlist a:link, #navlist a:visited
{
        color: #5A5B5D;
        background-color: #FFFFFF;
        text-decoration: none;
        font-family: Verdana;
        font-size: 90%;
}

#navlist a:hover
{
        color: #fff;
        background-color: #A7A9AC;
        text-decoration: none;
}
h1 {
        background-image: url(pics/titleBg.gif);
}
h1 {
        font-family: arial;
        font-size: 16px;
        font-weight: bold;
        text-transform: uppercase;
        color: #FFFFFF;
        background-repeat: repeat-x;
        height: 25px;
        text-indent: 10px;
        background-position: 10px;
        width: 570px;
        margin-top: 30px;
}
p {
        font-family: arial;
        font-size: 14px;
        color: #FFFFFF;
        line-height: 19px;
}
a {
        color: #000000;
        background-color: #FFFFFF;
        text-decoration: none;
        padding-right: 2px;
        padding-left: 2px;
}

a:hover {
        color: #FFFFFF;
        background-color: #23201F;
        padding-right: 1px;
        padding-left: 1px;
        text-decoration: none;
}

Wäre wirklich froh um einen Geistesblitz :) Danke, Rilana

fricca 04.12.2008 15:52

Es ist das umgebende Element, das eine Mindestbreite braucht.

Rilana 04.12.2008 15:53

OK habe noch das probiert:
Code:

#full {
        width: 955px;
        margin-top: 0px;
        margin-right: auto;
        margin-bottom: auto;
        margin-left: auto;
}

Dann funktioniert es zwar mit einmitten und mit Fenster verkleinern, aber dies hat nicht den Effekt den ich wünsche. Ich möchte dass wenn man das Fenster grösser macht die linke seite link floated und die rechte seite rechts floated.... der Text links sollte sich dynamisch verlängern oder verkürzen....

weist du was ich meine?

Rilana 04.12.2008 15:56

Code:

#full {
        width: 99%;
        margin-top: 0px;
        margin-right: auto;
        margin-bottom: auto;
        margin-left: auto;
        min-width: 1000px;
}

Dies wäre das umgebene Element, aber so funktionierts auch nicht.

fricca 04.12.2008 16:03

Dein Online-Code ist unverändert.

Rilana 05.12.2008 00:44

Hey cool, du hattest recht! Online gings dann!!! so geil! Es funktionierte im Dreamweaver nicht, da dachte ich geht eh nicht. Falsch gedacht! läuft einwandfrei! Danke dir vielmals!


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:07 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023