Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 17

Thema: CSS Fragen, bitte Hilfe

  1. #1
    Gast

    Standard CSS Fragen, bitte Hilfe

    Hallo!

    Habe 1 Problem mit CSS und hoffe hier Hilfe zu finden.
    Meine Seite hab ich mit CSS Boxen erstellt, sieht im FF einwandfrei aus. Wenn ich nun die Seite im IE öffnen verziehen sich 2 Boxen. Wenn ich die 2 nun anpasse siehts im FF wieder murks aus. Woran kann das liegen?

    Hier mein Code in der HTML Datei:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http&#58;//www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="cache-control" content="no-cache" />
    <title>Meine Page</title>
    <script type="text/javascript" src="lib/prototype.js"></script>
    <script type="text/javascript" src="lib/prog.js"></script>
    <style type="text/css">
    @import 'style.css';
    </style>
    </head>
    <body>
    
      <div id="rahmen"> 
        <div id="head"></div>
        <div id="middle"> 
          <div id="left"> 
            <ul>[*][img]images/kontakt.gif[/img][*][img]images/impressum.gif[/img][/list]
          </div>
          <div id="menu" class="txt"> 
            <ul>[*]<a name="unternehmen">Unternehmen</a>[*]<a name="leistungen">Leistungen</a>
    		[*]<a name="service">Service</a>
    		[*]<a name="labor">Labor</a>
    		[*]<a name="team">Team</a>
    		[*]<a name="home">Home</a>[/list]
          </div>
          <div id="content"></div>
          <div id="right"></div>
        </div>
        <div id="footer"></div>
    </div>
    </body>
    </html>
    Und hier mein CSS:
    Code:
    #rahmen &#123;
    	/* Hauptrahmen um die Page */
    	width&#58; 642px;
    	height&#58; 550px;
    	position&#58; fixed;
    	left&#58; 200px;
    	top&#58; 20px;
    &#125;
    #head &#123;
    	/* Headbereich */
    	background-image&#58; url&#40;'images/header.jpg'&#41;;
    	width&#58; 642px;
    	height&#58; 169px;
    &#125;
    #middle &#123;
    	/* Div layer für den Mittleren Bereich */
    	width&#58; 642px;
    	height&#58; 367px;
    	position&#58; absolute;
    &#125;
    #footer &#123;
    	/* Div layer für Fußbereich */
    	background-image&#58; url&#40;'images/footer.jpg'&#41;;
    	width&#58; 642px;
    	height&#58; 14px;
    	position&#58; absolute;
    	top&#58; 536px;
    &#125;
    #left &#123;
    	/* Middle Bereich linke Spalte */
    	background-image&#58; url&#40;'images/left.jpg'&#41;;
    	background-repeat&#58; no-repeat;
    	width&#58; 103px;
    	height&#58; 367px;
    	position&#58; absolute;
    	padding-top&#58; 215px;
    	padding-left&#58; 38px;
    &#125;
    #left li &#123;
    	display&#58; block;
    	cursor&#58; pointer;
    	list-style-type&#58; none;
    &#125;
    #menu &#123;
    	/* Menu im Middle Bereich */
    	background-image&#58; url&#40;'images/menu.jpg'&#41;;
    	width&#58; 524px;
    	height&#58; 26px;
    	position&#58; absolute;
    	top&#58; 0px;
    	left&#58; 103px;
    	z-index&#58; 2;
    	text-align&#58; left;
    &#125;
    #menu li &#123;
    	display&#58; inline;
    	cursor&#58; pointer;
    	padding&#58; 0px;
    	margin&#58; 0px;
    	color&#58; #FF0000;
    &#125;
    #menu li&#58;hover &#123;
    	color&#58; #000000;
    &#125;
    #content &#123;
    	/* Content im Middle Bereich */
    	background-image&#58; url&#40;'images/content.jpg'&#41;;
    	background-repeat&#58; no-repeat;
    	width&#58; 524px;
    	height&#58; 330px;
    	overflow&#58; auto;
    	position&#58; absolute;
    	left&#58; 103px;
    	top&#58; 26px;
    	padding-left&#58; 0px;
    	padding-top&#58; 10px;
    	padding-right&#58; 0px;
    	padding-bottom&#58; 0px;
    &#125;
    #right &#123;
    	/* Rechte Seite im Middle Bereich */
    	background-image&#58; url&#40;'images/right.jpg'&#41;;
    	width&#58; 15px;
    	height&#58; 367px;
    	position&#58; absolute;
    	left&#58; 627px;
    &#125;
    
    /* ###### KLASSEN ###### */
    .txt &#123;
    	font-size&#58; 11px;
    	font-family&#58; verdana;
    &#125;
    Kann ich 2 verschiedene CSS's anlegen? eine für IE und eines für FF? Wie kann ich dann bloß dem Besucher sagen welches CSS eingesetzt werden soll?

    Bitte um Hilfe.

    MfG
    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
    Teeny
    Registriert seit
    12.09.2006
    Beiträge
    27
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    www.alistapart.com --> code --> CSS

    browserhacks lernen...

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

    Standard

    Die Browser-Hacks waren diesmal nicht schuld, sondern zu viele positions absolute und fehlende float-Angaben.
    Ich hab die CSS mal etwas umgeschrieben. Achtung: Statt der background-images hab ich Farben eingesetzt, damit's besser deutlich wird.
    Die müsstest du dann wieder ersetzen. Mach dir vorsichtshalber ne Sicherungskopie von deiner Datei. Sollte die Anordnung nicht deinen Vorstellungen entsprechen, dann melde dich nochmal.
    Jedenfalls sieht's im IE und FF gleich aus.

    CSS

    Code:
    #rahmen &#123;
       /* Hauptrahmen um die Page */
       width&#58; 642px;
       height&#58; 550px;
       margin&#58; 0 auto;
       top&#58; 20px;
    &#125;
    #head &#123;
       /* Headbereich */
       background-color&#58;green;
       width&#58; 642px;
       height&#58; 169px;
    &#125;
    #middle &#123;
       /* Div layer für den Mittleren Bereich */
       width&#58; 642px;
       height&#58; 367px;
          background-color&#58;#000099;
    &#125;
    #footer &#123;
       /* Div layer für Fußbereich */
       background-color&#58;yellow;;
       width&#58; 642px;
       height&#58; 14px;
       clear&#58;both;
    &#125;
    #left &#123;
       /* Middle Bereich linke Spalte */
       background-color&#58;#ff0000;
       background-repeat&#58; no-repeat;
       width&#58; 103px;
       height&#58; 367px;
       float&#58;left;
          padding-left&#58; 38px;
    &#125;
    #left li &#123;
       display&#58; block;
       cursor&#58; pointer;
       list-style-type&#58; none;
    &#125;
    #menu &#123;
       /* Menu im Middle Bereich */
       background-color&#58;black;;
       width&#58; 642px;
       height&#58; 26px;
       clear&#58;both;
       float&#58;left;
       top&#58; 0px;
       left&#58; 103px;
    
       text-align&#58; left;
    &#125;
    #menu li &#123;
       display&#58; inline;
       cursor&#58; pointer;
       padding&#58; 0px;
       margin&#58; 0px;
       color&#58; #FF0000;
    &#125;
    #menu li&#58;hover &#123;
       color&#58; #000000;
    &#125;
    #content &#123;
       /* Content im Middle Bereich */
       background-image&#58; url&#40;'images/content.jpg'&#41;;
       background-repeat&#58; no-repeat;
       width&#58; 524px;
       height&#58; 330px;
       overflow&#58; auto;
       position&#58; absolute;
       left&#58; 103px;
       top&#58; 26px;
       padding-left&#58; 0px;
       padding-top&#58; 10px;
       padding-right&#58; 0px;
       padding-bottom&#58; 0px;
    &#125;
    #right &#123;
       /* Rechte Seite im Middle Bereich */
       background-image&#58; url&#40;'images/right.jpg'&#41;;
       width&#58; 15px;
       height&#58; 367px;
       position&#58; absolute;
       left&#58; 627px;
    &#125;
    
    /* ###### KLASSEN ###### */
    .txt &#123;
       font-size&#58; 11px;
       font-family&#58; verdana;
    &#125;
    edit: sehe gerade, dass der content noch fehlt. Wo soll der denn hin in der Anordnung der farbigen Kästen oder wie sollen die angeordnet werden?

  4. #4
    Gast

    Standard

    Hey, danke für die Antwort!
    Hab deinen CSS Code ausprobiert, hab meine Bilder eingefügt und dann war alles total durcheinander, hab einfach mein gesichertes nochmal genommen und bei dem #menu, wo der fehler war das float: left; angegeben, und bum jetzt passt alles .
    vielen Dank!! super Forum hier!

  5. #5
    Gast

    Standard

    Hätte aber noch eine Frage, wie bekomm ich denn einen Div zentriert?
    Also meinen #rahmen umschließt ja alle anderen divs, und die divs innerhalb des rahmen sind an diesem ausgerichtet, dann könnte ich doch den #rahmen Div zentrieren?
    Jednefalls wenn ich dem div ein align="center" mitgebe wird bloß der Text zentriert. Und im CSS will der mir den auch nicht zentrieren. Setze ich die Position auf absolute und geb dem einen Abstand von links von 200px, im FF rückt der ein, im IE wiedermal nicht.

  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

    Mit margin: 0 auto; für den Rahmen
    steht oben im Code
    Sorry für meine Anordnungen, ich hatte da zwei ID's vergessen.

  7. #7
    Gast

    Standard

    Macht nix ...

    Jap, margin: 0 auto; macht im IE alles in die Mitte, aber im FF bleibts leider links ausgerichtet? Woran liegt das?
    MfG

  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

    Hast du auch das position:fixed; rausgenommen?

  9. #9
    Gast

    Standard

    Ohja, daran lags *g... danke für die Hilfe.

    Hätte noch eine letzte Frage, dann dürfte ich alles haben .
    In meiner Box #menu wird im FF der Text am unteren Rand ausgerichtet, und im IE am oberen Rand. Auf sowas wie vertical-align reagiert keiner der beiden Browser

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

    Standard

    Ich kann's mir momentan im FF leider nicht ansehen. Vertikal-align bezieht sich auf die Ausrichtung innerhealb einer Zeile und nützt diesbzgl. nichts.
    Probier's mal mit einem padding-top Wert, der gibt den inneren Abstand zum oberen Containerrand an.

Ähnliche Themen

  1. HILFE! Keine Ahnung aber Fragen :D
    Von Milleadaskaefa im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 22.07.2008, 11:13
  2. 10-fragen.de - erste Meinungen bitte...
    Von Questionmark im Forum Eure Homepages und Foren - Vorstellung und Bewertungen
    Antworten: 5
    Letzter Beitrag: 02.12.2006, 16:52
  3. Bitte nicht über meine dummen Fragen ärgern *bettel*
    Von cindy im Forum Forum-Hilfe.de intern
    Antworten: 3
    Letzter Beitrag: 28.08.2005, 18:34
  4. Jede Menge Fragen - hilfe :-/
    Von ich1234 im Forum Computer - Internet Forum
    Antworten: 1
    Letzter Beitrag: 13.10.2004, 22:58
  5. ADMIN !!! BITTE DIESE FRAGEN UND ANTWORTEN LÖSCHEN !!!! <
    Von noname im Forum HTML & CSS Forum
    Antworten: 10
    Letzter Beitrag: 26.06.2004, 20:55

Stichworte

Berechtigungen

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