Allgemeines Div-Problem (Float, Margin, Backgroundimage)

qwertzuio9000 · 22. Oktober 2013

Hallo, folgendes Problem, die floats und margins machen nicht was sie sollen.
Die unteren Aufzählungen sollen natürlich "mittig" im selben Abstand zum darüberliegenden Text sein und mittig zur gesamten Seiten.

Desweiteren sollen sich die Aufzählungsfelder, genau wie der Text darüber, beim verkleinern des Browserfensters, "mitgehen" und nicht irgendwann umbrechen.

Ein weiteres Problem ist, dass ich ein Hintergrundbild über die ganze Website möchte, auf welcher der Text verläuft. Obwohl ich einen Z-index vergeben habe, ist das Bild aber nie unter dem Text.

Zitat

CTYPE 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Überschrift</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">
</style>
</head>
<body>
<div class="bg"></div>
<div id="text"><h1>Überschrift.de</h1><br>Text tesxtextextxe<div>
<br>
<div id="text"><h3>Text balbalblaba</h1><br />Überschrift.de</div>
<div id="text">Sir test test<br />testestest <br>10344 asdasdasd<br />Deutschland<br />12414232534<br />mailto: mail@Überschrift.de<br />35346456456456</div>

<div id="content">
<div id="left"> <h3>Aufzählung1:</h3> Tsasdcdsah, Tsasdcdsah, Tsasdcdsah, Tsasdcdsah, Tsasdcdsah, Tsasdcdsah, Tsasdcdsah, Tsasdcdsah, Tsasdcdsah, u.a.<p>dgfdfgdf:</p>Tsasdcdsah, Tsasdcdsah, Tsasdcdsah, Tsasdcdsah,</div>
<div id="right"> <h3>Aufzählung2:</h3><br />* Tsasdcdsah<br />* Tsasdcdsah <br />* Tsasdcdsah<br /> * u.a.</div>
<br style="clear:left;">
</div>

<div id="text"> TsasdcdsahTsasdcdsahTsasdcdsah</div>

</body>
</html>

Alles anzeigen

Zitat

div.bg {
background-image: url(images/bgtest.jpg);
background-position: center;
background-attachment: fixed;
background-color: #3FF;
width:auto;height:auto;
background-repeat: no-repeat;
z-index: 1;
}

#text {
text-align: center;
}

#content {
width: 100%;
text-align: left;
}
#left {
width: 300px;
height: 100%;
float: left;
margin-left: 35%;
padding-bottom: 30px;
}

#right {
width: 300px;
height: 100%;
float: left;

padding-left: 50px;

}

Alles anzeigen

Danke für die Hilfe

Ralph_68 · 23. Oktober 2013

Hallo qwertzuio9000,

das Ganze sieht ein bißchen wild zusammengewürfelt aus und ist daher schwer zu entwirren.
Ich würde Dir die Seite: http://www.html-seminar.de/class_und_id.htm empfehlen, um besser zu verstehen wann Du <div id=""..., und wann <div class=""...
verwendest.
Ein seitendeckendes Hintergrundbild wird über die CSS im Bereich body{ } definiert. Float und Marginprobleme bekommst Du am schnellsten in den Griff, indem Du den div Containern(id) erstmal einen border verpasst, um zu sehen,
wo sich Deine Container überhaupt befinden. Dann kannst Du über float, margin und padding alles einpassen.
Ein Anfang wäre z.B. (Hab nur das notwendigste angepasst!)

HTML

<!DOCTYPE html>
<html>




<head>
    <title>Hilfe</title>
    <meta charset="UTF-8">
    <link href="style.css" type="text/css" rel="stylesheet">
</head>




<body>




<div class="text"><h1>Überschrift.de</h1><br />
                    Text tesxtextextxe<br />
                    <h3>Text balbalblaba</h3><br />
                    Überschrift.de<br />
                    Sir test test<br />
                    testestest <br />
                    10344 asdasdasd<br />
                    Deutschland<br />
                    12414232534<br />
                    mailto: mail@Überschrift.de<br />
                    35346456456456
</div>




<div id="content">




    <div id="left">
         <h3>Aufzählung1:</h3>
         Tsasdcdsah, Tsasdcdsah, Tsasdcdsah, Tsasdcdsah, Tsasdcdsah, Tsasdcdsah, Tsasdcdsah, Tsasdcdsah, Tsasdcdsah, u.a.
         <p>dgfdfgdf:</p>
         Tsasdcdsah, Tsasdcdsah, Tsasdcdsah, Tsasdcdsah,
    </div>




    <div id="right">
         <h3>Aufzählung2:</h3><br />
         * Tsasdcdsah<br />
         * Tsasdcdsah <br />
         * Tsasdcdsah<br />
          * u.a.
    </div>




</div>




<div class="text"> TsasdcdsahTsasdcdsahTsasdcdsah</div>
</body>
</html>

Alles anzeigen

CSS:

CSS

body {
background: url(image/bgtest.jpg) no-repeat;
background-position: center;
background-attachment: fixed;
width:auto;
height:auto;
}




#content {
width: 100%;
text-align: left;
border: 1px solid #00FF00;
}
#left {
width: 300px;
height: 100%;
float: left;
margin-left: 35%;
padding-bottom: 30px;
border: 1px solid #FF0000;
}




#right {
width: 300px;
height: 100%;
float: left;
padding-left: 50px;
border: 1px solid #FFFF00;




}




.text {
clear: both;
text-align: center;
}

Alles anzeigen

Allgemeines Div-Problem (Float, Margin, Backgroundimage)

Jetzt mitmachen!

Teilen