Suche im Forum:
Suchen


Autor Nachricht
Beitrag28.09.2014 um 19:55 (UTC)    
Titel:

Hi,
vielen dank für deine große Mühe transient...
Ich finde es ist super geworden. Weiter anpassen (Abstände grüße etc.) werde ich schaffen können (durch probieren Smile ).

Würde mich sehr freuen wenn du mir den code geben könntest.

Danke nochmal für deine Hilfe.

Gruß
Beitrag29.09.2014 um 19:44 (UTC)    
Titel:

So, dann haben wir hier "Windows 8.2" Wink

CSS-Code ohne Style-Tags:
Zitat:
/* Nullformatierung */
body, a, div, table, tr, td, ul, li, h1, h2, h3, h4, h5, h6, h7, * {
margin: 0;
padding: 0;
border: none;
}

body {
background-color: #222222;
font-family: verdana, tahoma;
}

/* Grundgerüst */
#container {
width: 1100px;
height: 475px;
margin: 0 auto;
}

/* Navigation */
#nav_container {
width: 260px;
height: 475px;
float: left;
}
#nav_heading { display: none; }
#nav {
margin: 0;
padding: 0;
}

/* Allgemeines zu den Menüpunkten */
li.nav_element {
width: 255px;
height: 147px;
background-image: none;
display:none; margin: 0 0 17px 0;
text-align: center;
padding: 0;
}
li.nav_element.subpage {
display:block;
padding-right: 5px;
}
li.nav_element a {
height: 92px;
text-decoration: none;
padding-top: 55px;
font-size:27px;
display: block;
color: white;
}

/* Zurück-Link unten in der Navi */
#nav_Zurck {
display:block;
width: 260px;
margin: 0;
}
#nav_Zurck a {
height: 92px;
padding-top: 55px;
font-size: 31px;
}

/* Content */
#content_container {
width: 823px;
height: 475px;
float: left;
margin: 0 0 0 17px;
}
#content {
width:403px;
height: 475px;
overflow: auto;
margin: 0 17px 0 0;
float: left;
background-color: #cccccc;
}
#post_content {
width: 403px;
height: 475px;
float: left;
}

/* Unnötiges ausgeblendet */
#header_container { display: none; }
#pre_content { display: none; }
#sidebar_container { display: none; }
#counter { display: none; }


Auf jede normale Textseite folgendes in den Quellcode (je nach Gusto ganz am Anfang oder ganz am Ende):
Zitat:
<style type="text/css"> <!--
li.nav_element { background-color: #cc9933; }
li.nav_element:last-of-type a { background-color: grey; }
#post_content { background-image: url(http://img.webme.com/pic/t/transint-test3/eins.jpg); }

li.nav_element a { color: white; }
li.nav_element a:hover { color: white; text-decoration: none; }
li.nav_element a:active { outline: none; }
//--> </style>

Dabei ist die Schriftfarbe der Navilinks grün, deren Hintergrundfarbe orange, und die Adresse des Bildes rechts in Rot markiert. (Der Farbcode für dieses Rot ist übrigens #dd3333, falls es gefällt Smile )

Den Portfolio-Code schreibe ich im nächsten Post, denn der ist weniger simpel.

Gruß,
TransInt
______________
Kein Support per PN - Im Forum hilft es allen!

Life is what happens while you are busy making other plans.
- John Lennon


Zuletzt bearbeitet von transint am 29.09.2014, 20:49, insgesamt einmal bearbeitet
Beitrag29.09.2014 um 20:15 (UTC)    
Titel:

Folgendes ist der Code, den du ungefähr so auf der Portfolio-Seite benötigst:
Zitat:
<style type="text/css"> <!--
li.nav_element { background-color: #cc9933; }
li.nav_element:last-of-type a { background-color: grey; }

li.nav_element a { color: white; }
li.nav_element a:hover { color: white; text-decoration: none; }
li.nav_element a:active { outline: none; }


/* Portfolio-spezifisch */
#nav_container { float: left; height: 147px; position: relative; top: 328px; width: 260px; z-index: 25; }
#content { background-color: #993333; height: 311px; overflow: auto; width: 260px; }
#content2 { height: 485px; overflow: auto; }
#content_container { float: left; height: 475px; margin: 0; position: relative; top: -147px; width: 1100px; z-index: 24; }
#post_content { display: none; }
//--> </style>
Hier kommt der Text hin, den du am Ende auf dem roten Hintergrund lesen kannst.

<!-- Jetzt brauchen wir ein neues Div für die Bilder. Erst wird #content geschlossen, dann ein neues geöffnet. //-->
<!-- Geschlossen wird es mit dem </div>, das eigentlich den #content schließt und somit schon vorhanden ist. //-->
</div>
<div id="content2">

<style type="text/css">
a.fancybox-effects-d img{
background: none repeat scroll 0 0 #FFFFFF;
margin: 0 5px 5px 0;
padding: 5px;
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.7);
}
</style>


<a class="fancybox-effects-d" href="http://dummyimage.com/700x450/ff0000/fff&text=Test-Bild.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit"><img src="http://dummyimage.com/250x140/ff0000/fff&text=Test-Bild" alt="" /></a>

<!-- Für die Bildergalerie brauchen wir etwas JavaScript //-->
<link type="text/css" href="http://seos-gallery.googlecode.com/svn/trunk/jquery.fancybox.css" rel="stylesheet" />
<script type="text/javascript" src="http://seos-gallery.googlecode.com/svn/trunk/jquery.js"></script>
<script type="text/javascript" src="http://seos-gallery.googlecode.com/svn/trunk/jquery.fancybox.js"></script>
<script type="text/javascript">
// Remove padding, set opening and closing animations, close if clicked and disable overlay
$(".fancybox-effects-d").fancybox({
padding: 0,
openEffect : 'elastic',
openSpeed : 150,
closeEffect : 'elastic',
closeSpeed : 150,
closeClick : true,
});
</script>

Dieser Code ist derselbe wie auf jeder Unterseite. Wobei auf der Portfolio-Seite ja keine Navigation zu sehen ist, somit hat der Code keinen Effekt.
Hier kommt der Text hin, den du dann über dem Zurück-Button in dem dunkelroten Feld lesen kannst.
Diesen Teil nicht anfassen. Damit wird aus einem Element zwei gemacht, um Text und Bilder unterschiedlich einzubauen.
Hier stellst du das Aussehen der "Thumbnails" ein.
Der Code könnte dir bekannt vorkommen, denn damit bindest du ein Galeriebild ein. Wie das funktioniert, steht auf SEOs Seite beschrieben. Code acht Mal wiederholen (also insgesamt neun Mal), um bei der aktuellen Einstellung den Raum komplett auszunutzen.
Das ist der Javascript-Code für die Galerie. Auch für ihn findet sich auf SEOs Seite eine kurze Beschreibung.

Das meiste stellt man einmal ein und dann funktioniert es. Aber wie gesagt - zum Ändern jeden Tag nicht geeignet... Shocked

Gruß,
TransInt
______________
Kein Support per PN - Im Forum hilft es allen!

Life is what happens while you are busy making other plans.
- John Lennon
Beitrag01.10.2014 um 09:04 (UTC)    
Titel:

Hi Transit,
danke für den code.
Folgendes ist mir aufgefallen...

Zitat:
<!-- Jetzt brauchen wir ein neues Div für die Bilder. Erst wird #content geschlossen, dann ein neues geöffnet. //-->
<!-- Geschlossen wird es mit dem </div>, das eigentlich den #content schließt und somit schon vorhanden ist. //-->
</div>
<div id="content2">


den Code habe ich so übernommen. Sobald ich aber das Berarbeitungsfenster verlasse und erneut mich einlogge um die Galerie (den Code) zu bearbeiten (neue Bilder etc.) verschwindet das
</div>

Der neue Code lautet dan:
<!-- Jetzt brauchen wir ein neues Div für die Bilder. Erst wird #content geschlossen, dann ein neues geöffnet. //-->
<!-- Geschlossen wird es mit dem </div>, das eigentlich den #content schließt und somit schon vorhanden ist. //-->

----hier fehlt das </div> ----
<div id="content2">



Gruß


Zuletzt bearbeitet von testinternet am 02.10.2014, 07:20, insgesamt einmal bearbeitet
Beitrag02.10.2014 um 06:25 (UTC)    
Titel:

Vielen Dank an dich transint für deine Bemühungen und Hilfe.
Hoffe ich kann mich irgend wann dafür revangieren.

Gruß
Beitrag02.10.2014 um 06:27 (UTC)    
Titel: [erledigt] CSS-Design Windows 8

testinternet hat Folgendes geschrieben:
Hallo Zusammen,
ich habe eine Seite auf Templatemo gefunden das mir sehr gefällt, und ich gerne für mein Portfolio nutzen würde.

http://www.templatemo.com/templates/templatemo_405_matrix/

Die Seite ist mit Java ausgestattet, dies würde ich weg lassen (weil ich damit noch keine Erfahrung habe) d.h. ich würde nur die Bilder haben, die wiederrum verlinkt sind und zu den jeweiligen Seiten führen. Meint Ihr das würde so klappen??

Oder gibt es noch einfachere, bessere Wege, es zu machen????
Falls Ihr eine Idee habt würde ich mich drüber sehr freuen.
Danke im Vorraus.

Gruß
Beitrag03.10.2014 um 18:56 (UTC)    
Titel:

Hallo,

kein Problem, habe ich gerne gemacht Smile
Was das </div> angeht, das immer gelöscht wird: Ich kann mir gut vorstellen, dass das der Editor als "Schutzmaßnahme" macht.
Dieses Div wird ja in dem Code der Textseite nicht geöffnet, also darf es auch nicht geschlossen werden. Blöd nur, wenn es eben (wie hier) volle Absicht ist, um ein neues Div zu bauen...
Die einzige Abhilfe ist es, den HTML-Editor in den Einstellungen komplett auszuschalten. Ansonsten musst du leider dieses </div> jedesmal wieder einfügen (oder auf der Seite komplett im Quelltext-Modus arbeiten [was ich empfehlen würde, damit der Editor nicht auch noch was anderes kaputt macht...])

Wenn du ansonsten noch Hilfe brauchst (z.B. neue Seiten in anderen Farben / Elemente anders angeordnet / andere Abmessungen) dann melde dich gerne Smile

Gruß,
TransInt
______________
Kein Support per PN - Im Forum hilft es allen!

Life is what happens while you are busy making other plans.
- John Lennon
Beitrag04.10.2014 um 16:12 (UTC)    
Titel:

Eine einzige Sache hätte ich da noch bzw. nur eine Frage.
Wenn es nicht zu lange dauert bzw. nicht der ganze Code wieder geändert werden muss, habe dir schon genug Arbeit gemacht Very Happy .

Was genau muss ich ändern bzw. im Code einfügen damit ich im #post_content etwas einbinden möchte bzw. ein Text haben möchte?

Wie gesagt wenn es mit viel Abet verbunden ist, dann musst du nicht nochmal den Code ändern.

Gruß
Beitrag04.10.2014 um 19:10 (UTC)    
Titel:

Im #post_content direkt kannst du leider nichts einbinden. Das ist ein leeres Div, das vom Baukasten bereitgestellt wird. Alles, was man machen kann ist, ihm eine Hintergrundgrafik zuzuweisen.

Du kannst aber im Prinzip dasselbe machen, was ich bei dem Portfolio gemacht habe: Ein zweites Div für den Inhalt einfach selber bauen.
Zuerst erstellst du den Inhalt auf der linken Seite. Dann kommt folgender Code:
Zitat:
</div><div id="content2">

Das ist der gleiche wie beim Portfolio, du müsstest dort also auch etwas aufpassen.
Danach kommt alles, was auf der rechten Seite stehen soll. Das kann alles mögliche sein: Texte, Bilder, Videos...

Anschließend noch folgendes in den CSS-Code der Unterseite übernehmen:
Zitat:
#post_content { display:none; }
#content2 { float: left; height: 475px; width: 403px; background-color: #aaaaaa; color: #eeeeee; }

Ausblenden von #post_content
Formatierung von #content2 wie #post_content
Hintergrund- und Textfarbe von #content2

Beispiel für den Unterschied:
http://transint-test4.de.tl/Praxiserfahrung.htm
http://transint-test4.de.tl/EDV_Kenntnisse.htm

Gruß,
TransInt
______________
Kein Support per PN - Im Forum hilft es allen!

Life is what happens while you are busy making other plans.
- John Lennon


Zuletzt bearbeitet von transint am 04.10.2014, 20:13, insgesamt einmal bearbeitet
Beitrag05.10.2014 um 11:24 (UTC)    
Titel:

Super.
Vielen Dank.
Jetzt sind alle Fragen gelöst bzw. beantwortet Very Happy

Selbst ich als vortgeschrittener Anfänger konnte, dank deiner ausführlichen Beschreibung der Schritte bzw. den Beispielen, nachvollziehen was die jeweiligen Codes bedeuten.


Gruß
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de