proggen.org

Verfasst: **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

Verfasst: **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.

Verfasst: **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?

Verfasst: **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

Verfasst: **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">

Verfasst: **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

Verfasst: **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).

Verfasst: **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

Verfasst: **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

Verfasst: **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.

proggen.org

CSS margin und padding

CSS margin und padding

Re: CSS margin und padding

Re: CSS margin und padding

Re: CSS margin und padding

Re: CSS margin und padding

Re: CSS margin und padding

Re: CSS margin und padding

Re: CSS margin und padding

Re: CSS margin und padding

Re: CSS margin und padding