Ergebnis 1 bis 6 von 6

Thema: kleines Problem mit css

  1. #1
    Youngster
    Registriert seit
    22.05.2007
    Beiträge
    13
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard kleines Problem mit css

    Hallo!

    Habe folgendes Script
    HTML:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http&#58;//www.w3.org/1999/xhtml" lang="de">
    <head><meta http-equiv="Content-type" content="text/html ; CHARSET=iso-8859-1"/>
    <title>Hallo</title>
    <link rel="stylesheet" type="text/css" href="css/basic.css" media="screen"/>
    </head>
    <body color="ffffff">
    
    <div id="wrap">
    	<div id="header">
    		 <h1>Titel</h1>
    	</div>
    	<div id="navigation">
    		<ul>[*]
                Start
              [*]
                &Uuml;ber uns
              [*]
                Registrierung
              [*]
                Impressum
              [*]
                Kontakt
              [*]
                Login
    	   
            <ul>                
    	</div>
    	
    	<div id="sidebar">
    		
            
    
    sdsd</p>
    		
    	</div>	 
    	<div id="content">
    		<h1>Kontakt</h1>
            
    
    
           Text blabla
            </p>
            
            
    	</div>
    	
    </div>
    
    </body>
    </html>
    CSS:
    Code:
    #body &#123;
    font-size&#58; 85%;
    font-famliy&#58; 'Trebuchet MS', Verdana, Arial, Sans-Serif;
    text-align&#58; center;
    &#125;
    
    #wrap &#123;
    width&#58; 760px;
    margin&#58; 0 ;
    text-align&#58; center;
    &#125;
    
    #header &#123;
    float&#58; left;
    width&#58; 800px;
    height&#58; 110px;
    text-align&#58; center;
    border-top&#58; 1px solid #999;
    &#125;
    
    #navigation &#123;
    float&#58; left;
    width&#58; 800px;
    height&#58; 40px;
    border-bottom&#58; 1px solid #999;
    border-top&#58; 1px solid #999;
    &#125;
    
    #sidebar &#123;
    float&#58; left;
    width&#58; 150px;
    height&#58; 400px;
    top&#58; 0;
    
    &#125;
    
    #content &#123;
    float&#58; left;
    width&#58; 600px;
    height&#58; 400px;
    border-right&#58; 1px solid #999;
    border-left&#58; 1px solid #999;
    top&#58; 0;
    &#125;
    
    
    
    
    #navigation ul &#123;
    list-style-type&#58; none;
    &#125;
    
    #navigation ul li &#123;
    display&#58; inline;
    &#125;
    
    
    h1, h2, h3, h4, h5, h6 &#123;
    margin&#58; 20px;
    &#125;
    
    p.boxtext &#123;
    
    border&#58; 1px solid #000;
    padding&#58; 5px;
    
    &#125;
    
    p &#123;
    margin&#58; 15px 20px;
    &#125;
    
    #list &#123;
    list-style-position&#58;outside;
    &#125;
    
    form &#123;
    width&#58;450px;
    &#125;
    
    #person label &#123;
    display&#58;block;
    font-weight&#58; bold;
    &#125;
    
    #aktivierung label &#123;
    display&#58;block;
    font-weight&#58; bold;
    &#125;
    
    #login label &#123;
    display&#58;block;
    font-weight&#58; bold;
    &#125;
    
    fieldset &#123;
    border&#58; 1px solid #dbd;
    background&#58; #fafafa;
    &#125;
    
    legend &#123;
    font-weight&#58; bold;
    font-size&#58; 120%;
    color&#58; #999;
    &#125;
    
    textarea &#123;
    width&#58; 425px;
    heigth&#58; 125px;
    &#125;
    Wenn ich jedoch den Content bereich im CSS auf z.B. 700px vergrößern will rutsch dieser nach unten obwohl doch genügend platz sein sollte nach rechts heraus. Was kann ich da machen.

    Gruß niesel
    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

    150px sidebar + 700px content = 850 px.
    Dein #wrapper, in dem sich beide befinden ist aber nur 760px breit.
    Also darfst du diesen Wert nicht überschreiten bzw. musst ihn dann ebenso erhöhen. Außerdem sind dabei noch die 2px für den content-Rahmen zu berücksichtigen.

  3. #3
    Youngster
    Themenstarter

    Registriert seit
    22.05.2007
    Beiträge
    13
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    alles klar * jedoch habe ich da noch ein weiters problem.

    das css sieht nun folgendermaßen aus:

    Code:
    #body &#123;
    font-size&#58; 85%;
    font-famliy&#58; 'Trebuchet MS', Verdana, Arial, Sans-Serif;
    text-align&#58; center;
    &#125;
    
    #wrap &#123;
    width&#58; 900px;
    margin&#58; 0 ;
    text-align&#58; center;
    &#125;
    
    #header &#123;
    float&#58; left;
    width&#58; 1000px;
    height&#58; 110px;
    text-align&#58; center;
    border-top&#58; 1px solid #999;
    &#125;
    
    #navigation &#123;
    float&#58; left;
    width&#58; 1000px;
    height&#58; 60px;
    border-bottom&#58; 1px solid #999;
    border-top&#58; 1px solid #999;
    top&#58;0px;
    left&#58;0px;
    background-color&#58;rgb&#40;230,180,250&#41;;
    z-index&#58;1;
    &#125;
    
     
            
    
    #sidebar &#123;
    float&#58; left;
    width&#58; 150px;
    height&#58; 400px;
    top&#58; 0;
    
    &#125;
    
    #content &#123;
    float&#58; left;
    width&#58; 700px;
    height&#58; 400px;
    border-right&#58; 1px solid #999;
    border-left&#58; 1px solid #999;
    top&#58; 0;
    &#125;
    
    
    
    
    #navigation ul &#123;
    list-style-type&#58; none;
    &#125;
    
    #navigation ul li &#123;
    display&#58; inline;
    &#125;
    
    
    h1, h2, h3, h4, h5, h6 &#123;
    margin&#58; 20px;
    &#125;
    
    p.boxtext &#123;
    
    border&#58; 1px solid #000;
    padding&#58; 5px;
    
    &#125;
    
    p &#123;
    margin&#58; 15px 20px;
    &#125;
    
    #list &#123;
    list-style-position&#58;outside;
    &#125;
    
    form &#123;
    width&#58;450px;
    &#125;
    
    #person label &#123;
    display&#58;block;
    font-weight&#58; bold;
    &#125;
    
    #aktivierung label &#123;
    display&#58;block;
    font-weight&#58; bold;
    &#125;
    
    #login label &#123;
    display&#58;block;
    font-weight&#58; bold;
    &#125;
    
    fieldset &#123;
    border&#58; 1px solid #dbd;
    background&#58; #fafafa;
    &#125;
    
    legend &#123;
    font-weight&#58; bold;
    font-size&#58; 120%;
    color&#58; #999;
    &#125;
    
    textarea &#123;
    width&#58; 425px;
    heigth&#58; 125px;
    &#125;
    
    a.navi,a.navi_first,a.navi_self&#123;
    display&#58;block;
    white-space&#58;nowrap;
    overflow&#58;hidden;
    border-left&#58;1px solid black;
    border-right&#58;1px solid black;
    border-bottom&#58;1px solid black;
    font-family&#58;Tahoma,sans-serif;
    font-size&#58;12px;
    font-weight&#58;bold;
    text-decoration&#58;none;
    letter-spacing&#58;0.1em;
    padding&#58;3px;
    text-align&#58;center;
    &#125;
    a.navi_first &#123;
    border-top&#58;1px solid black;
    &#125;
    
    a.navi&#58;link,a.navi&#58;link,a.navi&#58;visited,a.navi_first&#58;visited &#123;
    background-color&#58;rgb&#40;115,115,75&#41;;
    color&#58;white;
    &#125;
    
    a.navi_self&#58;link,a.navi_self&#58;visited &#123;
    background-color&#58;gray;
    color&#58;white;
    &#125;
    
    a.navi&#58;hover,a.navi_first&#58;hover,a.navi_self&#58;hover,a.navi&#58;active,a.navi_first&#58;active,a.navi_self&#58;active &#123;
    background-color&#58;white;
    color&#58;black;
    &#125;
    
    a.top_link &#123;
                display&#58;block;
                position&#58;absolute;
                width&#58;100px;
                text-align&#58;center;
                height&#58;18px;
                font-family&#58;"MS Sans Serif",sans-serif;
                font-size&#58;12px;
                font-weight&#58;bold;
                padding-top&#58;1px;
                text-decoration&#58;none;
             &#125;
             a.top_link&#58;link, a.top_link&#58;visited &#123;
                color&#58;rgb&#40;150,50,170&#41;;
                background-image&#58;url&#40;reiter1.gif&#41;;
                background-repeat&#58;no-repeat;
                background-color&#58;rgb&#40;245,240,205&#41;;
             &#125;       
             a.top_link&#58;hover, a.top_link&#58;active &#123;
                color&#58;black;
                background-image&#58;url&#40;reiter2.gif&#41;;
                background-position&#58;top right;
                background-repeat&#58;no-repeat;
                background-color&#58;white;
    
    &#125;
    
    a#home &#123;
                
    	   bottom&#58;0px;
                left&#58;100px;
                z-index&#58;3;
             &#125;
    
     a#home&#58;hover, a#home&#58;active,
             a#news&#58;hover, a#news&#58;active,
             a#game&#58;hover, a#game&#58;active,
             a#cheats&#58;hover, a#cheats&#58;active,
             a#comm&#58;hover, a#comm&#58;active,
             a#impr&#58;hover, a#impr&#58;active &#123;
                z-index&#58;9;
             &#125;
    die htmldatei
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http&#58;//www.w3.org/1999/xhtml" lang="de">
    <head><meta http-equiv="Content-type" content="text/html ; CHARSET=iso-8859-1"/>
    <title>Test</title>
    <link rel="stylesheet" type="text/css" href="css/basic.css" media="screen"/>
    </head>
    <body color="ffffff">
    
    <div id="wrap">
    	<div id="header">
    		 <h1>Agent Pepper</h1>
    	</div>
    	<div id="navigation">
    		<ul>[*]
                Start
              [*]
                &Uuml;ber uns
              [*]
                Registrierung
              [*]
                Impressum
              [*]
                Kontakt
              [*]
                Login
    	   
            <ul>                
    	</div>
    	<div id="sidebar">
    	 <a class="navi_self navi_first" href="test.html">
    	   Home
             </a>	
            <a class="navi_self navi_first" href="test.html">
    	   Zwiebeln
             </a>	
    	<a class="navi_self navi_first" href="test.html">
    	   Produkte
             </a>	
    	<a class="navi_self navi_first" href="test.html">
    	   Tipps & Tricks
             </a>	
    		
    	</div>	 
    
    	<div id="content">
    		<h1>Kontakt</h1>
            
    
    
           Willkomen bei Test Wir sind ein bablabla unternehmen um fragebögen usw zu erstellen. dies ist lusig und mach spaß und hoffen auf viel Geld 
            </p>
            
            
    	</div>
    	
    	
    </div>
    
    </body>
    </html>
    nu ist es so, der Button "Start" statt im Navibereich unten herumspringt. Sicher wieder das gleiche prob wie vorhin mit dem wrapper. Abewr ich komm nicht drauf, was ich noch machen kann.

    Gruß niesel

  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

    Kommt drauf an, wo du den hin haben willst.
    Dass er unten steht wird von
    Code:
    id="home"
    verursacht. Würd' ich also weglassen.
    Wenn er in die horizontale Navi soll, dann lösche bei
    Code:
    a.top_link
    das "position:absolute;" Der Start-Link steht dann über der Horizontalnavi.
    Falls das nicht so sein soll, müsstest du noch angeben wo du den Link gerne hättest.

  5. #5
    Youngster
    Themenstarter

    Registriert seit
    22.05.2007
    Beiträge
    13
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    habe jetzt folgendes gemacht
    Code:
    a#home &#123;
                
    	   bottom&#58;0px;
                margin-left&#58;199px;
                z-index&#58;3;
             &#125;
    
    a#about &#123;
                
    	   bottom&#58;0px;
                margin-left&#58;301px;
                z-index&#58;4;
             &#125;
    
    a#register &#123;
                
    	   bottom&#58;0px;
                margin-left&#58;400px;
                z-index&#58;4;
    jedoch werden die Buttons in treppenform dargestellt

    gruß niesel

  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

    Kann ich jetzt nicht nachvollziehen. Aber es macht keinen Sinn, bei einer normalen Navi die einzelnen Links absolut zu positionieren.
    Sieh dir mal hier einige Beispiele für Navilinks an. Da solltest du fündig werden.

Ähnliche Themen

  1. kleines CSS-problem
    Von synaptic im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 10.01.2008, 19:12
  2. kleines problem
    Von Kyle im Forum HTML & CSS Forum
    Antworten: 12
    Letzter Beitrag: 02.08.2007, 11:47
  3. kleines CSS Problem
    Von CHoTlMaL im Forum HTML & CSS Forum
    Antworten: 8
    Letzter Beitrag: 13.04.2007, 20:27
  4. Kleines Problem
    Von Bamba im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 15.10.2006, 15:08
  5. Kleines Problem
    Von coach im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 4
    Letzter Beitrag: 06.04.2005, 21:35

Stichworte

Berechtigungen

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