Antworten auf deine Fragen:
Neues Thema erstellen

CSS-HP, positionierung klappt nicht

Hubu300

Noch nicht viel geschrieben

Also ich habe ein Problem..eigentlich habe ich zwei xD... Ich soll für die Uni eine CSS-basierte HP erstellen, die HTML-Datei dürfen wir nicht verändern...so bin auch schon gut vorangekommen denke ich, aber bei mir wollen sich die Boxen einfach nicht verschieben, mit padding klappt es zwar anscheinend, allerdings nur im Programm im Browser sieht es wieder ganz anders aus -.- und mit position bewegt sich gar nichts -.- ich weiß einfach nicht wie ich das hinbekomme =(

<<dazugehöriges Layout, #vers1 und 2 sollen eben im Spiegel stehen und die Überschrift auf dem Block...aber wie gesagt es bewegt sich nichts oder komplett flasch

Code:
body {
    background-color: #584E3F;
    background-image: url(design.png);
    background-repeat: no-repeat;
}
#wrapper {

     text-align:left;
     padding-top:200px;
     padding-right:0px;
     padding-bottom:30px;
     padding-left:580px;
}

#navigation ul li ul {

    display: none;

}

#navigation {

    padding-bottom:40px;

}

#navigation a {

    color: #d5b76c;
    text-decoration:none;
    float:left;
    padding-right:40px;


}

#vers1 {
    font-size: 12px;
    text-align: center;
    padding-top: 40px;
    height: 240px;

}
#vers2 {
    font-size: 12px;
    text-align:center;
}

.chor {
    font-style: italic;
}

.intitiale {
    font-family: "Times New Roman", Times, serif;
    font-size: 20px;
    color: #000000;
}
.text {
}

h1 {
    font-family: "Courier New", Courier, monospace;
    font-size: 40px;
    font-style: normal;
    font-weight: bolder;
    color: #000000;
}
Code:
<?xml version="1.0" encoding="ISO-8859-1"?>
<!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">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Ode an die Freude &middot; Friedrich Schiller</title>
    <link href="ode.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
    <h1>An die Freude.</h1>
    <div id="vers1">
        <div class="text">
            <p><span class="intitiale">F</span>reude, sch&ouml;ner G&ouml;tterfunken,<br />
            Tochter aus Elisium,<br />
            Wir betreten feuertrunken,<br />
            Himmlische, dein Heiligthum.<br />
            Deine Zauber binden wieder,<br />
            Was die Mode streng getheilt,<br />
            Alle Menschen werden Br&uuml;der,<br />
            Wo dein sanfter Fl&uuml;gel weilt.</p>
        </div>
        <div class="chor">
            <p>Seit umschlungen Millionen!<br />
            Diesen Ku&szlig; der ganzen Welt!<br />
            Br&uuml;der &uuml;berm Sternenzelt<br />
            Mu&szlig; ein lieber Vater wohnen.</p>
        </div>
    </div>
<div id="vers2">
        <div class="text">
            <p><span class="intitiale">W</span>em der gro&szlig;e Wurf gelungen,<br />
            Eines Freundes Freund zu seyn,<br />
            Wer ein holdes Weib errungen,<br />
            Mische seinen Jubel ein!<br />
            Ja &ndash; wer auch nur eine Seele<br />
            Sein nennt auf dem Erdenrund!<br />
            Und wer&rsquo;s nie gekonnt, der stehle<br />
            Weinend sich aus diesem Bund!</p>
        </div>
        <div class="chor">
            <p>Was den gro&szlig;en Ring bewohnet,<br />
            Huldige der Sympathie!<br />
            Zu den Sternen leitet sie,<br />
            Wo der Unbekannte thronet.</p>
        </div>
    </div>
    <div id="navigation">
        <ul>
            <li><a href="seite2.html">Verse 3 bis 5</a></li>
            <li><a href="seite3.html">Verse 6 bis 8</a></li>
            <li><a href="http://www.bonneberg.com/index.php?id=57">Weitere Darstellungen</a></li>
        </ul>
    </div>
</div>
</body>
</html>
 
Zuletzt bearbeitet:

Momo22m

Pixxel-Design / Lehrling

AW: CSS-HP, positionierung klappt nicht

also was ich so auf schnell blick sehe fehlen paar großen angaben
 
AW: CSS-HP, positionierung klappt nicht

Ich blick da leider auch nicht ganz durch, was du möchtest. Man sieht leider keine Bilder in deinem Code, also wo genau was an welche Position muss. Kannst du vielleicht die Bilder, die du hinterlegt hast, hier mit verlinken?

Oder ganz einfach: Deine Übung mal komplett hochladen?
 

Sinane

Puttmacherin

AW: CSS-HP, positionierung klappt nicht

Hm ohne zu sehen, wies jetzt aussieht, ist das in der Tat schwierig, aber wenn ich die CSS so lese sieht das etwas abenteuerlich aus...

Probier mal, mit
Code:
left: XXpx;
den Text auszurichten... Also ich meine, sag dem Browser, wie weit von seinem linken Rand er den Text wegschieben soll... Rumprobieren oder ausmessen, wieviele Pixel das bis zum Spiegelglas sind.
 

Hubu300

Noch nicht viel geschrieben

AW: CSS-HP, positionierung klappt nicht

@Momo ...ok und die wären?...^^...Ich habe echt keine Ahnung davon..

@Jana

Was für Bilder, es gibt nur ein Bild..das ist das Layout und das steht doch oben als Link hinterlegt, also wenn du den CSS-Code, den HTML-Code und das Bild in Dreamweaver öffnest, zeigt er dir doch alles an oder nicht?...Also ich möchte das der Text aus dem HTML-code (#Vers 1 und #Vers2) im Rahmen von dem Bild stehen und die Überschrift, einfach nur auf dem Block ^^

Wenn ich wüsste, wo ich einen Ordner hochladen kann, könnte ich das gerne machen...wenn euch das hilft...^^

mit left:, und right:, habe ich es schon ausprobiert
 
Zuletzt bearbeitet:

Sinane

Puttmacherin

AW: CSS-HP, positionierung klappt nicht

Dann, ähh, mach einen Screenshot von wies aussieht^^

Edit: Ansonsten gibts eig an allen Ecken und Enden Free-Webspace..


http://www.square7.ch/

Noch ein Edit: so?



Ok, es so zu machen im Code ist ne schreckliche Lösung, aber immerhin kann man so schonmal sehen, was du willst, denk ich... (ja, ich weiß, die Links stehen sicher nicht da, wo sie sollen^^). Wie gesagt, Positionierung allein mit padding ist sehr abenteuerlich^^ Stattdessen könntest du Breiten und Höhen der divs anpassen, von links verschieben, etc.
 
Zuletzt bearbeitet:

Hubu300

Noch nicht viel geschrieben

AW: CSS-HP, positionierung klappt nicht

ok...also ja das mit dem hochladen muss ich erst gucken, da wir das auf den Hochschulsever laden müssen und ich auch da noch nicht weiß wie es geht -.-...hab es jetzt mit padding gemacht und klappt soweit ganz gut...xD es ist mit Sicherheit keine gute Lösung...aber es funktioniert erstmal...trotzdem danke für die schnelle Hilfe =) hoffe den Rest schaffe ich nun auch noch irgendwie ^^
 

Sinane

Puttmacherin

AW: CSS-HP, positionierung klappt nicht

Np, wie gesagt, Free-Webspace ist ne super Möglichkeit, um zu sehen, wies im Inet dann aussieht und vor allem, um es anderen live zu präsentieren, es entfällt das posten von Screens, Code und so, es entstehen keine Kosten, etc. Du kannst ja per FTP jederzeit hochladen, ändern und löschen.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.613
Beiträge
1.538.345
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben