• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Box wächst nicht mit Inhalt mit

C

Corraggiouno

Mitglied
Hi,

ich hoffe ihr könnt mir weiterhelfen.....
mein html-code:
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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>NET</title>
<link href="css/mh.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<h1>NET</h1>
  <div id="nav">
    <ul>
     <li><a href="home.php">Home</a></li>
     <li><a href="dienstleistung.php">Dienstleistung</a></li>
     <li><a href="aktuelles.php">Aktulles</a></li>
     <li><a href="kontakt.php" class="enabled">Kontakt</a></li>
     <li><a href="login.php" class="noborder">Login</a></li>
    </ul> 
  </div>
  <div id="maintext">
     <div id="maintext_box_left_head">
          
     </div>
     <div id="maintext_box_left_middle">
     blub blub blub blub blub blub blub blub <br />
     blub blub blub blub blub blub blub blub <br />
     blub blub blub blub blub blub blub blub  
     blub blub blub blub blub blub blub blub <br />
     blub blub blub blub blub blub blub blub <br />
     blub blub blub blub blub blub blub blub <br />
     blub blub blub blub blub blub blub blub <br />
     blub blub blub blub blub blub blub blub <br />
     blub blub blub blub blub blub blub blub <br />
     blub blub blub blub blub blub blub blub <br />
     blub blub blub blub blub blub blub blub <br />
     blub blub blub blub blub blub blub blub <br />
     blub blub blub blub blub blub blub blub <br />
     blub blub blub blub blub blub blub blub <br />
     blub blub blub blub blub blub blub blub <br />
     blub blub blub blub blub blub blub blub <br />
     </div>
     <div id="maintext_box_left_bottom">
     </div>
  </div>
</div>
</body>
</html>

mein css-code:
Code: 
html {
height: 100.3%;
}

body {
font-family: Verdana, sans-serif;
font-size:0.8em;
background:#eeeeee;
}

* {
margin: 0;
padding: 0;
}

div#wrapper {
width: 810px;
margin:15px auto;
}

h1 {
background: url(../images/logo.gif) no-repeat;
height:155px;
text-indent: -999em;
}

div#nav {
background: url(../images/nav_bg.gif) repeat-x;
width:800px;
height:35px;
margin-left:6px;
line-height:35px;
}

div#nav ul {
list-style-type:none;
}

div#nav li {
float:left;
width:160px;
text-align:center;
}

div#nav a {
display:block;
clear:left;
text-decoration: none;
color:#ffffff;
border-right-style: solid;
border-width: 1px;
border-color: #ffffff;
}


div#nav a.noborder {
border: none;
}


div#nav a:hover {
background: url(../images/nav_hover.gif) repeat-x;
text-decoration:underline;
}

div#nav a.enabled {
background: url(../images/nav_enabled.gif) repeat-x;
font-size:1.2em;
font-weight:bold;
color:#086be6;
text-decoration:none;
}

div#maintext {
background: url(../images/maintext_bg.gif) repeat-y;
margin-left:6px;
width:900px;
height:350px;
padding-top: 15px;
}

div#maintext_box_left_head {
background: url(../images/maintext_box_left_head.gif) no-repeat;
width: 310px;
height:25px;
float:left;
margin-left:6px;

padding-left: 15px;
}

div#maintext_box_left_middle {
background: url(../images/maintext_box_left_middle.gif) repeat-y;
width: 310px;
height: 85px;
clear:left;
margin-left:6px;
padding-left: 15px;
}

div#maintext_box_left_bottom {
background: url(../images/maintext_box_left_bottom.gif) no-repeat;
width: 310px;
height: 40px;
clear:left;
margin-left:6px;
padding-left: 15px;
}
mein aktuelles Ergebnis: NET
Kann mir jemand sagen, warum die Box nicht mit dem Inhalt mit wächst? Der mittlere Teil müsste doch variable sein?
 
Code: 
div#maintext_box_left_middle {
...
height: 85px;
...
}
Der ist so hoch, wie du es angegeben hast. Wenn es variabel sein soll, lass die Höhe weg.
 
Und lass Dich mal gegen Divitis impfen. Das wird ja zur Pandemie! Niemand braucht so viele divs. Mach Dir das Leben nicht so schwer, indem Du dem div eine besondere Bedeutung zusprichst. Lerne HTML!
 
vielen dank!
hallo efchen. Da gebe ich dir recht, dass ich zuviele divs habe. Kannst du mir vielleicht einen kleinen Tipp geben, wie ich die "wachsende" linke Box ohne divs definieren kann?
 
Warum würdest Du das tun wollen? Die Box enthält mehrere Textabsätze. Dann ist es nur legitim, <div> zu seinem eigentlichen Zweck, nämlich zum Gruppieren mehrerer Elemente, zu verwenden.

Übrigens "wächst" an der Box gar nichts, wenn ich die Schrift vergrößere, dann rutscht der Inhalt auch rechts raus, genauso wie aus dem Menü...
 
Übrigens "wächst" an der Box gar nichts, wenn ich die Schrift vergrößere, dann rutscht der Inhalt auch rechts raus
Zum Vergrößern anklicken....
....aber meine Box wächst doch mit zunehmendem Inhalt nach unten mit!................müsste ich die Box betreffenden der Breite auch noch variable definieren?

, genauso wie aus dem Menü...
Zum Vergrößern anklicken....
meinst du meine Navigation?..........hier kann ich deine Aussage "der Inhalt wächst rechts raus" nicht ganz nachvollziehen!...............Kannst du mir dies etwas besser verdeutlichen?
 
Zuletzt bearbeitet:
mir ist noch aufgefallen, dass der div-container
Code: 
<div id="maintext_box_left_head">
</div>
und
Code: 
<div id="maintext_box_left_bottom">
</div>
...keinen Inhalt besitzt. Ich habe diese Container nur definiert, damit ich einen Kopf "maintext_box_left_head.gif" und einen Boden "maintext_box_left_bottom.gif" habe.
Div-Container zu definieren ohne Inhalt ist doch eigentlich schlecht, oder?
 
Ja, schon irgendwie. Aber Dir scheint nicht bewusst zu sein, dass jeder Nutzer seine Schriftgröße im Browser einstellen kann. Dazu muss man keine Änderung im Stylesheet machen. Und unterschiedliche Benutzer kommen u.U. mit unterschiedlichen Schriftgrößen auf Deine Website, aber alle von denen erwarten, dass die Site trotzdem ansprechend aussieht.
Um Deine Elemente der Schriftgröße anzupassen, kannst Du auch die Größe der Elemente in "em" angeben.
 
ok, ich nutze überwiegend firefox. Habe da mal die schriftgröße geändert. Du hast Recht, dass sich der Inhalt rechts raus bewegt.
......also ich kann dies dann anstatt px mit em abfangen.
Dann müsste ich ja alles px-Bezeichnungen in em umbennen bzw. umrechnen. Machst du das auch so, dass du nur em verwendest?
 
Was willst Du realisieren? Dass ein sehbehinderter Nutzer die Schrift nicht mehr größer stellen kann, sondern Du ihm Deine Schriftgröße, die für Deine gesunden Augen passt, aufzwingen kannst?

Ich hoffe, damit ist die Frage beantwortet.

Wenn ich hier im Forum die Schriftgröße verstelle, verändert sie sich auch.

Ich empfehle eine gesunde Mischung aus px und em. Elemente, in denen Text steht, müssten eigentlich immer eine Größe mit em bekommen. So ganz pauschal kann man das aber nicht sagen. Probiere es einfach aus, ein gutes Layout verträgt auch eine Schriftgrößenänderung über 3-5 Stufen.
 
Wenn ich hier im Forum die Schriftgröße verstelle, verändert sie sich auch.
Zum Vergrößern anklicken....
Da hast du mich wahrscheinlich mißverstanden. Wenn ich die Seite html.de Forum - HTML für Anfänger & Fortgeschrittene aufgerufen haben und die Schriftgröße in meinem Browser auf z.B. 72 einstelle, bleibt die Seite bzw. der Text nach wie vor gleich (Schriftgröße 16). Der Text wird nicht in der Schriftgröße 72 dargestellt!
Ein Beispiel: deine persönlichen Angaben unter deinem Bild verändern sich in der Schriftgröße nicht.
 
Zuletzt bearbeitet:
Nein, durch Veränderung der Einstellungen ändert sich nicht die aktuelle Seite. Die musst Du dazu erst neu laden.

Es geht aber auch einfacher: Strg-Plus/Minus (wobei das in neuen Firefoxen als "Zoom" eingestellt ist, da musst Du zuerst bei "Ansicht"->"Zoom"->"Nur Text zoomen" ein Häkchen setzen. Möglicherweise zieht das Fehlen des Häkchens auch, wenn Du die Einstellungen änderst.
 
Das ist schon komisch?!? Wenn ich die Schriftgröße im Browser auf 72 einstelle, ändert sich auf meiner Seite die Schriftgröße sofort. Rufe ich aber html.de Forum - HTML für Anfänger & Fortgeschrittene auf - selbst bei neuem Laden der Seite - passiert hier überhaupt nichts, sorry.
Nur wenn ich das Häckchen bei "Nur Text zoomen" setze und mit Hilfe STRG und + bzw. - ein und rauszoome, ändert sich die Schriftgröße auf html.de.
 
ich bin eigentlich von meinem ursprünglichen Problem abgekommen. Würdest du mir raten, dass ich die Box skalierbar und zwar skalierbar sowohl von oben nach unten als auch von links nach rechts definieren soll?
 
Ich würde Elemente, in denen Text steht, nur ungern mit festen Größen (in px) definieren. Und Layouts allgemein sollten auch nie pixelgenau sein.

Denke einfach daran, was jeder Nutzer so alles verstellen kann: Viewport-Größe & Schriftgröße erzeugen die größten Probleme an ein Layout. Aber der von Dir verwendete Font könnte beim Nutzer nicht existieren. Auch das kann sich auf Dein Layout/Design auswirken. All das sollte man berücksichtigen. Drum unterscheidet sich Web-Design ja auch so immens vom Print-Design.
 
Ich würde Elemente, in denen Text steht, nur ungern mit festen Größen (in px) definieren
Zum Vergrößern anklicken....
Aber in all meinen Elementen steht gewissermaßen Text. In meiner definierten Liste(navigation) sind die Linkbezeichnungen, also Text; in meinem div#maintext steht auch Text. Bedeutet das, dass ich nun mehr alle Div-Container die feste Breite (px) entfernen soll?
Kannst du mir vielleicht etwas genauer schildern welche Elemente du meinst, damit ich es besser machen kann! Eigentlich sind es ja dann alle Elemente, da überall Text folgt, oder?
 
Corraggiouno schrieb:
Bedeutet das, dass ich nun mehr alle Div-Container die feste Breite (px) entfernen soll?
Zum Vergrößern anklicken....
Nicht unbedingt. Das muss man selbst rausfinden. Vergrößere den Text und schau, was passiert. Gerade ein Menü, in dem oft einzelne Worte stehen, die nicht umbrechen, platzt sehr schnell aus einem fest in px angegebenem Container (das muss übrigens nicht unbedingt ein <div> sein, das ist bei allen anderen Containern wie z.B. <li> genauso).

Kannst du mir vielleicht etwas genauer schildern welche Elemente du meinst, damit ich es besser machen kann! Eigentlich sind es ja dann alle Elemente, da überall Text folgt, oder?
Zum Vergrößern anklicken....
Probiere mit allem rum, was ein Nutzer verstellen kann und schau was passiert. Du merkst ja selber, was bekloppt aussieht und was nicht. Pauschale Empfehlungen kann man da nicht geben. Denn was für jemanden mit kleinem Viewport toll ist, ist für jemanden mit großem VP schlecht und was in kleiner Schrift besser aussieht, stört den Kurzsichtigen, der auf große Schrift angewiesen ist...
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben