HTMLWorld - HTML, CSS, JavaScript, PHP, Java, Flash und vieles mehrHTMLWorld:   Home | Impressum
 

 
HTMLWorld
 

Anzeige 
 
HTMLWorld » Forum

Thema anzeigen - Menuproblem

 FAQFAQ   SuchenSuchen   MitgliederlisteMitgliederliste   BenutzergruppenBenutzergruppen   RegistrierenRegistrieren 
 ProfilProfil   Einloggen, um private Nachrichten zu lesenEinloggen, um private Nachrichten zu lesen   LoginLogin 

Menuproblem

 

Neues Thema eröffnen   Neue Antwort erstellen    HTMLWorld Foren-Übersicht
   HTML
Vorheriges Thema:
Nächstes Thema:  
Autor Nachricht
n!c



Anmeldungsdatum: 02.02.2009
Beiträge: 3
BeitragVerfasst am: 02.02.2009 10:37:31    Titel: Menuproblem Antworten mit Zitat
Nunja ich habe folgendes Problem:

Ich möchte ein Menu an der linken Seite meines Portfolios einrichten, damit es am Ende in etwa >>>SO<<< aussieht.

Jeder Button ist ein Bild wegen dem besonderen Font, zur Zeit habe ich alles einfach per Leerzeile (&nbsp) eingerichtet.
Es geht zwar aber:
Bei einer anderen Bildschirmgröße verschiebt sich alles und ich kann neben dem Menu keinen Text mehr schreiben...

Der Code zurzeit:

Code:

<html>

<head>
<title>nicolas </title>
<style type="text/css"><!--body{background-image:url(bg.jpg); background-position: top; background-repeat: no-repeat; background-attachment:fixed;}--></style>
<meta name="Keywords" content=" gfx design web portfolio referenzen service" />

</head>

<body>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="index.html"><img src="bthome.jpg" border="0" /></a>
<br>
<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="ueber.html"><img src="btüber.jpg" border="0" /></a>
<br>
<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="proben.html"><img src="btproben.jpg" border="0" /></a>
<br>
<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="loads.html"><img src="btloads.jpg" border="0" /></a>
<br>
<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="mailto:mail@nicolas-athana.de"><img src="btkontakt.jpg" border="0" /></a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<img src="btblock.jpg" border="0" />
<br>
<br>

















</body>
</html>
Wie kann ich dieses Menu so einbauen, damit diese Probleme nicht mehr auftreten, es aber trotzdem so aussieht?

Vielen Dank im Voraus.

MfG n!c
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden
Frosty
Häufiger Poster


Anmeldungsdatum: 27.10.2008
Beiträge: 221
BeitragVerfasst am: 02.02.2009 15:55:18    Titel: Antworten mit Zitat
Hi,
dein Link zeigt bei mir kein Bild an.
Der Quelltext ist mehr schlecht als recht, allerdings werd ich für meinen Teil nicht wirklich schlau draus. Wozu die 5 Mio. Umbrüche und Leerzeichen?

Aber ich bin mir sicher, dass sauberes und W3C-konformes HTML in Verbindung mit CSS - wenn im angemessenen Maße ausgeschöpft - dein Problem lösen kann.

HTML - Doku
W3C
CSS
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden
Frosty
Häufiger Poster


Anmeldungsdatum: 27.10.2008
Beiträge: 221
BeitragVerfasst am: 02.02.2009 16:09:39    Titel: Antworten mit Zitat
Aaaah, im IE 7 werden mir die Bilder deiner Seite verwehrt. KP warum das so ist. Naja jedenfalls im Firefox wirds sichtbar und nu weiss ich auch was du willst. Wie oben schon erwähnt , solltest du dich mal mit sauberen und validen HTML rumschlagen.

Wenn du deine Seite schon mit einer Tabelle aufbaust kannst du doch die Buttons locker mit unterkriegen, ohne dass der Text da drüber, drunter oder sonstwohin rutscht. Die Tabelle dann hübsch in die Mitte und gut ist.

Code:
<table>
      <tr>
        <td colspan="2">Kopf</td>
      </tr>
      <tr>
        <td>Button 1</td>
        <td rowspan="4">Hier ist der Text.</td>
      </tr>
      <tr>
        <td>Button 2</td>
      </tr>
      <tr>
        <td>Button 3</td>
      </tr>
      <tr>
        <td>Button 4</td>
      </tr>
    </table>


Wird aber schwierig, wenn du einen sehr langen Text hast, dann nämlich verteilen sich die Buttons über die Tabellen-Länge.
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden
n!c



Anmeldungsdatum: 02.02.2009
Beiträge: 3
BeitragVerfasst am: 04.02.2009 10:58:31    Titel: Antworten mit Zitat
Vielen Dank für deine super Antwort, jedoch hab ich mich vorher schon ein bisschen umgesehn und bin auf horizontal umgestiegen.
Mittlerweile habe ich denk ich einen bisschen ausgereifteren Code.

Jetzt habe ich aber folgendes Problem:

>>>Meine HP<<<

Wenn du nun zwischen "home" und "über" hinundherwechselt, verschiebt sich der Hintergrund.
Woher kommt denn nun auf einmal das Problem?

Hier mein die neuste Version meines Codes:

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" lang="en" xml:lang="en">

<head>
<title>nicolas </title>
<link rel="shortcut icon" href="images/icons/page.gif" />
<style type="text/css"><!--body{background-image:url(images/bg.jpg); background-position: top; background-repeat: no-repeat; background-attachment:scroll;}--></style>
<meta name="Keywords" content="nicolas athanasopoulos gfx design web portfolio referenzen service" />


<script type="text/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.01
  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 && d.getElementById) x=d.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>

</head>

<body>


<br>
<center>
<table style="border: 0px solid #FFFFFF; text-align:center;"
height="100" width="22%" border="0" cellspacing="0" cellpadding="0">

<td width="16%"><a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('home','','images/buttons/btover.png',1)"><img src="images/buttons/bthome.png"  border="0" id="home" /></a></td>
<td width="16%"><a href="ueber.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('ueber','','images/buttons/btover.png',1)"><img src="images/buttons/btueber.png" border="0" id="ueber"/></a></td>
<td width="16%"><a href="proben.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('proben','','images/buttons/btover.png',1)"><img src="images/buttons/btproben.png" border="0" id="proben"/></a></td>
<td width="16%"><a href="loads.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('loads','','images/buttons/btover.png',1)"><img src="images/buttons/btloads.png" border="0" id="loads"/></a></td>
<td width="16%"><a href="kontakt.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('kontakt','','images/buttons/btover.png',1)"><img src="images/buttons/btkontakt.png" border="0" id="kontakt"/></a></td>

</tr></table>

</center>
<br>
<br>
<center>
<table border="0">
  <tr>
   
    <td>
<font face="Arial">


willkommen

















</font>
</td>


 


</table>

</center>


</body>
</html>


Vielen Dank im Voraus!

MfG n!c
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden
Frosty
Häufiger Poster


Anmeldungsdatum: 27.10.2008
Beiträge: 221
BeitragVerfasst am: 04.02.2009 13:08:35    Titel: Antworten mit Zitat
Weiß ich nicht, bei mir verschiebt sich nichts.

Du solltest aber die Tatsache, dass deine Seite im IE7 und auch im IE6 nicht richtig dargestellt wird, nicht außer Acht lassen.

Im FF und Opera wird sie richtig angezeigt, allerdings verschiebt sich hier nirgends der Hintergrund.
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden
n!c



Anmeldungsdatum: 02.02.2009
Beiträge: 3
BeitragVerfasst am: 04.02.2009 14:21:47    Titel: Antworten mit Zitat
Problem erkannt:

Wird ein Text etc größer als die Bildschirmgröße, wird ja ein Scrollbalken erstellt. Dieser nimmt ein bisschen Platz weg, dadurch ändert sich die Größe der untergrundfläche. Da mein Background "top" ist, ändert sich auch die Position von "top" also wird alles etwas nach links verschoben.
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden
Beiträge der letzten Zeit anzeigen:   
Neues Thema eröffnen   Neue Antwort erstellen    HTMLWorld Foren-Übersicht
   HTML		 Alle Zeiten sind GMT + 1 Stunde
Seite 1 von 1

 
Gehe zu:  
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst deine Beiträge in diesem Forum nicht bearbeiten.
Du kannst deine Beiträge in diesem Forum nicht löschen.
Du kannst an Umfragen in diesem Forum nicht mitmachen.

 
HTMLWorld
 

Startseite | Impressum & Datenschutz