Ergebnis 1 bis 6 von 6

Thema: IE: Positionierung der Elemente

  1. #1
    Haris
    Gast

    Standard IE: Positionierung der Elemente

    Hallo, ich bin neuling in Sachen HTML & CSS etc - aber ich habe mir da was zusammengeschrieben...
    Es funktioniert bei Google Chrome sowie bei FireFox problemlos (darauf habe ich auch aufgebaut), jedoch wenn ich es z.B im IE 8 öffne ist fehlt die ganze Positionierung und die ganze Seite klebt am linken Bildschirmrand. Bild unten zeigt was ich meine...

    Das zweite Problem: siehe Bild unten

    Ich habe bereits gegoogelt, aber kein Ergebniss gefunden dass mir hilft....

    Hier der Quelltext zum HTML

    Code:
    html
    	head
    	title EVON title
    	link rel=stylesheet type=textcss href=stylesheet.css 
    	 script type=textjavascript src=pluginsjquery.jsscript
         script type=textjavascript src=pluginscycle-plugin.jsscript
    	script type=textjavascript
    		$(document).ready(function(){
    		$('#fade').cycle();	});script
    	 
    
    	head
    
    	body
    		div id=container
    		div id=site
    		div id=emroslogo
    			a href=httpwww.envosbau.at
    				img src=picturelogo-emros-group.jpg alt=Evoslogoa
    		div
    	div id=topmenu
    		a href=.Galerie.htm title=Galeriea
    
    		
    
    		a href=.Partner.htm title=Partnera
    
    		
    
    		a href=.Anfahrtsplan.htm title=Anfahrtsplana
    
    		
    
    		a href=.Kontakt.htm title=Kontakta
    	div
    div
    
    div id=fade style=float-left; 
    	img src=pictureheader_1.jpg width=1000       
    	img src=pictureheader_2.jpg width=1000 
    	img src=pictureheader_3.jpg width=1000 
    	img src=pictureheader_4.jpg width=1000 
    divdiv
    
    	div id=menuoverall
    	div id=menu
    		a href=.envos.htm title= class=menuactiveHOMEa
    		a href=.1Blabla.htm title= class=1BlablaBlablaa
    		a href=.2blabla.htm title= class=2BlaBla2Blablaa
    		a href=.3blabla.htm title= class=3blabla3Blablaa
    		a href=.4blabla.htm title= class=4Blabla4BlaBlaa
    	div
    	div
    	div id=containerdiv id=fieldoverall
    	div id=field
    
    	div id=field1 class=box
    		h1 Hier die Überschrift 1 h1
    		p Hier kommt der Text rein p
    	div
    	div id=field2 class=box
    		h1 Hier die Überschrift 2 h1
    		p Hier kommt der Text rein p
    	div
    	div id=field3 class=box
    		h1 Hier die Überschrift 3 h1
    		p Hier kommt der Text rein p
    	div
    	div
    	div
    div
    	body
    html
    und hier zu CSS

    Code:
    html, body {
    	margin:0;
    	padding:0;
    	height:100%;
    }
    body {
    	font-family:Arial, Helvetica, sans-serif;
    	font-size:12px;
    	color:#000000;
    	background-color: white top center;
    }
    
    
    h1, h2, h3, h4, h5, h6 {
    	font-size: 14px;
    	font-color: #000000;
    }
    
    p {
    	font-size: 13px;
    	font-color: #000000;
    }
    
    #topmenu {
    	
    	text-align:right;
    	text-transform:uppercase;
    	color:#8a8a8a;
    	font-size:10px;
    	margin-top:-28px;
    	margin-bottom:10px;
    
    }
    #topmenu a, {
    	color:#FFFFFF;
    	text-decoration:none;
    }
    #topmenu a {
    	padding:0 7px;
    	color:#000000;
    	text-transform:uppercase;
    }
    #topmenu a:hover, #topmenu a:focus, #topmenu a.active {
    	color:#000000;
    }
    
    #site {
    	width:1000px;
    	margin:0 auto ;
    	padding-top:15px;
    }
    #container {
    	 width: 1000px; 
    	 margin: 0 auto; 
    }
    
    #menuoverall {
    	background:url("designpicture/menu_bg/menu_bg.png") top left repeat-x;
    	margin-top:-40px;
    	position:relative;
    	z-index:5;
    	
    }
    
    #menu {
    	width: 1000px;
    	margin:0 auto;
    	font-size: 15px;
    	font-weight:bold;
    	overflow:hidden;
    	height:30px;
    
    	
    }
    
    #menu a {
    	float:left;
    	width:198px;
    	text-align:center;
    	height:30px;
    	line-height:30px;
    	border-right: 1px solid #FFFFFF;
    	border-left: 1px solid #FFFFFF;
    	color:#FFFFFF;
    	text-decoration:none;
    }
    
    
    #menu a:hover, #menu a.active {
    	background:url("designpicture/menu_bg/menu_over_bg.gif") top left repeat-x;
    	color:#000000;
    }
    
    #field1 {
    	float: left;
    	margin-top: 50px;
    	margin-right: 50px;
    }
    
    #field2 {
    	float: left;
    	margin-top: 50px;
    	margin-left: -15;
    }
    
    #field3 {
    	float: right;
    	margin-top: 50px;
    }
    
    #Blabla1 {
    	float: left;
    	margin-top: 50px;
    	margin-left: 500px;
    }
    
    table {
    	font-size:11px;
    }
    
    .box {
    	background:url(designpicture/box/box-small.jpg) top left no-repeat;
    	width:260px;
    	height:250px;
    	padding:0 25px;
    }
    
    .box h1 {
    	margin-top:10px;
    }
    
    .BoxTop_L {
    	background:url(designpicture/box/boxTop_L.gif) top left no-repeat;
    	height:31px;
    	text-align:left;
    	padding-left:25px;
    	overflow:hidden;
    }
    
    .BoxBG_L {
    	width:920px;
    	background:url(designpicture/box/boxBG_L.gif) top left repeat-y;
    	float:left;
    }
    
    .BoxBottom_L {
    	background:url(designpicture/box/boxBottom_L.gif) bottom left no-repeat;
    }
    
    .BoxTop_L_short {
    	background:url(designpicture/box/boxTop_L_short.gif) top left no-repeat;
    	height:31px;
    	text-align:left;
    	padding-left:25px;
    	overflow:hidden;
    }
    
    .BoxBG_L_short {
    	width:800px;
    	background:url(designpicture/box/boxBG_L_short.gif) top left repeat-y;
    	float:left;
    }
    
    .BoxBottom_L_short {
    	background:url(designpicture/box/boxBottom_L_short.gif) bottom left no-repeat;
    }
    
    .BoxTop_L_partner {
    	background:url(designpicture/box/boxTop_L_short.gif) top left no-repeat;
    	height:31px;
    	text-align:left;
    	padding-left:25px;
    	overflow:hidden;
    }
    
    .BoxBG_L_partner {
    	width:700px;
    	background:url(designpicture/box/boxBG_L_short.gif) top left repeat-y;
    	float:left
    }
    
    .BoxBottom_L_partner {
    	background:url(designpicture/box/boxBottom_L_short.gif) bottom left no-repeat;
    }
    
    .content {
    	padding:10px 25px 20px 25px;
    }
    
    .kontent {
    	
    	padding: 20px 30px 20px 25px;
    }
    
    #contentbox {
    	margin-top: 30px;
    	margin-left: 50px;
    }
    
    #fade {
    
    	margin-top: 25px;
    	width: 1000px;  
    	height: 300px; 
    	border: 0px solid orange;
    	padding: 5px;
    
    }

    Würd mich freuen wenn ihr mir helfen könnt

    Bilder:
    Firefox (Funktioniert)
    Code:
    http://i.imgur.com/P4n1H.png
    
    IE Problem 1
    http://i.imgur.com/1nBzy.png
    
    IE Problem 2
    http://i.imgur.com/e5eyL.jpg
    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
    Bandit
    Gast

    Standard AW: IE: Positionierung der Elemente

    Was soll das sein? HTML-Code auf jeden Fall nicht. Poste bitte einen Link zur Seite.

  3. #3
    Haris
    Gast

    Standard AW: IE: Positionierung der Elemente

    Da gabs ein Fehler...hier der echte:

    Sie ist nicht online...

    hab aber Bilder dazugespostet wie es aussieht


    Code:
    <html>
    	<head>
    	<title> EVON </title>
    	<link rel="stylesheet" type="text/css" href="stylesheet.css" />
    	 <script type="text/javascript" src="plugins/jquery.js"></script>
         <script type="text/javascript" src="plugins/cycle-plugin.js"></script>
    	<script type="text/javascript">
    		$(document).ready(function(){
    		$('#fade').cycle();	});</script>
    	 
    
    	</head>
    
    	<body>
    		<div id="container">
    		<div id="site">
    		<div id="emroslogo">
    			<a href="http://www.envosbau.at">
    				<img src="picture/logo-emros-group.jpg" alt="Evoslogo"></a>
    		</div>
    	<div id="topmenu">
    		<a href="./Galerie.htm" title="">Galerie</a>
    
    		|
    
    		<a href="./Partner.htm" title="">Partner</a>
    
    		|
    
    		<a href="./Anfahrtsplan.htm" title="">Anfahrtsplan</a>
    
    		|
    
    		<a href="./Kontakt.htm" title="">Kontakt</a>
    	</div>
    </div>
    
    <div id="fade" style="float-left;"> 
    	<img src="picture/header_1.jpg" width="1000" >      
    	<img src="picture/header_2.jpg" width="1000" >
    	<img src="picture/header_3.jpg" width="1000" >
    	<img src="picture/header_4.jpg" width="1000" >
    </div></div>
    
    	<div id="menuoverall">
    	<div id="menu">
    		<a href="./envos.htm" title="" class="menuactive">HOME</a>
    		<a href="./1Blabla.htm" title="" class="1Blabla">Blabla</a>
    		<a href="./2blabla.htm" title="" class="2BlaBla">2Blabla</a>
    		<a href="./3blabla.htm" title="" class="3blabla">3Blabla</a>
    		<a href="./4blabla.htm" title="" class="4Blabla">4BlaBla</a>
    	</div>
    	</div>
    	<div id="container"><div id="fieldoverall">
    	<div id="field">
    
    	<div id="field1" class="box">
    		<h1> Hier die Überschrift 1 </h1>
    		<p> Hier kommt der Text rein </p>
    	</div>
    	<div id="field2" class="box">
    		<h1> Hier die Überschrift 2 </h1>
    		<p> Hier kommt der Text rein </p>
    	</div>
    	<div id="field3" class="box">
    		<h1> Hier die Überschrift 3 </h1>
    		<p> Hier kommt der Text rein </p>
    	</div>
    	</div>
    	</div>
    </div>
    	</body>
    </html>

  4. #4
    Bandit
    Gast

    Standard AW: IE: Positionierung der Elemente

    Zitat Zitat von Haris Beitrag anzeigen
    Sie ist nicht online...
    Dann ändere das, zur Not mit einem Freehoster
    Zitat Zitat von Haris Beitrag anzeigen
    hab aber Bilder dazugespostet wie es aussieht
    Das hilft herzlich wenig

  5. #5
    Unregistriert
    Gast

    Standard AW: IE: Positionierung der Elemente

    Verstehe - Kennst du da einen guten?

  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 AW: IE: Positionierung der Elemente

    Ich vermute, deiner Seite fehlt ein standardkonformer Doctype.
    Den braucht der Internetexplorer zur korrekten Darstellung des CSS-Boxmodells.

    Link wäre jedoch hilfreich.

Ähnliche Themen

  1. Aufbau der Elemente
    Von Shanai im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 10.12.2010, 22:23
  2. Mehrere Elemente auswählen
    Von Shyne im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 17
    Letzter Beitrag: 07.11.2009, 11:46
  3. Elemente die sich bewegen
    Von Unregistriert im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 5
    Letzter Beitrag: 27.10.2009, 16:52
  4. Elemente durchlaufen (C#)
    Von minder im Forum Forum für alle anderen Programmiersprachen
    Antworten: 1
    Letzter Beitrag: 26.04.2009, 16:07
  5. inline/block elemente
    Von Niels im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 28.10.2007, 15:30

Stichworte

Berechtigungen

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