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

DIV leiste geht nicht auf 100%

  • Ersteller Ersteller ARatedChris
  • Erstellt am Erstellt am
A

ARatedChris

Guest
Hi Leute,

ich hab ein kleines Problem. Und zwar habe ich ganz oben auf meiner Seite eine <div>-Leiste mit Hintergrund die als kleine Zusatznavigation dienen soll.

Problem: Ich hab die width auf 100% gesetzt, er lässt aber links und rechts ca. 7px frei, woran es liegt finde ich einfach nicht heraus. Hier der Quelltext, vielleicht findet einer von euch was :neutral:

Code: 
<body text="#000000" bgcolor="#FFFFFF" link="#C0C0C0" alink="#FF0000" vlink="#FF0000">
<div style="width:100%; height:30px; background-image:url(Images/TopBarBG.gif); left:0; top:0; line-height:25px">
<font face="Arial" color="#A0A0A0" style="font-size:11px;">
<p style="padding-left:10px; padding-top:0px">
<table height="30px">
<tr valign="middle">
<td valign="middle">
<a href="www...de" class="topbar_link" style="text-decoration:none;"><b>Test</b></a>
</td>
</tr>
</table>
</p>
</font>
<div id="contentholder" style="margin:auto; width:1000px; background-color:#FFFFFF;">
</div>
</body>

PS: Das Problem habe ich nach oben auch, mit padding gehts nicht weg.
 
Versuch's mal damit:

Code: 
html, body {margin: 0; padding: 0; width: 100%;}

Verwende für die Styleangaben am besten eine ausgelagerte CSS-Datei und für die Navi eine ul-Liste statt Tabelle.
 
Sorry aber soweit bin ich noch nich ^^

Geht das nicht anders? :/
 
Hey,

du nutzt anscheinend Editor Phase 5. Diese Eigenschaften die zB im <body>-Tag vorgegeben werden solltest du raus löschen, solche Sachen kommen in den CSS-Code.

Im allgemeinen lege ich es dir nahe, deinen CSS-Quelltext komplett in ein Stylesheet zu verlegen. Das macht das arbeiten einfacher.
Wenn du das gemacht hast, setze in das Stylesheet diesen Code ein:
Code: 
*{
  margin: 0;
  padding: 0;
}
Das bewirkt, dass die Defaulteinstellungen des Browsers für Innen- und Aussenabstände auf null gesetzt werden. So sollte dieser Rand verschwinden.

Im übrgigen solltest du auf Tabellenlayouts verzichten, Tabellen sind für tabellarische Daten, und nicht fürs Aussehen.
Auch die <font>-Tags solltest du weglassen, sie dienen zur Schriftformatierung, aber das ist nicht die Aufgabe von HTML, sondern von CSS.

Mit HTML legst du die Bedeutung deines Inhalts fest, also was eine Überschrift, ein Textabsatz, ein Bild, etc. ist.

LG Vitus
 
Wüsste jetzt nicht wofür das Programm gut ist.
Eigentlich brauchst du im HTML-Quelltext nur zwischen <head> und </head> das einfügen:
HTML: 
<link rel="stylesheet" href="style.css" type="text/css">
Und dann deinen CSS-Code in eine Datei "style.css" packen.

Das hier is eine gute Anlaufstelle für CSS:
CSS 4 You - The Finest in Stylesheets
 
Moin,

ich lese u.a. gerne hier:
SELFHTML 8.0 (HTML-Dateien selbst erstellen)
CSS-Technik - Ressourcen, Skripte, Tutorials.
Aktuelles | Webdesign mit XHTML und CSS

sowie in diversen Büchern zum Thema HTML und CSS (der Rechner stört mich immer im Bett).

Schreib Dir das Stylesheet auf Phase5, mit Suffix *.css anlegen/speichern und mit dem von Vitus genannten "link rel" einfügen. "Aus die Maus" und wirklich easy. Ab der 2. Seite mit gleichem Style wirst Du es nicht mehr missen wollen.
Hier ein Beispiel von selfhtml.

Grüsse
low
 
Ich habe damit begonnen die CSS direkt in den <head>-Teil einzubinden.
Beginn damit das du den Body bestimmst danach alle anderen, du kannst auch die h1, h2, usw, usw, bestimmen: farben, grösse, usw, allerdings solltest du beachten das gerade die h1,h2,... schon eine vorbestimmte Size hat.
Ich habe mir ebenfalls noch ein Buch gekauft CSS für einsteiger kann dir aber den autor nicht gerade sagen da ich gerade Umgezogen bin und das Buch noch nicht gefunden habe.

MFG devilseye
 
Jetzt hab ich mal noch ne kurze Frage:

Ich hatte ja einen a:hover Effekt im <style> tag definiert, wie pack ich den jetzt in die CSS Datei rein?

In meiner CSS Datei siehts jetzt so aus:

Code: 
*{
  margin: 0;
  padding: 0;
}

BODY {
    background-color: #FFFFFF;
    font-family: Tahoma;
}

a:hover.topbar_link {
    border-bottom: 1px dotted #FF7B0F
    color: #FF7B0F
}
PS: Das mit der DIV Leiste hat jetzt geklappt :) Danke!

Ah, habs doch rausgefunden :)

Trotzdem danke für die tolle Hilfe von euch!
 
Sorry für den Doppelpost aber:

Da mir ja gesagt wurde ich soll anstatt einer Tabelle eine <ul>-Liste benutzen, hänge ich jetzt fest und komme nicht weiter:

Ich möchte eine Vertikale Navigation erstellen, also brauche ich eine vertikale Liste. Mein Problem ist ich finde nirgends wirklich was dazu und finde es auch einfach nicht raus wie es geht.

Kann mir jemand helfen oder kann ich bei einer Navigation auch einfach eine Tabelle nehmen? :P
 
Auch wenn ich (für mich ganz persönlich) das nicht für die beste Variante halte, kannst Du einen der ungezählten Generatoren verwenden, oder Du schaust (zum nach-/selberbasteln z.B. hier (selfhtml) rein. Letzteres halte ich (für mich ganz persönlich) für besser, da man sein Köpchen auch noch selber einsetzen muss (ausser, man schreibt es 1:1 ab...).
Grüsse
low
 
Elroy schrieb:
Was den Nachteil hat das du alle Seiten einzeln ändern musst wenn du am Style Änderungen vornimmst.
Bei einer externen Datei musst du diese Änderungen nur einmal machen und sie gelten für alle Seiten.

Gruss
Elroy
Zum Vergrößern anklicken....
das mag sein aber wenn du mit css beginnst dann hat es den vorteil dass du auch gleich die änderung siehst indem du die als css abgelegten codes aus dem <body>-html löscht und dann die seite anzeigen lässt.
So ergings mir zumindest.
 
Also ich hab heute mit CSS angefangen, hab mir so nen speziellen Editor runtergeladen :)

Komme damit ganz gut klar anstatt alles immer im <style>-Tag zu formatieren und es geht alles viel schneller :)
 
ARatedChris schrieb:
Da mir ja gesagt wurde ich soll anstatt einer Tabelle eine <ul>-Liste benutzen, hänge ich jetzt fest und komme nicht weiter:
Kann mir jemand helfen oder kann ich bei einer Navigation auch einfach eine Tabelle nehmen? :P
Zum Vergrößern anklicken....
Dein Problem ist, dass Du noch in keiner Weise begriffen hast, was HTML eigentlich ist und trotzdem schon einen Schritt weiter gehen willst. Wie hast Du anfangs doch so schön geschrieben? "So weit bin ich noch nicht". Das war schon richtig. Erst, wenn Du selber weißt, warum Du natürlich keine Tabelle zur Navigation benutzen darfst, kannst Du von Dir sagen, HTML zu können und nur, wenn Du HTML beherrschst, ist CSS nicht so kompliziert für Dich.

Also fang bitte nochmal ganz von vorne an und lerne HTML richtig. Der Sinn von HTML ist die logische Bedeutung (= Semantik) des Inhalts. Ein Menü als Tabelle auszuzeichnen ist schlicht falsch, weil es sich bei einem Menü um eine Liste handelt, nicht um tabellarische Daten. Daher ist auch der Begriff "div-Leiste" Unfug, weil <div> bedeutet: Gruppe mehrerer Elemente und das nichts mit "Leiste" zu tun hat.
Hier ein Link, wo man das gut lernen kann: Einführung | Webdesign mit XHTML und CSS
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben