✔ Layout Problem

Status
Nicht offen für weitere Antworten.
K

KiRiN

Mitglied
Hallo,

folgendes, kleines Problem,.. habe mich in letzter Zeit viel mit anderen Sachen beschäftigt, deswegen bin ich mit HTML total aus der Übung.
Ich bin mehr, oder weniger dabei einen Div-Layer zu erstellen.

Ich habe normalerweise keine Probleme damit, aber nun rutscht die Tabelle mal ein bisschen zu viel nach links, mal zu viel nach rechts, mal guckt was raus,... im allgemeinen soll das ein PopUp werden.

Das Problem ist schwer zu beschreiben, deswegen hänge ich hier mal die ZIP ran. (Code ist etwas chaotisch, weil ich schon seit Stunden rumprobiere.) Da drin ist ausserdem noch ein Screenshot aus dem Firefox. - Die ZIP ist 26KB groß.

Helft mir bitte. :-(

EDIT: Das Bild, das der Knopf sein soll ist etwas provisorisch, es ist von der Höhe her 2 pixel kleiner.- Kann also garnicht passen, es sollte aber zumindest am richtigen Platz stehen.
 

Anhänge

Zuletzt bearbeitet:
oO

Das Problem war ja die verzerrte Tabelle. Der Gedanke war nur alles an Aussehen in eine Style-Datei zu packen um es möglichst kompakt zu halten um für andere PopUps etc. zb. nicht immer wieder den oft längeren Image-Pfad neu zu schreiben.

Ausserdem fühle ich mich mit CSS sicherer und es ist zumindest für mich bequemer Abstände, oder Font-Styles zu ändern. - Allerdings hast Du recht. Ich denke zu 'groß', für ein PopUp ist das wohl eher überflüssig. ;)

Naja Danke für die Datei. - Die muss man ja erst noch schreiben,.. und zippen.. :)
 
*offtopic*

@ pHpCursez: Bitte achte in deinen Beiträgen auf die Groß- und Kleinschreibung.

*back to topic*

Das verschachtelte Tabellenkonstrukt ist da wohl eher "ein wenig zuviel" für so einen Popup-Layer, zudem dienen Tabellen nicht als Layoutwerkzeug.

Hier mal eine CSS-basierte (tabellenlose) Lösung:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
body {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 10px;
}

.wrapper {
        width: 210px;
}

.pop_panel_l {
        background: url(./images/panel_l.png) 0 0 no-repeat;
        padding-left: 5px;
        height: 24px;
}

.pop_panel_r {
        background: url(./images/panel_r.png) 100% 0 no-repeat;
        padding-right: 7px;
        height: 24px;
}

.pop_panel_bg {
        background: url(./images/panel_bg.png) 0 0 repeat-x;
        height: 24px;
        text-align: center;
}

.pop_content {
        background-color: #ECECEC;
        border: solid #e5e5e5 1px;
        height: 150px;
        padding-left: 12px;
        vertical-align: top;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-right: 10px;
}
-->
</style>

</head>
<body>

<div class="wrapper">
     <div class="pop_panel_l"><div class="pop_panel_r"><div class="pop_panel_bg"><img src="./images/empty_btn.jpg" style="float:right;" />Fenster</div></div></div>
     <div class="pop_content">content content content content content content content content content content content content content content content content content content content content content content content content content content content content</div>
</div>

</body>
</html>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück