[HTML/CSS] Höhe bestimmen

WarDynasty

WarDynasty

HWLuxx SC2-Champ, HWLuxx SC2-Cup2 Master#1
Thread Starter
Mitglied seit
06.04.2006
Beiträge
909
Ort
Wien
Hallo

Habe eine Frage:

Code: 
  div#Banner {
    text-align: left;
    margin: 3em;
    width: 760px;
    padding: 0;
    background-image:url(image.jpg);
    border: 2px ridge silver;
}

Ist es möglich da auch die Höhe zu bestimmen? Eigenltich wird sie ja aut., durch die Texte verschoben. Height geht auch nicht.

Danke-Gruss
 
Wenn Du diese Anzeige nicht sehen willst, registriere Dich und/oder logge Dich ein.
min-height:100%; height:auto !important; height:100%;

bei mir funktionst so, sowohl im IE7 als auch im FF2/3.

mfg
aelo
 
aelo schrieb:
min-height:100%; height:auto !important; height:100%;

bei mir funktionst so, sowohl im IE7 als auch im FF2/3.

mfg
aelo
Zum Vergrößern anklicken....

min-height funktioniert in IE6 nicht. !important benötigt man nur, damit dieser Ausdruck nicht von einem Anderen (zb. aus einem 2ten CSS) überschrieben wird.

Um ne feste Höhe einzustellen ist
Code: 
div#banner {
height:100px;
}
schon der richtige Ausdruck. Für ne feste Mindesthöhe sind die Ausdrücke von Aelo schon richtig, auch für IE6. Allerdings macht es wenig Sinn diese mit 100% anzugeben ;)

Code: 
div#banner {
min-height: 500px;
   height: auto !important; /*für IE6*/
   height: 500px; /*für IE6*/
}
 
bei dem div-Layout meiner Homepage brauche ich die 100% als Minimumhöhe
gibt es eigentlich eine möglichkeit für so etwas: height: 100% - 180px; ?

mfg
aelo
 
Ok danke für die Antworten...
Jedoch habe ich ein weiteres Problem:
HCqvlGcQwMNgCRM.jpg


Ich möchte in das *Kästchen* einen Text schreiben, der jedoch 1 cm. vom Rand entfernt ist. Sonst siehts ja beschissen aus.

Also diesen code:
padding:1cm;

Jedoch vergörssert sich auch das Kästchen, und der HIntergrund fängt an sich zu verdoppeln.
Gibt es eine Möglichkeit, es so zu machen, dass nichts verschoben wird?

Gruss
 
Ja, indem du das Kästchen 2cm kleiner machst.

Das ist nunmal das Boxmodel: Maße, die im CSS definiert sind + Margin + Border = reale Maße.
 
Zuletzt bearbeitet:
schreib ein DIV um den textkaste herum und vergeb dem ne Klasse oder ID. für dieses Kästchen kannste dann padding, margin ect.. reinschreiben. am besten kontrollierst du den Aufbau mit
"border:1px solid red;display:block;"
dann haste nen schönen Überblick über deine Boxen. Damit sich der BG nicht wiederholt -> "background:url(pfad) no-repeat;
 
Problem gelöst
 
Zuletzt bearbeitet:
Also leider doch wieder ein Problem:

Ich öffne meine HP im HTML-Editor per Knopfdruck, und erscheint dieses Bild:

xX1iTks7ajyNAD7.png


So sollte es sein, nun kann ich aber im INET Explorer die Leiste rechts verschiben, und dann verschiebt sich alles mit der Leiste, denn ich habe den Code: margin-left:3cm zB..wie behebe ich das Problem?

Wenn ich jetzt ohne den HTML-Editor dieses HTML-Dokument mit dem INET Öffne , dann sieht es aut. so aus:

nSRn61DFqVciLuI.png


Ich hoffe ihr versteht was ich meine. WArum ist das so?

Gruss
 
Grundsätzlich is es so, dass Browser Seiten unterschiedlich interpretiern, deshalb fügt man optimierte css datein anbei zb. so
Code: 
<!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="fileadmin/js_css/style_ie_6.css" /><![endif]-->
<!--[if lte IE 7]><link rel="stylesheet" type="text/css" href="fileadmin/js_css/style_ie_7.css" /><![endif]-->

Zahlenwerte sollte man nicht in "cm" oder "m" angeben, da auch diese von Bildschirm/Browser zu Bildschirm/Browser unterschiedlich eingelesen wird. Dafür gibts das Pixelmaß(px), Punkt(pt) oder "em".

Am besten postet du mal dein code mit CSS, vielleicht kann man dir dann besser helfen ;)
 
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" xml:lang="de" lang="de">

<head>

    <title>Avire Projekte</title>

    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <meta name="generator" content="Webocton - Scriptly" />


                <style type="text/css">
  body {
    color: black; background-color:black;
    font-size: 100.00%;
    margin-left: 1.75cm;
    text-align: center;
    font-family: Helvetica,Arial,sans-serif;
  }

  div#Banner {
    min-height: 84px;
    height: auto !important; /*für IE6*/
    height: 84px; /*für IE6*/
    text-align: left;
    margin: 3em;
    width: 723px;
    padding: 0;
    background-image:url(Bilder/Banner.jpg);
    border: 2px ridge silver;
    color:white;
    font-family: Helvetica,Arial,sans-serif;
    font-size: 110.00%;
    padding-left:1cm;
    padding-top:1.5cm
  }

  div#Info {

    text-align: left;
    color:white;
    font-family: Helvetica,Arial,sans-serif;
    font-size: 50.00%;

}

div#Logo1 {
    min-height: 150px;
    height: auto !important; /*für IE6*/
    height: 150px; /*für IE6*/
    margin-left: 3.3em;
    width: 150px;
    padding: 0;
    background-image:url(Bilder/Logo1.jpg);
    border: 2px ridge silver;
    font-family: Helvetica,Arial,sans-serif;
    float:left;

  }

  div#Logo2 {
    min-height: 150px;
    height: auto !important; /*für IE6*/
    height: 150px; /*für IE6*/
    width: 150px;
    padding: 0;
    background-image:url(Bilder/Logo1.jpg);
    border: 2px ridge silver;
    float: right;
    margin-right:6.5em

  }

    div#Uebersicht {
    min-height: 35px;
    height: auto !important; /*für IE6*/
    height: 35px; /*für IE6*/
    width: 415px;
    padding: 0;
    float: left;
    border: 2px silver dashed;
    color:white;
    font-family: Helvetica,Arial,sans-serif;
    font-size: 110.00%;
    text-align:left;
    padding-left:2.1em;
    padding-top:6.5em


  }

  h1 {
    font-size: 1.5em;
    margin: 0; padding: 0.3em;
    text-align: center;
    border-bottom: 1px solid silver;
  }

    a:link {
    color: white;
  }
    a:visited {
    color: gray;
  }
    a:hover {
    color: gray;
  }
    a:active {
    color: white;
  }
</style>



</head>

<body>

<div id="Banner">Wilkommen auf Avire-Projekte.de.vu
<div id="Info"><ul>
<li>Dein eigenes Königreich</li>
<li>Hero Master Arena</li>
<li>Ruin's TD</li>
</ul></div></div>

<div id="Logo1"></div>
<div id="Uebersicht">
<a href="http://de.yahoo.com/">News</a>
<a href="http://de.yahoo.com/">News</a>
<a href="http://de.yahoo.com/">News</a>
<a href="http://de.yahoo.com/">News</a>
<a href="http://de.yahoo.com/">News</a>
<a href="http://de.yahoo.com/">News</a>
<a href="http://de.yahoo.com/">News</a>
<a href="http://de.yahoo.com/">News</a>

</div>
<div id="Logo2"></div>



</body>

</html>
Das wäre alles, ich hoffe ihr könnt mir helfen.

Gruss
 
Zunächst einmal ist es sinnvoll sich Gedanken zu machen über den kompletten Aufbau. Dazu sind Container notwedig, das sind einfache Div tags mit klassen/id's. zb. so:
Code: 
<div id="page_content">

<!--Header -->
		<div id="head">
		<img src="img/header/construction_1.png" />
		</div>

<!--/Header -->



<!-- Navigation begin -->
<div id="navigation">
		<ul id="main_nav">
			<li><div class="one"><a href="index.php?main=home"></a></div></li>
			<li><div class="two"><a href="index.php?main=allgemein"></a></div></li>
			<li><div class="three"><a href="index.php?main=manga"></a></div></li>
			<li><div class="four"><a href="index.php?main=guides"></a></div></li>

		</ul>
</div>
<!-- Navigation end -->


<!-- Content -->
		<div id="content"> Hi ! </div>
<!-- /Content -->


<!-- Footer -->
<div id="footer">
				<ul>
					<li><a href="index.php?main=home " title="home">Home</a></li>

					<li><a href="index.php?main=kontakt">Kontakt</a></li>
					<li><a href="index.php?main=impressum" title="impressum">Impressum</a></li>
				</ul>
				
		<div class="foot_img"><img  src="img/avatar.png" /></div>
				
	<div class="clearer"></div>
</div>
<!-- /Footer -->
</div>

So bekomsmte ersteinmal Übersicht in die Sache und erhälst so DIV Blöcke die sich leichter übers CSS anordnen lassen als lose rumfliegende Tags. Das spart auch css schreibarbeit ;)

Um dein Problem zu lösen würde ich um die Logo1/2 und Übersicht Div-Tags einen Content Container drum herum machen und diesem dann eine feste Breite vergeben.
 
dark_alucard schrieb:
Zunächst einmal ist es sinnvoll sich Gedanken zu machen über den kompletten Aufbau. Dazu sind Container notwedig, das sind einfache Div tags mit klassen/id's. zb. so:
Code: 
<div id="page_content">

<!--Header -->
		<div id="head">
		<img src="img/header/construction_1.png" />
		</div>

<!--/Header -->



<!-- Navigation begin -->
<div id="navigation">
		<ul id="main_nav">
			<li><div class="one"><a href="index.php?main=home"></a></div></li>
			<li><div class="two"><a href="index.php?main=allgemein"></a></div></li>
			<li><div class="three"><a href="index.php?main=manga"></a></div></li>
			<li><div class="four"><a href="index.php?main=guides"></a></div></li>

		</ul>
</div>
<!-- Navigation end -->


<!-- Content -->
		<div id="content"> Hi ! </div>
<!-- /Content -->


<!-- Footer -->
<div id="footer">
				<ul>
					<li><a href="index.php?main=home " title="home">Home</a></li>

					<li><a href="index.php?main=kontakt">Kontakt</a></li>
					<li><a href="index.php?main=impressum" title="impressum">Impressum</a></li>
				</ul>
				
		<div class="foot_img"><img  src="img/avatar.png" /></div>
				
	<div class="clearer"></div>
</div>
<!-- /Footer -->
</div>

So bekomsmte ersteinmal Übersicht in die Sache und erhälst so DIV Blöcke die sich leichter übers CSS anordnen lassen als lose rumfliegende Tags. Das spart auch css schreibarbeit ;)

Um dein Problem zu lösen würde ich um die Logo1/2 und Übersicht Div-Tags einen Content Container drum herum machen und diesem dann eine feste Breite vergeben.
Zum Vergrößern anklicken....

Also ich verstehe das jetzt nicht richtig, das habe ich doch gemacht, oder etwa nicht, also Sachen in Divs zu setzen..?!

Gruss
 
so wie du das gemacht hast ist es schon richtig, aber manchmal reich es nicht aus. Deshalb fast man oft mehrer Elemente, die zusammen gehören und ein part bilden in einem Div zusammen. Ähnlich ist das wie bei der Verschachtelung von Tables.

z.b.

Code: 
<body>
<!-- Header -->
<div id="Header">

<div id="Banner">Wilkommen auf Avire-Projekte.de.vu
<div id="Info">
<ul>
<li>Dein eigenes Königreich</li>
<li>Hero Master Arena</li>
<li>Ruin's TD</li>
</ul>
</div>
</div>

</div>
<!-- Header end -->

<!-- Content -->
<div id="content">

<div id="Logo1"></div>
<div id="Uebersicht">
<a href="http://de.yahoo.com/">News</a>
<a href="http://de.yahoo.com/">News</a>
<a href="http://de.yahoo.com/">News</a>
<a href="http://de.yahoo.com/">News</a>
<a href="http://de.yahoo.com/">News</a>
<a href="http://de.yahoo.com/">News</a>
<a href="http://de.yahoo.com/">News</a>
<a href="http://de.yahoo.com/">News</a>

</div>
<div id="Logo2"></div>

</div>
<!-- Content end -->


</body>

Um dein Problem zu beheben gib dem div#content eine feste Breite. Beide Logos sind gefloated, deshalb steht das recht gefloatete Element auch ganz rechts. Alternativ gib dem div#logo2 ein "float:left;" , dann setzt sich das Element direkt an den Übersichtskasten an. Wichtig ist, dass du dabei dem div#Logo2 zusätzlich noch ein "clear:both" anfügst, sonst floaten alle danach stehenden Elemente ebenfalls hoch. Ein "<div style="clear:both"></div>" nach den Logos reicht auch aus.

Wenn du dir den Quelltext vom hwluxx anschaust ist es genauso strukturiert, allerdings ein wenig komplexer ;)
 
dark_alucard schrieb:
Zunächst einmal ist es sinnvoll sich Gedanken zu machen über den kompletten Aufbau. Dazu sind Container notwedig, das sind einfache Div tags mit klassen/id's. zb. so:
Code: 
...

So bekomsmte ersteinmal Übersicht in die Sache und erhälst so DIV Blöcke die sich leichter übers CSS anordnen lassen als lose rumfliegende Tags. Das spart auch css schreibarbeit ;)
Zum Vergrößern anklicken....

Und da wären wir wieder beim HTML schreiben, damit die Seite auf dem Monitor gut aussieht :rolleyes:
HTML dienst zum Strukturieren...
Bestes Beispiel:
Der Container um die Navigationsliste. Warum ein extra Container, wenn man allein die Liste mit CSS mehr als ausreichend ausrichten kann?

Guter HTML-Code besteht nicht aus Containern, statt Tabellen, sondern aus gut strukturiertem Inhalt...
 
hotracer schrieb:
Bestes Beispiel:
Der Container um die Navigationsliste. Warum ein extra Container, wenn man allein die Liste mit CSS mehr als ausreichend ausrichten kann?
Zum Vergrößern anklicken....

Das ist schon richtig, das ist ein Beispiel aus meiner eigenen Page. Doch wie kannst du dies beurteilen ohne mein CSS gesehn zu haben? Ich wollte lediglich ein Struktur Beispiel zeigen und hab unnötige Sachen raus um das ganze vereinfacht und verständlich darzustellen.

hotracer schrieb:
Guter HTML-Code besteht nicht aus Containern, statt Tabellen, sondern aus gut strukturiertem Inhalt...
Zum Vergrößern anklicken....

Das hab ich auch nicht behauptet. Doch ist es viel leichter so eine Übersicht übers template zu bewahren. Und das sowohl im CSS als auch im HTML Code..
 
Zuletzt bearbeitet:
@Dark: Du hast also wirklich Alles in Divs gesetzt..? Ist das so am einfachsten? Ich habe jetzt einfach mal deinen Code genommen, und es ist eigentlich alles genau so wie vorher;)
@Hotracer: Was meinst du mit gutem strukturiertem Inhalt?

Gruss - Danke


Edit: Wäre es sinnvoll, das HTML-Dokument einem von euch zu schicken? Damit er sich das genauer anschauen kann? Natürlich nur wenn ihr Lust habt...
 
Zuletzt bearbeitet:
Nein Alles hab ich nicht in Divs gesetzt. Nur Elemente, die auf (fast) jeder Seite vorkommen. Also Header, Navi, Content, Footer ...

Achja kein wunder, dass alles noch gleich ausschaut ;P Div-Tags sind Leertags, diese müssen auch erstmal formatiert werden ;)
 
dark_alucard schrieb:
Nein Alles hab ich nicht in Divs gesetzt. Nur Elemente, die auf (fast) jeder Seite vorkommen. Also Header, Navi, Content, Footer ...

Achja kein wunder, dass alles noch gleich ausschaut ;P Div-Tags sind Leertags, diese müssen auch erstmal formatiert werden ;)
Zum Vergrößern anklicken....

Ich verstehe jetzt nicht was du meinst. ( Bin ja n00bie)..wie soll ich die Formatieren?

Gruss
 
Code: 
<html>
<head>
<style type="text/css">
.head {font-family:Calibri, Comic Sans MS, System; font-weight:bold; font-size:20px; color:#0000FF;}
.content {font-family:Arial, Times New Roman, System; font-weight:bold; font-size:15px; color:#FF0000;}
</style>
</head>
<body>
</body>
</html>

ich glaube er meint sowas :d

mfg
aelo
 
Anmelden, um zu antworten.
Hardwareluxx setzt keine externen Werbe- und Tracking-Cookies ein. Auf unserer Webseite finden Sie nur noch Cookies nach berechtigtem Interesse (Art. 6 Abs. 1 Satz 1 lit. f DSGVO) oder eigene funktionelle Cookies. Durch die Nutzung unserer Webseite erklären Sie sich damit einverstanden, dass wir diese Cookies setzen. Mehr Informationen und Möglichkeiten zur Einstellung unserer Cookies finden Sie in unserer Datenschutzerklärung.


Zurück
Oben Unten refresh