Außergewöhliches Design..

Dr KillerJoe · 4. Apr 2006, 01:32

Hi Leute.

Diesmal habe ich ein außergewöhliches Design, welches ich in Redaxo umsetzen soll... Das Template soll wie folgt aussehen:

edit: deadlink entfernt

Im roten Bereich soll sich der Content befinden und die Navi im gelben Bereich (mitte). (Contentbereich ändert sich bei jeder Seite!!)

Ich habe keine Idee wie ich das umsetzen könnte, da der Content ja die Navi umfließen müßte...

Für Ideen und Tips wäre ich sehr dankbar.

sawro · 19. Apr 2006, 18:59

hi Markus,

Da das Wasser nicht bergauf fließt und Text ebenfalls nicht, hier ein Boxenmodell mit 3 Inhaltsblöcken und 1 mittigen Navibox. Die Boxen sollen mit Hilfe von padding und margin und transparenten Hintergrund den Inhalt rund herum "verschieben" ...
Ist ev. ein grober Lösungsansatz - falls der Design-Wunsch noch aktuell ist...

css:

Code: Alles auswählen

body{margin:0;padding:0;text-align:center;font-family:verdana, arial, sans-serif;font-size:101.01%}
.content{margin:5% auto;width:800px;height:400px;border:10px solid black;overflow:hidden;font-size:.8em;background-color:red;}
.contentlinks{width:400px;height:100%;padding:3px 0 3px 3px;float:left;text-align:left;}
.contentlinks1{}
.contentlinks2{}
.contentrechts{height:100%;margin-left:400px;padding:3px 3px 3px 0;text-align:left;background-color:cyan;}
.navibox{width:108px;padding:3px;float:right;text-algin:right;background-color:orange;}
.navi{width:100px;padding:6px 0 6px 6px;border:1px solid black;background-color:yellow;}
.clearboth{clear:both;}

html:

Code: Alles auswählen

<div class="content">
<div class="contentlinks">
	<div class="contentlinks1">
		cIm roten Bereich soll sich der Content befinden und die Navi im gelben Bereich (mitte). Im roten Bereich soll sich der Content befinden und die Navi im gelben Bereich (mitte). Im roten Bereich soll sich der Content befinden und die Navi im gelben Bereich (mitte). Im roten Bereich soll sich der Content befinden und die Navi im gelben Bereich (mitte). (Contentbereich ändert sich bei jeder Seite!!) 
	</div>	
	<div class="contentlinks2">
<div class="navibox">
	  <div class="navi">
	  <a href="test.htm">navibox</a><br />
	  <a href="test.htm">navibox</a><br />
	  <a href="test.htm">navibox</a><br />
	  <a href="test.htm">navibox</a><br />
	  <a href="test.htm">navibox</a>
	  </div>
</div>
		cIm roten Bereich soll sich der Content befinden und die Navi im gelben Bereich (mitte). 
	</div>	
</div>
<div class="contentrechts">
contentrechts contentrechts contentrechts contentrechts contentrechts </div>
<br class="clearboth" />
</div>

... das funktioniert so zumindest in IE6, Firefox Moz. 1.5, Netscape 7.1 und Opera 8.5.

lg
Sabine

19. Apr 2006, 19:32

Hi zusammen,

als Anmerkung von mir noch:

Als Menu besser ne UL LI Liste machen, nicht mit BR arbeiten.

Gruß,
Markus

Dr KillerJoe · 20. Apr 2006, 13:32

sawro hat geschrieben:hi Markus,

Da das Wasser nicht bergauf fließt und Text ebenfalls nicht, hier ein Boxenmodell mit 3 Inhaltsblöcken und 1 mittigen Navibox. Die Boxen sollen mit Hilfe von padding und margin und transparenten Hintergrund den Inhalt rund herum "verschieben" ...
Ist ev. ein grober Lösungsansatz - falls der Design-Wunsch noch aktuell ist...

... das funktioniert so zumindest in IE6, Firefox Moz. 1.5, Netscape 7.1 und Opera 8.5.

Hi Sabine.

Ich heiße zwar nicht Markus, aber trotzdem Danke!!!
Ich werde das mal ausprobieren. Ich stand noch nicht vor dem Problem mit dieser Art des Designs... Und das ich die Links via UL/IL machen werde so wie Markus (Kills) meint ist auch klar..

Danke euch beiden bishierher. Wenn ich nicht weiter komme schrei ich wieder

(Wenn ich mich hören solltet wißt ihr was los ist

)

Mfg

Flo

sawro · 20. Apr 2006, 19:11

hi Ihr beiden,

dann schrei ruhig, Flo, ich bin froh, wenn ich auch mal helfen kann und
sorry - die Namensverwechslung hatte ich schon bemerkt - als es zu spät war..

die Liste und das css dafür hatte ich weg gelassen, weil es schnell gehen sollte. z. Zt. bricht bei mir jeden frühen Abend der Internetanschluss zusammen bis zum nächsten Tag (Anbieterwechsel!!)...

aber hier:

html

Code: Alles auswählen

	  <ul class="navi">
		  <li><a href="test.htm">navibox</a></li>
		  <li><a href="test.htm">navibox</a></li>
		  <li><a href="test.htm">navibox</a></li>
		  <li><a href="test.htm">navibox</a></li>
	  </ul>

css

Code: Alles auswählen

.menu ul, .menu li{margin:0;padding:0;}
.menu li{padding:3px;list-style-type:none;}
.menu a:link, .menu a:visited{width:100%;display:block;color:red;text-decoration:none;}
.menu a:hover, .menu a:active, .menu a:focus{font-weight:bold;color:#000;text-decoration:none;}

allerdings muss die Feinarbeit noch gemacht werden.

So etwas hatte ich auch noch nicht und ich bin schon sehr interessiert, wie Du das Design umsetzen wirst. Würde mich freuen, wenn's mal was zu sehen gäbe.

lg
Sabine

Dr KillerJoe · 21. Apr 2006, 01:29

Das Projekt (Portal) steht in noch nicht allzu naher Zukunft an... Momentan gibts da noch ne Seite, die konplett mit einem WYSIWYG-Editor gemacht wurde..

Sobald sich das was sichtbares tut sag ich bescheid

Dr KillerJoe · 25. Apr 2006, 14:11

Hi.

Auf Wunsch von Sabine berichte ich mal ein bißchen wie es bisher aussieht/klappt mit dem Design.

Bericht:
Ich hab heute mal angefangen das Template umzusetzenmit dem Code von Sabine (nochmals vielen Dank!!). Die Navi gibts auch schon und würde wohl Theoretisch auch funktionieren... (Der Text ist in diesem Augenblick noch im Template eingegeben)

Ich bin gerade am grübeln, wie ich es dem Redakteur am einfachsten machen kann den Content einzubinden.

Jemand nen Tip?
Ctypes habe ich auch noch nie mit gearbeitet -> Wäre das eine einfache möglichkeit?

25. Apr 2006, 17:51

Hi,

Ctypes brauchst du nur, wenn du mehrere Inhaltsbereiche durchgängig auf dem kompletten Auftritt haben willst.. Sonst evtl eine Sidebar.

Gruß,
Markus

Dr KillerJoe · 25. Apr 2006, 19:13

Hi Markus.

Wie meinst Du das mit Sidebar?

Die Div-container stehen ja soweit.
Mit einem durchgängigen Container gehts ja nicht so wie ich das verstanden habe.

Einen Umbruch durch Redaxo wäre wahrscheinlich ja nicht möglich, oder?
(Wäre cool, wenn das gehen würde!!)

[SRY für meine vielleicht blöden Fragen, aber habe mit xhtml noch nicht allzuviel gemacht..]

25. Apr 2006, 19:15

Hi,

Mit Sidebar meine Ich eine Aufteilung der Seite in 2 Bereiche, welche nicht durchgängig überall gleich ist.

Siehe z.b.
http://www.bkk-linde.de/

Die Leiste rechts ist in fast allen Artikeln gleich.
Nur dort wo ich explizit andere Inhalte hinterlegt habe erscheint auch eine andere Sidebar.

http://www.redaxo.de/165-Moduldetails.html?module_id=14

Gruß,
Markus

Dr KillerJoe · 25. Apr 2006, 19:23

Danke!

Werde ich mal ausprobieren!

Wenn Die Seite funktioniert kann ich Dir ja mal einen Export für Redaxo3.2 geben?

edit: Das Modul müßte man doch auch ins Template direkt einbauen können, oder?

25. Apr 2006, 20:21

Hi,

die Sidebar wird direkt ins Template eingebaut.

Du bindest ja nur abhängig von der Kat einen Artikel ein.

Gruß,
Markus

Dr KillerJoe · 25. Apr 2006, 20:30

Ich habe es schonmal probiert, aber irgendwie will es nicht -> keine Anzeige (nichtmal im quelltext)

Muß ich REX_CATEGORY_ID ersetzen? ne oder?

Bei Seite1 habe ich einen Artikel "sidebar" erstellt, aber wird nicht angezeigt (hat den gleichen Text wie der normale Content rechts)

edit: Sry, hatte übersehen, daß die sidebar auf online geschaltet werden muß

Dr KillerJoe · 25. Apr 2006, 21:05

Kleiner Zwischenstand:
(mit kleinerem Problem)

Die Sidebar wird zwar angezeigt, aber

die Navi hängt immer unter dem letzten Slice

Ich gebe nicht auf. Wenn jemand Tips hat -> Immer her damit^^

Dr KillerJoe · 27. Apr 2006, 23:19

Ich hab jetzt für die Studie ein eigenes Redaxo bekommen *freu*

edit: deadlink entfernt

Aber mit dem umfließen kämpfe ich immernoch...

Im moment ist das Template (Code auf seite2 zu sehen) mit einmal Content und einer sidebar ausgestattet... Ich möchte ungern mit 2 sidebars arbeiten....

Dr KillerJoe · 20. Mai 2006, 23:56

Ich hatte zwar in letzter Zeit wenig von dieser, aber habe mir dennoch Gedanken über mein Problem gemacht.

Gibt es eine möglichkeit die Sidebar in einem Div-Container anfangen zu lassen und automatisch nach sagen wir mal 150px (Höhe) die Ausgabe stoppt und in einem zweiten den "Rest" anzuzeigen?

Zwei Sidebars möchte ich nämlich nicht einbinden!

svenalbert · 21. Mai 2006, 09:17

Mußt dir wahrscheinlich "nur" ausdenken wie lang (in zeichen) dein erster div sein darf um auf die 150px zu kommen, holst dir so viele zeichen aus dem artikel und den rest packst du in deinen anderen div.

Dr KillerJoe · 23. Mai 2006, 20:52

hmm... Wenn links nur Text wäre hätt ich das Problem ja nicht, aber was mach ich wenn Bilder kommen?

Und das die Sidebar (links) oben anfängt und dann um die Navi fließt geht wahrscheinlich nicht, oder?

sawro · 7. Jun 2006, 23:53

hi zusammen,

habe die neuen Postings nur zufällig gefunden - gibt es eigentlich ne Möglichkeit, dass man immer benachricht wird, wenn es weitere Neuigkeiten gibt, oder muss ich mir die Threads bookmarken und immer mal nachschauen?

zum Problem:
ich würde mich gern beteiligen. gibts einen Link zum Anschauen und wenn nicht, Quellcode zum Ausprobieren? Der von der vorigen Seite führt ins Nirwana

Die Sidebar wird zwar angezeigt, aber
die Navi hängt immer unter dem letzten Slice

und

Wenn links nur Text wäre hätt ich das Problem ja nicht, aber was mach ich wenn Bilder kommen?

Klingt so, als hätte das auch was mit dem CSS zu tun....

lg
Sabine

Dr KillerJoe · 11. Jun 2006, 21:52

sawro hat geschrieben:habe die neuen Postings nur zufällig gefunden - gibt es eigentlich ne Möglichkeit, dass man immer benachricht wird, wenn es weitere Neuigkeiten gibt, oder muss ich mir die Threads bookmarken und immer mal nachschauen?

zum Problem:
ich würde mich gern beteiligen. gibts einen Link zum Anschauen und wenn nicht, Quellcode zum Ausprobieren? Der von der vorigen Seite führt ins Nirwana

Die Sidebar wird zwar angezeigt, aber
die Navi hängt immer unter dem letzten Slice
und
Wenn links nur Text wäre hätt ich das Problem ja nicht, aber was mach ich wenn Bilder kommen?
Klingt so, als hätte das auch was mit dem CSS zu tun....

Problem >benachrichtigung< => Siehe PN

Linbks gingen ins "Nirvana" weil der Server mal ausgaschaltet war da er nicht benötigt wurde..

Code wäre auf einer unterseite zu sehen...

sawro · 11. Jun 2006, 23:53

hi zusammen,

danke für die PN

- hatte ich inzwischen unter Profiles gefunden, ist auch angedingst, vielleicht habe ich die Mail übersehen...

Code: Alles auswählen

 wie lang (in zeichen) dein erster div sein darf um auf die 150px zu kommen,

... so wie es jetzt ist, schiebt sich die (auch eine abgezählte) Textmenge aus der Box raus, wenn man große Schrift im Browser eingestellt hat - probiert's mal aus..., und feste Schriftgrößen gibt's immer weniger...

- die Bilder "nur" in dieser obenlinks-box über CSS kleiner darzustellen - geht, aber besonders ist das nicht... - was ist mit image-resize, kann man das dafür benutzen?

was soll die Seite denn mal beinhalten - oder ist das vertraulich?

lg
Sabine

Dr KillerJoe · 12. Jun 2006, 00:33

sawro hat geschrieben:danke für die PN

Nichts zu danken

sawro hat geschrieben:was soll die Seite denn mal beinhalten - oder ist das vertraulich?

Es sollen Informationen rund um Netzwerke dort veröffentlicht werden. Bilder und Texte sind alle unterschiedlich von der Anordnung her... Die Navi sol dabei halt immer fest in der Mitte sitzen... (Das Bild davon ist leider weg)

Das Design ist ein Wunschdesign, wird also nicht auf die schnelle gebraucht

Wenn jemand was ausprobieren möchte nur bescheid sagen, ich könnte dann einen Zugang einrichten... (Wenn jetzt jmd dran denken sollte den Quellcode zu "klauen" -> ÄTSCH, der Code steht auf einer der Seiten =P )

Dr KillerJoe · 10. Jul 2006, 13:27

Sooo..... habe jetzt mal einen anderen Anlauf genommen, da das mit den sidebars von Markus in einem anderen Projekt nicht funktioniert hat.

Ich habe die Seite einfach in 4ctypes aufgeteilt, einer oben ganz rüber, einer links und einer rechts neben der navi und einer unten quer... Funktioniert auch super

bearbeiten der Seite ist auch ganz einfach, da man die ctypes ja als typen bei jedem artikel angezeigt werden....

Wer allerdings gerne den Code hätte muß mir eine PN schicken... Werde aber mal absprechen, ob die seite als abzug in den downloadbereich kommen darf...

Außergewöhliches Design..

Außergewöhliches Design..

Denkunterlage

Re: Denkunterlage

Erste Anfang

nur zufällig gesehen

Re: nur zufällig gesehen