connect: Grafiken sind nicht da wo sie sollen

Beitrag lesen

SELF-Forum

Grafiken sind nicht da wo sie sollen

connect
– Informationen zu den Bewertungsregeln

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. http://araque.de/images/stories/problem.jpg

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