Vorheriges Thema: Nächstes Thema: |
Autor |
Nachricht |
n!c
Anmeldungsdatum: 02.02.2009 Beiträge: 3
|
Verfasst am: 02.02.2009 10:37:31 Titel: Menuproblem |
|
|
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 ( ) 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>
<a href="index.html"><img src="bthome.jpg" border="0" /></a>
<br>
<br>
<a href="ueber.html"><img src="btüber.jpg" border="0" /></a>
<br>
<br>
<a href="proben.html"><img src="btproben.jpg" border="0" /></a>
<br>
<br>
<a href="loads.html"><img src="btloads.jpg" border="0" /></a>
<br>
<br>
<a href="mailto:mail@nicolas-athana.de"><img src="btkontakt.jpg" border="0" /></a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<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 |
|
|
Frosty Häufiger Poster
Anmeldungsdatum: 27.10.2008 Beiträge: 221
|
Verfasst am: 02.02.2009 15:55:18 Titel: |
|
|
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 |
|
|
Frosty Häufiger Poster
Anmeldungsdatum: 27.10.2008 Beiträge: 221
|
Verfasst am: 02.02.2009 16:09:39 Titel: |
|
|
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 |
|
|
n!c
Anmeldungsdatum: 02.02.2009 Beiträge: 3
|
Verfasst am: 04.02.2009 10:58:31 Titel: |
|
|
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 |
|
|
Frosty Häufiger Poster
Anmeldungsdatum: 27.10.2008 Beiträge: 221
|
Verfasst am: 04.02.2009 13:08:35 Titel: |
|
|
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 |
|
|
n!c
Anmeldungsdatum: 02.02.2009 Beiträge: 3
|
Verfasst am: 04.02.2009 14:21:47 Titel: |
|
|
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 |
|
|
|
|
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.
|
|
|