Frage zu CSS/xhtml und Bildern im div und Schriftart anbieten?

Guten Abend,

bin gerade dabei ein Layout anzupassen und habe dabei folgendes Problem:

Habe zurzeit ein div (umgeben) in dem sind zwei Bilder, eines mit float:left und eines mit float:right. Leider ragen sie aus dem div herraus. Wie kann ich das ändern? Habe dem div zwar ein div:auto gegeben, aber das klappte nicht. Mit deinem Wert für height könnte ich es zwar anpassen, doch wenn dann das Bild einmal wechseld, ist es nicht mehr angepasst.

Im Detei geht es um diesen Bereich:

<div id="umgeben">
    <img src="Grafiken/feuer/feuer1.jpg" alt="Logo der Website" id="logo1" />
    <img src="Grafiken/instrumente/klampfe2.jpg" alt="Logo der Website" id="logo2" />
</div>

und dazu gehört dieser CSS-Teil:

#umgeben {
    display:block;
    height:auto;
    border:solid red 1px;
}


#logo1 {
    float:left;
    width:15%;
    padding:0;
    margin:0;
}


#logo2 {
    float:right;
    width:15%;
    padding:0;
    margin:0;
}

Das div "umgeben" soll aber auch bis zum Ende der Bilder gehen, da zum einen zwischen der Bilder die "Überschrift" / Titel sein soll und der Inhalt dann direkt darunter beginnen soll. Zu sehen gibt es das hier (klick).

Desweiteren möchte ich evtl. eine Schriftart anbieten. Zwar kann ich mit

font-family: Calibri, "Sans Serif", "Century Gothic";

verschiedene anbieten, doch wenn ein User keine dieser Schriften hat, was mache ich dann? Gibt es die Möglichkeit, dass man eine Schriftart hinterlegen kann, die dann genommen wird?

Gruß und vielen Dank
Muckel

Guten Abend,

vielen Dank - mit dem div hätt ich eigentlich selbst drauf kommen Können. Gut, das mit der Schriftart nehme ich dann wohl so hin. Die Gruppe für die ich ein Layout erstelle wollte halt ganz gerne "ihre" Schriftart haben. Naja, egal.

Doch ich habe jetzt noch ein kleines anderes Problem. Ich habe in dem div umgeben ein weiteres div (kopf), in dem ein Listenmenue ist. Desweiteren sind direkt am div kopf noch zwei weitere, die dann unten einmal rechts und einmal links unten eine Grafik (siehe Anhang) anzeigen sollten.

Doch leider taucht diese Grafiken nicht auf. Der Bereich um den es geht ist dieser:

<div id="umgeben">
    <div id="kopf">    <div class="kopfl"><div class="kopfr">
        <ul>
            <li><a href="#">Startseite</a></li>
            <li><a href="#2">G&auml;stebuch</a></li>
            <li><a href="#3">Kontakt</a></li>
            <li><a href="#4">Impressum</a></li>
        </ul>
    </div></div></div>
    <h1>ich bin ein Titel!</h1>
    <p>ich bin ein Untertitel.</p>
    <div class="frei"></div>
</div>

und im css schaut es so aus:

#umgeben {
    display:block;
    margin:0 15% 0 15%;/*oben, rechts, unten, links */
    padding:0;/*oben, rechts, unten, links */
    text-align:center;
}


#kopf {
    height:3.5em;
    display:block;
    margin:0 0 0.5em 0;
    padding:0 0 0.5em 0;
    background-color:silver;
    border-bottom:2px solid red;
}


.kopfl{background: url(Grafiken/rundungen/test1.jpg) 0 80% no-repeat;border:none;}
.kopfr{background: url(Grafiken/rundungen/test2.jpg) 100% 80% no-repeat;border:none;}


#kopf ul {
    list-style: none;
    margin:0;/*oben, rechts, unten, links */
    padding:0;/*oben, rechts, unten, links */
    font-size:1.2em;
}


#kopf li {
    float:left;
    display:block;
    margin:0.25em;/*oben, rechts, unten, links */
    padding:0;/*oben, rechts, unten, links */
}


#kopf li a {
    color:#000;
    text-decoration:none;
}


#kopf li a:hover {
    display:block;
    margin:0;
    color:#660000;
    text-decoration:underline;
    font-size:1.2em;
}

Da wo ist der rote Rahmen ist, sollten eigentlich diese beiden Grafiken sein, was leider nicht klappt :cry:

Wenn ich mir aber den Bereich meiner Seite anschaue, in dem der Inhalt ist, klappt es mit dem Einbinden der Grafiken und das ist genauso aufgebaut:

<div id="mitte"><div class="or"><div class="ul"><div class="ur"> <!-- mein Inhalt --> </div></div></div></div>

und das css dazu ist auch gleich wie oben:

.ol{background: url(Grafiken/rundungen/oben1a.jpg) 0 0 no-repeat;border:none;}
.or{background: url(Grafiken/rundungen/oben2a.jpg) 100% 0 no-repeat;border:none;}
.ul{background: url(Grafiken/rundungen/oben3a.jpg) 0 100% no-repeat;border:none;}
.ur{background: url(Grafiken/rundungen/oben4a.jpg) 100% 100% no-repeat;border:none;}

Wo liegt denn mein Fehler gerade? Ich versteh's nicht... Zu sehen mal wieder hier (klick).

Gruß und vielen Dank
Muckel

Guten Abend,

die waren schon oben - hatte nur ein wenig weiter gemacht am Layout und daher das geändert. Man kann es jetzt aber "fertig" sehen.

Was ich jetzt noch suche ist, wie man eine Vergrößerung, Verkleinerung der Schrift anbieten kann. (So wie es das z.B. hier mit diesen "Lupen" gibt.)

LG
Muckel