• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Darstellungproblem

Status
Für weitere Antworten geschlossen.
F

Freuler

Neues Mitglied
Ich habe erneut ein problem mit der Darstellung über CSS.
Ich möchte eine komplette Box, aber das Bild im Anhang zeigt etwas anderes. Es gab einen Abstand links in der Menübox. Wie bring ich den Weg?
 

Anhänge

  • problem1.jpg
    problem1.jpg
    29,3 KB · Aufrufe: 19
Abstände macht man entweder mit margin (außen) oder mit padding (innen).
 
Ja richtig. Das ist das Problem. Wenn Du keinen Abstand haben willst, dann musst Du das auch angeben. Ansonsten bist Du den nicht normierten Default-Werten der Browser unterlegen.
 
Zeig doch mal das html und das relevante css dazu.
Am einfachsten können wir helfen, wenn du das Problem eingrenzen kannst.
Wenn du das Menü nicht isolieren kannst, bräuchten wir einen Link.

Es gibt zu viele Möglichkeiten, wie das Menü aufgebaut sein könnte um das Problem zu erraten.
 
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Kleine Habbo-Fanpage</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="content-language" content="de" />
    <meta http-equiv="content-script-type" content="text/javascript" />
    <meta http-equiv="content-style-type" content="text/css" />
    <meta name="language" content="de" />
    <meta name="abstract" content="Startseite,Index,Home,Habbo, Freuli.net, Habbo.ch, Schweiz, Fansite" />
    <meta name="keywords" content="Startseite,Index,Home,Habbo, Freuli.net, Habbo.ch, Schweiz, Fansite" />
    <meta name="description" content="Eine kleine Habbohomepage!" />
    <meta name="author" content="Walter Zubler, Mario Freuler, Jasmin Frei" />
    <meta name="copyright" content="Walter Zubler, CH-5425 Schneisingen,Mario Freuler, Jasmin Frei" />
    <meta name="publisher" content="Mario Freuler" />
    <meta name="audience" content="Alle,alle,Kollegen,Freunde,Intressenten" />
    <meta name="page-type" content="Informationen, Habbo, Fanpage" />
    <meta name="page-topic" content="Habbo-Fanpage" />
    <meta name="DC.creator" content="Walter Zubler, Mario Freuler, Jasmin Frei" />
    <meta name="DC.publisher" content="Mario Freuler" />
    <meta name="DC.language" content="de" scheme="RFC3066" />
    <meta name="DC.coverage" content="local" />
    <meta name="DC.rights" content="Walter Zubler, CH-5425 Schneisingen,Mario Freuler, Jasmin Frei" />
    <meta name="robots" content="follow, index" />
    <meta name="revisit-after" content="14 days" />
    <!-- CSS -->
    <link title="Standard" href="css/bildschirm.css" type="text/css" rel="stylesheet" media="screen, projection" />

    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

<script type=text/javascript>IE7_PNG_SUFFIX='.png';</script> 
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-->

<!-- Hintergrund wegen alten IE's hier und nicht in der CSS-Datei -->
<style type="text/css">

body
  {
    background-image:url(layout/hintergrund.gif);
    background-attachment:fixed;
  }

</style>

</head>

<body>
  <div id="kopfbereich"> <!-- Anfang Kopfbereich -->
    <div id="kopf_rahmen_oben"><img src="layout/kopf_oben.png" width="584px" height="10px" alt="Kopfrahmen" /></div>
    <div class="kopf_rahmen_links_rechts"><img src="layout/kopf_links.png" width="10px" height="110px" alt="Kopfrahmen" /></div>
    <div id="kopf_inhalt_bereich">
      <img src="http://www.freuli.net/logo/script.phtml" width="564px" height="110px" />
    </div>
    <div class="kopf_rahmen_links_rechts"><img src="layout/kopf_rechts.png" width="10px" height="110px" alt="Kopfrahmen" /></div>
    <div class="clear_float"></div>
    <div id="kopf_rahmen_unten"><img src="layout/kopf_unten.png" width="584px" height="10px" alt="Kopfrahmen" /></div>
  </div> <!--  Ende kopfbereich -->
    <div class="clear_float"></div>
  <div id="balkenbereich">
    <div class="mittel_balken"> <!-- Anfang Balken unter Kopfbereich -->
      <img src="layout/balken_oben.png" width="414px" height="19px" alt="Verbindungsbalken" /></div></div><!-- Ende Balken unter Kopfbereich -->
    <div class="clear_float"></div>
  <div id="body"> <!-- Anfang Pagekörper -->
  <div id="menueboxbanner"> <!-- Anfang Menübox -->
      <img src="layout/menue_header.png" width="140px" height="36px" alt="Menuetitel" /><div class="clear_float"></div></div>
    <div class="space_10px">
      <img src="http://www.freuli.net/images/spacer.gif" width="1px" height="1px" /></div>
  <div id="contentboxbanner"><img src="layout/start_title.png" width="453px" height="36px" alt="Content Banner" /><div class="clear_float"></div></div>
    <div class="space_10px">
      <img src="http://www.freuli.net/images/spacer.gif" width="1px" height="1px" /></div>
    <div id="highlightboxbanner">
      <img src="layout/highlight_header.png" width="140px" height="36px" alt="Highlighttitel" /><div class="clear_float"></div></div>
    <div class="menue_links_rechts">
      <img src="layout/menue_links.png" width="10px" height="108px" alt="Menue Rahmen" /><div class="clear_float"></div></div>
    <div id="menue_inhalt_box"><!-- Inhalt Menuebox --><div class="clear_floar"></div></div>
    <div class="menue_links_rechts">
      <img src="layout/menue_rechts.png" width="10px" height="108px" alt="Menue Rahmen" /><div class="clear_float"></div></div>
      <div class="space1"><div class="clear_float"></div></div>
    <div class="content_links_rechts">
      <img src="layout/menue_links.png" width="10px" height="269px" alt="Contentrahmen" /><div class="clear_float"></div></div>
    <div id="content_inhalt_box">
      <!-- Content Inhalt --><div class="clear_float"></div></div>
    <div class="content_links_rechts">
      <img src="layout/menue_rechts.png" width="10px" height="269px" alt="Contentrahmen" /><div class="clear_float"></div></div>
    <div class="space1"></div>
      <div class="menue_links_rechts"><img src="layout/menue_links.png" width="10px" height="102px" alt="Highlightbox Rahmen" /><div class="clear_float"></div></div>
    <div id="highlight_inhalt_box">
    <iframe src="http://www.freuli.net/shortnews.html" width="120px" height="102px" name="shortnews" scrolling="no" border="0" frameborder="0">
</iframe><div class="clear_float"></div></div>
    <div class="menue_links_rechts"><img src="layout/menue_rechts.png" width="10px" height="102px" alt="Highlightbox Rahmen" /><div class="clear_float"></div></div>
    <div class="clear_float"></div><div id="menue_footer"><img src="layout/menue_footer.png"></div>
</div>
</body>
</html>

Dies ist der HTML-Code und ergibt GENAU das Selbe Bild wie auf dem oberen Bild vom Anhang.
 
Freuler schrieb:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Kleine Habbo-Fanpage</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="content-language" content="de" />
    <meta http-equiv="content-script-type" content="text/javascript" />
    <meta http-equiv="content-style-type" content="text/css" />
    <meta name="language" content="de" />
    <meta name="abstract" content="Startseite,Index,Home,Habbo, Freuli.net, Habbo.ch, Schweiz, Fansite" />
    <meta name="keywords" content="Startseite,Index,Home,Habbo, Freuli.net, Habbo.ch, Schweiz, Fansite" />
    <meta name="description" content="Eine kleine Habbohomepage!" />
    <meta name="author" content="Walter Zubler, Mario Freuler, Jasmin Frei" />
    <meta name="copyright" content="Walter Zubler, CH-5425 Schneisingen,Mario Freuler, Jasmin Frei" />
    <meta name="publisher" content="Mario Freuler" />
    <meta name="audience" content="Alle,alle,Kollegen,Freunde,Intressenten" />
    <meta name="page-type" content="Informationen, Habbo, Fanpage" />
    <meta name="page-topic" content="Habbo-Fanpage" />
    <meta name="DC.creator" content="Walter Zubler, Mario Freuler, Jasmin Frei" />
    <meta name="DC.publisher" content="Mario Freuler" />
    <meta name="DC.language" content="de" scheme="RFC3066" />
    <meta name="DC.coverage" content="local" />
    <meta name="DC.rights" content="Walter Zubler, CH-5425 Schneisingen,Mario Freuler, Jasmin Frei" />
    <meta name="robots" content="follow, index" />
    <meta name="revisit-after" content="14 days" />
    <!-- CSS -->
    <link title="Standard" href="css/bildschirm.css" type="text/css" rel="stylesheet" media="screen, projection" />

    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

<script type=text/javascript>IE7_PNG_SUFFIX='.png';</script> 
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-->

<!-- Hintergrund wegen alten IE's hier und nicht in der CSS-Datei -->
<style type="text/css">

body
  {
    background-image:url(layout/hintergrund.gif);
    background-attachment:fixed;
  }

</style>

</head>

<body>
  <div id="kopfbereich"> <!-- Anfang Kopfbereich -->
    <div id="kopf_rahmen_oben"><img src="layout/kopf_oben.png" width="584px" height="10px" alt="Kopfrahmen" /></div>
    <div class="kopf_rahmen_links_rechts"><img src="layout/kopf_links.png" width="10px" height="110px" alt="Kopfrahmen" /></div>
    <div id="kopf_inhalt_bereich">
      <img src="http://www.freuli.net/logo/script.phtml" width="564px" height="110px" />
    </div>
    <div class="kopf_rahmen_links_rechts"><img src="layout/kopf_rechts.png" width="10px" height="110px" alt="Kopfrahmen" /></div>
    <div class="clear_float"></div>
    <div id="kopf_rahmen_unten"><img src="layout/kopf_unten.png" width="584px" height="10px" alt="Kopfrahmen" /></div>
  </div> <!--  Ende kopfbereich -->
    <div class="clear_float"></div>
  <div id="balkenbereich">
    <div class="mittel_balken"> <!-- Anfang Balken unter Kopfbereich -->
      <img src="layout/balken_oben.png" width="414px" height="19px" alt="Verbindungsbalken" /></div></div><!-- Ende Balken unter Kopfbereich -->
    <div class="clear_float"></div>
  <div id="body"> <!-- Anfang Pagekörper -->
  <div id="menueboxbanner"> <!-- Anfang Menübox -->
      <img src="layout/menue_header.png" width="140px" height="36px" alt="Menuetitel" /><div class="clear_float"></div></div>
    <div class="space_10px">
      <img src="http://www.freuli.net/images/spacer.gif" width="1px" height="1px" /></div>
  <div id="contentboxbanner"><img src="layout/start_title.png" width="453px" height="36px" alt="Content Banner" /><div class="clear_float"></div></div>
    <div class="space_10px">
      <img src="http://www.freuli.net/images/spacer.gif" width="1px" height="1px" /></div>
    <div id="highlightboxbanner">
      <img src="layout/highlight_header.png" width="140px" height="36px" alt="Highlighttitel" /><div class="clear_float"></div></div>
    <div class="menue_links_rechts">
      <img src="layout/menue_links.png" width="10px" height="108px" alt="Menue Rahmen" /><div class="clear_float"></div></div>
    <div id="menue_inhalt_box"><!-- Inhalt Menuebox --><div class="clear_floar"></div></div>
    <div class="menue_links_rechts">
      <img src="layout/menue_rechts.png" width="10px" height="108px" alt="Menue Rahmen" /><div class="clear_float"></div></div>
      <div class="space1"><div class="clear_float"></div></div>
    <div class="content_links_rechts">
      <img src="layout/menue_links.png" width="10px" height="269px" alt="Contentrahmen" /><div class="clear_float"></div></div>
    <div id="content_inhalt_box">
      <!-- Content Inhalt --><div class="clear_float"></div></div>
    <div class="content_links_rechts">
      <img src="layout/menue_rechts.png" width="10px" height="269px" alt="Contentrahmen" /><div class="clear_float"></div></div>
    <div class="space1"></div>
      <div class="menue_links_rechts"><img src="layout/menue_links.png" width="10px" height="102px" alt="Highlightbox Rahmen" /><div class="clear_float"></div></div>
    <div id="highlight_inhalt_box">
    <iframe src="http://www.freuli.net/shortnews.html" width="120px" height="102px" name="shortnews" scrolling="no" border="0" frameborder="0">
</iframe><div class="clear_float"></div></div>
    <div class="menue_links_rechts"><img src="layout/menue_rechts.png" width="10px" height="102px" alt="Highlightbox Rahmen" /><div class="clear_float"></div></div>
    <div class="clear_float"></div><div id="menue_footer"><img src="layout/menue_footer.png"></div>
</div>
</body>
</html>
Dies ist der HTML-Code und ergibt GENAU das Selbe Bild wie auf dem oberen Bild vom Anhang.
Zum Vergrößern anklicken....

man man heftige divsuppe, habs mal als code zitiert, solltest du in zukunft auch machen, keiner kann sonst was erkennen wenn er 2m scrollen muß.

leider hast versäumt uns deine css zu zeigen, die es ja geben müsste, denn du hast ja massig ID´s und Klassen zu verteilen gehabt;)

Aber eines kann ich dir schon mal sagen, selbst wenn das irgendwann läuft, was zum Glücklich werden wird das nicht.

gruß
csstester
 
Ein Infomatiker hat mir einen Anfang geschnippselt.

Code: 
/*==============================================================*/
/*==             CSS fuer Bildschirmdarstellung               ==*/
/*==----------------------------------------------------------==*/
/*== Seite:  Freulers Habbofanpage                            ==*/
/*== Copyright: Mario Freuler                                 ==*/
/*==============================================================*/

*
{
  margin:0;     /* Gillt für Alle  */
  padding:0;
  border:0;
}

html, body
 {
  top:0;
  right:0;
  left:0;
  bottom:0;
  width:100%;
  min-height:100%;
  color:#000;
  border:0;
}

body
 { 
  position:static;
  font-family:Verdana;
  font-size:8px;
  color:#000;
  background-color:#fff;
}

#kopfbereich
{
  width:584px;
  height:110px;
  margin : 0 auto;
  margin-top:20px;
  text-align : left;
  bottom : 0;
}

#kopf_rahmen_oben
{
  width:584px;
  height:10px;
}

.kopf_rahmen_links_rechts
{
  width:10px;
  height:110px;
  float:left;
}

#kopf_inhalt_bereich
{
  width:564px;
  height:110px;
  text-align:center;
  float:left;
}

#kopf_rahmen_unten
{
  width:584px;
  height:10px;
}

#balkenbereich
{
  width:414px;
  height:19px;
  margin : 0 auto;
  margin-top:10px;
  bottom : 0;
}

.mittel_balken
{
  width:414px;
  height:19px;
}

#body
{
  width:753px;
  margin: 0 auto;
  float:center;
}

#menueboxbanner
{
  width:140px;
  height:36px;
  float:left;
  margin: 0 auto;
  bottom: 0;
}

.space_10px
{
  width:10px;
  height:36px;
  text-align:center;
  float:left;
}

.space1
{
  width:10px;
  height:116px;
  float:left;
}

#contentboxbanner
{
  width:453px;
  height:36px;
  float:left;
  margin: 0 auto;
  bottom: 0;
}

#highlightboxbanner
{
  width:140px;
  height:36px;
  float:left;
  margin: 0 auto;
  bottom: 0;
}

.menue_links_rechts
{
  width:10px;
  float:left;
  margin: 0 auto;
}

#menue_inhalt_box
{
  width:120px;
  height:108px;
  float:left;
  background-color:#FFF;
}

.content_links_rechts
{
  width:10px;
  float:left;
  margin: 0 auto;
}

#content_inhalt_box
{
  width:433px;
  height:269px;
  float:left;
  background-color:#FFF;
}

#highlight_inhalt_box
{
  width:120px;
  height:102px;
  float:left;
  background-color:#FFF;
}

#menue_footer
{
  width:140px;
  height:8px;
  margin: 0 auto;
  margin-top: 0;
  padding:0;
  bottom:0;
  float:left;
}

.clear_float
{
  clear:both;
}
 
Hi Freuler,
dein <body> besteht nur aus <div> und <img>.
Da kann man sich ohne die Pfade zu den Bildern kaum ein Bild machen.
Ich fürchte ohne ein Link zu deiner Seite wird dir da kaum jemand helfen können.

Wenn du die Seite nicht zeigen möchtest, könntest du ein kleines Beispiel deines Problems hochladen.
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben