Seite 1 von 3 123 LetzteLetzte
Ergebnis 1 bis 10 von 23

Thema: div-container und externe css-datei

  1. #1
    noa
    Gast

    Standard div-container und externe css-datei

    Code:
    <html>
    
    	<head>
    		<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
    		<meta name="generator" content="Adobe GoLive 5">
    		<title></title>
    	</head>
    
    	<body bgcolor="black">
    		
    
    
    		
    		<div style= "id&#58;header; width&#58;900px; height&#58;100px; align&#58; top; background-image&#58;url&#40;header.gif&#41;">
    			</div>
    		
    <div style=  "id&#58;navi; width&#58; 110px; height&#58; 600px; position&#58;absolute; left&#58; 5px; top&#58; 120px; background-color&#58;#6495ED">
    <style type="text/css">
    <!--
    a&#58;link &#123;color&#58;black; text-decoration&#58;none; &#125;
    a&#58;visited &#123; color&#58;black; text-decoration&#58;none; &#125;
    a&#58;active &#123; color&#58;black; text-decoration&#58;none;&#125;
    a&#58;hover &#123; color&#58;#4169E1; text-decoration&#58;none;&#125;
    </style>
    
    <ul style= "list-style-type&#58; none">[*]home</li[/list]
    </div>
    		
    		<div style= "width&#58; 800px; height&#58;600px; position&#58;absolute; left&#58; 170px; top&#58; 120px; background-color&#58;#4682B4; overflow&#58;hidden;id&#58; content">
    		<body>
    		<div align="center">
    
    
    "inhalt"
    
    		</div>
    	</body>
    
    		</div>
    		
    		
    		
    		</p>
    	</body>
    
    </html>
    So das ist mein code und ich hab folgendes problem:

    Ich möchte die seite mit externen stylesheets formatieren.
    Wo muss ich die datei einfügen damit sie nur in einem div container berücksichtigt wird?
    Ich brauch nämlich für navigation und inhalt verschiedene...

    Und dann hab ich noch ein anderes Problem und zwar in der navi erscheinen die links immer eingerückt und passen nicht in den div container. Was muss ich machen dass sie linksbündig oder zentriert erscheinen??

    Ich hoffe ich habs einigermaßen verständlich erklärt
    thx schonmal,
    noa
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    In den head-Bereich, zusammen mit dem Anfang sollte der dann z.B. so aussehen:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     "http&#58;//www.w3.org/TR/html4/loose.dtd">
    <html lang="de">
    <head>
    <meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
    <meta name="generator" content="Adobe GoLive 5">
    <title></title>
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    Die style.css liegt in diesem Fall im gleichen Verezeichnis wie deine html-Dateien.
    Diese style.css kannst du mit einem gewöhnlichen Editor generieren und packst darein alle Formatierungs- und Style-Angaben.

    Bei diesen Code-Beispielen kommt der obere Teil in die CSS-Datei und der jeweilige untere Teil (unter den drei Punkten ...) in die HTML-Datei innerhalb des body-Bereichs.

    Lies dir hierzu auch nochmal diese Erläuterungen bzw. die weitergehenden Infos auf diesen Seiten durch
    http://css.fractatulum.net/css_html.htm#a3
    http://www.css4you.de/wscss/css01.html

    Passe dann deinen Code dann erst mal an, dann sieht man weiter. Einige Grundkenntnisse sind schon erforderlich.

  3. #3
    Gast

    Standard

    Hm, mein Stylesheet wird dann einfach ignoriert...
    Was mach ich denn falsch??


    css stylesheet:
    Code:
    #header&#123;
    width&#58;900px;
    height&#58;100px;
    float&#58;top;
    background-image&#58;url&#40;header.gif&#41;;
    &#125;
    
    #navi&#123;
    width&#58; 110px; 
    height&#58; 600px;
    position&#58;absolute;
    left&#58; 5px;
    top&#58; 120px; 
    background-color&#58;#6495ED"
    &#125;
    
    
    #content
    width&#58; 800px; 
    height&#58;600px; 
    position&#58;absolute; 
    left&#58; 170px; 
    top&#58; 120px;
    background-color&#58;#4682B4; 
    overflow&#58;hidden;
    font-family&#58;arial;
    font-color&#58;
    &#125;
    
    
    #menu&#123;
    list-style-type&#58; none;
    
    a&#58;link &#123; 
    font-family&#58;Arial,Verdana,Helvetica;
    text-decoration&#58;none;
    color&#58;#000000;
    &#125; 
    
    a&#58;visited &#123; 
    font-family&#58;Arial,Verdana,Helvetica;
    text-decoration&#58;none;
    color&#58;#000000;
    &#125; 
    
    a&#58;active &#123; 
    font-family&#58;Arial,Verdana,Helvetica;
    text-decoration&#58;none;
    color&#58;#4169E1;
    &#125; 
    
    a&#58;hover &#123; 
    font-family&#58;Arial,Verdana,Helvetica;
    text-decoration&#58;none;
    color&#58;#4169E1;
    &#125;
    &#125;
    die seite:
    Code:
    <html>
    
    	<head>
    		<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
    		<meta name="generator" content="Adobe GoLive 5">
    		<title></title>
    		<link rel="stylesheet" type="text/css" href="stylesheet.css">
    	</head>
    
    	<body bgcolor="#000000">
    	
    	<div id="header">
    	</div>
    
    <div id="navi">
    <ul id="menu">[*]home[*]guestbook[*]contact
    [/list]
    </div>
    
    <div id="content">
    WELCOME
    </div>
    	
    </body>
    
    </html>

  4. #4
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Das sind nur ein paar Kleinigkeiten:

    #header:
    float:top kannst du löschen, gibt's nicht.

    #navi:
    nimm hier das position: absolute raus und ersetze es durch
    Code:
    float&#58;left;
    left und top-Werte kannst du eigentlich auch weglassen, oder spezifiziere sie mit margin-left und margin-top
    Bei der Farbangabe lass das Schlusszeichen weg und ersetze es durch einen Strichpunkt.

    #content:
    Hier fehlt die öffnende geschweifte Klammer
    Ersetze position:absolut wieder durch float:left;
    und lass top und left weg oder spezifiziere es.
    Insgesamt sollten navi und content dann wohl die gleiche Pixelbreite haben wie der header.

    Ganz unten in der CSS ist noch eine schließende Klammer zuviel.
    Mit diesen Änderungen sollte es dann schon besser aussehen.

  5. #5
    noa
    Gast

    Standard

    Ich hab die änderungen gemacht, aber die ganzen texteigenschaften und so ignoriert er immer noch...

    Code:
    #header&#123;
    width&#58;900px;
    height&#58;100px;
    background-image&#58;url&#40;header.gif&#41;;
    &#125;
    
    #navi&#123;
    width&#58; 110px; 
    height&#58; 600px;
    float&#58; left;  
    background-color&#58;#6495ED"
    &#125;
    
    
    #content
    width&#58; 800px; 
    height&#58;600px; 
    fffffloat&#58; left;
    background-color&#58;#4682B4; 
    overflow&#58;hidden;
    font-family&#58;arial;
    font-color&#58;
    &#125;
    
    
    #menu&#123;
    list-style-type&#58; none;
    
    a&#58;link &#123; 
    font-family&#58;Arial,Verdana,Helvetica;
    text-decoration&#58;none;
    color&#58;#000000;
    &#125; 
    
    a&#58;visited &#123; 
    font-family&#58;Arial,Verdana,Helvetica;
    text-decoration&#58;none;
    color&#58;#000000;
    &#125; 
    
    a&#58;active &#123; 
    font-family&#58;Arial,Verdana,Helvetica;
    text-decoration&#58;none;
    color&#58;#4169E1;
    &#125; 
    
    a&#58;hover &#123; 
    font-family&#58;Arial,Verdana,Helvetica;
    text-decoration&#58;none;
    color&#58;#4169E1;
    &#125;

  6. #6
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Die Text-Eigenschaften, die überall gleich sind, brauchst du nicht jedesmal anzugeben. Die packst du in den body:

    Code:
    body
    &#123;
    font-family&#58; Arial, Verdana, Hevetica;
    color&#58;#000000;
    font-size&#58;100.01%
    &#125;
    Wenn die Schrfitgröße in einem Container größer oder kleiner sein soll, gibst du diese für den jeweiligen Container wie folgt an:
    Code:
    font-size&#58;0.8 em;
    (beachte: Punkt statt Dezimalkomma) - Schrift kleiner
    Code:
    font-size&#58;1.3em;
    Schrift größer

    Da du die Schriftformatierungen jetzt im body hast, kannst du sie bei den einzelnen Containern, evtl. bis auf die Schriftgröße) rausnehmen.

    Bei der navi muss es so heißen:
    Code:
    background-color&#58;#6495ED;
    Beim content mach mal bei fffloat noch die überflüssegen "f's" raus.

    Das müsste so klappen. Falls nicht, überprüf mal den Link bzw. die Linkangabe zu deiner css-Datei.
    Stell ggf. mal einen Link zu deiner HP oder den gesamten Quelltext rein.

  7. #7
    noa
    Gast

    Standard

    also jetzt bin ich mal so weit dass er nur noch die hintergrundfarbe und die schriftformatierungen nicht anzeigt...
    und die hover effekte auch nich

    das ist mal der code von der hp:
    Code:
    <html>
    
    	<head>
    		<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
    		<meta name="generator" content="Adobe GoLive 5">
    		<title></title>
    		<link rel="stylesheet" type="text/css" href="stylesheet.css">
    	</head>
    
    	<body bgcolor="black">
    		
    		<div id="header">
    			</div>
    		
    <div id="navi">
    
    <ul id="menu">[*]home[*]guestbook[*]contact[*]umfragen[*]links[*]about me
    		[/list]
    </div>
    		
    		<div id="content">
    		<body>
    	<div align="center">
    			
    
    <font face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular" size="+5" color="#323232">~&gt; WEL </font><font face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular" size="+5" color="#6495ed">C</font><font face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular" size="+5" color="#323232"> OME &lt;~</font></p>
    		
    		
    			
    
    huhu^^
    
    					</font></p>
    			
    
    Du bist gerade auf meiner kleinen &quot;Internetpr&auml;senz&quot; gelandet.
    
    					Viel Spa&szlig; beim rumschauen!
    
    					
    			
    
    
    				<script src="http&#58;//www.clocklink.com/embed.js"></script><script type="text/javascript" language="JavaScript">obj = new Object;obj.clockfile = "0006-Blue.swf";obj.TimeZone = "NZT";obj.width = 150;obj.height = 180;obj.wmode = "transparent";showClock&#40;obj&#41;;</script>
    			
    		</div>
    	</body>
    
    		</div>
    		
    		
    	
    	</body>
    
    </html>
    und noch der von der css-datei:
    Code:
    body &#123;
    font-family&#58; Arial, Verdana; Helvetica;
    color&#58; #87CEFA;
    font-size&#58;100.01%;
     &#125;
    
    #header&#123;
    width&#58;900px;
    height&#58;100px;
    background-image&#58;url&#40;header.gif&#41;;
    &#125;
    
    #navi&#123;
    width&#58; 110px; 
    height&#58; 600px;
    float&#58; left;  
    background-color&#58;#6495ED;
    &#125;
    
    
    #content
    align&#58; center;
    width&#58; 800px; 
    height&#58;600px; 
    float&#58; left;
    background-color&#58;#4682B4; 
    overflow&#58;hidden;
    &#125;
    
    
    #menu&#123;
    list-style-type&#58; none;
    text-decoration&#58; none
    
    a&#58;link &#123; 
    font-family&#58;Arial,Verdana,Helvetica;
    text-decoration&#58;none;
    color&#58;#000000;
    &#125; 
    
    a&#58;visited &#123; 
    font-family&#58;Arial,Verdana,Helvetica;
    text-decoration&#58;none;
    color&#58;#000000;
    &#125; 
    
    a&#58;active &#123; 
    font-family&#58;Arial,Verdana,Helvetica;
    text-decoration&#58;none;
    color&#58;#4169E1;
    &#125; 
    
    a&#58;hover &#123; 
    font-family&#58;Arial,Verdana,Helvetica;
    text-decoration&#58;none;
    color&#58;#4169E1;
    &#125;
    was ist denn dadran noch falsch??
    weil das header bild zeigt er ja an, und das ist auch in der css datei

  8. #8
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Im HTML-Teil sind noch einige body-Tags zuviel. Mach mal diesen Teil so:
    Code:
       <body bgcolor="black"> 
           
          <div id="header"> 
             </div> 
           
    <div id="navi"> 
    
    <ul id="menu"> [*]home [*]guestbook [*]contact [*]umfragen [*]links [*]about me 
           [/list]
    </div> 
           
          <div id="content"> 
       <div align="center"> 
             
    
    <font face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular" size="+5" color="#323232">~&gt; WEL 
    
    </font><font face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular" size="+5" color="#6495ed">C</font><font 
    
    face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular" size="+5" color="#323232"> OME &lt;~</font></p> 
           
           
             
    
    huhu^^
     
                   </font></p> 
             
    
    Du bist gerade auf meiner kleinen &quot;Internetpr&auml;senz&quot; gelandet.
     
                   Viel Spa&szlig; beim rumschauen!
     
                    
             
    
     
                <script src="http&#58;//www.clocklink.com/embed.js"></script><script type="text/javascript" language="JavaScript">obj = 
    
    new Object;obj.clockfile = "0006-Blue.swf";obj.TimeZone = "NZT";obj.width = 150;obj.height = 180;obj.wmode = 
    
    "transparent";showClock&#40;obj&#41;;</script> 
              
          </div> 
    
          </div> 
           
           
        
       </body>
    In der CSS ist das menue nicht richtig codiert. Ersetze es damit:
    Code:
    #menu&#123; 
    list-style-type&#58; none; 
    text-decoration&#58; none; 
    &#125;
    Bei mir ist die Schrift jetzt so formatiert.

  9. #9
    Gast

    Standard

    soo...jetzt kommen wir der sache schon näher^^

    hab leider noch 2 probleme

    In der navi erscheinen alle links eingerückt also passen sie nicht ganz in den div-container

    Und der background vom content-div wird auch noch nicht angezeigt

    Code:
    <html>
    
    	<head>
    		<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
    		<meta name="generator" content="Adobe GoLive 5">
    		<title></title>
    		<link rel="stylesheet" type="text/css" href="stylesheet.css">
    	</head>
    
    	<body bgcolor="black">
    		
    		<div id="header">
    			</div>
    		
    <div id="navi">
    
    <ul id="menu" style="list-style-type&#58; none; align&#58;left">[*]home[*]guestbook[*]contact[*]umfragen[*]links[*]about me
    		[/list]
    </div>
    		
    		<div id="content">
    	<div align="center">
    			
    
    <font face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular" size="+5" color="#323232">~&gt; WEL </font><font face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular" size="+5" color="#6495ed">C</font><font face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular" size="+5" color="#323232"> OME &lt;~</font></p>
    		
    		
    			
    
    huhu^^
    
    					</font></p>
    			
    
    Du bist gerade auf meiner kleinen &quot;Internetpr&auml;senz&quot; gelandet.
    
    					Viel Spa&szlig; beim rumschauen![b]
    
    			
    
    
    				<script src="http&#58;//www.clocklink.com/embed.js"></script><script type="text/javascript" language="JavaScript">obj = new Object;obj.clockfile = "0006-Blue.swf";obj.TimeZone = "NZT";obj.width = 150;obj.height = 180;obj.wmode = "transparent";showClock&#40;obj&#41;;</script>
    
    		</div>
    		</div>
    		
    		
    	
    	</body>
    
    </html>
    Code:
    body &#123;
    font-family&#58; Arial, Verdana; Helvetica;
    color&#58; #87CEFA;
    font-size&#58;100.01%;
     &#125;
    
    #header&#123;
    width&#58;900px;
    height&#58;100px;
    background-image&#58;url&#40;header.gif&#41;;
    &#125;
    
    #navi&#123;
    width&#58; 110px; 
    height&#58; 600px;
    float&#58; left;  
    background-color&#58;#6495ED;
    list-style-type&#58; none;
    &#125;
    
    
    #content
    width&#58; 800px; 
    height&#58;600px; 
    float&#58; left;
    background-color&#58;#4682B4; 
    overflow&#58;hidden;
    &#125;
    
    
    #menu&#123;
    list-style-type&#58; none;
    text-decoration&#58; none;
    align&#58;left; 
    &#125;
    
    a&#58;link &#123; 
    font-family&#58;Arial,Verdana,Helvetica;
    text-decoration&#58;none;
    color&#58;#000000;
    font-size= 0.8em;
    &#125; 
    
    a&#58;visited &#123; 
    font-family&#58;Arial,Verdana,Helvetica;
    text-decoration&#58;none;
    color&#58;#000000;
    font-size= 0.8em;
    &#125; 
    
    a&#58;active &#123; 
    font-family&#58;Arial,Verdana,Helvetica;
    text-decoration&#58;none;
    color&#58;#4169E1;
    font-size= 0.8em;
    &#125; 
    
    a&#58;hover &#123; 
    font-family&#58;Arial,Verdana,Helvetica;
    text-decoration&#58;none;
    color&#58;#4169E1;
    font-size= 0.8em;
    &#125;
    Ich bin aber auch schwierig xD

  10. #10
    Kaiser(in) Avatar von Elvis
    Registriert seit
    09.05.2006
    Ort
    Hamburg
    Beiträge
    2.537
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings
    Blog-Einträge
    2

    Standard

    Probier mal die CSS-Datei zu erweitern. Den Style-Vermerk im Quelltext kannst du dann entsprechend weglassen.
    Code:
    ul#menu li &#123;
    list-style &#58; none;
    margin &#58; 0;
    padding &#58; 0;
    &#125;

Ähnliche Themen

  1. externe CSS Datei im Body einfügen
    Von wernerdeluxe im Forum HTML & CSS Forum
    Antworten: 11
    Letzter Beitrag: 30.01.2008, 18:43
  2. externe JavaScript-Datei
    Von mattis_1 im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 6
    Letzter Beitrag: 24.10.2007, 18:08
  3. Externe CSS-Datei wird nicht erkannt
    Von Ysuran im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 04.03.2007, 02:42
  4. Javascript: externe JS-Datei in einer externen JS-Datei
    Von µaTh im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 2
    Letzter Beitrag: 29.10.2005, 19:27
  5. externe css-datei
    Von D.K. im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 24.07.2005, 21:51

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •