|
 |
  |
| Autor |
Nachricht |
jmm
Neuer [User]
Anmeldung: 10.07.08
Beiträge: 8
|
 Verfasst am: 10.07.2008, 14:26 Titel: Neues Layout...2 probleme |
 |
|
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:
| Zitat: | <!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>Über mich
<ul>
<li><span>Startseite</span></li>
<li>Steckbrief</li>
<li>Mukke</li>
</ul>
</li>
<li>Events
<ul>
<li>Rip 09</li>
</ul>
</li>
<li>Guestbook</li>
<li>Serien
<ul>
<li>Kloß und Spinne</li>
</ul>
</li>
<li>Pc
<ul>
<li>Gaming Pc</li>
<li>Linux Pc</li>
<li>Spiele</li>
</ul>
</li>
<li>Triathlon
<ul>
<li>Schwimmen</li>
<li>Mountaibike</li>
<li>Rennrad</li>
<li>Laufen</li>
<li>Erfolge</li>
</ul>
</li>
<li>Links</li>
<li>Impressum</li>
</ul>
<center> <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 Hier Downloaden!!!</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> </p></center>
</FONT>
</ul>
</div>
<font color="#ff0000">
<div id="footer">
<center><p>© Julius Martin Michel</p></center>
</div>
</div>
</font>
</body>
</html> |
strucktur.css:
| Zitat: | * {
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;
|
layout.css
| Zitat: | /* Ü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 */ |
drucken.css
| Zitat: | 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;
} |
|
|
| Nach oben |
|
 |
JFM
Beliebter [User]
Anmeldung: 25.09.05
Beiträge: 425
Wohnort: Gütersloh
|
| Verfasst am: 10.07.2008, 16:34 Titel: |
|
|
zu 1)
Nutz du ein Frameset?
Wenn nicht dann nimm jeweils das target="Inhalt" raus,
Andernfalls ändere den Namen des HauptFrames in "Inhalt".
_________________
http://www.onestripe.de
|
|
| Nach oben |
|
|
jmm
Neuer [User]
Anmeldung: 10.07.08
Beiträge: 8
|
| Verfasst am: 10.07.2008, 16:47 Titel: |
|
|
nein ist kein frameset habe ich gelöscht bringt nichts
|
|
| Nach oben |
|
|
umt
Beliebter [User]
Anmeldung: 29.11.07
Beiträge: 325
|
| Verfasst am: 11.07.2008, 06:35 Titel: |
|
|
Wenn es kein Frameset ist, dann sollte z.B.
| Code: | | <a href="Steckbrief.html" target="_self">Steckbrief</a> |
funktionieren.
Wenn die Seite aber vorher mit einem Frameset realisiert war, dann musst du in die verlinkten Seiten noch das Menü mit einbauen.
Zu 2)
Ändere in der Datei "strucktur.css" den Eintrag "#mother" den Punkt "background-color" folgendermassen ab:
| Code: | #mother {
width: 780px;
text-align: left;
background-color: black;
margin: 0 auto;
border: 5px solid white;
} |
_________________
www.jexlab.net - Webentwicklung zu fairen Konditionen
www.netzonaut.de - Blog zum Thema Webentwicklung, Internet, Linux und OpenSource-Software
|
|
| Nach oben |
|
|
|
|
  |
|
Alle Zeiten sind GMT + 1 Stunde
|
| Seite 1 von 1 |
|  |
