Grafiken sind nicht da wo sie sollen von connect, 25.02.2011 13:24

Grafiken sind nicht da wo sie sollen

connect 25.02.2011 13:24

Hallo Mitstreiter, Ich hab folgendes Problem, welches auf dem Bild schon zu erkennen ist. Ich habe also drei Grafiken die zusammen eine ergeben! Nun, ich habe diese Grafiken mit CSS positioniert jedoch bleiben jeweils horizontal abstände die ich nicht eliminieren kann. Dazu hab ich euch mal den Quelltext und ein Bild reingesetzt.

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" xml:lang="de" lang="de">

<head>
    <title>Titel</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />

    <link href="styles/style.css" type="text/css" rel="stylesheet" />
</head>

<body>
    <div id="ctn_all">
       <!-- Banner Anfang -->
        <div id="ctn_header">
            <div id="ctn_banner">
                <div id="ctn_banner_in"></div>
            </div><!-- Ende #ctn_banner -->
        </div><!-- Ende #ctn_header -->
       <!-- Banner Ende -->

       <!-- Werbung Anfang -->
        <div id="ctn_teaser">

       <!-- Werbung Block 1 Anfang -->
            <div id="ctn_werbung_1">
                <div id="ctn_werbung_1_top"></div>
                <div id="ctn_werbung_1_center">
                    <div id="ctn_werbung_1_content">
                        <h1>Das ist ein Werbeteaser</h1>
                        <p>Das auch!</p>
                        <ul>
                            <li>Punkt 1</li>
                            <li>Punkt 2</li>
                            <li>Punkt 3</li>
                        </ul>
                    </div><!-- Ende #ctn_werbung_1_content -->
                </div><!-- Ende #ctn_werbung_1_center -->
                <div id="ctn_werbung_1_bottom"></div>
            </div><!-- Ende #ctn_werbung_1 -->
        <!-- Ende Werbung Block 1 -->

        <!-- Werbung Block 2 Anfang -->
            <div id="ctn_werbung_2">
                <div id="ctn_werbung_2_top"></div>
                <div id="ctn_werbung_2_center">
                    <div id="ctn_werbung_2_content">
                        <h1>Das ist ein Werbeteaser</h1>
                        <p>Das auch!</p>
                        <ul>
                            <li>Punkt 1</li>
                            <li>Punkt 2</li>
                            <li>Punkt 3</li>
                        </ul>
                    </div><!-- Ende #ctn_werbung_2_content -->
                </div><!-- Ende #ctn_werbung_2_center -->
                <div id="ctn_werbung_2_bottom"></div>
            </div><!-- Ende #ctn_werbung_2 -->
        <!-- Ende Werbung Block 2 -->

        <!-- Werbung Block 3 Anfang -->
            <div id="ctn_werbung_3">
                <div id="ctn_werbung_3_top"></div>
                <div id="ctn_werbung_3_center">
                    <div id="ctn_werbung_3_content">
                        <h1>Das ist ein Werbeteaser</h1>
                        <p>Das auch!</p>
                        <ul>
                            <li>Punkt 1</li>
                            <li>Punkt 2</li>
                            <li>Punkt 3</li>
                        </ul>
                    </div><!-- Ende #ctn_werbung_3_content -->
                </div><!-- Ende #ctn_werbung_3_center -->
                <div id="ctn_werbung_3_bottom"></div>
            </div><!-- Ende #ctn_werbung_3 -->
        <!-- Ende Werbung Block 3 -->

        </div><!-- Ende #ctn_teaser -->
       <!-- Werbung Ende -->

        <!-- Top Menü Anfang -->
        <div id="ctn_topmenue">
            <div id="ctn_topmenue_in">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Webdesign</a></li>
                    <li><a href="#">Webshop Demo</a></li>
                    <li><a href="#">Coaching</a></li>
                    <li><a href="#">Referenzen</a></li>
                    <li><a href="#">Kontakt</a></li>
                </ul>
            </div><!-- Ende #ctn_topmenue_in -->
        </div><!-- Ende #ctn_topmenue -->
        <!-- Top Menü Ende -->

        <!-- Center Anfang -->
        <div id="ctn_center">
            <div id="ctn_menuebar">
                <div id="ctn_menuebar_in"></div>
            </div><!-- Ende #ctn_menuebar -->

        <!-- Center Anfang -->
        <div id="ctn_center">
            <div id="ctn_content">
                <div id="ctn_content_top"></div>
                <div id="ctn_content_center">
                    <div id="ctn_content_in">
                        <h1>Das ist ein Werbeteaser</h1>
                        <p>Das auch!</p>
                        <ul>
                            <li>Punkt 1</li>
                            <li>Punkt 2</li>
                            <li>Punkt 3</li>
                        </ul>
                    </div><!-- Ende #ctn_content_in -->
                </div><!-- Ende #ctn_center_center -->
                <div id="ctn_content_bottom"></div>
            </div><!-- Ende #ctn_content -->
            <!-- Ende Contentbereich -->

            <!-- Anfang Navbar -->
            <div id="ctn_navbar">
                <div id="ctn_navbar_in"></div><!-- Ende #ctn_navbar_in -->
            </div><!-- Ende #ctn_navbar -->
            <!-- Ende Navbar -->

        </div><!-- Ende #ctn_center -->




    </div><!-- Ende #ctn_all -->
</body>
</html>

und nun, das dazu gehörende CSS:


body
{
    margin: 0;
    padding: 0;
    color: #fff;
    font-size: medium;
    font-family: Arial, Tahoma, Verdana;
    background-color: #fff;
}
/************ Banner Anfang ************/
#ctn_header
{
    width: 960px;
    height: 200px;
    margin: 0 auto 5px auto;
}

#ctn_banner
{
    width: 960px;
    height: 207px;
    margin: 0 auto;
}

#ctn_banner_in
{
    width: 960px;
    height: 207px;
    background: url(../images/banner.png) center no-repeat;
}
/************ Banner Ende ************/

/************ Werbung Block 1 Anfang ************/
#ctn_teaser
{
    width: 960px;
    height: auto;/*
    margin-top: 5px; */
    margin-left: auto;
    margin-right: auto;
    font-size: 77%;
    margin-bottom: 10px;
}

#ctn_werbung_1
{
    width: 309px;
    float: left;
    margin: 10px 5px 10px 0
}

#ctn_werbung_1_top
{
    width: 100%;
    height: 25px;
    background: url(../images/angebot_container_top.png) center no-repeat;
}

#ctn_werbung_1_center
{
    width: 100%;
    background: url(../images/angebot_container_bg.png) center repeat-y;
}

#ctn_werbung_1_content
{
    padding: 0 8px 0 25px;
    display: inline;
}

#ctn_werbung_1_content h1
{
    font-size: 110%;
    padding-left: 25px;
}

#ctn_werbung_1_content p
{
    padding: 0 8px 0 25px;
}

#ctn_werbung_1_bottom
{
    width: 100%;
    height: 25px;
    background: url(../images/angebot_container_bottom.png) center no-repeat;
}
/************ Werbung Block 1 Ende ************/

/************ Werbung Block 2 Anfang ************/

#ctn_werbung_2
{
    width: 309px;
    float: left;
    margin: 10px;
}

#ctn_werbung_2_top
{
    width: 100%;
    height: 25px;
    background: url(../images/angebot_container_top.png) center no-repeat;
}

#ctn_werbung_2_center
{
    width: 100%;
    background: url(../images/angebot_container_bg.png) center repeat-y;
}

#ctn_werbung_2_content
{
    padding: 0 8px 0 25px;
    display: inline;
}

#ctn_werbung_2_content h1
{
    font-size: 110%;
    padding-left: 25px;
}

#ctn_werbung_2_content p
{
    padding: 0 8px 0 25px;
}

#ctn_werbung_2_bottom
{
    width: 100%;
    height: 25px;
    background: url(../images/angebot_container_bottom.png) center no-repeat;
}
/************ Werbung Block 2 Ende ************/

/************ Werbung Block 3 Anfang ************/
#ctn_werbung_3
{
    width: 309px;
    float: right;
    margin: 10px 5px 10px 0;
}

#ctn_werbung_3_top
{
    width: 100%;
    height: 25px;
    background: url(../images/angebot_container_top.png) center no-repeat;
}

#ctn_werbung_3_center
{
    width: 100%;
    background: url(../images/angebot_container_bg.png) center repeat-y;
}

#ctn_werbung_3_content
{
    padding: 0 8px 0 25px;
    display: inline;
}

#ctn_werbung_3_content h1
{
    font-size: 110%;
    padding-left: 25px;
}

#ctn_werbung_3_content p
{
    padding: 0 8px 0 25px;
}

#ctn_werbung_3_bottom
{
    width: 100%;
    height: 25px;
    background: url(../images/angebot_container_bottom.png) center no-repeat;
}
/************ Werbung Block 3 Ende ************/

/************ Top Menü Anfang ************/
#ctn_topmenue
{
    clear: both;
    width: 100%;
    line-height: 90px;
}

#ctn_topmenue_in
{
    width: 960px;
    height: 90px;
    background: url(../images/topmenue_bg.png) center no-repeat;
    margin: 0 auto;
    text-align: center;
}

#ctn_topmenue_in ul
{
    display: inline;
}

#ctn_topmenue_in li
{
    display: inline;
    padding: 40px 70px 0  0;
}

#ctn_topmenue_in a
{
    color: #fff;
    font-weight: bold;
    text-decoration: none;
}

#ctn_topmenue_in a:hover
{
    color: #5aa525;
}

#ctn_topmenue_in a:active
{
    color: #5aa525;
}
/************ Top Menü Ende ************/

/************ Center Anfang ************/
#ctn_center
{
    width: 960px;
    height: auto;/*
    margin-top: 5px; */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
}

#ctn_content
{
    width: 741px;
    float: right;
}

#ctn_content_top
{
    width: 741px;
    height: 25px;
    background: url(../images/content_top.png) center no-repeat;
}

#ctn_content_center
{
    width: 741px;
    background: url(../images/content_center.png) center repeat-y;

}

#ctn_ctn_content_center
{
    padding: 0 8px 0 25px;
}

#ctn_content_in h1
{
    font-size: 110%;
    padding-left: 25px;
}

#ctn_content_in p
{
    padding: 0 8px 0 25px;
}

#ctn_content_bottom
{
    width: 741px;
    height: 35px;
    background: url(../images/content_bottom.png) center no-repeat;
}

/************ Center Ende ************/

Beitrag melden

– Informationen zu den Bewertungsregeln

Grafiken sind nicht da wo sie sollen
Gunnar Bittersmann Homepage des Autors 25.02.2011 13:52

css
– Informationen zu den Bewertungsregeln
@@connect:

nuqneH

Ich habe also drei Grafiken die zusammen eine ergeben!

Wozu Grafiken?? Runde Ecken uns Schatten kannst (und solltest!) du mit CSS erzeugen. (Evtl. Grafiken als Fallback für Browser, die das noch nicht können.)

Nun, ich habe diese Grafiken mit CSS positioniert jedoch bleiben jeweils horizontal abstände die ich nicht eliminieren kann.

Unterlängen?

HTML:

Eher div-Suppe. Wozu die ganzen bis zu vierfach verschachtelten Container?

Wenn überhaupt, dann ist jeweils maximal ein div-Element erforderlich.

Qapla'

--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)
Beitrag melden

–
Informationen zu den Bewertungsregeln
Grafiken sind nicht da wo sie sollen
Der Martin 25.02.2011 15:34

css
– Informationen zu den Bewertungsregeln
Hallo,

Dazu hab ich euch mal den Quelltext und ein Bild reingesetzt.

ein auf das eigentliche Problem reduzierter Quelltext würde die Chancen auf Hilfe vergrößern. Oder meinst du, jemand würde drei Meter unübersichtlichen Quellcode studieren?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Warum Transitional? Wenn jemand XHTML verwendet, lässt das auf eine gewisse Ordnungsliebe schließen. Die Verwendung des Transitional-Dialekts passt aber nicht zu diesem Eindruck.

<div id="ctn_header">
            <div id="ctn_banner">
                <div id="ctn_banner_in"></div>
            </div>
        </div>

Zweimal dieselbe ID? Das darf nicht sein.

<div id="ctn_teaser">

<div id="ctn_werbung_1">
                <div id="ctn_werbung_1_top"></div>
                <div id="ctn_werbung_1_center">
                    <div id="ctn_werbung_1_content">

<div id="ctn_werbung_1_bottom"></div>

<div id="ctn_werbung_2">
                <div id="ctn_werbung_2_top"></div>
                <div id="ctn_werbung_2_center">
                    <div id="ctn_werbung_2_content">

Oh je. Wie Gunnar schon sagte: Eine unangenehme div-Suppe. Wer soll sich da je wieder zurechtfinden?
Und welche Stelle gehört nun eigentlich zum geschilderten Problem?

#ctn_werbung_1
{
    width: 309px;
    float: left;
    margin: 10px 5px 10px 0
}

#ctn_werbung_1_top
{
    width: 100%;
    height: 25px;
    background: url(../images/angebot_container_top.png) center no-repeat;
}

#ctn_werbung_1_center
{
    width: 100%;
    background: url(../images/angebot_container_bg.png) center repeat-y;
}

#ctn_werbung_1_content
{
    padding: 0 8px 0 25px;
    display: inline;
}

#ctn_werbung_1_content h1
{
    font-size: 110%;
    padding-left: 25px;
}

#ctn_werbung_1_content p
{
    padding: 0 8px 0 25px;
}

#ctn_werbung_1_bottom
{
    width: 100%;
    height: 25px;
    background: url(../images/angebot_container_bottom.png) center no-repeat;
}

Die div-Blöcke sollen alle 100% der Breite ihres Elternelements einnehmen, aber im Quellcode ist noch Whitespace zwischen den Elementen. Also *muss* eine Lücke dazwischen sichtbar bleiben. Es sind also nicht nur Unterlängen, wie Gunnar vermutet, sondern ganze Zeilen, die jeweils ein Leerzeichen enthalten.

So long,
Martin

--
Ich liebe Politiker auf Wahlplakaten.
Sie sind tragbar, geräuschlos, und leicht wieder zu entfernen.
  (Loriot, deutscher Satiriker)
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
Beitrag melden

–
Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

connect: Grafiken sind nicht da wo sie sollen

Grafiken sind nicht da wo sie sollen

Grafiken sind nicht da wo sie sollen

Grafiken sind nicht da wo sie sollen

Grafiken sind nicht da wo sie sollen