CSS margin und padding

Fragen zum Thema HTML, JavaScript, PHP
Empire
Beiträge: 272
Registriert: Mo Jan 26, 2009 5:36 pm

CSS margin und padding

Beitrag von Empire » Di Jun 18, 2013 4:39 pm

Hallo zusammen,
ich schreib gerade eine kleine WebSeite, aber es funktioniert nicht so wie es soll.
Im Anhang ist ein Ausschnitt. Die grauen Button sollen keinen Abstand untereinander oder zum Header oben haben.

Code: Alles auswählen

*
{
  margin: 0;
  padding: 0;
}
Eigentlich dachte ich damit das Problem zu lösen aber es funktioniert nicht. Auch über dem Header bleiben 2 Pixel frei.
Weiß jemand wie ich die Abstände weg bekomme?

mfg
Empire
Du hast keine ausreichende Berechtigung, um die Dateianhänge dieses Beitrags anzusehen.

sebix
Beiträge: 82
Registriert: Mo Nov 19, 2012 8:27 pm

Re: CSS margin und padding

Beitrag von sebix » Di Jun 18, 2013 6:59 pm

Ohne Code lässt sich leider nich viel sagen :?

Hilfreich ist es bei solchen Problemen immer, sich im Browser mit den Entwickerwerkzeugen die CSS Eigenschaften der beteiligten Elemente anzusehen, und wie diese verschachtelt sind.

Empire
Beiträge: 272
Registriert: Mo Jan 26, 2009 5:36 pm

Re: CSS margin und padding

Beitrag von Empire » Di Jun 18, 2013 8:13 pm

Sorry, da hab ich geschlafen.

Code: Alles auswählen

 <table class="main">
            <tr>
                <td><img src="img/header.jpg" width="1271" height="314" /></td>
            </tr>
            <tr>
                <td>
                    <table>
                        <tr>
                            <td width="238">
                            </td>
                            <td>
                                <img src="img/01_konzept normal.png" width="332" height="52" /></td>
                            </td>
                            <td>
                                <img src="img/04_kontakt normal.png" width="337" height="52" /></td>
                            </td>
                            <td>
                                <img src="img/07_jetzt bestellen normal.png" width="364" height="52" /></td>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
@sebix: Weißt du wie ich das in Chrome anzeigen lassen kann?

Benutzeravatar
darksider3
Beiträge: 347
Registriert: Fr Sep 14, 2012 6:26 pm
Wohnort: /dev/sda1
Kontaktdaten:

Re: CSS margin und padding

Beitrag von darksider3 » Di Jun 18, 2013 10:41 pm

Empire hat geschrieben:Sorry, da hab ich geschlafen.

Code: Alles auswählen

 <table class="main">
            <tr>
                <td><img src="img/header.jpg" width="1271" height="314" /></td>
            </tr>
            <tr>
                <td>
                    <table>
                        <tr>
                            <td width="238">
                            </td>
                            <td>
                                <img src="img/01_konzept normal.png" width="332" height="52" /></td>
                            </td>
                            <td>
                                <img src="img/04_kontakt normal.png" width="337" height="52" /></td>
                            </td>
                            <td>
                                <img src="img/07_jetzt bestellen normal.png" width="364" height="52" /></td>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
@sebix: Weißt du wie ich das in Chrome anzeigen lassen kann?
Sieht wohl so aus, dass Du die Tabellen abschaffen musst.
CSS läuft in der Regel eh nicht gut mit Tabellen, sieht einfach schei`e aus. Wenn Du margin und Padding draufhast. brauchst Du auch keine Tabellen, würde ich behaupten. Das Bild bauste mit background: url("BILD_URL"); ein, die Tabellen formatierst Du mit margin und padding weg. Um den Abstand von oben/unten zu begrenzen, gibt's übrigens padding-left/right/top/bottom und das selbe bei margin, denn ansonsten brauchst Du 4 Werte, also 4 Nullen für right, left, middle, top.
CSS bei SelfHTML sollte da auch weiterhelfen...
/EDIT: Tabellen erstellen immer einen Abstand. am besten haust Du irgendwo rein:

Code: Alles auswählen

table {
margin-top: 0px;
padding-top: 0px;
}
MfG
effizienz ist, wenn ich ein loch bohre und hinterher mein nachbar auch ein bild aufhängen kann... ^^
Meine Homepage und der Microblog von mir :)
Live Life dont let Life Live You!
Am meisten Aktiv in Webentwicklung und PHP im Wiki

Benutzeravatar
Xin
nur zu Besuch hier
Beiträge: 8858
Registriert: Fr Jul 04, 2008 11:10 pm
Wohnort: /home/xin
Kontaktdaten:

Re: CSS margin und padding

Beitrag von Xin » Mi Jun 19, 2013 12:13 am

Füge mal "border:0" hinzu.

Wenn das noch ncith reicht, beschreibe die Tabelle

Code: Alles auswählen

<table border="0" cellspacing="0" cellpadding="0">
Merke: Wer Ordnung hellt ist nicht zwangsläufig eine Leuchte.

Ich beantworte keine generellen Programmierfragen per PN oder Mail. Dafür ist das Forum da.

Empire
Beiträge: 272
Registriert: Mo Jan 26, 2009 5:36 pm

Re: CSS margin und padding

Beitrag von Empire » Mi Jun 19, 2013 2:29 pm

Weder das von Xin noch das darksider3 hat etwas gebraucht.
Im Browser sieht es genau so aus wie vorher aus, der neue Code ist:

Code: Alles auswählen

<div class="main">
            <img src="img/header.jpg" width="1271" height="314" /> <br />
            <img src="img/01_konzept normal.png" width="332" height="52" />
            <img src="img/04_kontakt normal.png" width="337" height="52" />
            <img src="img/07_jetzt bestellen normal.png" width="364" height="52" />
        </div>
CSS:

Code: Alles auswählen

*
{
  margin: 0;
  padding: 0;
}

body
{
    background-color: #FFDAB9;
}

div
{
    margin: 0;
    padding: 0;
}

img
{
    margin-left: 0;
    padding-left: 0;
    margin-right: 0;
    padding-right: 0;
}

div.main
{
    width= 1271px;
    margin-left:auto;
    margin-right:auto;
    text-align: center;
Eine anständige Alternative zu HTML gebit es nicht, oder?
(Java mag ich nicht)

mfg
Empire

Benutzeravatar
Xin
nur zu Besuch hier
Beiträge: 8858
Registriert: Fr Jul 04, 2008 11:10 pm
Wohnort: /home/xin
Kontaktdaten:

Re: CSS margin und padding

Beitrag von Xin » Mi Jun 19, 2013 2:35 pm

Empire hat geschrieben:Weder das von Xin noch das darksider3 hat etwas gebraucht.
Kannst Du die Seite iregndwo hochladen? Die Codeausschnitte sind nicht aussagekräftig, da sie in späteren Abschnitten wieder überschrieben werden könnten.
Empire hat geschrieben:Eine anständige Alternative zu HTML gebit es nicht, oder?
(Java mag ich nicht)
Wenn es im Browser angezeigt werden soll, belegt HTML die ersten 5 Plätze.
Irgendwann später kommen noch Java-Applets, Flash und Silverlight (dessen Support von MS schon eigestellt wurde).
Merke: Wer Ordnung hellt ist nicht zwangsläufig eine Leuchte.

Ich beantworte keine generellen Programmierfragen per PN oder Mail. Dafür ist das Forum da.

Empire
Beiträge: 272
Registriert: Mo Jan 26, 2009 5:36 pm

Re: CSS margin und padding

Beitrag von Empire » Mi Jun 19, 2013 6:43 pm

Ich könnte das schon hochladen, allerdings ist das die komplette Seite wenn man vom standard HTML-Grüst absieht.

Code: Alles auswählen

<?xml version="1.0" encoding="iso-8859-1" ?>
<!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="de">
    <head>
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <div class="main">
            <img src="img/header.jpg" width="1271" height="314" /> <br />
            <img src="img/01_konzept normal.png" width="332" height="52" />
            <img src="img/04_kontakt normal.png" width="337" height="52" />
            <img src="img/07_jetzt bestellen normal.png" width="364" height="52" />
        </div>
    </body>
</html>
Mehr gibt es noch nicht da es sich nicht lohnt weiter zu basteln wenn ich das nicht in den griff bekomme.

mfg
Empire

Benutzeravatar
darksider3
Beiträge: 347
Registriert: Fr Sep 14, 2012 6:26 pm
Wohnort: /dev/sda1
Kontaktdaten:

Re: CSS margin und padding

Beitrag von darksider3 » Mi Jun 19, 2013 9:12 pm

Heyho,
Bitte lad deinen Quelltext(Inklusive Bilder) mal bitte in einer Zip-Datei hoch, oder zeig uns die/eine Website, auf der dass grade liegt.
Ohne "Ansicht" kann man da nicht viel mehr machen... Du könntest noch überprüfen, ob deine Tabellen-Felder wirklich so groß sind, wie die Bilder(Punktgenau). Aber ohne Initiative von dir aus, können wir da wohl auch nicht mehr helfen.
MfG
/*EDIT: Das erste was Du wohl falsch machst, ist die XML-Deklaration. Tausch mal...

Code: Alles auswählen

<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Mit

Code: Alles auswählen

<!DOCTYPE html>
Und lösche

Code: Alles auswählen

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
und schreib einfach <html>, wobei Du dich dort auf den xHTML v1 berufst. obwohl Du auf eine XML-Strukturdatei hinweist(Siehe oben).
Dann hättest Du schonmal eine Valide HTML-Seite...
Ausserdem, ist das doch kein Problem. Jeder fängt klein an, egal ob Profi oder Anfänger, denn es existiert immer erst ein Grundgerüst...Lass dir einfach mal helfen ;)
effizienz ist, wenn ich ein loch bohre und hinterher mein nachbar auch ein bild aufhängen kann... ^^
Meine Homepage und der Microblog von mir :)
Live Life dont let Life Live You!
Am meisten Aktiv in Webentwicklung und PHP im Wiki

Benutzeravatar
Xin
nur zu Besuch hier
Beiträge: 8858
Registriert: Fr Jul 04, 2008 11:10 pm
Wohnort: /home/xin
Kontaktdaten:

Re: CSS margin und padding

Beitrag von Xin » Do Jun 20, 2013 12:20 pm

Empire hat geschrieben:Ich könnte das schon hochladen
Dann mach's doch einfach :-)

Dann muss ich nicht erst die Seite speichern, um dann zu gucken, warum zwischen den Bildern, die nicht da sind, Abstände sind. Kann ich die Seite im Webbrowser öffnen, kann ich mir die Sache sinnvoll ansehen.
Merke: Wer Ordnung hellt ist nicht zwangsläufig eine Leuchte.

Ich beantworte keine generellen Programmierfragen per PN oder Mail. Dafür ist das Forum da.

Antworten