Css spezialisten Frage

Dieses Thema im Forum "Webmaster Hilfe / Programmierer Forum" wurde erstellt von splasch, 14.09.2007.

  1. #1 splasch, 14.09.2007
    splasch

    splasch Erfahrener Benutzer

    Dabei seit:
    29.01.2007
    Beiträge:
    901
    Zustimmungen:
    0
    Hi hab vor kurzen ein komplettes css Layout erstellt soweit funktioniert auch alles. Solang die Angezeigte breite nicht unter 900 pixel ist.

    Nun zum Problem ich hab ein Listenfeld (ul/li) mit display:inline definiert damit horenzental dargestellt wird.
    Soweit so gut aber wenn man nun das Browserfenster verkleinert dann wander die Schrift des Listenfeldes wieder nach unten.

    Kann man das irgendwie verhindern so das die Schrift einfach rechst rauswanndert aus dem Fenster ohne das sie Automatisch wieder untereinader angezeigt wird.

    Mfg Splasch
     
  2. AdMan

    schau mal hier: Windows-Wartungs-Tool. Viele Probleme lassen sich damit einfach beheben. Oftmals ist der PC dann auch schneller!
    Registrieren bzw. einloggen, um diese und auch andere Anzeigen zu deaktivieren.
  3. #2 Blaxxun, 14.09.2007
    Blaxxun

    Blaxxun aka Noisy

    Dabei seit:
    06.11.2005
    Beiträge:
    6.171
    Zustimmungen:
    0
    feste Breite definieren und overflow setzen.

    Kannst du mal den Code posten, dann kann man besser probieren :)
     
  4. #3 GrayGhost, 14.09.2007
    GrayGhost

    GrayGhost Erfahrener Benutzer

    Dabei seit:
    04.06.2007
    Beiträge:
    422
    Zustimmungen:
    0
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title></title>
    <style type="text/css">
    #nowrap  { white-space:nowrap; }
    </style>
    </head>
    <body>
    <p id="nowrap">Dieser Text wird nicht automatisch am Fensterrand des Browsers umgebrochen. Wenn das Fenster verkleinert wird, läuft der Text rechts aus dem Fenster heraus. MfG GrayGhost</p>
    </body></html>
     
  5. #4 splasch, 14.09.2007
    splasch

    splasch Erfahrener Benutzer

    Dabei seit:
    29.01.2007
    Beiträge:
    901
    Zustimmungen:
    0
    Feste breite ist definiert overflow nicht. Werd das nacher mal testen der Code sieht so aus.

    Wenst willst kanst dir aber das Layout auch online anschauen.

    Der Html Teil:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
           "http://www.w3.org/TR/html4/strict.dtd">  
    <html>
    <head>
    <title>Layout_Logo</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <link rel="stylesheet" type="text/css" href="css/Main.css"> 
    </head>
    
    <body bgcolor="#adc3cf">
    <div id="Gesamt">
    
    <div id="B_header"></div>
    <div id="Header">
    
    <div id="Logo">[img]Bilder/Logo.gif[/img]</div>
    <h2>IHR PARTNER FÜR MEHR SERVICE &amp; SICHERHEIT</h2>
    <h3>Sandra Hradtezky
    Arbeitsschutz und 
    Gefahrenstofflagerung</h3>
    
    
    Warenkorb</p>
    </div>
    
    <div id="Warenkorb">
    		
    
    Warenkorb ist Leer</p>
    		<a>Anzeigen</a>
    	</div>
    
    
    
    <div id="Menu_header">
    <form action="php/Artikel.php?suche=1" method="post">
    <table cellpadding="0" cellspacing="0" border="0">
    	<tr>
    		<td>Suche</td>	
    		<td>
    			<INPUT type="text" size=20 name="begriff" value="" class="small" style="width:90px;" />
    			<input type="image" src="Back/lupe.gif" style="width:16px; height:16px; position:relative; top:3px;" alt="Suche" name="Suche" />
    		</td><td>
    	<ul>
    		[*]Home
    		[*]Newsletter
    		[*]Aktionen
    		[*]Kontakt
    		[*]Impressum
    		[*]Agb
    	[/list]
    		</td>
    	</tr>
    </table>
    </form>
    </div>
    
    <div id="Haupt"></div>	
    <div id="Menu"></div>
    
    </div>
    </body>
    </html>
    
    Und der CSS Teil
    Code:
    *{
    padding:0;
    margin:0;
    }
    html,body{
    font-size:95%;
    padding:0;
    margin:0;
    height:100%;
    }
    
    #Gesamt{
    position:relative;
    width: 100%;
    height:100%;
    min-height:100%;
    min-width: 90px;
    border:0px solid red;
    /* margin:0 auto;  */
    }
    html>body #Header{  
    position: fixed;  /*   nur fuer moderne Browser! */
    }
    html>body #Menu_header{  
    position: fixed;  /*   nur fuer moderne Browser! */
    }
    html>body #B_header{  
    position: fixed;  /*   nur fuer moderne Browser! */
    }
    html>body #Warenkorb{  
    position: fixed;  /*   nur fuer moderne Browser! */
    }
    #Header{
    position:absolute; 
    background:transparent url(../Bilder/Header.gif) no-repeat;
    width: 100%;
    height:130px;
    min-height:130px;
    Border:0px solid #000000;
    z-index:60;
    }
    #B_header{
    position:absolute;
    background-color:#294d99;
    top:0;
    width: 100%;
    height:130px;
    min-height:130px;
    Border:0px solid #000000;
    z-index:10;
    }
    #Header p{
    position:absolute;
    top:2px;
    left:15px;
    font-size:20px;
    color:#FFF;
    font-weight: bold;
    padding:2px;
    }
    #Header h2{
    position:absolute;
    Top:77px;
    left:320px;
    font-size:120%;
    font-weight: bold;
    color:#FFF;
    }
    #Header h3{
    position:absolute;
    Top:5px;
    left:695px;
    font-size:130%;
    font-weight: bold;
    color:#FFF;
    }
    #Warenkorb{
    position:absolute;
    top:33px;
    width:262px;
    height:99px;
    min-height:99px;
    background-color:#f8b800;
    border:0px solid #000;
    z-index:55;
    }
    #Warenkorb p{
    top:16px;
    font-size:16px;
    color:#000;
    padding:15px;
    font-weight:normal;
    border:0px solid #000;
    }
    #Warenkorb a{
    float:right;
    font-size:16px;
    margin-top:20px; 
    margin-right:15px; 
    margin-bottom: 0px;
    border:0px solid #000;
    }
    #Logo{
    position:absolute;
    top:0px;
    left:305px;
    border:0px solid #000;
    z-index:30;
    }
    #Menu_header{
    position:absolute;
    top:102px;
    left:280px;
    border:0px solid #000;
    z-index:60;
    }
    #Menu_header ul li{
    display:inline;  /* inline horenzental ausrichten Li Tag */
    list-style: none;
    color: #f8b800;
    font-weight: bold;
    padding:8px;
    }
    #Menu_header td{
    font-size:16px;
    color:#f8b800;
    font-weight: bold;
    padding:2px;
    }
    .small{
    font-size:14px;  /*input feld vom menu oben */
    }
    #Menu{
    position:absolute;
    top:130px;
    width:262px;
    height:100%;
    Background-color:#f8b800;
    border:0px solid #000000;
    z-index:50;
    }
    #Haupt{
    position:absolute;
    top:130px;
    left:261px;
    background-color:#adc3cf;
    height:100%;
    width:73.8%;
    border:0px solid #000000;
    }
    
    Mfg Splasch
     
  6. #5 Blaxxun, 14.09.2007
    Blaxxun

    Blaxxun aka Noisy

    Dabei seit:
    06.11.2005
    Beiträge:
    6.171
    Zustimmungen:
    0
    Wenn du <ul> eine Feste Breite zu weist, dann funktioniert es, hab ich grad mal ausprobiert. Etwa 550px sinds.
     
  7. #6 splasch, 14.09.2007
    splasch

    splasch Erfahrener Benutzer

    Dabei seit:
    29.01.2007
    Beiträge:
    901
    Zustimmungen:
    0
    Ok danke werd gleich mal testen.

    Ich habs mal so eingetragen aber das Ändert sich nix
    Code:
    #Menu_header ul li{
    display:inline;  /* inline horenzental ausrichten Li Tag */
    list-style: none;
    width:550px;
    min-width:550px;
    color: #f8b800;
    font-weight: bold;
    padding:8px;
    }
    
    Korrecktur so gehts wenn man nur auf ul anwendet *g
    Mein Fehler
    Code:
    #Menu_header ul{
    width:550px;
    min-width:550px;
    }
    

    Mfg Splasch
     
  8. AdMan

    Es ist generell erstmal empfehlenswert alle ggf. veralteten oder fehlerhaften Treiber zu scannen und auf neue zu aktualisieren. Hier kannst du einen Treiber-Scanner downloaden. Das erspart oftmals viel Ärger und hilft gegen diverse Probleme.
    Registrieren bzw. einloggen, um diese und auch andere Anzeigen zu deaktivieren.
Thema:

Css spezialisten Frage

Die Seite wird geladen...

Css spezialisten Frage - Ähnliche Themen

  1. Frage zu windows 10 update

    Frage zu windows 10 update: hallo community :) Ich hab folgende Frage: Ich wollte mir vielleicht einen neuen rechner zulegen und ich hab mich gefragt ob ich dann die ältere...
  2. Frage zu ungewöhnlicher Email mit Zahlungsaufforderung

    Frage zu ungewöhnlicher Email mit Zahlungsaufforderung: Heute habe ich eine seltsame Mail erhalten. Und zwar steht darin: Sehr geehrte(r) *Voller NAME* unsere Zahlungserinnerung blieb bislang...
  3. Frage zu dieser Seite (Bildwirkerey)

    Frage zu dieser Seite (Bildwirkerey): Hallo... ich finde diese Seite ganz orginell und würde dort gerne ein paar Memes erstellen. http://bayeux.datensalat.net/ Leider klappt es bei...
  4. Excel Frage

    Excel Frage: Hallo , eine frage zum Microsoft Excel Ich Arbeite neuerdings mit einer Preisliste via Microsoft Excel im Betrieb. Da ich dort Preise auf die...
  5. Fragen zur PC Zusammenstellung

    Fragen zur PC Zusammenstellung: Ich möchte mir bei atelco http://www.atelco.de/pcconfigurator.jsp?pcConfigurator.step.1=1 einen PC zusammenstellen, weil ich im Geschäft keinen...