Beiträge von Steward

Aha... klingt logisch. Aber ist das bei float auch so? Dann tritt nämlich das gleiche Problem auf.

Hallo,
Nach einer kleinen Pause wegen der Schule fange ich jetzt wieder an.., mit einer neuen Layoutidee. Leider scheint mir einiges an Wissen (oder Intelligenz) flöten gegangen zu sein. Zurzeit bin ich dabei die Bereiche richitg anzuordnen. Mein Problem:

Wenn ich einen Seitenbereich erstelle und darin einen weiteren Bereich integrieren (z.B. Navi oder Inhalt), und diesem Befehle zur Position gebe (z.B. position: absolute oder float:left), so führt er diesen zwar aus, ignoriert jedoch die Grenzen des Übergeordneten Bereichs.

Hier ein Bild: <!-- m --><a class="postlink" href="http://www.pictureupload.de/pictures/110308190214_Unbenannt.JPG">http://www.pictureupload.de/pictures/11 ... enannt.JPG</a><!-- m -->

Der Hellblaue "Rahmen" stellt den Seitenbereich dar.

Ich glaube, dass es kein großes Ding ist, trotzdem bin ich im Moment ziemlich ratlos.

Grüße Stephan

Ja, der Hintergrund ist eine Grafik. Warum? Weil ich keine andere Möglichkeit kenne einen solchen Hintergrund anders einzubinden. Ich möchte nämlcih keine einfarbigen css-Hintergründe haben. Außerdem sollen die Kanten ja abgerundet sein.

Gruß Stephan

Hallo,
Ich glaube, dass sie das Problem nicht ganz verstanden haben (oder ich sie nicht). Wenn ich den Hintergrrund wiederholen lasse, dann beginnt er ja wieder von Vorne. Da er aber einen verlauf hat und zudem abgerundet ist, würde das sehr unschön aussehen.

Gruß Stephan

ja, mit dem clear befehl bin ich noch nicht so vertraut^^. Aber die einzelnen Bereich wie nbootm oder ibottom (Navigation unterer Teil, Inhalt unterer Teil) sind dazu da, dass sich der Bereich strecken kann, ohne dass sich das Bild dabei so strecken muss, dass es unshcarf wird. top und bottom bleiben gleich, während der mittlere Teil aus vielen einzelnen Streifen besteht, die sich vertikal wiederholen.

Zurzeit bleibt das Problem der Naviverlängerung. Das muss ja irgendwie etwas mit dem Inhaltsbereich rechst von der Navi zu tun haben. Schließlich ist die Navi immer so groß, wie der Inhaltsbereich. Allerdings hängt er dann noch zusätzlich den Abschließenden Bottom-Bereich mit entsprechender Grafik dran.

Ja, das mag sicher sein. Aber Ihr Layout ist auch wesentlich simpler als meins.

Also....
Ich habe das Problem mit der kleinen Lücke im Navi gelöst. Es lag an "margin". Firefox hat das etwas anders interpretiert. Trotzdem verlängert sich noch die Navigation... Und zwar um genau den Bereich nbottom (unterster Teil der Navigation, der die Grafik abschließt). Das passiert in Abhängigkeit von Inhaltsbereich. Wird dieser kleiner, so wird auch die Navigation kleiner. Die Verlängerung der Navigation um genau diesen Bereich bleibt. Woran kann das liegen? An der Positionierung der Bereiche und an Befehlen wie clear:both??? Lösche ich diesen Bereich, so fehlt dem IE auf jedenfall ein Stück, die Navi ist also zu klein. Beim FF kommt's dafür mit der Länge dann genau hin

Gruß Stephan

Das mit den wesentlichen Haupt-divs wahr einmal. Allerdings reichte mir das nicht, da ich ja eine "runde" Hintergrundgrafik habe. Deshalb musste ich, um die Dehnbarkeit in der Senkrechte beizubehalten diese Divs einfügen.

Gut, der NaviBox-Bereihc ist überflüssig. Der ist inzwischen raus. Aber ansonsten bin ich doch ganz zufrieden...

Ja, die antworten haben sich auf die Höhen und Breiten bezogen und auf die Verwendung meiner Browser. Aber das eigentliche Problem hat es nicht gelöst!

Gruß Stephan

Naja... Ich habe mit Firefox im Moment genug Probleme (obwohl ich ihn eigentlich dem IE vorziehe). Außredem scheint der Anteil nicht ganz sooo groß zu sein...
<!-- m --><a class="postlink" href="http://www.validome.org/blog/news/Item-127">http://www.validome.org/blog/news/Item-127</a><!-- m -->

Aber können wir nicht zu meinem eigentlichen Problem zurückkehren?
Gruß Stephan

Zur Zeit nur den IE. Der und Firefox sind eben die beiden meist genutzten.

Hier noch ein Bidl:
<!-- m --><a class="postlink" href="http://www.pictureupload.de/pictures/180208142941_verl_ngerung.JPG">http://www.pictureupload.de/pictures/18 ... gerung.JPG</a><!-- m -->

Die Maße der Hintergründe habe ich meinem Layout genau angepasst. Jede Grafik ist genauso Breit und Hoch (in Pixeln), wie der Bereich groß ist.

Also wenn ich eine Höhenangabe rausnehme bricht das Layout zusammen. Daher werde ichs so lassen. Das mag daran liegen, dass alle Hintergrundgrafiken genau abgemessen sind und perfekt in den ihm zugehörigen Bereich passen. Aber die Höhenangaben sollen ja auhc nicht das Thema sein.

Gruß Stephan

EDIT: Naja, ich habs weg gemacht.

Aber noch eins: Der Firefox verlängert meinen Navibereich um etwa 3 cm nach unten und stellt im allgemeinen keine Ränder für Bereiche dar, egal wo ich sie setzte.

hallo
schnelle Antwort!
Das html hat scriptly da hineinbugsiert und auch direkt rot angestrichen. Habe mir dabei aber nichts böses geadacht. Eine Lösung des Problems bietet es aber auch nicht.

Die Höhenangaben sind dazu gedacht, dass die Seite eine bestimmte mindestgröße hat, auch wenn der Text etwas kleiner, oder viel kleiner ist.

Die Breitenangaben sind vielleicht nicht für alle geeignet, das werde ich aber noch ändern. Ich wollte erst einmal das Grundlayout erstellen. Die Dynamic in der Höhe hab eich bereits geregelt. Wenn die Navigation bald hoffentlioch auch mit dem Firefox funktioniert werde ich mich an die Breite machen...

Gruß Stephan

Ja, ich war eben etwas in Eile. Der Quellcode kommt...

Zitat

html, body{

font-family: arial;
}
#seitenbereich
{
width: 1200px;
margin: 0 auto;
text-align: left;

}

#kopfzeile{

border-width: 0px;
background-image:url(images/head.jpg);
font-family: arial;
font-size: 20px;
height: 150px;
text-align: center;
margin-bottom: 10px;
}

#navigation{
font-family: arial;
float: left;
width: 217px;
height: 1000px;
margin-bottom: 10px;
}

#ntop{
width: 217px;
height: 55px;
background-image:url(images/navi_top.jpg);
margin-bottom: 0px;
}

#nmiddle{
width: 217px;
height: 895px;
background-image:url(images/navi_middle.jpg);
background-repeat: repeat-y;
margin-top: 0px;
}

#nbottom{
width: 217px;
height: 50px;
background-image:url(images/navi_bottom.jpg);
border-style: none;
border: 0px;
}

#fusszeile{
clear: both;
height: 20px;
width: 1170px;
background-image:url(images/fuss.jpg);
font-size: 15px;
padding: 15px;

}

#inhalt{
float: right;
width: 965px;
height: 990px;
margin-left: 10px;
font-size: 15px;
background-image: url(images/inhalt.jpg);
}

#itop{
width: 965px;
height: 50px;
background-image:url(images/inhalt_top.jpg);
float: left;
}

#imiddle{
width: 890px;
height: 900px;
background-image:url(images/inhalt_middle.jpg);
background-repeat: repeat-y;
padding-left: 50px;
padding-right: 25px;
}

#ibottom{
width: 965px;
height: 50px;
background-image: url(images/inhalt_bottom.jpg);
}

.naviBox{
width: 147px;
margin-left: 35px;
margin-top: 5px;
border-style: solid;
border: 1px;
}

a.button{
display:block; border-style: none; background-color: #3D5176;
text-align: center; padding: 5px; width: 137px; height: 15px;
text-decoration: none; color: black; font-size: 13px;
font-weight: bold; margin-bottom: 5px; margin-top: 5px;
}

a.button:hover{
background-color: #4162B1;
}

Alles anzeigen

Zitat

</head>

<body>
<div id="seitenbereich">
<div id="kopfzeile">
<a href="index.htm">
<img src="images/head_left.jpg" border="0" width="571" height="150" align="left" />
</a>
</div>

<div id="navigation">
<div id="ntop">
</div>

<div id="nmiddle">
<div class="naviBox">
<a href="index.htm" class="button">Startseite</a>
</div>

<div class="naviBox">
<a href="" class="button">Einstieg</a>

</div>
</div>

<div id="nbottom">
</div>

</div>
<div id="inhalt">
<div id="itop">

</div>
<div id="imiddle">

</div>
<div id="ibottom">

</div>

</div>
<div id="fusszeile">

</div>

</div>

</body>

</html>

Alles anzeigen

So, ist ganz schön viel, aber ich weiß nicht, ob da etwas wichitges bei ist, was ich sonst weggelassen hätte. Ich hoffe es hilft euch.

Grüße, Stephan

Hallo
ich bin mit meinem Layout schon relativ weit. Doch jetzt habe ich ein Problem. Scriptly nutzt als Vorschau den IE. Dort funzt alles echt prima. Doch mit Firefox gibt es Stress. Ich habe einen Hauptnavibereich, der für die allgemeine Ausrichtung links gedacht ist. Darin befinden sich 3 Bereiche (top, bottom und middle) mit jeweils verscheidenen Hintergründen. Dabei kann sich der Mittelteil nach belieben Strecken. In diesem Bereich wiederum können beliebeig viele Bereiche des Typs Navibox eingebracht werden, die die Struktur der Buttons regeln sollen.

Firefox macht mir aber das Problem, dass er die Naviboxbereiche einfach ignoriert, den Inhalt aber trotzdem anzeigt und außerdem einen Abstand zwischen top und middle Bereich setzt (zwischen middle und bottom macht er keinen). Woran kann das liegen?

Noch 2 Bilder. Zur verdeutlcihung habe ich den navibox-Bereichen einen Rahmen gegeben.

<!-- m --><a class="postlink" href="http://www.pictureupload.de/pictures/170208150418_normal.JPG">http://www.pictureupload.de/pictures/17 ... normal.JPG</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.pictureupload.de/pictures/170208150459_unnormal.JPG">http://www.pictureupload.de/pictures/17 ... normal.JPG</a><!-- m -->

Gruß STephan

Hallo,
ein Forum ist etwas ziemlich komplexes und mit html und css nicht zu realisieren. Dazu muss man noch php hinzuziehen. So etwas selbst zu entwickeln ist recht schwierig. Aber ich glaube es gibt eine Möglichkeit (phpbb???) so etwas etwas leichter zu bekommen. Trotzdem sollte es noch viel Arbeit sein. Für Anfänger also nicht geeignet.

Vielleicht weiß jemand mehr..

Gruß Stephan

Hallo,
ich habe für alle meine Bereiche (Seitenbereich, Kopfzeile, Naviagtion, Inhalt und Fußzeile) eine Breite und Höhe festgelegt. Was mich wundert ist, dass die Funktion ja funktioniert. Nur wird eben der Bereich vegrößert, obwohl ja nur der Innensbtand geregelt wird.

Das sagt selfHTML:

Zitat

Innenabstand bedeutet: erzwungener Leerraum zwischen dem Inhalt eines Elements und seinem eigenen Elementrand, also z.B. zwischen dem Text eines Elements und dem Rand dieses Elements.

EDIT: So, jetzt habe ichs geschafft. Ich habe ein padding von 15px eingestellt und dafür die breite des Bereichs um 30 (2x15) verringert. Das ist zwar etwas umständlich, aber es funktioniert, und das reicht mir erst einmal.

Trotzdem würde ich gerne wissen warum er beim einstellen des INNENabstandes die AUSSENmaße des Bereichs erweitert werden.

nein,nein. Ich meine Schon den Abstand des Textes zum Rand (border). Da ich ein Hintergrundbild mit abgerundeten Ecken verwende muss da ein Abstand eingehalten werden. Das Funktioniert auch. Allerdings wird der Abstand, der z.B links ensteht rechts an den Bereich noch drangehängt und dann ist natürlich mein Hintergrundbild zu klein und das Layout verschiebt isch.

Gruß Stephan

Achso. Ich dachte dabei wird der Innenabstand zum Text vergrößert. Oder war das ein anderer Befehel? Habe ich mich da verlesen??

Grüße Stephan

Hallo,
tut mir leid, dass ich shcon wieder mit einer Frage nerven muss. Aber ich hab ein Problem mit dem Befehl padding. Sobald ich etwas anderes als 0 für den Wert einsetze, erweitert sich mein jeweiliger Bereich nach rechts und unten. Das darf er aber nicht, weil dann der Hintergrund und auch die Bereiche nicht emhr so passen, wie sie sollen. Ist das das normale Verhalten eines div bei einer solchen Angabe?

Gruß Stephan

EDIT: Hier mal 2 Bilder:
<!-- m --><a class="postlink" href="http://www.pictureupload.de/pictures/130208155608_norm.jpg">http://www.pictureupload.de/pictures/13 ... 8_norm.jpg</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.pictureupload.de/pictures/130208155841_abnorm.jpg">http://www.pictureupload.de/pictures/13 ... abnorm.jpg</a><!-- m -->