1. Liebe Forumsgemeinde,

    aufgrund der Bestimmungen, die sich aus der DSGVO ergeben, müssten umfangreiche Anpassungen am Forum vorgenommen werden, die sich für uns nicht wirtschaftlich abbilden lassen. Daher haben wir uns entschlossen, das Forum in seiner aktuellen Form zu archivieren und online bereit zu stellen, jedoch keine Neuanmeldungen oder neuen Kommentare mehr zuzulassen. So ist sichergestellt, dass das gesammelte Wissen nicht verloren geht, und wir die Seite dennoch DSGVO-konform zur Verfügung stellen können.
    Dies wird in den nächsten Tagen umgesetzt.

    Ich danke allen, die sich in den letzten Jahren für Hilfesuchende und auch für das Forum selbst engagiert haben. Ich bin weiterhin für euch erreichbar unter tti(bei)pcwelt.de.
    Dismiss Notice

Mein kleiner anfang mit phase 5, wer will mir helfen

Discussion in 'Web-Know-how für die Homepage' started by heissim, Jan 27, 2007.

Thread Status:
Not open for further replies.
Page 1 of 2
  1. heissim

    heissim Byte

    hallo, ich hab mal erste gehversuche mit phase 5 gemacht:

    mein index besteht aus header,navileiste und einem anzeigeteil.
    codiert wurde mit div-tag gelayoutet mit einer ausgelagerten css datei.
    mozilla zeigt brav alles so an wie ichs will
    opera und ie leider nicht, sie zeigen den header total vermurkst an(der header ist schwarz was dadurch zu einem quasi schwarzen hintergrund führt)

    woran könnte das liegen?
    wer zeit und lust hat kann sich meinen murkscode ja mal genauer ansehen:
    css-datei:
    http://rapidshare.com/files/13647249/Style.css.html
    html-datei:
    http://ul38.rapidshare.com/files/13647372/index.html


    ach ja, im header ist ein "home"
    das würde ich gerne ein wenig eingerückt am unteren rand des headers positionieren, wie?
    vielen dank schonmal
     
    heissim, Jan 27, 2007
    #1
  2. cyberwarrior

    cyberwarrior Kbyte

    deine Links führen nicht zum Ziel (oder muss ich mich da nun extra anmelden??)

    Gruß, cw
     
    cyberwarrior, Jan 27, 2007
    #2
  3. heissim

    heissim Byte

    hmm, hast irgendwie recht, aber du musst dich eigentlich nur kurz durchklicken
    erst unten rechts auf free, dann diesen code eintragen und dann auf download
    sry dass so umständlich, kennst du ne möglichkeit das direkt zu laden?
     
    heissim, Jan 27, 2007
    #3
  4. heissim

    heissim Byte

    So, ich habe inzwischen mal mehr oder weniger fleissig vor mich hin programmiert und bin mit dem "layout"(momentan dienen farben border etc rein zur besseren bearbeitung) ganz zufrieden:

    hier der html code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Startseite</title>
    <link rel="stylesheet" type="text/css" href="Style.css">
    <style type="text/css">
    </style>
    </head>
    <body>
    <div id="header">
    <img src="logo.png" alt="Mein Zeichen" border="0" width="200px" height="200px">
    </div>
    <div id="Navigation">
    <h1> Thema 1 </h1>
    <ul id="Navigation li">
    <li> <a href="index.html">Unterpunkt</a></li>
    <li> <a href="index.html">Unterpunkt</a></li>
    <li> <a href="index.html">Unterpunkt</a></li>
    </ul>
    <h1> Thema 2 </h1>
    <ul id="Navigation li">
    <li> <a href="index.html">Unterpunkt</a></li>
    <li> <a href="index.html">Unterpunkt</a></li>
    <li> <a href="index.html">Unterpunkt</a></li>
    </ul>
    <h1> Thema 3 </h1>
    <ul id="Navigation li">
    <li> <a href="index.html">Unterpunkt</a></li>
    <li> <a href="index.html">Unterpunkt</a></li>
    <li> <a href="index.html">Unterpunkt</a></li>
    </ul>
    </div>
    <div id="main">
    <h1> Hey mein schatz </h1>
    <p> Hier soll text rein </p>
    </div>
    </body>
    </html>

    weiterhin das stylesheet:

    body
    {
    font-style: Arial;
    background-color: #ffffff;
    padding: 0px;
    margin:0px;
    }
    #Header
    {
    background-color: #000000;
    border: 1px solid #00ff00;
    width: 1000px;
    height: 200px;
    margin-top: 10px;
    margin-left: 15px;
    margin-right: 10px;
    margin-bottom: 5px;
    padding: 5px;
    }
    #Navigation
    {
    background-color: #804040;
    border: 1px solid #0000ff;
    width: 200;
    height: 620px;
    margin-left: 15px;
    padding: 5px;
    float: left;
    text-align: center;
    text-decoration: none;
    }
    #Main
    {
    background-color: #909090;
    color: #ffffff;
    border: 1px solid #ff0000;
    width: 785;
    height: 620px;
    margin-left: 230px;
    padding: 5px;
    }
    #Navigation LI
    {
    list-style: none;
    margin-top: 15px;
    margin-bottom: 15px;
    background-color: #C0C0C0;
    border: 1px solid #000000;
    }
    #NavigationLI a:hover
    {
    color: #0000ff;
    font-weight: normal;
    background-color: none;
    text-decoration: none;
    }
    #Navigation LI a:visited
    {
    text-decoration: none;
    }
    #Navigation UL
    {
    margin: 0px;
    padding: 0px;
    }
    #Navigation h1
    {
    margin: 30px 0px 30px 0px;
    }


    Nun stellen sich für mich einige fragen:
    1.) was MUSS ich noch verändern, bzw was würdet ihr anders machen, was ist überflüssig?
    2.) wie bekomm ich den text innerhalb des main containers formatiert, denn egal wie ich padding wert veränder, es tut sich nichts

    ich hoffe dass ich euch als absoluter newbie nicht zusehr auf die nerven geh(bitte nicht einfach n link zu selfhtml setzen, da hab ich schon fleissig geforscht, komm aber net auf den trichter

    mfg simon
     
    heissim, Jan 30, 2007
    #4
  5. nichtsgeht2006

    nichtsgeht2006 Byte

    Hallo,
    zuerst würd ich mal den main-Container korrigieren:
    Bei width fehlt die Einheit: 785px, 785em, 785pt

    Was meinst du mit Schrift formatieren ? Schriftgröße, Schriftart ? Das macht man nicht mit padding.

    MfG
     
    nichtsgeht2006, Jan 30, 2007
    #5
  6. heissim

    heissim Byte

    hoppla, angabe soll px sein, merci

    hab mich undeutlich ausgedrückt, ich meinte eigentlich den text ausrichten. weiterhin wüsste ich gerne wie man bilder innerhalb eines div-tags richtig positioniert und wie man einen text in der schwarzen kopfzeile an dessen boden bekommt.

    ansonsten, sagt mir der validator dass was mit meinem doctype nicht stimmt, sowie der id="navigation li":
    bzgl navigation- wenn ich die leerzeile zwischen navigation und li wegnehme(klar auch im css) dann fehlt mir auf einmal der zwischenraum zwischen den einzelnen links, wieso?
    dass eine id nicht aus 2 wörtern bestehen darf weiss ich, aber solange ich keine lösung gefunden habe(li problem) belass ich es vorerst so

    ausserdem meldet der validator dass:
    ID "NAVIGATION LI" bereits definiert
    ID "NAVIGATION LI" zuerst hier definiert

    ausserdem meckert er über die px angaben(width, height) bei meinem geilen mit paint erstellten krakellogo^^

    so hoffe, dass nun alles klarer formuliert ist
     
    heissim, Jan 30, 2007
    #6
  7. nichtsgeht2006

    nichtsgeht2006 Byte

    Richtig, id heisst induviduell - Also nur einmal. Versuche es mal das id auszutauschen mit class. Ansonsten muss ich mich mal genauer mit deinem Code auseinnander setzen. Leider komm ich erst heute abend dazu. Ich muss nun leider weg.

    MfG
     
    nichtsgeht2006, Jan 30, 2007
    #7
  8. heissim

    heissim Byte

    class funktioniert, danke

    wäre nett wenn du dir soviel zeit nimmst, vielen dank, bis heut abend
     
    heissim, Jan 30, 2007
    #8
  9. nichtsgeht2006

    nichtsgeht2006 Byte

    So, bin wieder da. Folgendes solltest du ändern, damit es Validat wird:
    Code:
    <img src="logo.png" alt="Mein Zeichen" style="border:none; width:200px; height:200px;">
    Damit auch beim InternetExplorer alles richtig angezeigt wird, solltest du zwischen </style> und </body> folgendes eingefügt werden:
    Code:
    <!--[if lt IE 7]><style type="text/css">
 @media screen {
   html, body {
     height: 100%; 
     width:100%
   }
   #main {
     overflow: auto;
     position:absolute;
     top:231px;
     left:0px;
   }
 }
</style><![endif]-->
    ??? Ich habe leider kein IE7 zur hand, kann daher nicht sagen, wie es dort aussieht.

    Mit vertical-align: kann die vertikale Ausrichtung bestimmt werden.

    Was ich ändern würde: Ich würde keine festen breiten angeben. Denn viele Besucher arbeiten noch mit
    einer Auflösung von 800 * 600 oder Arbeiten nicht im Vollbild-Modus.

    Dazu erstelle noch ein weiteren Container:
    Code:
    div#seite {width:100%; float:left;}
    Lösche die width in MAIN und Header. Füge <div id="seite"> vor den ersten <div id="Navigation"> ein,
    und ein weiteres </div> vor </body> ein.

    Die InternetExplorer-Weiche brauchst du in diesem Fall nicht mehr.

    Ich hoffe, das war eine Hilfe. Ich sehe morgen mal wieder vorbei.

    MfG
     
    nichtsgeht2006, Jan 30, 2007
    #9
  10. heissim

    heissim Byte

    betreffend doctype, sobald ich diesen link:"http://www.w3.org/TR/html4/loose.dtd"> einfüge- verändert sich die komplette optik gravierend, warum?
    meine navi geht über die volle breite, header verschwindet und inhalt verschindet, bzw der text wird unterhalb der naviseite angezeigt (nur logo bleibt an ort und stelle- ich habe width und height beim .pgn rausgenommen)

    mit vor der ersten div id="navigation" meinste da die absolut erste id oder vor dem ersten link?
    die weiche für ie hab ich wie angewiesen weggelassen, alle browser zeigen das gleiche bild (ff, ie, opera)

    aber laut validom ist nun alles valide...klasse, dafür siehts ******** aus:aua:

    bitte um weitere hilfe, danke schonmal und dir nichsgeht2006 sowieso vielen dank
     
    heissim, Jan 30, 2007
    #10
  11. nichtsgeht2006

    nichtsgeht2006 Byte

    Tja, da will ich nochmal auf selfhtml verweisen.
    http://de.selfhtml.org/css/formate/box_modell.htm#w3c
    Wenn man z.B. eine Box hat von
    Code:
    width:200; border:20; padding:20
    so ergibt das eine Länge von 280px (200 + 2*20 + 2*20) ;-)
    Ohne "http://www.w3.org/TR/html4/loose.dtd" wird diese aber nur mit 200px angezeigt, und mit wird die Box richtig angezeigt.
    Vorm ersten absoluten id. Also die weiche nur weglassen, wenn du die WIDTH wie angegeben rausgenommen hast. Bei mir wird es richtig angezeigt. IE6, FF
     
    nichtsgeht2006, Jan 31, 2007
    #11
  12. heissim

    heissim Byte

    so, ich gebe dir nochmal meinen code durch wie er jetzt gerade aussieht- mit dem doctype link, es sieht nach wie vor katastrophal aus

    html:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Startseite</title>
    <link rel="stylesheet" type="text/css" href="Style.css">
    <style type="text/css">
    </style>
    </head>
    <body>
    <div id="header">
    <img src="logo.png" alt="Mein Zeichen" border="0">
    </div>

    <div id="Navigation">
    <div id="seite">
    <h1> Thema 1 </h1>
    <ul class="Navigation li">
    <li> <a href="index.html">Unterpunkt</a></li>
    <li> <a href="index.html">Unterpunkt</a></li>
    <li> <a href="index.html">Unterpunkt</a></li>
    </ul>
    <h1> Thema 2 </h1>
    <ul class="Navigation li">
    <li> <a href="index.html">Unterpunkt</a></li>
    <li> <a href="index.html">Unterpunkt</a></li>
    <li> <a href="index.html">Unterpunkt</a></li>
    </ul>
    <h1> Thema 3 </h1>
    <ul class="Navigation li">
    <li> <a href="index.html">Unterpunkt</a></li>
    <li> <a href="index.html">Unterpunkt</a></li>
    <li> <a href="index.html">Unterpunkt</a></li>
    </ul>
    </div> </div>
    <div id="main">
    <h1> Hey mein schatz </h1>
    <p> Hier soll text rein </p>
    </div>

    </body>
    </html>

    du hattest gesagt dass ich den div-tag #seite erst vorm </body> schliessen soll. wenn ich ihn aber vor main stehe schein der main tag wenigsten rechts von der navileiste, ansonsten unten drunter

    CSS:

    body
    {
    font-style: Arial;
    background-color: #ffffff;
    padding: 0px;
    margin:0px;
    }
    #Header
    {
    background-color: #000000;
    border: none;
    height: 200px;
    margin-top: 10px;
    margin-left: 15px;
    margin-right: 10px;
    margin-bottom: 5px;
    padding: 5px;
    }
    div#seite
    {
    width:100%; float:left;
    }
    #Navigation
    {
    background-color: #804040;
    border: none;
    height: 620px;
    width: 200px;
    margin-left: 15px;
    padding: 5px;
    float: left;
    text-align: center;
    text-decoration: none;
    }
    #Main
    {
    background-color: #909090;
    color: #ffffff;
    border: none;
    height: 620px;
    margin-left: 220px;
    padding: 5px;
    }
    .Navigation LI
    {
    list-style: none;
    margin-top: 15px;
    margin-bottom: 15px;
    background-color: #C0C0C0;
    border: 1px solid #000000;
    }
    .Navigation LI a:hover
    {
    color: #0000ff !important;
    font-weight: bolder !important;
    background-color: none;
    text-decoration: none;
    }
    .Navigation LI a:visited
    {
    text-decoration: none;
    color: #0f0f0f;
    font-weight: normal;
    }
    #Navigation UL
    {
    margin: 0px;
    padding: 0px;
    }
    #Navigation h1
    {
    margin: 30px 0px 30px 0px;
    }

    ich weiss nicht, wieso es bei dir einwandfrei angezeigt wird und bei mir nicht :(

    danke dir wie immer
     
    heissim, Jan 31, 2007
    #12
  13. nichtsgeht2006

    nichtsgeht2006 Byte

    Ich meine es so:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Startseite</title>
<link rel="stylesheet" type="text/css" href="Style.css">
<style type="text/css">
</style>
</head>
<body>
<div id="header">
<img src="logo.png" alt="Mein Zeichen" style="border:none; width:200px; height:200px;">
Ueberschrift
</div>
<div id="seite">
<div id="Navigation">
<h1> Thema 1 </h1>
<ul id="Navigation li">
<li> <a href="index.html">Unterpunkt</a></li>
<li> <a href="index.html">Unterpunkt</a></li>
<li> <a href="index.html">Unterpunkt</a></li>
</ul>
<h1> Thema 2 </h1>
<ul id="Navigation li">
<li> <a href="index.html">Unterpunkt</a></li>
<li> <a href="index.html">Unterpunkt</a></li>
<li> <a href="index.html">Unterpunkt</a></li>
</ul>
<h1> Thema 3 </h1>
<ul id="Navigation li">
<li> <a href="index.html">Unterpunkt</a></li>
<li> <a href="index.html">Unterpunkt</a></li>
<li> <a href="index.html">Unterpunkt</a></li>
</ul>
</div>
<div id="main">
<h1> Hey mein schatz </h1>
<p> Hier soll text rein  Hier soll text rein  Hier soll text rein  Hier soll text rein  Hier soll text rein  Hier soll text rein  Hier soll text rein  Hier soll text rein  Hier soll text rein  Hier soll text rein  Hier soll text rein  Hier soll text rein  Hier soll text rein  Hier soll text rein  Hier soll text rein  Hier soll text rein  Hier soll text rein </p>
</div>
</div>
</body>
</html>
    CSS:
    Code:
    body
{
font-style: Arial;
background-color: #ffffff;
padding: 0px;
margin:0px;
}
#Header
{
background-color: #000000;
border: 1px solid #00ff00;
height: 200px;
margin-top: 10px;
margin-left: 15px;
margin-right: 10px;
margin-bottom: 5px;
padding: 5px;
vertical-align:bottom;
color:#FFFFFF;
}
#Navigation
{
background-color: #804040;
border: 1px solid #0000ff;
width: 200px;
height: 620px;
margin-left: 15px;
padding: 5px;
text-align: center;
text-decoration: none;
float:left;
}
#Main
{
background-color: #909090;
color: #ffffff;
border: 1px solid #ff0000;
height: 620px;
margin-left: 230px;
padding: 50px;
}
#Navigation LI
{
list-style: none;
margin-top: 15px;
margin-bottom: 15px;
background-color: #C0C0C0;
border: 1px solid #000000;
}
#Navigation LI a:hover
{
color: #0000ff;
font-weight: normal;
background-color: none;
text-decoration: none;
}
#Navigation LI a:visited
{
text-decoration: none;
}
#Navigation UL
{
margin: 0px;
padding: 0px;
}
#Navigation h1
{
margin: 30px 0px 30px 0px;
}
div#seite {
width:100%; float:left;
}
     
    nichtsgeht2006, Jan 31, 2007
    #13
  14. nichtsgeht2006

    nichtsgeht2006 Byte

    Jetzt haben wir aber ein weiteres Problem.
    wenn du jetzt "http://www.w3.org/TR/html4/loose.dtd"
    mit einfügst, fehlt im Header und Main die Untergrundfarbe.:aua:
    (Bin leider nicht zuhause, daher hab ich nur IE6 zur Hand.)
    Da muß auch auch erst mal nachdenken.
     
    nichtsgeht2006, Jan 31, 2007
    #14
  15. nichtsgeht2006

    nichtsgeht2006 Byte

    So, ich habs, ich bin ja auch so blöd :dumm:
    Man muß selbstverständlich auf Groß und kleinschreibung achten.
    Also Header im Style-Bereich und header im Body geht natürlich nicht. Entweder beides Gross schreiben oder beides klein.
    Das gleiche bei Main. Dann klappt es auch mit den Nachbarn.
    :jump:
     
    nichtsgeht2006, Jan 31, 2007
    #15
  16. kalweit

    kalweit Hüter der Glaskugel

    kalweit, Jan 31, 2007
    #16
  17. heissim

    heissim Byte

    @kalweit, danke dir. habs mir durchgelesen

    @nichtsgeht2006
    ja, das mit der gross und kleinschreibung haett auch mir auffallen können.
    2 sachen die momentan noch stören:
    der inhalt ist zu breit und meine vorher so schön platzierten linkboxen rutschen auf einmal nach rechts, wieso?
    ich bin es zwar leid, aber ich find leider keine möglichkeit es dir via link irgendwie sichtbar zu machen(kennste da evtl was?)
    demzufolge poste ich meinen code NOCHMAL, sry an alle die die nase nun voll haben

    html
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Startseite</title>
    <link rel="stylesheet" type="text/css" href="style.css">

    <style type="text/css">
    </style>

    </head>

    <body>
    <div id="header">
    <img src="logo.png" alt="Mein Zeichen" style="border:none; width:200px; height:200px;">

    </div>
    <div id="seite">
    <div id="navigation">
    <h1> Thema 1 </h1>
    <ul class="navigation li">
    <li> <a href="index.html">Unterpunkt</a></li>
    <li> <a href="index.html">Unterpunkt</a></li>
    <li> <a href="index.html">Unterpunkt</a></li>
    </ul>
    <h1> Thema 2 </h1>
    <ul class="navigation li">
    <li> <a href="index.html">Unterpunkt</a></li>
    <li> <a href="index.html">Unterpunkt</a></li>
    <li> <a href="index.html">Unterpunkt</a></li>
    </ul>
    <h1> Thema 3 </h1>
    <ul class="navigation li">
    <li> <a href="index.html">Unterpunkt</a></li>
    <li> <a href="index.html">Unterpunkt</a></li>
    <li> <a href="index.html">Unterpunkt</a></li>
    </ul>
    </div>
    <div id="main">
    <h1> Hey mein schatz </h1>
    <p> Hier soll text rein Hier soll text rein Hier soll text rein Hier soll text rein Hier soll text rein Hier soll text rein Hier soll text rein Hier soll text rein Hier soll text rein Hier soll text rein Hier soll text rein Hier soll text rein Hier soll text rein Hier soll text rein Hier soll text rein Hier soll text rein Hier soll text rein </p>
    </div>
    </div>
    </body>
    </html>

    css
    body
    {
    font-style: Arial;
    background-color: #ffffff;
    padding: 0px;
    margin:0px;
    }
    #header
    {
    background-color: #000000;
    border: 1px solid #00ff00;
    height: 200px;
    margin-top: 10px;
    margin-left: 15px;
    margin-right: 10px;
    margin-bottom: 5px;
    padding: 5px;
    vertical-align:bottom;
    color:#FFFFFF;
    }
    #navigation
    {
    background-color: #804040;
    border: 1px solid #0000ff;
    width: 200px;
    height: 620px;
    margin-left: 15px;
    padding: 5px;
    text-align: center;
    text-decoration: none;
    float:left;
    }
    #main
    {
    background-color: #909090;
    color: #ffffff;
    border: 1px solid #ff0000;
    height: 620px;
    margin-left: 230px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 25px;
    padding-left: 25px;
    }
    .navigation LI
    {
    list-style: none;
    margin-top: 15px;
    margin-bottom: 15px;
    background-color: #C0C0C0;
    border: 1px solid #000000;
    }
    .navigation LI a:hover
    {
    color: #0000ff;
    font-weight: normal;
    background-color: none;
    text-decoration: none;
    }
    .navigation LI a:visited
    {
    text-decoration: none;
    }
    .navigation UL
    {
    margin: 0px;
    padding: 0px;
    }
    .navigation h1
    {
    margin: 30px 0px 30px 0px;
    }
    #seite
    {
    width:100%; float:left;
    }
     
    heissim, Jan 31, 2007
    #17
  18. nichtsgeht2006

    nichtsgeht2006 Byte

    Ich habe mal das Layout ins Netz gestellt. Also bei mir sieht es normal aus.
    http://www.nichtsgeht.de.ki
    Ich habe auch mal etwas weiter gesponnen, dann sieht es so aus.
    http://www.nichtsgeht2.de.ki
    Diese Domains werde ich in den nächsten Tagen wieder löschen.
    Also nicht zuviel Zeit lassen.

    Den Quelltext kannst du dann über dein Browser ansehen.
    Bei mir sieht es jedenfalls normal aus.

    MfG
     
    nichtsgeht2006, Feb 1, 2007
    #18
  19. kalweit

    kalweit Hüter der Glaskugel

    So, dann fangen wir mal an :D - ich nehme mal an, du möchtest Design 1. Was stört dich? Und vor allem: mit welchem Browser guckst du? Für den IE und Gecko ergeben sich hier massive Unterschiede. Ich hab mal grob durchgefegt:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Startseite</title>
<link rel="stylesheet" type="text/css" href="Style.css">
<style type="text/css">
body {<
	font-style: Arial;
	margin:10px;
}

#Header {
	background-color: black;
	height: 200px;
	padding: 5px;
	vertical-align:bottom;
	color:#FFFFFF;
}

#Navigation {
	background-color: #804040;
	width: 200px;
	padding: 5px;
	margin-top: 10px;
	text-align: center;
	float:left;
}

#Main {
	position:relative;
	background-color: #909090;
	color: #ffffff;
	margin-top: 10px;
	margin-left: 220px;
	padding: 50px;
}
#Navigation LI
{
list-style: none;
margin-top: 15px;
margin-bottom: 15px;
background-color: #C0C0C0;
border: 1px solid #000000;
}
#Navigation LI a:hover
{
color: #0000ff;
font-weight: normal;
background-color: none;
text-decoration: none;
}
#Navigation LI a:visited
{
text-decoration: none;
}
#Navigation UL
{
margin: 0px;
padding: 0px;
}
#Navigation h1
{
margin: 30px 0px 30px 0px;
}

</style>
</head>
<body>
<div id="Header">
<img src="logo.png" alt="Mein Zeichen" style="border:none; width:200px; height:200px;">
Ueberschrift
</div>
<div id="Navigation">
<h1> Thema 1 </h1>
<ul id="Navigation li">
<li> <a href="index.html">Unterpunkt</a></li>
<li> <a href="index.html">Unterpunkt</a></li>
<li> <a href="index.html">Unterpunkt</a></li>
</ul>
<h1> Thema 2 </h1>
<ul id="Navigation li">
<li> <a href="index.html">Unterpunkt</a></li>
<li> <a href="index.html">Unterpunkt</a></li>
<li> <a href="index.html">Unterpunkt</a></li>
</ul>
<h1> Thema 3 </h1>
<ul id="Navigation li">
<li> <a href="index.html">Unterpunkt</a></li>
<li> <a href="index.html">Unterpunkt</a></li>
<li> <a href="index.html">Unterpunkt</a></li>
</ul>
</div>
<div id="Main">
<h1> Hey mein schatz </h1>
<p> Hier soll text rein  Hier soll text rein  Hier soll text rein  Hier soll text rein  Hier soll text rein  Hier soll text rein  Hier soll text rein  Hier soll text rein  Hier soll text rein  Hier soll text rein  Hier soll text rein  Hier soll text rein  Hier soll text rein  Hier soll text rein  Hier soll text rein  Hier soll text rein  Hier soll text rein </p>
</div>
</body>
</html>
    Solltest du nun aber #main + #navigation "dynmaisch" auf die selbe Höhe bringen wollen -> lass es, du wirst es nicht schaffen. Einzige Variante: beide <div>'s bekommen absolute Höhen. Aber auch hier brauchst du angepasste Versionen für IE und Gecko. Einzig mir bekannter Ausweg: eine Tabelle bzw. Höhe per Hintergrundbild "vorgaukeln".
     
    kalweit, Feb 1, 2007
    #19
  20. heissim

    heissim Byte

    hm, hab mir die beiden layouts sowohl in ie7,ff und opera angeschaut.

    startseit sieht überall gleich aus und so wie gehabt.

    bei meinem oben geposteten code:
    ich frage mich nur warum mein navileisteninhalt nach rechts rutsch(also innerhalb des divs) und der inhalt sowohl zu hoch als auhc zu breit ist(er soll ja mit dem header abschliessen)


    die layout probeseite sieht bei mir sehr seltsam aus, entweder überschneiden sich die divs oder alles schrumpft, je nach browser.
    mir geht das langsam auf den keks, dauernd neue probleme^^

    @kalweit
    also das mit der höhe werd ich mire noch überlegen, als erstes mal sollen navi, inhalt und header vernünftig in der breite mit einander abschliessen,valide sein und so aussehen wie ich das will. lediglich oben genannte probleme lassen sich nicht beheben.

    wenn ich den quelltext nach deinen vorstellungen verändere sieht es seltsam aus, navileiste verrutscht völlig, inhalt wird sehr dünn und valide ist er auch nicht mehr, da eine id nur einmal definiert werden darf. ich habe da inzwischen class verwendet was klappt

    mfg simon
     
    heissim, Feb 1, 2007
    #20
Page 1 of 2
Thread Status:
Not open for further replies.

Share This Page