✔ CSS Problem

G

garfield1711

Mitglied
Hallo,

bastle seit langem an einer HP und hatte das Problem das die Background Grafik zu groß war und dadurch immer die Scrollbalken da waren.
Jetzt habe ich die Grafiken in 140 x 15 Pixel verkleinert.
Vertikal funktioniert es aber horizontal kommt immer noch der untere Scrollbalken.
Desweiteren läßt ich mein DropdownMenü nicht mehr an die untere Seite des horizontalen grünen Backgrounds schieben.

Hier mal der Link zur Seite:
http://www.meinaccount.spacequadrat.de/index.php

Habt Ihr eine Lösung des Problems?
Wäre Euch sehr dankbar.

Gruß
Garfield
 
Hi,

tausch mal für #header die relative Positionsangabe left:130px gegen einen Außenabstand margin-left:130px aus. Damit dürfte der horizontale Scrollbalken dann Geschichte sein :)

mfg Maik
 
Habe ich gemacht.
Scrollbalken ist weg.
Das Menü hängt aber immer noch so im Raum herum.
Wie bekomme ich das höher?
Es sollte eigentlich 140px von oben weg sein.
 
Auslöser ist hier deine margin-top:140px-Deklaration für das <body>-Element (helper.css).

Direkt bei seinem ersten Nachfolgeelement (<div id="header">) hälst du da ja auch schon mit der negativen Positionsangabe top:-140px kräftig dagegen, damit es am oberen Fensterrand sitzt :)

Es geht aber auch anders - und einfacher, um das Menü unterhalb des Headers zu platzieren, der sich am oberen Fensterrand wiederfindet ;-)

CSS: 
* { /* Diesen Regelblock zu Beginn des Stylesheets style.css notieren, ansonsten grundsätzlich in dem Stylesheet (CSS-Datei), das an erster Stelle  im HTML-Code aufgerufen wird  */
margin:0;
padding:0;
}

body { /*helper.css (Linie 2)*/
color:#D9D9D9;
font-family:Tahoma,Arial,Helvetica,sans-serif;
font-size:14px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
/*margin-top:140px;*/ /* von mir auskommentiert = deaktiviert */
}

#header { /*style.css (Linie 3)*/
background-image:url(../layout-dateien/hg_oben.gif);
background-repeat:repeat-x;
clip:rect(-140px, auto, auto, 140px);
height:140px;
margin:0 0 0 130px;
position:relative;
/*top:-140px;*/ /* von mir auskommentiert = deaktiviert */
width:auto;
}


mfg Maik
 
Hat geklappt.
Ich bin Dir sowas von dankbar.
Wie kann ich das wieder gut machen.
Hoffe das es jetzt ohne Probleme weitergeht.

Gruß
Garfield
 
Moin,

der Rahmen um einen grafischen Verweis wird in CSS so deaktiviert:
CSS: 
a img { border:0; }
oder
CSS: 
a img { border:none; }
Ansonsten wird das von dir genannte HTML-Attribut im <img>-Element angegeben.


Außerdem entspricht dein Markup gemäß deines deklarierten Dokumenttyps und dessen Dokumenttyp-Definition (DTD) nicht der HTML-Spezifikation für Inline-Elemente, die keine Block-Elemente (in diesem Fall das <div>) enthalten dürfen.

Ab "HTML5" ist es zulässig, dass das <a>-Element solche Block-Elemente umschliessen darf, aber nicht für "HTML 4.01", sowie "XHTML 1.0" und "XHTML 1.1".

The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links). This example shows how this can be used to make an entire advertising block into a link:
HTML: 
<aside class="advertising">
 <h1>Advertising</h1>
 <a href="http://ad.example.com/?adid=1929&amp;pubid=1422">
  <section>
   <h1>Mellblomatic 9000!</h1>
   <p>Turn all your widgets into mellbloms!</p>
   <p>Only $9.99 plus shipping and handling.</p>
  </section>
 </a>
 <a href="http://ad.example.com/?adid=375&amp;pubid=1422">
  <section>
   <h1>The Mellblom Browser</h1>
   <p>Web browsing at the speed of light.</p>
   <p>No other browser goes faster!</p>
  </section>
 </a>
</aside>
Zum Vergrößern anklicken....

Stattdessen kannst du in deinem "XHTML 1.0 Transitional"-Dokument das <a>-Element mittels CSS und der display:block-Eigenschaft formatieren, damit es "Block-Level-Charakteristika" annimmt, sich im Textfluß also wie ein Block-Element verhält, und so seinen Inhalt mit text-align:center in seinem Anzeigebereich horizontal zentrieren, was du derzeit mit dem <div> und dem HTML-Attribut align="center" bewerkstelligt hast.

mfg Maik
 
Sowas lässt sich alles wunderbar nachlesen: Innenabstand.

Oder willst du "zwischen" den Buttons nicht eher einen Außenabstand festlegen?

Anstatt meinen angesprochenen Fehler bzgl. des eingebetteten <div>-Elements im <a>-Element zu korrigieren, hast du ihn jetzt stattdessen vervielfältigt - saubere Arbeit :suspekt:

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück