Ergebnis 1 bis 4 von 4

Thema: Fixen und Variablen Container nbeneinander floaten

  1. #1
    Prinz(essin) Avatar von Greg10
    Registriert seit
    12.05.2007
    Beiträge
    825
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Fixen und Variablen Container nbeneinander floaten

    Also erstmal mein CSS:
    Code:
    body {
    	background-color:#303030;
    	color:#000000;
    	font-family:sans, arial, verdana, sans-serif;
    	line-height:1.3em;
    	text-align:left;
    	background-image:url(script.php?script=public&redirect=false&file=grafics/bg.png);
    	background-repeat:repeat-x;
    	background-position:center top;
    }
    div#title {
    	width:90%;
    	height:189px;
    	background-color:#ffffff;
    	position:absolute;
    	top:25px;
    	left:5%;
    	font-size:2em;
    	text-align:left;
    	background-image:url(script.php?script=public&redirect=false&file=grafics/header_bg.png);
    	background-repeat:repeat-x;
    	z-index:1;
    }
    div#ltitle {
    	background-image:url(script.php?script=public&redirect=false&file=grafics/header_bg_left.png);
    	width:38px;
    	height:187px;
    	position:absolute;
    	top:25px;
    	left:5%;
    	background-repeat:no-repeat;
    	z-index:2;
    }
    div#rtitle {
    	background-image:url(script.php?script=public&redirect=false&file=grafics/header_bg_right.png);
    	width:38px;
    	height:187px;
    	position:absolute;
    	top:25px;
    	right:5%;
    	background-repeat:no-repeat;
    	z-index:2;
    }
    div#orb {
    	width:500px;
    	height:160px;
    	position:absolute;
    	top:42px;
    	left:50%;
    	margin-left:-250px;
    	background-repeat:no-repeat;
    	z-index:2;
    }
    div#content {
    	width:90%;
    	position:absolute;
    	top:212px;
    	left:5%;
    	text-align:left;
    	background-image:url(script.php?script=public&redirect=false&file=grafics/c_bg.png);
    	background-repeat:repeat-y;
    	background-position:left top;
    	padding:0px;
    	background-color:#ffffff;
    }
    div#navigation {
    	float:left;
    	padding:15px;
    	padding-top:6px;
    	width:204px;
    	background-color:#ffffff;
    }
    div#text {
    	float:left;
    	padding:15px;
    	padding-top:6px;
    	background-color:#ffffff;
    }
    div#language_select {
    	padding:0px;
    	padding-bottom:0.5em;
    	padding-top:0.3em;
    	margin:0px;
    	margin-left:0px;
    	font-size:1em;
    	text-align:right;
    	position:absolute;
    	top:165px;
    	left:80%;
    }
    div#bottom {
    	float:left;
    	width:100%;
    	height:19px;
    	background-color:#ffffff;
    }
    div#bottom_left {
    	float:left;
    	width:19px;
    	height:19px;
    	background-image:url(script.php?script=public&redirect=false&file=grafics/bottom_left.png);
    	background-repeat:no-repeat;
    }
    div#bottom_right {
    	float:right;
    	width:19px;
    	height:19px;
    	background-image:url(script.php?script=public&redirect=false&file=grafics/bottom_right.png);
    	background-repeat:no-repeat;
    }
    und mein HTML (eigentlich KTPL (nicht fragen)):
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    	<head>
    		<title><!-- -page_title- --></title>
    		<meta http-equiv="Content-Script-Type" content="text/javascript" />
    		<meta http-equiv="Content-Style-Type" content="text/css" />
    		<link type="text/css" rel="stylesheet" media="all" href="script.php?script=public&amp;file=css/style.css&amp;redirect=false" />
    		<script src="script.php?script=public&amp;file=js/other.js&amp;redirect=false"></script>
    		<script src="script.php?script=public&amp;file=js/fade.js&amp;redirect=false"></script>
    	</head>
    	<body>
    		<div id="title">
    		</div>
    		<div id="ltitle"></div>
    		<div id="rtitle"></div>
    		<div id="orb"><img src="script.php?script=public&redirect=false&file=grafics/orb.png" alt="<!-- -page_title- -->" /></div>
    		<div id="content">
    			<div id="navigation">
    				<ul>
    					<!-- -navi- -->
    				</ul>
    			</div>
    			<div id="text">
    				<!-- [content] -->
    			</div>
    			<div id="bottom">
    				<div id="bottom_left"></div>
    				<div id="bottom_right"></div>
    			</div>
    		</div>
    		<div id="language_select">
    			<form method="post" action="script.php?script=set_lang">
    				<p>
    					<select name="lang" onchange="this.submit">
    						<!-- -language_select- -->
    					</select>
    					<input type="submit" value="OK" />
    				</p>
    			</form>
    		</div>
    	</body>
    </html>
    und jetzt mein Problem:
    da <!-- -content- --> zu einem langem fließtext wird, ist der #text div breiter als zwischen der rechten außenkante von #navigation und der rechten innenkante von #content übrigbleibt daher wird (obwohl er einfach die zeile umbrechen könnte) #text eifnach unter #navi geschoben was ich natürlich vermeiden will

    die frage ist jetzt nur wie....

    am besten wäre dann noch wenn ich dafür sorgen kann, das ätext bündig zu #content aufhört.
    normalerweise würde #text ja einfach die maximal-mögliche größe bekommen, und damit genau das tun, allerdings bekommt er die anscheinend aus irgendeinem Grund nicht (zumindest nicht wenn #naviagtion und #text doch nebeneinanderstehen, wenn der inhalt von #text nicht so lang ist)

    schonmal danke für die antworten
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Geändert von Greg10 (08.09.2008 um 02:44 Uhr)
    Orthografie und Grammatik in diesem Beitrag sind frei erfunden und eine eventuell gefundene Übereinstimmung mit einer lebenden oder toten Sprache sollte von allen Beteiligten unverzüglich ignoriert werden.

    K-Progs (In bearbeitung)
    Der inoffizielle Forum-hilfe IRC-Channel
    (Server: irc.freenode.net ; Channel: #forum-hilfe) (Client für FF)
    Ich hab auch 'n Jabber-Account beim CCC

  2. #2
    Meister(in)
    Registriert seit
    10.01.2008
    Ort
    Passau/Ösiland
    Beiträge
    267
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Moin,

    also, wenn ich dich richtig verstehe willst du zwei container nebeneinander haben, einen mit fixer Breite und der andere soll immer den restlichen zur Verfügung stehenden Platz einnehmen (horizontal) und sich nicht unterhalb der gefloatenden navi auf die ganze Breite des Viewports ausdehnen.

    Außerdem soll das Ganze möglichst flexibel sein.

    Ich hab dir ein lauffähiges Beispiel gemacht damit du siehst wie es funktioniert:
    HTML-Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <title>&nbsp;</title>
    
      <style type="text/css">
      *  {
         padding:0;
         margin:0;
        }
        #wrapper {
          margin-left: 14em;
        }
        #navigation {
          float:left;
          width:14em;
          background:lime;
          margin-left: -14em;
        }
        #text {
          background:silver;
          float: left;
          width: 100%;
        }
        ul  {
          padding:2em 1em;
    }
        li  {
        list-style-type:none;
       }
        p {
          margin:1em;
        }
    #footer  {
        clear:both;
        height:0.1px;
        font-size:0;
        line-height:0;
    } 
      </style>
      <!--[if IE]><style type="text/css">
      * html #navigation {
        display: inline;
      }
      </style><![endif]-->
    </head>
    <body>
    <div id="wrapper">
        <div id="navigation">
          <ul id="navi">
          <li><a href="#">Startseite</a></li>
          <li><a href="#">Eine Muh,</a></li>
          <li><a href="#">eine mäh,</a></li>
          <li><a href="#">eine täterätätä,</a></li>
          <li><a href="#">Noch'n Punkt</a></li>
          <li><a href="#">Und noch einer</a></li>
          </ul>
        </div>
        <div id="text">
       <p>Freilebende Gummibärchen gibt es nicht. Man kauft sie in Packungen an der Kinokasse. Dieser Kauf ist der Beginn einer fast erotischen
    und sehr ambivalenten Beziehung Gummibärchen-Mensch. Zuerst genießt man. Dieser Genuß umfaßt alle Sinne. Man wühlt in den 
    Gummibärchen, man fühlt sie. Gummibärchen haben eine Konsistenz wie weichgekochter Radiergummi. Die Tastempfindung geht
    auch ins Sexuelle. Das bedeutet nicht unbedingt, daß das Verhältnis zum Gummibärchen ein geschlechtliches wäre, denn prinzipiell 
    sind diese geschlechtsneutral. Nun sind Gummibärchen weder wabbelig noch zäh; sie stehen genau an der Grenze. Auch das macht 
    sie spannend. Gummibärchen sind auf eine aufreizende Art weich. Und da sie weich sind, kann man sie auch ziehen. Ich mache das
    sehr gerne. Ich sitze im dunklen Kino und ziehe meine Gummibärchen in die Länge, ganz ganz langsam.</p>
        </div>
       <div id="footer">&nbsp;</div>
      </div>
    </body>
    </html>
    Einfach in deinen Editor reinkopieren und im Browser betrachten.

    Der umschließende #wrapper bekommt ein margin-left mit der Breite von #navigation.
    In diesen freigewordenen Bereich wird #navigation mittels negativem margin-left reingezogen.

    #navigation und #text floaten damit sie nebeneinander stehen.
    Einen clearenden #footer habe ich der Ordnung halber definiert.

    #navigation bekommt noch per CC für den IE6 display:inline; (double-margin-Bug!)

    Hoffe ich hab dich richtig verstanden.

    koslowski

    edit. Der von dir gewählte Doctype ist nicht sonderlich brauchbar. Bei diesem Doctype ( XHTML 1.1) ist der content-type nicht text/html sondern applikation/xml. Damit hat derIE6 und kleiner ein Problem. Besser ist z.B. der Doctype in meinem Beispiel (XHTML 1.0 strict), damit bist du im always Standard-Mode.
    Geändert von koslowski (08.09.2008 um 08:43 Uhr)

  3. #3
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Zunächst würde ich auf sämtliche absoluten Positionierungen verzichten. Das führt dazu, dass diese Elemente aus dem HTML-Fluss genommen sind.
    Wenn du dafür mit float und margin arbeitest, dann ist das weitaus einfacher und wird auch übersichtlicher.

    #text steht rechts neben der #navigation und soll diese mit dem #text-Inhalt nicht "unterlaufen".
    Das erreichst du durch einen entsprechenden margin-left-Wert. Wenn nur diese beiden Div's nebeneinander angeordnet sind, reicht es, wenn #navigation gefloatet ist.

    Versuch's mal so:

    Code:
     
    div#text {
    margin-left: 234px;
    padding:15px;
    padding-top:6px;
    background-color:#ffffff;
    }

  4. #4
    Prinz(essin)
    Themenstarter
    Avatar von Greg10
    Registriert seit
    12.05.2007
    Beiträge
    825
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    mit seumas methode funktioniert es soweit (@kowloski: ich habe deine nicht ausprobiert, d mir sejuma einfacher erschien und ich deswegen mit der angefangen hab)
    werde dann mal den doctype ändern

    und noch ein dickes danke an beide
    Orthografie und Grammatik in diesem Beitrag sind frei erfunden und eine eventuell gefundene Übereinstimmung mit einer lebenden oder toten Sprache sollte von allen Beteiligten unverzüglich ignoriert werden.

    K-Progs (In bearbeitung)
    Der inoffizielle Forum-hilfe IRC-Channel
    (Server: irc.freenode.net ; Channel: #forum-hilfe) (Client für FF)
    Ich hab auch 'n Jabber-Account beim CCC

Ähnliche Themen

  1. Menüpunkte ,,fixen"
    Von arnim im Forum HTML & CSS Forum
    Antworten: 13
    Letzter Beitrag: 13.06.2007, 16:26
  2. *.png Tranzparenz in IE 5.5 & 6 fixen
    Von Pichelmother im Forum HTML & CSS Forum
    Antworten: 0
    Letzter Beitrag: 28.01.2007, 15:48
  3. Css Boxen floaten
    Von xXx_BaSStar_xXx im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 04.01.2006, 12:21
  4. probleme bei floaten von links
    Von hedges im Forum HTML & CSS Forum
    Antworten: 8
    Letzter Beitrag: 04.08.2005, 11:14
  5. Hintergrund fixen
    Von Foulfang im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 21.07.2004, 18:44

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •