Antworten auf deine Fragen:
Neues Thema erstellen

Layout Problem

Poki29

Ps-ler ;-)

Hallo ich habe ein Problem beim Layout. Es entsteht ein weißer Spalt wo keiner sein sollte, ich weiß aber leider nicht wieso :-(
Das Problem besteht bei allen getesteten Browsern, aber nicht in der Designansicht von Dreamweaver.

Bild:


Html-Code:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>

<title>Poki Blue</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="css/default.css" type="text/css" media="screen" />
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body onload="MM_preloadImages('Bilder/menu1_roll.png','Bilder/menu2_roll.png','Bilder/menu3_roll.png','Bilder/menu4_roll.png','Bilder/menu5_roll.png','Bilder/search_roll.png','Bilder/home_roll.png','Bilder/kontakt_roll.png','Bilder/impressum_roll.png')">
<!-- copyright 2009 Poki Design all rights reserved-->
<div id="aussen">
<div id="header">
  </div>
    <div id="menu">
        <ul>
            <li><img src="Bilder/left_menu.png" width="207" height="71" alt="menu_left" /></li>
            <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Menu1','','Bilder/menu1_roll.png',1)"><img src="Bilder/menu1.png" alt="menu1" width="123" height="71"  id="Menu1" /></a></li>
            <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('menu2','','Bilder/menu2_roll.png',1)"><img src="Bilder/menu2.png" alt="Menu2" width="116" height="71"  id="menu2" /></a></li>
            <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('menu3','','Bilder/menu3_roll.png',1)"><img src="Bilder/menu3.png" alt="menu3" width="111" height="71"  id="menu3" /></a></li>
            <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('menu4','','Bilder/menu4_roll.png',1)"><img src="Bilder/menu4.png" alt="menu4" width="118" height="71"  id="menu4" /></a></li>
            <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('menu5','','Bilder/menu5_roll.png',1)"><img src="Bilder/menu5.png" alt="menu5" width="125" height="71"  id="menu5" /></a></li>
            <li><img src="Bilder/right_menu.png" width="224" height="71" alt="right_menu" /></li>
       </ul>
    </div>
    <div id="topline">
        <ul>
            <li><img src="Bilder/searchbar.png" width="400" height="111" alt="searchbar" /></li>
            <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('search','','Bilder/search_roll.png',1)"><img src="Bilder/search.png" alt="search" width="112" height="111"  id="search" /></a></li>
            <li><img src="Bilder/ph1.png" width="166" height="111" alt="ph" /></li>
            <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','Bilder/home_roll.png',1)"><img src="Bilder/home.png" alt="home" width="118" height="111"  id="home" /></a></li>
            <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('mail','','Bilder/kontakt_roll.png',1)"><img src="Bilder/kontakt.png" alt="kontakt" width="77" height="111"  id="mail" /></a></li>
            <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image13','','Bilder/impressum_roll.png',1)"><img src="Bilder/impressum.png" alt="impressum" width="151" height="111"  id="Image13" /></a></li>
       </ul>
    </div>
    <div id="content">
    </div>

</div>
</body>
</html>

Css-Code:
Code:
body
{
    color:#FFF;
    padding: 0;
    margin: 0;
    text-align:center;
}
img
{
    border: none;
}

#aussen
{
    margin:auto;
    width:1024px;
}
#header
{
    background-image:url(../Bilder/header.png);
    height: 207px;
    width: 1024px;
}
#menu
{
    height: 71px;
    width: 1024px;
}
#menu ul
{
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}
#menu ul li
{
    list-style: none;
    float: left;
}
#menu ul li img
{
    border:none;
}

#topline
{
    height: 111px;
    width: 1024px;
}
#topline ul
{
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}
#topline ul li
{
    list-style: none;
    float: left;
}
#topline ul li img
{
    border:none;
}

#content
{ 
    height: 661px;
    width: 1024px;
    background-image:url(../Bilder/content.png);
    background-repeat:no-repeat;
}
Vielen Dank schonmal im vorraus
 

Poki29

Ps-ler ;-)

AW: Layout Problem

Mhmm hat leider nichts geholfen. Ich konnte aber das Problem selber lösen:

Hier meine Lösung falls jemand das gleiche Problem hat:

css-code #
Code:
#topline
{
    height: 111px;
    width: 1024px;
    position:absolute;
}

css-code #2
Code:
#content
{ 
    height: 661px;
    width: 1024px;
    background-image:url(../Bilder/content.png);
    background-repeat:no-repeat;
    margin:111px 0 0 0;
}
 

sokie

Mod | Web

AW: Layout Problem

hast du dir deine 'lösung' auch mal bei unterschiedlichen (grösseren) Auflösungen angesehen? wenn es bei dir so funktioniert ist deine Auflösung <= 1024x768
 

Poki29

Ps-ler ;-)

AW: Layout Problem

hast du dir deine 'lösung' auch mal bei unterschiedlichen (grösseren) Auflösungen angesehen? wenn es bei dir so funktioniert ist deine Auflösung <= 1024x768

Das ist nicht richtig. Ich habe eine Auflösung von 1680x1050 und auf dem 2ten Bildschirm 1280x1024, desweitern hab ich aufs Laptop getestet. Bei allen hat es problemlos funktioniert.

Aber was wäre denn eine alternative Lösung?

Die Idee mit Margin hatte ich bereits, hat aber leider nicht funktioniert

*Edit* AUch mit 800x600 klappt es
 

Blyawon

FinalARTs.de

AW: Layout Problem

Schick doch mal link, dann braucht man nicht rätseln.

Negatives Margin müsste schon klappen, aber wie gesagt gib link.
 

sokie

Mod | Web

AW: Layout Problem

Schick doch mal link, dann braucht man nicht rätseln.

genau, lass doch mal sehen.
ich hab mich in #4 auf deinen Code aus #1 mit den Veränderungen aus deiner 'lösung' aus #3 bezogen, und da wird es bei unterschielichen Auflösungen (möglicherweise nicht in allen Browsern) zu Problemen kommen. Zumindest müsste das Element #aussen noch ein position:relative; bekommen, damit sich dein Element topline (abs pos.) an dem #aussen sicher orientiert.
 
Zuletzt bearbeitet:

leohh

CSS verliebt

AW: Layout Problem

Rechne doch mal eben...
Dein Bild, dass die Suchleiste beinhaltet, hat Ausmasse von 400x111 Pixel.
Du allerdings, gibst diesem Element eine Hoehe von 111px und zusaetzlich noch mal ein padding von 50px, das macht insgesammt also 161px. Klar, dass es der IE falsch interpretiert und dir im DW das so zeigt wie es soll aber schon allein aus mathematischer Sicht ist diese Berechnung falsch und diese zieht sich eben durch den ganzen Bereich.

Wenn du ein padding von 50px vergeben willst, dann reicht eine Hoehe von 61px ( Macht insgesammt also 111px ).

Neben vielen anderen, ich nenne sie mal Umstaendlichkeiten, ist das wohl dein Hauptproblem - falsche Mathematik.
 

Poki29

Ps-ler ;-)

AW: Layout Problem

*Edit*

Ich hab das Problem gelöst, wenn auch nicht sehr elegant (aber immerhin auch IE6), indem ich vor den content div einen weiteren dic der Höhe 0px gestellt habe. Nun aktzeptiert auch der IE 6 die margin Anweisung.
 
Zuletzt bearbeitet:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.636
Beiträge
1.538.484
Mitglieder
67.559
Neuestes Mitglied
hanuta
Oben