Webdesign-N00b

toppy · 25. September 2006

Also vorne weg, ich bin ein blutiger Anfänger in Sachen HTML/CSS, daher habt bitte etwas Nachsicht mit mir :rolleyes:

Wollte jetzt nur eine Seite mit 2 Blöcken erstellen - 1 Content- und einen Fusszeilenblock. Kann ja nicht so schwer sein - sollte man meinen

CSS-Datei sieht wie folgt aus:

Body {background-color: #133B5C} 


#splash_content {

		padding: 0px;

		margin: 0px;

		width: 100%;

		height: 90%;

		background-color: green;

				} 



#splash_bottom {

		position: absolute;

		bottom: 0px;

		width: 100%;

		height: 20px;

		background-color: yellow;

				}

Leider hab ich an allen 4 Seiten einen Rand und der Content-Block schließt nicht mit der Fusszeile ab !?

hausherr · 25. September 2006

Wie sieht denn der HTML-Code aus?

toppy · 26. September 2006

Also das der Content-Block nicht mit dem Fusszeilen-Block abgeschlossen hat, war ein Denkfehler von mir. Dachte ich müsste für die Fusszeile Platz lassen und habe daher die Höhe vom Content-Block mit 90% angegeben. 100% ist aber richtig, da er sich ja dann nimmt was da ist.

Was so eine Tasse Kaffee alles bewirkt

Bleibt noch das Problem mit den Rändern links, oben und rechts :rolleyes:

HTML schaut so aus:

<HTML>


<HEAD>

	<TITLE>Welcome</TITLE>

	<link rel=stylesheet type="text/css" href="./css/main.css">

</HEAD>


<BODY>


<div id="splash_content">Content


</div>


<div id="splash_bottom">Bottom

		<a href="datei1.htm">Kontakt</a>


</div>



</BODY>


</HTML>

Also wohl mit das einfachste was geht...

tacmot · 26. September 2006

"margin" ist hier das Stichwort ... allerdings für den Body.

Willst du also keine Ränder füge im Body margin: 0px hinzu.

toppy · 26. September 2006

Danke, klappt

Hatte auch Probleme meine Links zu mittels CSS zu formatieren, bis ich dann auf einer Seite die folgende Anmerkung gelesen habe:

Diese 4 Elemente müssen auch immer in genau dieser Reihenfolge stehen! Ansonsten funktioniert das ganze nicht!!

Manchmal sind die Lösungen doch sehr einfach :rolleyes:

toppy · 26. September 2006

Ich hab jetzt eine Grafik mittels dem folgenden Code positioniert:

<div style="position:relative; top: 50%;left: 50%;">

<img src="./images/pic.jpg">

</div>

Klappt auch soweit. Leider wird das Bild aber mittig vom Monitor platziert. Kann ich es auch mittig vom Browserfenster platzieren ?

tacmot · 26. September 2006

Völlig variabel ist dies schwierig zu realisieren. Entweder du greifst zu Tabellen als Struktur-Element oder du musst für das Bild im CSS die Maße mitangeben und später um die Hälfte verschieben.

Solltest du Tabellen benutzen musst du mit dem Attribut "height" arbeiten was wiederum laut Standart nicht konform ist, aber weitestgehend richtig interpretiert wird.

Ansonsten mach es wie gesagt so:

#bildMitte{

  position:absolute;

  top:50%;

  left:50%;

  width:100px;

  height:100px;

  margin-left:-50px;

  margin-top:-50px;

}

toppy · 26. September 2006

Danke tacmot, funktioniert tadellos

toppy · 26. September 2006

Und weiter geht's:

1. Der gelbe und blaue Block sollen fixiert sein, also nicht mitscrollen. Dies erreiche ich durch position: fixed;, oder ?

2. Es soll nur einen Scrollbalken für den grünen Block geben, da ja der gelbe fixiert ist. Wie erreiche ich dies ?

3. Die Höhe vom blauen Block habe ich mit 100% angegeben. Trotzdem fügt er am Ende die fehlenden 88px von oben (gelber Block) an. Wieso ?

Hier die CSS-Datei:

body {

		background-color: #133B5C;

		margin: 0px;

		scrollbar-3dlight-color: #333300;

		scrollbar-arrow-color: #000000;

		scrollbar-darkshadow-color: #000000;

		scrollbar-face-color: #133B5C;

		scrollbar-highlight-color: #FFFFFF;

		scrollbar-shadow-color: #969696;

		scrollbar-track-color: #133B5C;

	} 


#top {

		position: absolute;

		top: 0px;

		width: 100%;

		height: 88px;

		background-color: yellow;		

				}


#left {

		position: absolute;

		top: 88px;

		left: 0px;

		width:225px;

		height: 100%;

		background-color: blue;

				}


#content {

		width: 100%;

		height: 100%;

		background-color: green;

				}

toppy · 26. September 2006

Ist es mit HTML eigentlich möglich, wie in PHP auf eine externe Sprachdatei zu verweisen ? Konnte dazu bisher noch nichts finden.

toppy · 26. September 2006

1. Der gelbe und blaue Block sollen fixiert sein, also nicht mitscrollen. Dies erreiche ich durch position: fixed;, oder ?

Werde mich mal morgen (nach meiner Tasse Kaffee ) hier durcharbeiten:

Fixer Kopf: Feststehendes Menü im Seitenkopf

toppy · 27. September 2006

1. Der gelbe und blaue Block sollen fixiert sein, also nicht mitscrollen. Dies erreiche ich durch position: fixed;, oder ?

2. Es soll nur einen Scrollbalken für den grünen Block geben, da ja der gelbe fixiert ist. Wie erreiche ich dies ?

3. Die Höhe vom blauen Block habe ich mit 100% angegeben. Trotzdem fügt er am Ende die fehlenden 88px von oben (gelber Block) an. Wieso ?

Fragen wurden mit der oben angegebenen Seite beantwortet.

geloescht_JesterDay · 27. September 2006

Klappt auch soweit. Leider wird das Bild aber mittig vom Monitor platziert. Kann ich es auch mittig vom Browserfenster platzieren ?

Mittig vom Monitor? Der Browser kennt zum platzieren ja nur das Dokument.. hast du den Browser vielleicht Fullscreen?

Aber mach es doch einfach so:


<div style="width: 100px; height: 100px; margin: auto;">

  <img src="..." alt="mein Bild" />

</div>

Das Problem dabei ist nur, dass das Dokument ansich ja keine Höhe hat. Also nur diese Zeilen im Code kleben das Bild an den oberen Rand in die Mitte. Du müsstest also noch ein Element drumrumhaben, was eine fixe Höhe hat, oder andere Elemente, die das Dokument bilden (und ihm somit ja eine Höhe geben). EDIT: Hab mir den code grad nochmal angesehen... warum denn nicht einfach so:


  <img src="..." alt="mein Bild" style="width: 100px; 

    height: 100px; margin: auto;" />

Wozu immer irgendwelche Divs?

toppy · 27. September 2006

Mittig vom Monitor? Der Browser kennt zum platzieren ja nur das Dokument.. hast du den Browser vielleicht Fullscreen?

Jup, Browser ist Fullscreen. Hab aber an der rechten Seite ein Dashboard und daher hat die Zentrierung nicht ganz gestimmt.

Der Code von tacmon hat mir aber schon weitergeholfen. Hab den noch etwas verändert (Ausrichtung) und eigentlich bin ich z.Z. mit zufrieden

Danke aber für den Code-Schnipsel - ist sicherlich noch mal hilfreich.

Derzeit hab ich an den folgenden 2 Problemen zu knabbern:

1. Hover-Effekt für verlinkte Bilder

2. Öffne ein Popup mit Hilfe von etwas JavaScript. Bei meiner Seite erscheint im IE oben die gelbe Warnmeldung "Die Anzeige aktiver Inhalte, die auf den Computer.....". Auf anderen Seiten mit dem gleichen JavaScript erscheint diese nicht - irgendwas mach ich wohl falsch :rolleyes:

toppy · 4. Oktober 2006

2. Öffne ein Popup mit Hilfe von etwas JavaScript. Bei meiner Seite erscheint im IE oben die gelbe Warnmeldung "Die Anzeige aktiver Inhalte, die auf den Computer.....". Auf anderen Seiten mit dem gleichen JavaScript erscheint diese nicht - irgendwas mach ich wohl falsch

Meldung erscheint nur, wenn ich die HTML-Datei mittels Doppelklick im Windows-Explorer öffne.

Wenn ich sie mir über'n Apache anzeigen lasse, ist alles bestens.

toppy · 19. Oktober 2006

Ich führe mal meinen Hilfe-Thread weiter

Könnt ihr mir mal bitte beschreiben, wie ihr Objekte positioniert bzw. was sich in der Praxis bewährt hat ?

Im speziellen geht es mir um die unten angehängte Navigation und wie ich das in HTML umsetze...

m3rry · 23. Oktober 2006

1. Hover-Effekt für verlinkte Bilder

Dafür benötigst du 2 unterschiedliche Bilder 1 ohne Hover 2 mit Hover.

Wenn Maus-over dann zeigt er Bild2 ohne zeigt er Bild1.



<a href="http://www.meinlink.de" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','Bild2.gif',1)" target="_self"><img name="Menu1" border="0" src="Bild1.jpg" width="100" height="50"></a>

m3rry · 23. Oktober 2006

Könnt ihr mir mal bitte beschreiben, wie ihr Objekte positioniert bzw. was sich in der Praxis bewährt hat ?

Ich empfehle dir <div>

warum ? Darum:

toppy · 24. Oktober 2006

Dafür benötigst du 2 unterschiedliche Bilder 1 ohne Hover 2 mit Hover.
Wenn Maus-over dann zeigt er Bild2 ohne zeigt er Bild1.
<a href="http://www.meinlink.de" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','Bild2.gif',1)" target="_self"><img name="Menu1" border="0" src="Bild1.jpg" width="100" height="50"></a> 

Mein Link schaut jetzt folgendermassen aus:

<a href="./html/ger_main.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Finanzen','','../images/icons/navi_finanzen_hover.jpg',1)" target="_self"><img name="Finanzen" border="0" src="../images/icons/navi_finanzen.jpg" width="35px" height="40px"></a>

Das normale Symbol wird angezeigt. Sobald ich aber mit der Maus rüberfahre, kommt unten in der Statusleiste die Fehlermeldung "Fehler auf der Seite - Objekt erwartet".

Hab bereits nach OnMouseOver gegoogelt, aber die dortigen Beispiele sehen auch nicht anders aus...

m3rry · 24. Oktober 2006

Sobald ich aber mit der Maus rüberfahre, kommt unten in der Statusleiste die Fehlermeldung "Fehler auf der Seite - Objekt erwartet".

hmm wenn du es so gemacht hast wie im Beispiel, funktioniert es.

<a href="./html/ger_main.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Finanzen','','1.jpg',1)"><img name="Finanzen" border="0" src="0.jpeg" width="200" height="200"></a>

toppy · 24. Oktober 2006

hmm wenn du es so gemacht hast wie im Beispiel, funktioniert es.

<a href="./html/ger_main.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Finanzen','','1.jpg',1)"><img name="Finanzen" border="0" src="0.jpeg" width="200" height="200"></a>

Hab's jetzt genau übernommen (außer das ich auf eine phtml und nicht auf eine html verweise) und die Fehlermeldung bleibt leider.

Nutze hier den IE6. Kann der das evtl. nicht ?

<a href="../php/ger_finanzen_einnahmen.phtml" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Finanzen','','1.jpg',1)"><img name="Finanzen" border="0" src="0.jpg" width="35" height="40"></a>

Edit:

Um jetzt einen anderen Fehler auszuschließen, hab ich mal die folgende HTML-Datei angelegt - leider mit dem gleichen Ergebnis.

<html>

<head>

<head>

<body>

<a href="test.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('test','','1.jpg',1)"><img name="test" border="0" src="0.jpg" width="35" height="40"></a>

</body>

</html>

[/PHP]

Aiun · 24. Oktober 2006

1. für Javascript debugging empfehle ich Firefox, der zeigt die Fehler brauchbar an.

2. MM_Swapsowieso klingt nach einer Funktion aus einem HTML-Editor o.ä. In deinem fall heist das, die Funktion ist nicht definiert.

m3rry · 24. Oktober 2006

MM_Swapsowieso klingt nach einer Funktion aus einem HTML-Editor o.ä. In deinem fall heist das, die Funktion ist nicht definiert.

Oh ja, sorry hab das nur kurz rauskopiert gehabt und die Funktionen garnicht angefügt, sorry.

Das hier alles fehlt im Grunde noch in den <Head>, aber vielleicht gibts da auch eine kürzere Variante ?

<script language="JavaScript">

<!--

function MM_swapImgRestore() { //v3.0

  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;

}


function MM_preloadImages() { //v3.0

  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

}


function MM_findObj(n, d) { //v4.0

  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

  if(!x && document.getElementById) x=document.getElementById(n); return x;

}


function MM_swapImage() { //v3.0

  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

}

//-->

</script>

Darin sind die Funktionen definiert.

toppy · 24. Oktober 2006

2. MM_Swapsowieso klingt nach einer Funktion aus einem HTML-Editor o.ä. In deinem fall heist das, die Funktion ist nicht definiert.

Durch den Denkanstoß hab ich dann auch noch ein wenig gegoogelt und bin auf diese Seite gestoßen -> Link

Aber m3rry war ja dann schneller

Aber ein großes Danke besonders an dich m3rry für die Hilfe - klappt jetzt wie gewünscht

Anmelden

Webdesign-N00b

Empfohlene Beiträge

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Dein Kommentar

Fachinformatiker Jobs

Fachinformatiker.de, 2024 by SE Internet Services

Links

Fachinformatiker.de App

Kontakt

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte