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.
  1. kalweit

    kalweit Hüter der Glaskugel

    ??? - mach mal einen Screenshot davon

    ...dann war es schon vorher nicht, da ich nichts hinzugefügt habe, was Einfluß auf die Überprüfung hätte.
     
  2. heissim

    heissim Byte

    hi, habe grade nochmal überprüft, deine version sieht akzeptabel aus, lediglich die höhe des inhalts is zu niedrig, aber das is ja klar

    und das problem bzgl der navileiste is behoben, ich bin ja auch dumm.
    wenn ich class verwende muss ich den . nur vor dem betreffenden element setzen und nicht vor jedes...

    das problem bzgl der breite bleibt bestehen
    achtung, ich rede hier nicht mehr von dem von dir vorgeschlagenen code, da ich bisher keine zeit hatte mir die bedeutung der geänderten elemente anzuschauen(ich will ja verstehen was du gemacht hast, erst dann verwende ich ihn ggf.)
     
  3. @kalweit
    Stimmt, das hatten wir im #7. geklärt.

    @heissim
    Also bei mir nicht (IE6, FF2.0.0.1)

    Ich habe das ganze nach kalweit nochmal geändert, und ist hier anzusehen.
    http://www.nichtsgeht.de.ki
    An ein Screenshoot hätte ich auch Intresse.
    Sonst weiss ich auch nicht weiter.
    --------------
    Upps, da habe ich wohl zur gleichen Zeit wie heissim gepostet. Hat sich wohl dann erledigt.
     
  4. heissim

    heissim Byte

    dann gib mir bitte mal den quellcode durch weil ich nicht weiss ob du ihn nun nach kalweits anweisungen bearbeitet hast oder nach(zeitlich) nochmal was geändert hast.

    screenshot lade ich dir via rapidshare hoch, is blöd ich weiss, aber ich kenn sonst nix:
    http://rapidshare.com/files/14388967/Meine_HP.doc.html

    wie gesagt, der inhalt ist zu breit:
    hier der 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-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: bold;
    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;
    }

    findet den fehler, bitte bitte bitte, dann mach ich weiter mit dem ganzen
     
  5. Hallo,
    Geht nicht, Limit erreicht.

    Den Code kannst du doch auf meinen Link einsehen. Rechte Maustaste -> Quellcode anzeigen. (IE) bzw. Seitenquelltext anzeigen (FF)

    Aber hier nochmals für dich. Dieses #DIV Seite wieder rausnehmen. War eine blöde Idee von mir. Den Code von kalweit habe ich nur wie folgt geändert.
    id mit class getauscht. height in Main gesetzt. Sollte man evtl. besser rauslassen.

    http://www.nichtsgeht.de.ki

    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;
            height: 600px;
    }
    #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 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>
    </body>
    </html>
    
     
  6. heissim

    heissim Byte

    jungs ihr seid klasse, hab die letzten modifikation durchgeführt.

    ich hab die höhe vom inhalt mal auf auto gesetzt, das heisst doch dass sie sich quasi dem inhalt anpasst.
    nur mit der navileiste weiss ich noch net was und wie ichs mach.
    würdet ihr sie immer auf gleicher höher mit dem inhalt abschliessen lassen?
    und was bedeutet in meinem fall position: relative, wieso ist das besser?
    und was sorgt dafür dass ich keine feste breite angeben muss?
    was hat hinter #div seite gesteckt?

    grüsse und nochmals vielen dank
     
  7. Im IE6 wurde Main unterhalb der Navileiste angezeigt, was ich mit div #seite korrigiert habe. kalweit hat dieses anders gelöst.
     
  8. heissim

    heissim Byte

    okidoki, soweit alles klar
    ich werd hier immer mal wieder kleinere oder auch grössere fragen stellen:
    wenn ich meine logo und ein bild sowie einen link zur startseite im header haben will- dann lass ich das logo links floaten, das bild rechts floaten und den link clear: both damit erstens logo links, bild rechts und der sich link unterhalb der beiden grafiken befindet(header höhe hab ich auf auto gesetzt damit sich da nix überschneidet)

    nun soll wie in meiner navileiste ein border mit hintergrundfarbe um meinen link gebaut werden. auch alles klar, aber wie bekomme ich es hin dass die schrift links und rechts abstand zu meiner linkschrift bekommt?

    ach ja, was mir spontan noch einfällt: ich möchte beim mousovereffekt meiner links und NUR beim mousovereffekt unterstrichene links haben. klappt irgendwie nicht, entweder sind sie ständig oder gar nicht unterstrichen. mit font-weight: bold kann das ja nix zu tun haben(bitte ne dumme antwort auf diese dumme anmerkung)

    danke für die anwort
     
  9. heissim

    heissim Byte

    habe zu meinem header ne frage:
    je nachdem was ich da reinbastel, wie würdet ihr das mit der höhe machen?
    <div id="header">
    <img src="logo.png" alt="Mein Zeichen" style="border: none; height:200px; width: 200px; float: left;">
    <img src="Livi1.jpg" alt="Mein Schatz" style="border: none; height: 200px; margin-left: 15px; float:right; ">
    <img src="Livi2.jpg" alt="Mein Schatz" style="border: none; height: 200px; margin-left: 15px; float: left; ">
    <img src="livi.jpg" alt="Mein Schatz" style="border: none; height: 200px; margin-left: 25px;">
    <a href="index.html">Home</a>
    </div>

    wenn ich nun die auflösung runterschraube wird natürlich alles verschoben, wie kann ich das verhindern?
     
  10. kalweit

    kalweit Hüter der Glaskugel

    Das geht nur bedingt, denn u.U. wird der Header durch den fehlenden Umbruch breiter als die restlichen Blöcke der Seite - d.h. du verlagerst das Problem nur an eine andere Stelle. Grundsätzlich: wenn man mit mehreren Bildern arbeitet, macht es oft Sinn, eine Mindestbreite oder gar starre Breite für das Layout zu konzipieren. Methoden:

    starre Breite:

    (1) die gesamte Seite wird in ein <div> mit fester Breite geschachtelt
    (2) die einzelnen Elemente bekommen feste Breiten

    Mindestbreite:

    (1) Nutzen der CSS-Eigenschaft min-width [1] (wird nicht von allen Browsern unterstützt - z.B. IE6)
    (2) Verhindern von Zeilenumbrüchen mit der CSS-Eigenschaft white-space [2] bzw. den HTML-Tag <pre> [3] oder <nobr> [4]
    (3) transparente Grafik mit 1 Pixel Höhe und der beabsichtigten Mindestbreite als Breite in Pixel

    Zu guter Letzt, bliebe noch die dynamische Anpassung per DHTML über das Auslesen der Fensterbreite des Browser. Aber das geht dann zu weit ;)

    Achso, dann gibt es noch overflow [5], um dem übergeordneten Objekt ein bestimmtes Verhalten vorzuschreiben, wenn der Inhalt zu "groß" wird.

    ---

    [1] http://de.selfhtml.org/css/eigenschaften/positionierung.htm#min_width
    [2] http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#white_space
    [3] http://de.selfhtml.org/html/text/praeformatiert.htm
    [4] http://de.selfhtml.org/html/text/zeilenumbruch.htm#verhindern
    [5] http://de.selfhtml.org/css/eigenschaften/positionierung.htm#overflow
     
  11. heissim

    heissim Byte

    was würdest du in meinem fall am ehesten vorschlagen?
    inwiefern ginge die letzte methode zu weit?
     
Thread Status:
Not open for further replies.

Share This Page