zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Die maximale breite wird nicht erkannt

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 22.06.2006, 15:43
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.06.2006
Beiträge: 5
notebook20000 befindet sich auf einem aufstrebenden Ast
Idee Die maximale breite wird nicht erkannt

Hallo,

ich habe ein rehct verschachteltes LAyout mit div und css.

im eigentlichen Contenbereich möchte ich nun 2 divs nebeneinader stellen und das klappt mit floats auch ganz gut

wenn ich jetzt die linke tabelle auf 160px stelle udn die rechte auf "auto" dann wird die rechte nru so breit wie der inhalt. wenn ich die rechte auf 100% stelle verschiebt sie sich unter die linke tabelle und verbrät da wirklich die 100%

gibt es eigne möglichkeit für die rechte div fläche immer den maximalen zur verfügung stehenden bereich zu nutzen ohne fixe pixelangabe?

ich möchte die linketabelle per klick später ausblenden und dir rechte tabelle soll sich dann automatisch auf die volle breite ausdehnen

die funktionalität geht auch schon ganz gut aber da ich die rechte div element auf einen fixen pixelwert setzen musste, wird sie nciht automatisch ausgedehnt

Wie krieg ich also hin, das das rechte div Element sich auf die restliche Breite ausdehnt ohne unter das linke div zu springen?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 22.06.2006, 16:18
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.01.2005
Ort: Berlin
Beiträge: 2.152
mazzo wird schon bald berühmt werden
Standard

Zitat:
Zitat von notebook20000
wenn ich jetzt die linke tabelle auf 160px stelle udn die rechte auf "auto" dann wird die rechte nru so breit wie der inhalt. wenn ich die rechte auf 100% stelle verschiebt sie sich unter die linke tabelle und verbrät da wirklich die 100%
100% breite plus irgendwas ist IMMER grösser als 100%. Somit muss das so gefloatete Element sich unter das andere schieben.

Zitat:
Zitat von notebook20000
gibt es eigne möglichkeit für die rechte div fläche immer den maximalen zur verfügung stehenden bereich zu nutzen ohne fixe pixelangabe?
z.B. 20% und 80%. Inklusive Rahmen und Abstände. Siehe Boxmodell.

Zitat:
Zitat von notebook20000
ich möchte die linketabelle per klick später ausblenden und dir rechte tabelle soll sich dann automatisch auf die volle breite ausdehnen
per Klick ausblenden? Dann mit Neuladen der Seite oder mit JavaScript?

Zitat:
Zitat von notebook20000
Wie krieg ich also hin, das das rechte div Element sich auf die restliche Breite ausdehnt ohne unter das linke div zu springen?
jedes Blockelement nimmt ohne andere Defintion den verfügbaren Platz ein. Wenn width nicht anders definiert ist, ist es auto und somit würde ein Element ohne definierte width genau den Platz einnehmen, den der gefloatete und Breiten-begrenzte Container übrig lässt.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 22.06.2006, 16:38
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.780
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von notebook20000
ich habe ein rehct verschachteltes LAyout mit div und css.
[...]wenn ich jetzt die linke tabelle auf 160px stelle [...]
Also was jetzt?
Zeig bitte deinen Code.
http://xhtmlforum.de/40080-fuer-frag...twortende.html
Mit Zitat antworten
  #4 (permalink)  
Alt 22.06.2006, 16:47
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.06.2006
Beiträge: 5
notebook20000 befindet sich auf einem aufstrebenden Ast
Standard

Hallo,

also ich habe mal ein BEispiel geshen bei der ein div mit Höhe 50% definiert wurde und danach eins mit Höhe 100% . Laut dem Tutorial in dem ich das gesehen habe würde das erste Div die hälfte des Bildschrims übernehmen udn die zweite Div 100% des übrigen Rests. Also defakto 50%



Deshalb habe ich gedacht , das könnte auch in der Breite funktionieren


Der HTMl Code ist:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>##TITLE##</title>


<script language="JavaScript" type="text/javascript" src="../includes/templates/##TEMPLATESET##//js/mm.js"></script>
<script language="JavaScript" type="text/javascript" src="../includes/templates/##TEMPLATESET##//js/main.js"></script>
<link rel="stylesheet" TYPE="text/css" href="../includes/templates/##TEMPLATESET##/css/main_admin.css">
<link rel="stylesheet" TYPE="text/css" href="../includes/templates/##TEMPLATESET##/css/detail.css">

</head>

<body onLoad="MM_preloadImages('images/buttons/r_produkte_on.gif')">
<div id="pagealign" align="center">
<div id="all">
<div id="header">
<div id="left">
<div id="logo"><img src="../includes/templates/##TEMPLATESET##/images/logo_kikoffice.png" border="0" ></div>
##LOGINBOX##
</div>
<div id="right">
<div id="navi1">
<ul>
<li><img src="../includes/templates/##TEMPLATESET##/images/buttons/m_home.gif"> <a href="?">Startseite</a></li>
<li><img src="../includes/templates/##TEMPLATESET##/images/buttons/m_kontakt.gif"> <a href="?page=contact">Kontakt</a></li>
</ul>
</div>
</div>
</div>

<div id="main">
<div id="mleft">
<div id="headall">Administration: ContentManagment</div>
<div id="call">
<div id="cleft">
<div id="clhead" onClick="expander('cleft','cexpander','14px')">Kun denliste:</div>
##CONTENT1##
</div>
<div id="cexpander">
<div id="clhead" onClick="expander('cleft','cexpander','14px')">Kun denliste:</div>
<div id="clcontent">jhjk</div>
</div>
<div id="cright">

<div id="crhead" onClick="expander('cleft','cexpander','14px')">Dat en:</div>
<div id="crcontent">
<form action="index.php" method="post" enctype="application/x-www-form-urlencoded" name="kundenform">
<div id="dtable">Kundennummer:</div><div id="dtable"></div><div id="dtable"><input name="test" type="text" value="test"></div>
</form>
A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br> A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br> A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br> A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br> A<br>A<br>A<br>A<br>A<br>A<br>A<br>BB
</div>
</div>
</div>
<div id="clear"></div>
</div>
<div id="mright">
<div id="navi2">
##ADMINNAVIGATION##
</div>
</div>
</div>
<div id="footer">
<a href="?content">Impressum</a> | &copy; 2006 by xyz
</div>
</div>
</div>


</body>
</html>
Mit Zitat antworten
  #5 (permalink)  
Alt 22.06.2006, 16:47
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.06.2006
Beiträge: 5
notebook20000 befindet sich auf einem aufstrebenden Ast
Standard Das CSS ist

/* Allgemeien Taganpassungen*/

*
{
margin:0px;
padding:0px;
border:0px;
font-size: 11px;
font-family: arial, helvetica, sans-serif;
}

html
{
height:100%;
}

body
{
background-attachment: fixed;
background-image: url(../images/background.jpg);
background-repeat: repeat-x;
background-position: left top;
height:100%;
min-height:100%;
}

input
{
background-image: url(../images/bg/verlauf1.gif);
font-size:11px;
border: 1px solid #000000;
padding:1px 4px 1px 4px;
background-color:#ffffff;
font-weight:bold;
}

form {margin: 0px;padding: 0px;display:inline;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}

img
{
border:0px;
padding:0px;
margin:0px;
}

#pagealign
{
height:100%;
}






/* Umgebung*/
div #all
{
width:770px;
min-width:770px;
height:auto;
min-height:100%;
background-color:#ffffff;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #ffffff;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #FFFFFF;
}










/* Kopfbereich */
div #all #header
{
width:100%;
background-color:#3862A9;
height:36px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #FFFFFF;
}

div #all #header #left
{
width:570px;
float:left;
color:#ffffff;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #ffffff;
}

div #all #header #left #logo
{
float:left;
width:105px;
}

div #loginbox /* Loginbox */
{
float:left;
text-align:right;
width:auto;
}
div #loginbox_login /* Loginbox eingeloggt*/
{
padding: 10px 10px 10px 10px;
float:left;
text-align:right;
width:445px;
color:#ffffff;
}

div #loginbox_login a /* Loginbox eingeloggt*/
{
color:#ffffff;
}


div #all #header #right
{
float:left;
width:198px;
background-color:#ffffff;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #3862A9;
}







/* Mainbereich */
div #all #main
{
height:100%;
min-height:100%;
background-color:#FFFFFF;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #3862A9;
}

div #all #main #mright
{
float:left;
width:198px;
height:auto;
min-height:100%;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #3862A9;
}

div #all #main #mleft
{
float:left;
width:570px;
height:auto;
min-height:100%;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #ffffff;
background-color:#ffffff;
}

/* Contentbereich */
div #all #main #mleft #headall
{
padding: 36px 10px 0px 14px;
background-color:#99CCFF;
color:#3862A9;
width:auto;
font-weight:bold;
font-size:18px;
text-align: left;
vertical-align:bottom;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #ffffff;
}

div #all #main #mleft #call /* Gesamtcontent */
{
float:left;
height:auto;
min-height:100%;
width:100%;
text-align:left;

}


div #all #main #mleft #call #cleft /* Content links*/
{
background-color:#ffffff;
width:180px;
height:auto;
min-height:100%;
float:left;
text-align:left;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #ffffff;
}

div #all #main #mleft #call #cexpander /* Ersetzt Content links als "Ausklapper" Ist am Anfang ausgeblendet*/
{
display:none;
background-color:#ffffff;
width:20px;
height:auto;
min-height:100%;
float:left;
text-align:left;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #ffffff;
}

div #all #main #mleft #call #cright /* Content rechts*/
{
height:auto;
min-height:100%;
width:auto;
/*float:left;width:389px; Wird durch margin-left:0px ersetzt. Dann klappts auch*/
/*margin-left:0px; Funktioneirt leifer nicht im IE , da der Content dann rüberscrollt*/
float:left;width:389px;
/*margin-left:0px;*/
}

div #all #main #mleft #call #clhead /* Kopf Content links*/
{
padding: 3px 4px 3px 16px;
background-color:#3862A9;
color:#ffffff;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #ffffff;
display:block;
cursorointer;
}
div #all #main #mleft #call #clhead:hover /* Kopf Content links Hovereffekt geht aber nur bei Firefox udn Opera*/
{
background-color:#5A84CB;
}

div #all #main #mleft #call #clcontent /* Inhalt Content rechts*/
{
height:auto;
min-height:100%;
padding: 3px 4px 3px 8px;
background-color:#ffffff;
color:#000000;
}


div #all #main #mleft #call #crhead /* Kopf Content rechts*/
{
padding: 3px 4px 3px 8px;
background-color:#3862A9;
color:#ffffff;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #ffffff;
display:block;
cursorointer;
}

div #all #main #mleft #call #crhead:hover /* Kopf Content rechts Hovereffekt geht aber nur bei Firefox udn Opera*/
{
background-color:#5A84CB;
}

div #all #main #mleft #call #crcontent /* Inhalt Content rechts*/
{
height:auto;
min-height:100%;
padding: 3px 4px 3px 8px;
background-color:#ffffff;
color:#000000;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #ffffff;
}


/* Fußbereich */
div #all #footer
{
clear: both;
height:60px;
background-color:#3862A9;
padding:1px 10px 10px 20px;
text-align:right;
color:#ffffff;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #FFFFFF;
}

div #all #footer a
{
color:#ffffff;
}



/* Navigation 1 */
#navi1
{
font-size:11px;
}
#navi1 ul
{
text-align: right;
padding:10px 10px 10px;
}
#navi1 li
{
list-style-type: none;
display: inline;
}
#navi1 li:first-child
{
border: none;
}

/* Navigation 2 */
#navi2
{
text-align:left;
margin: 0px;
padding: 0px;
border-top-width: 1px;
border-top-style:dotted;
border-top-color: #cccccc;
}
#navi2 a
{
display: block;
text-decoration:none
}
#navi2 a:hover
{
color:#ffffff;
background-color:#3862A9;
}
#navi2 #navi2head
{
font-size:13px;
font-weight:bold;
margin: 0px;
padding: 2px 2px 2px 10px;
}
#navi2 #navi2content
{
margin: 0px;
padding: 2px 2px 2px 10px;
}


/* Navigation 3 + 4 */
#navi3
{
float:left;
text-align:left;
padding-top:3px;
padding-bottom:4px;
padding-left:20px;
padding-right:2px;
}
#navi3_symbol
{
width:20px;
padding-left:2px;
float:right;
padding-right:4px;
}

#navi4
{
float:left;
text-align:left;
padding-top:3px;
padding-bottom:4px;
padding-left:34px;
padding-right:2px;
}
#navi4_symbol
{
width:20px;
padding-left:2px;
float:right;
padding-right:4px;
}

.listhead1
{
height:20px;
background-color:#ffffff;
display:block;
text-decoration:none;
cursorointer;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #000000;
}
.listhead1:hover
{
display:block;
background-color:#3862A9;
color:#ffffff;
text-decoration:none;
}




/* Allgemien Definition */
div #clear /* Beendet Floats*/
{
clear:both;
}
Mit Zitat antworten
  #6 (permalink)  
Alt 22.06.2006, 16:50
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.06.2006
Beiträge: 5
notebook20000 befindet sich auf einem aufstrebenden Ast
Standard

wenn ich das float:left im rechten contentfeld durch margin:0px ersetze , gehts zwar mit der dynamischen ANpassung aber dann wird der Text in den linken BEreich gefloatet Das ist nicht so gut.

Ist bei IE so udn ich glaube auch beim Firefox und Opera
Mit Zitat antworten
  #7 (permalink)  
Alt 22.06.2006, 16:51
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.867
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Bevor ich mich da jetzt durchquäle, eine ganz einfache Antwort: Wenn Du 2 DIVs im Quelltext untereinander hast, bekommt das erste width: 160px; und float: left; und das zweite nichts weiter als margin-left: 160px; (3px-Korrektur für IE separat), dann nimmt es automatisch den restlichen Platz bis zum rechten Rand ein.
Mit Zitat antworten
  #8 (permalink)  
Alt 22.06.2006, 16:53
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.780
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Also manchmal.
Zitat:
Stell einen kompletten, lauffähigen Code ein, der einen das Problem sicher nachvollziehen lässt und der dabei auf Überflüssiges verzichtet. Selten, sehr selten sind dazu mehr als ein paar Handvoll Zeilen notwendig.
Was ist an diesem Satz so schwer verständlich?
Mit Zitat antworten
  #9 (permalink)  
Alt 22.06.2006, 20:08
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.06.2006
Beiträge: 5
notebook20000 befindet sich auf einem aufstrebenden Ast
Standard

Zitat
Also was jetzt?
Zeig bitte deinen Code.


und was habe ich jetzt falch gemacht? Nix und was hast du falsch gemacht? Alles! Dein Kommentar war ehr al irrelevant
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 22.06.2006, 20:14
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.780
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von notebook20000
und was habe ich jetzt falch gemacht?
Du hast nicht gelesen und nicht verstanden.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Variable Breite mit fester Breite vermischen vertex CSS 11 16.10.2006 13:22
Maximale Breite bei Selectboxen im Firefox ole CSS 1 08.08.2006 11:51
tabellen eine maximale breite zuweisen java CSS 6 10.03.2006 13:39
3 Spalten | Aussen: variable Breite; Mitte: feste Breite dreamshocker CSS 9 17.08.2005 16:23
Maximale Höhe, maximale Breite. Hausmeista CSS 6 12.08.2005 13:55


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