Neues HP Layout...2 probleme

jmm

jmm

Neuling
Thread Starter
Mitglied seit
12.04.2008
Beiträge
921
Hi,
Da mein layout(altes) viele probleme hatte und ich es net selber gemacht habe, habe ich mich mal selber versucht...
Ich habe viele probleme beseitigen können aber 3 sind übrig hoffe ihr wisst mehr:
Was beim Layout verbessert werden muss:
1.Seiten öffnen sich in einerm neuen fentser...ich will des die im main angezeigt werden... Muss wohl irgendwas mim target ändern oder?
2.
nur die navigation ist auf der linken seite schwarz hinterlegt der rest soll auch schwarz werden heist auch die linke seite unter der navi die etz noch weiß ist...(das gleiche auf der rechten seite)


Hier ein screen:


Hier mal meine quellcodes:
Index.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Julius Michel</title>
<link href="css/struktur.css" rel="stylesheet" type="text/css" media="screen">
<link href="css/layout.css" rel="stylesheet" type="text/css">
<link href="css/drucken.css" rel="stylesheet" type="text/css" media="print">
</head>

<style type="text/css">

/* Vertikale Navigation */
div#Tmenu {
font-size: 94%;
width: 10em;
padding: 0.8em;
border: 1px solid white;
background-color: #eee;
}
* html div#Tmenu {
width: 11.3em;
w\idth: 10em; /* (IE 6 in standards-compliant mode) */
}
ul#Navigation {
margin: 0; padding: 0;
text-align: center;
}

ul#Navigation li {
list-style: none;
position: relative;
margin: 0.4em; padding: 0;
}
* html ul#Navigation li {
margin-right:1.5em; /* Platz fuer Link-Verbreiterung im IE reservieren */
margin-bottom:0;
}

ul#Navigation li ul {
margin: 0; padding: 0;
position: absolute;
top: 0; left: 9.3em;
}
*:first-child+html ul#Navigation li ul {
left: 9em; /* (IE 7 in standards-compliant mode) */
}
ul#Navigation li ul li {
margin: 0; padding-left: 1.4em;
}

ul#Navigation a, ul#Navigation span {
display: block;
width: 7em;
font-family: "Trebuchet MS", "Century Gothic", Helvetica, Arial, sans-serif;
text-decoration: none; font-weight: bold;
padding: 0.2em 1em;
border: 1px solid #900;
border-left-color: #c96; border-top-color: #c96;
color: white; background-color: #c00;
}
* html ul#Navigation a, * html ul#Navigation span {
width: 9em;
w\idth: 7em; /* (IE 6 in standards-compliant mode) */
}
ul#Navigation a:hover, ul#Navigation span, li a#aktuell:hover {
border-color: #c96;
border-left-color: #900; border-top-color: #900;
background-color: #e00;
}
li a#aktuell {
border-right-color: #300; border-bottom-color: #300;
background-color: #900;
}
ul#Navigation li ul span {
border-color: #900; border-left-color: #c96;
color: #900; background-color: white;
}
ul#Navigation li a:active {
color: black; background-color: #f00;
}

/* dynamisches Ein-/Ausblenden */
ul#Navigation li ul {
display: none;
}
ul#Navigation li:hover>ul {
display: block;
}
ul#Navigation>li:hover>a {
width: 8.2em;
background: #e00 url(pfeil.gif) no-repeat center right;
}

/* dynamisches Ein-/Ausblenden der JavaScript-generierten Klasse im IE */
* html ul#Navigation li.hoverIE {
margin-right:0; /* reservierten Platz freigeben */
margin-bottom:-1.15em; /* Fehlerkorrektur, ggfls. anpassen */
}
* html ul#Navigation li.hoverIE ul {
display: block;
}
* html ul#Navigation li .hoverIE {
width: 10.3em;
w\idth: 8.2em; /* (IE 6 in standards-compliant mode) */
background: #e00 url(pfeil.gif) no-repeat center right;
}
ul#Navigation li ul li ul{
margin: 0; padding: 0;
position: absolute;
top: 0; left: 9.3em;
}
*:first-child+html ul#Navigation li ul li ul {
left: 9em; /* (IE 7 in standards-compliant mode) */
}
ul#Navigation li ul li ul li{
margin: 0; padding-left: 1.4em;
}
</style>
<body>

<div id="mother">
<div id="header">
<center><h1>»www.Julius-Michel.de«</h1></center>
</div>
<div id="menu">
<ul id="Navigation">
<li><a id="aktuell" href="erste.html"target="Inhalt">Über mich</a>
<ul>

<li><span>Startseite</span></li>
<li><a href="Steckbrief.html"target="Inhalt">Steckbrief</a></li>
<li><a href="Playlist.html"target="Inhalt">Mukke</a></li>
</ul>
</li>
<li><a href="events.html"target="Inhalt">Events</a>
<ul>
<li><a href="rip09.html"target="Inhalt">Rip 09</a></li>
</ul>

</li>
<li><a href="gaestebuch.php"target="Inhalt">Guestbook</a></li>
<li><a href="Serien.html"target="Inhalt">Serien</a>
<ul>
<li><a href="kus.html"target="Inhalt">Kloß und Spinne</a></li>
</ul>
</li>
<li><a href="Pc.html"target="Inhalt">Pc</a>
<ul>
<li><a href="Pcsystem1.html"target="Inhalt">Gaming Pc</a></li>
<li><a href="Pcsystem2.html"target="Inhalt">Linux Pc</a></li>
<li><a href="Spielebewertung.html"target="Inhalt">Spiele</a></li>
</ul>
</li>
<li><a href="Triathlon.html"target="Inhalt">Triathlon</a>
<ul>
<li><a href="schwimmen.html"target="Inhalt">Schwimmen</a></li>
<li><a href="Mountainbike.html"target="Inhalt">Mountaibike</a></li>
<li><a href="Rennrad.html"target="Inhalt">Rennrad</a></li>

<li><a href="Laufen.html"target="Inhalt">Laufen</a></li>
<li><a href="Erfolge.html"target="Inhalt">Erfolge</a></li>
</ul>
</li>
<li><a href="Links.html"target="Inhalt">Links</a></li>
<li><a href="Impressum.html"target="Inhalt">Impressum</a></li>
</ul>
<center><a href="" target="_blank"><img src="http://www.directcounter.de/dc/?uid=288669723" border="0" alt=""></a><br /></center>
</div>

<div id="main">
<bgcolor="#000000">
<FONT FACE="Comic Sans MS">
<font color="#ff0000"><h3>Achtung:</h3><br>
<h4>Internet Explorer und andere webbrowser stellen diese Homepage unvollständig dar, um eineuneingeschränkte Sicht auf diese Homepage zu haben öffnen Sie sie bitte mit Firefox , falls Sie Firefox nicht haben können sie ihn <a href="http://www.chip.de/downloads/Firefox_13014344.html">Hier Downloaden</a>!!!</h4>

<object width="125" height="44"><param name="movie" value="http://www.youtube.com/v/2I2b64-ykyE&hl=en"></param><embed src="http://www.youtube.com/v/2I2b64-ykyE&hl=en" type="application/x-shockwave-flash" width="125" height="44"></embed></object>

<center><p><img src="roadrunner.jpg" alt="Roadrunner United"></p></center>

</FONT>
</ul>
</div>
<font color="#ff0000">
<div id="footer">
<center><p>© Julius Martin Michel</a></p></center>
</div>
</div>
</font>
</body>
</html>
Zum Vergrößern anklicken....

strucktur.css:
* {
padding: 0;
margin: 0;
}

body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
text-align: center;
background-color: black;
margin-top: 10px;
}

#mother {
width: 780px;
text-align: left;
background-color: white;
margin: 0 auto;
border: 5px solid white;
}

#header {
height: 65px;
background-color: #8b0000;
}

#menu {
float: left; /* schwebt links */
width: 160px;
background-color: #000000;
padding: 20px 5px;
}

#main {
background-color: #000000;
padding: 20px 10px;
margin: 0 175px 0 175px;
}



#footer {
clear: both;
height: 15px;
padding: 5px;
background-color: #8b0000;
}

#column {
position: absolute;
top: 80px;
right: 0;
width: 160px;
background-color: #000000;
padding: 20px 5px;
Zum Vergrößern anklicken....

layout.css
/* Überschrift im header-DIV */
#header h1 {
color: white;
padding: 5px
}

/* Menüleiste (menu-DIV) */
#menu a {
text-decoration: none;
font-weight: bold;
color: black;
display: block;
padding: 3px;
}

#menu a:hover {
color: red;
}

#menu li {
border: 1px solid #ffff99; /* Trick */
}

#menu #high {
font-weight: bold;
color: white;
background-color: #ff9900;
display: block;
padding: 3px;
}

#menu ul {
line-height: 1.6;
list-style-type: none;
}

#menu ul ul {
line-height: 1.4;
list-style-image: url(reddot.gif);
padding-left: 20px;
}
/* Ende Menüleiste */

/* ab hier: main-DIV */
/* Hauptüberschrift: */
#main h1 {
font-size: 1.3em;
font-weight: bold;
color: #333399;
padding-bottom: 14px
}

/* Unterüberschrift: */
#main h2 {
font-size: 1em;
line-height: 1.4;
margin-bottom: 6px
}

/* normaler Fließtext: */
#main p {
margin-bottom: 12px;
line-height: 1.3;
}

/* Kastenformat */
#main .kasten {
text-align: center;
padding: 5px;
background-color: #ffff99;
border: solid 1px black;
width: 500px;
}

/* Minigrafik rechts ausrichten */
#main .floatR130 {
float: right;
margin-left: 5px;
margin-right: 130px;
}

/* UL mit grafischem Aufz.zeichen: */
#main ul {
list-style-image: url(reddot.gif);
margin-left: 30px;
margin-bottom: 10px;
line-height: 1.5;
}

/* STRONG umdefinieren */
#main strong {
font-family: "Century Gothic", Verdana, Arial, Helvetica, sans-serif;
color: red;
}
/* Ende main-DIV */
Zum Vergrößern anklicken....

drucken.css
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background-color: white;
}

#header {
visibility: hidden;
height: 0;
}

#menu {
visibility: hidden;
height: 0;
}

#main {
width: 100%;
margin: 0;
padding: 0;
}
Zum Vergrößern anklicken....
 
Wenn Du diese Anzeige nicht sehen willst, registriere Dich und/oder logge Dich ein.
Falsches Unterforum - Verschoben nach Scripting & Programmieren
 
Google mal nach html.-Frames und versuch es damit. Klappt bei mir auch gut. (Siehe Signatur)
 
ohw ich brauch den target scheiss net da ich ja kein frameset benutze...
des 2.problem konnte ich lösen bliebe nur noch 1
 
Cyba_Mephisto schrieb:
Und wieso?
Zum Vergrößern anklicken....
weil wir 2008 haben und nicht 1998 ;)

Frames sind einfach nicht mehr up to date, erschweren Suchmaschinen unnoetig die Indizierung und sind aus Barrierefreiheitsicht ein Graeuel.

@TO: ohne eine Art von serverseitiger Scriptsprache wird du einfach den rahmen um den Content auf allen Seiten extra machen muessen.

Ansonten trennst du die Seite in 3 Bereiche. Das vor dem Content, den Content und das danach. dann includierst du auf jeder Seite vor und nach dem Content das Aussenrum per PHP.

also zb in der Events.php

Code: 
<?php
include 'header.php';
?>
Inhalt, Liste der Events, sonstwas
<?php
include 'footer.php';
?>

in der header.php alles bis einschliesslich "<div id="main">" und in der footer.php alles ab dem schliessenden div von main.
 
Zuletzt bearbeitet:
Und was singalisiert uns dann auf der Seite, dass wir uns im Jahre 2008 befinden?
 
Und was singalisiert uns dann auf der Seite, dass wir uns im Jahre 2008 befinden?
Zum Vergrößern anklicken....
..auf der Seite ist es nicht sichtbar, es sei denn du schreibst es dazu, dass wir 2008 haben.

Frames sind out, das ist nunmal Fakt! Es gibt inzwischen viel elegantere und einfachere Lösungen zb. die von Kasn.
 
Das war metaphorisch.^^
Ich wollte eigentlich ´ne Aufzählung der Möglichkeiten.
 
Machs doch mit PHP und nem Switch. Hab dazu n Tut auf meiner Seite geschrieben ;)
 
Anmelden, um zu antworten.

Ähnliche Themen

Hattori1000
[User-Review] Lesertest: ADATA XPG LANCER BLADE RGB DDR5 - 6000Mhz
Antworten
0
Aufrufe
688
Hattori1000
Hattori1000
Scoty
  • Artikel
[Sammelthread] ASRock Phantom Gaming X870E Nova WiFi (AM5)
6 7 8
Antworten
212
Aufrufe
9K
ApolloX
ApolloX
Ak1504
[Sammelthread] Night-Runners Prologue
Antworten
2
Aufrufe
400
Speeddeamon
Speeddeamon
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