Fragen zu img height und menu width

[Nemesys]

Guten Tag!

Ich hab 3 Fragen: (Vorne weg: Ich darf leider keine kompletten Quellcodes posten.)

1.) Ich habe ein Bild, welches ich als Banner/Header benutze. Da das Bild in seiner vollen Größe etwas groß ist wollte ich gerne <img scr=... width="100%" height="80%"> angeben.
Egal ob ich für height jetzt 80%,50%,30% oder 150% angebe, es verändert sich die Größe garnicht. Wenn ich jetzt jedoch height="130px" angebe dann passt er das Bild entsprechend an.
Warum funktionieren hier keine % - Angaben und wie lös ich das Problem?
(Ich will lieber eine % - Angabe benutzen, weil die Website auf allen Bildschirmgrößen und Auflösungen vollständig angezeigt werden soll - oder gibt es da noch andere Möglichkeiten?)

2.) Ich habe ein Dropdown-Menü gebaut mit Css. In der style.css steht unter #Menu { width = "100%"; } drin, leider scheint er diese Angabe komplett zu ignorieren, mein Menü ist schon sehr viel früher zuende. Wie schaff ich's das Menü (eine horizontale Navigationsleiste direkt unter dem Banner) auf 100% Weite zu bringen ?

3.) Bei besagtem Dropdown-Menü habe ich das Problem, dass sich der Inhalt verschiebt sobald ich auf einen Menüpunkt gehe, der Untermenüpunkte hat (hat eigentlich nur 1 Menüpunkt Unterpunkte...) (Hab auch schon gegoogled deswegen aber es nicht so hinbekommen wie ich es gerne hätte.)

Hoffe ihr könnt mir helfen.

Viele Grüße,
Nemesys

[bubble]

Ich hab 3 Fragen: (Vorne weg: Ich darf leider keine kompletten Quellcodes posten.)

Vorne weg: ohne Quellcodes, können dir hier wohl nur allgemeingehaltene Hinweise gegeben werden.

1.) [...] Egal ob ich für height jetzt 80%,50%,30% oder 150% angebe, es verändert sich die Größe garnicht. Wenn ich jetzt jedoch height="130px" angebe dann passt er das Bild entsprechend an.
Warum funktionieren hier keine % - Angaben und wie lös ich das Problem?

Größe in Prozentangaben beziehen sich auf das Eltern-Element, wenn dieses allerdings keine Größenangaben hat, ist es immer nur genauso groß, dass der Inhalt reinpasst. Dadurch verliert die Prozentangabe dann ihre Wirkung.

2.) Ich habe ein Dropdown-Menü gebaut mit Css. In der style.css steht unter #Menu { width = "100%"; } drin, leider scheint er diese Angabe komplett zu ignorieren

Logisch, Wertzuweisung geschieht in CSS mit : und ohne Anführungszeichen (es gibt Ausnahmen)
#Menu { width: 100%; }

3.) Bei besagtem Dropdown-Menü habe ich das Problem, dass sich der Inhalt verschiebt sobald ich auf einen Menüpunkt gehe, der Untermenüpunkte hat (hat eigentlich nur 1 Menüpunkt Unterpunkte...)

Welcher Inhalt? Der vom Menü oder der nachfolgende?
Wenn es um den nachfolgenden Inhalt geht, wird es wohl daran liegen, dass dein Menü noch im Textfluss ist. Über die position-Eigenschaft lassen sich Elemente aus dem Textfluss nehmen.

MfG
bubble

[bubble]

Warum funktionieren hier keine % - Angaben und wie lös ich das Problem?
Größe in Prozentangaben beziehen sich auf das Eltern-Element, wenn dieses allerdings keine Größenangaben hat, ist es immer nur genauso groß, dass der Inhalt reinpasst. Dadurch verliert die Prozentangabe dann ihre Wirkung.

Hier hab ich CSS mit den Element-Attributen verwechselt.

MfG
bubble

[Nemesys]

Ja danke erstmal. Ich mach grad ein komplett neues Menü. Gegebenfalls melde ich mich nochmal.

Wünsche noch einen schönen Tag. :)

[Nemesys]

Guten Morgen.

Hab das Menü jetzt noch einmal komplett neu gemacht und das Problem, dass sich Inhalt verschiebt hab ich nicht mehr.

Den Header hab ich erstmal auf 150px height festgesetzt.

1.)Beim Menü tritt noch folgendes Problem auf: Ich habe 5 Menüpunkte. Um die über die gesamte Bildschirmbreite zu verteilen habe ich das im css-Teil einfach so gemacht:

#menu ul {
float: left;
width: 20%;
list-style-type: none;
}

Jetzt gehen die 5 Menüpunkte auch schön über die gesamte Breite.
Leider hat einer der 5 Menüpunkte Untermenüpunkte, die dann nurnoch 20% von 20% bekommen :/
Ich habe versucht ein ul2 zu definieren mit width:100% aber das scheint nicht so einfach möglich zu sein...

2.) Noch ein ganz anderes Problem: Obwohl sowohl das Banner im Header eine width von 100% hat als auch das Menü eine width von 100% hat, erscheint ein horizontaler Scrollbalken. Wenn ich dann nach rechts scrolle sehe ich rechts neben Banner und neben der Menüleiste Teile vom Hintergrundbild. Ich habe das sowohl mit div-style:clear.. nicht lösen können als auch mit position:fixed für Header und Menüleiste nicht lösen können. Bei Letzterem entstehen eher noch mehr Probleme, weil sich die Menüleiste nach ganz oben über das Header-Bild verschiebt...(was ich nebenbei garnicht verstehe^^)...

mfg
Nemesys

[bubble]

1.)Beim Menü tritt noch folgendes Problem auf: Ich habe 5 Menüpunkte. Um die über die gesamte Bildschirmbreite zu verteilen habe ich das im css-Teil einfach so gemacht:

#menu ul {

float: left;
width: 20%;
list-style-type: none;
}

> Ich habe versucht ein ul2 zu definieren mit width:100% aber das scheint nicht so einfach möglich zu sein...  
  
ul2? also einfach <ul2>...</ul2> ? Das geht natürlich nicht so einfach. (Es wäre auch noch invalides HTML).  
  
Da musst du ein wenig mit den CSS-Selektoren spielen.  
  
Nehmen wir mal an dein HTML sieht so aus:  
~~~html
<nav id="menu">  
	<ul>  
		<li>...</li>  
		<li>...</li>  
	</ul>  
	<ul>  
		<li>  
			<ul>  
				<li>..</li>  
			</ul>  
		</li>  
		<li>...</li>  
	</ul>  
</nav>

Dann würde #menu ul {} ja für alle ul-Elemente greifen, du willst aber sicher nur direkte Nachfahren von #menu. Dafür gibt es den >-Selektor.

#menu > ul {  
	float: left;  
	width: 20%;  
}

Allgemeine Formatierungen, welche alle ul-Elemente im #menu betreffen, kannst du dann extra definieren:

#menu ul {  
	list-style-type: none;  
	/*...*/  
}

Und wenn du nur ul-Elemente ab der 2. Ebene formatieren willst:

#menu > ul ul {  
	list-style-type: none;  
	/*...*/  
}

2.) Noch ein ganz anderes Problem: Obwohl sowohl das Banner im Header eine width von 100% hat als auch das Menü eine width von 100% hat, erscheint ein horizontaler Scrollbalken. [...] div-style:clear

div-style ist keine CSS-Eigenschaft. Wenn du den Textumfluss clear: left/right/both; meinst, der wird damit nicht viel zutun haben.

[...] mit position:fixed für Header und Menüleiste nicht lösen können. Bei Letzterem entstehen eher noch mehr Probleme, weil sich die Menüleiste nach ganz oben über das Header-Bild verschiebt...(was ich nebenbei garnicht verstehe^^)...

position: fixed; fixiert ein Element auf dem Viewport unabhängig der Scrollposition. Quasi macht es was es soll, aber nicht, dass was du willst.

Für mich klingt das nach einem box-sizing-Problem. Ich vermute du hast irgendwelche border-/padding-/margin-Angaben, beim content-box-Modell (welches des Standard-Modell ist) bezieht sich die Größenangabe auf den Inhalt(=content). Wenn der nun 100% ist, reicht schon ein Pixel von den Abstands-/Rahmen-Breiten um zu groß für den Viewport zu werden.

MfG
bubble

[Nemesys]

Vielen Dank!

Vorerst beide Probleme behoben!

Zu 1) So gelöst bekommen:

#menu ul {
float: left;
width: 20%;
list-style-type: none;
}

#menu > ul ul {
float: left;
width: 100%;
list-style-type: none;
}

Zu 2) #content hatte ein border-left mit 1px das hab ich jetzt auf 0 gesetzt erstmal. 100% + 1px sind auf jeden Fall zu viel.
-> Derzeit kein horizontaler Scrollbalken mehr vorhanden.

Danke.

mfg Nemesys

[bubble]

#menu ul {
float: left;
width: 20%;
list-style-type: none;
}

Benutz doch bitte die Möglichkeit der Quelltexthervorhebung.

> #menu > ul ul {  
> float: left;  
> width: 100%;  
> list-style-type: none;  
> }

Die float- und list-style-type-Angaben sind unnötig, da sie schon von der ersten Regel gesetzt werden.

Zu 2) #content hatte ein border-left mit 1px das hab ich jetzt auf 0 gesetzt erstmal. 100% + 1px sind auf jeden Fall zu viel.
-> Derzeit kein horizontaler Scrollbalken mehr vorhanden.

Wenn du deinen 1px-Rahmen behalten willst, müsstest du das box-sizing auf border-box setzen.

MfG
bubble

[Nemesys]

Wo müsste ich das dann angeben? Weil SO funktioniert das nicht:

#content {  
  box-sizing: border-box;  
  border-left: 1px dotted black;  
  padding: 0px;  
  width: 100%;  
  height: 50%;  
  margin-left: auto;  
  margin-right:auto;  
  float: left;  
}

mfg
Nemesys

[bubble]

Wo müsste ich das dann angeben? Weil SO funktioniert das nicht:

#content {

box-sizing: border-box;
}

Für Firefox braucht man noch das Vendor-Prefix und für recht alte Versionen anderer Browser: <http://caniuse.com/#search=box-sizing>  
  
MfG  
bubble

-- 
If "god" had intended us to drink beer, he would have given us stomachs. - David Daye

[1UnitedPower]

Meine Herren,

Guten Tag!

Ich hab 3 Fragen: (Vorne weg: Ich darf leider keine kompletten Quellcodes posten.)

Wenn eure Seite online erreichbar ist, kann sowieso jeder den Quelltext einsehen.

1.) Ich habe ein Bild, welches ich als Banner/Header benutze.

Wenn der Banner ausschließlich dem Design dient, dann solltest du auf das <img>-Element verzichten und eine Lösung mit CSS anstreben.

Da das Bild in seiner vollen Größe etwas groß ist wollte ich gerne <img scr=... width="100%" height="80%"> angeben.
Egal ob ich für height jetzt 80%,50%,30% oder 150% angebe, es verändert sich die Größe garnicht. Wenn ich jetzt jedoch height="130px" angebe dann passt er das Bild entsprechend an.
Warum funktionieren hier keine % - Angaben und wie lös ich das Problem?

In HTML5 sind nurnoch absolute Werte für die height- und width-Atrribute zugelassen. Diese Ganzzahlen repräsentieren die Höhe bzw. Breite in CSS-Pixeln. Diese Attribute dienen lediglich der Rendering-Engine als Hilfestellung, um vor dem Laden des Bildes eine Abschätzung vornehmen zu können, um störendes Springen beim Seitenaufbau zu vermeiden. Sie sind ausdrücklich nicht dafür gedacht Streckungen vorzunehmen. Bei relativen Angaben wären diese Streckungen übrigens auch nicht vermeidbar, weil sie abhängig vom Seitenverhältnis des Anzeigebereichs sind.

Eigentlich sollte den Werten garkeine Einheit (px) angehängt werden. Dass dein Browser es trotzdem richtig darstellt ist seiner Fehlertoleranz zu verdanken.

2.) Ich habe ein Dropdown-Menü gebaut mit Css. In der style.css steht unter #Menu { width = "100%"; } drin, leider scheint er diese Angabe komplett zu ignorieren, mein Menü ist schon sehr viel früher zuende. Wie schaff ich's das Menü (eine horizontale Navigationsleiste direkt unter dem Banner) auf 100% Weite zu bringen ?

Ohne Code-Beispiel ist es schwer hierzu etwas zu sagen. Benutze mal deine Entwicklerwerkzeuge (CTRL+I oder F12) um betrachte das Box-Modell der Navigation, bzw. auch der umliegenden und benachbarten Elemente.

3.) Bei besagtem Dropdown-Menü habe ich das Problem, dass sich der Inhalt verschiebt sobald ich auf einen Menüpunkt gehe, der Untermenüpunkte hat (hat eigentlich nur 1 Menüpunkt Unterpunkte...) (Hab auch schon gegoogled deswegen aber es nicht so hinbekommen wie ich es gerne hätte.)

Hoffe ihr könnt mir helfen.

Wenn du mithilfst und dazu ist Quelltext erforderlich. Remote-Debugging funktioniert nur mit Entgegenkommen.