• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Wie wird das umgesetzt??

P

peyman

Mitglied
Moin Leute,

ich hab hier schon hilfreiche Tipps erhalten die mich an meine Ziele gebracht haben. Also erst einmal: Danke!

Nun hab ich wieder eine Angelegenheit. http://i42.tinypic.com/2n0q4is.jpg

Auf dem Bild seht ihr das Layout der Seite. Navi und Background ist soweit fertig, wie hier zu sehen http://i42.tinypic.com/kb7fo9.jpg.

Nun meine Frage. Wie erstell ich den Part wo die karte bzw. der Inhalt dann eingefügt wird. Die Idee ist das wenn man links aufm Navi zb auf Kontakt klickt unten dieser kleine balken erscheint und auf klicken des pfeils es aufgeht so das man alles sieht und natürlich wieder sich schließen lässt. Desweiteren soll es aus zwei Hintegrundbilder bestehen die übereinander gelappt sind wie aufm bild zu sehen . Wie erstell ich das ? Reicht da HTML CSS oder muss Java da mit ins spiel. Bzw gibts nen fach Begriff für sowas :)
 
Hallo,

also nicht Java sondern eher Javascript bzw. jquery wenn ich verstehen würde was möchtest oder versteh ich das richtig, du möchtest das der user 2 mal klicken muss bevor er den inhalt zu sehen bekommt den er möchte, erst menü dann auf den pfeil?!?

Soll das eine art onepage werden oder wann sollen sich die Seite neu laden?
alles recht spongebob.

Cheffchen
 
Bzw. Ja der User soll zweimal klicken ( ist nicht meine idee) erst auf der navileist links , und dann soll wie auf Agentur | Nayoki Interactive Advertising GmbH unten ein banner oder wie man das nennt erscheinen und mit einem klick auf den Pfeil ( beim beispiel ein +) soll es genau wie da erscheinen.

Sollen mehrere Seiten seien also keine onepage.
 
Hallo,

also da hast doch schon alles.

ist sogar recht einfach. zuerst erstellest das große fenster, wenn das steht macht per css display:none; damit ist das weg, jetzt machst auf der gleichen Seite das kleine fenster.

beide bekommen ein schalter mit einer classe und der rest ist einfaches jquery fadeToggle().
hier findest den code, also bei dir ist das der p1 in der Demo: .fadeToggle() | jQuery API Documentation

Über sinn sage ich nichts, war ja nicht deine frage :O)

Cheffchen
 
Super vielen dank :). Ich mach mich mal an die arbeite und poste dann mal ein test link wenn ich fertig bin . By the way würde ich eher sowas machen wollen Playground Inc. Red Antler | Branding Consultancy WebKnit | A Web Workshop We Grow Communities - SEED SPOT. Finde die viel geiler .

Deine meinung = ) ?

nochmal zur kontrolle. das display:none kommt beim contentmain im css oder ?

<!DOCTYPE html>

<html>
<!-- Design: Danika Becker-->
<!--Programmierung: Peyman Etedali-->


<head>


<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="contentmedia.css">

<title>contentmedia</title>
<style type="text/css">
a:link { font-weight:bold; color:#4a4a4a; text-decoration:none; }
a:visited { font-weight:bold; color:#4a4a4a; text-decoration:none; }
a:focus { font-weight:bold; color:#f99a1c; text-decoration:underline; }
a:hover { font-weight:bold; color:#f99a1c; text-decoration:none; }
a:active { font-weight:bold; color:#f99a1c; text-decoration:none; }

</style>
<script>
$.backstretch(imagetwo/Fotolia_43252736_Subscription_Monthly_L.jpg);
</script>

</head>




<body>


<header>
<div class="Content">
<div id="logo"></div>
<div id="navi">
<ul>
<li id="aboutus"><a href="#aboutus">Über uns</a></li>
<li id="erstellung"><a href="#erstellung">Content Erstellung</a></li>
<li id="marketing"><a href="#marketing">Content Marketing</a></li>
<li id="link"><a href="#link">Link Marketing</a></li>
<li id="onside"><a href="#onside">Onside-Optimierung</a></li>
<li id="video"><a href="#video">Video-Martketing</a></li>
<li id="reason"><a href="#reason">10 Gründe für Content Media</a></li>
<li id="kontakt"><a href="#kontakt">Kontakt</a></li>
<li id="impressum"><a href="#impressum">Impressum</a></li>
</ul>
</div>
</div>
</header>


<div class="Contentbar">
<div id="bar"></div>
</div>


<div class="Contentmain">
<div id="main">

</div>
</div>






</body>




</html>
Zum Vergrößern anklicken....



html, body {
width:100%;
height:100%;
background-color:rgb(237,237,237);
}

body {
margin:0;
padding:0;
display:block;

}

header {
position:fixed;
width:335px;
height:100%;
background-color:rgb(237,237,237);
z-index:100;
}

.Content {
margin-left: auto;
margin-right: auto;
width: 335px;
position: relative;
height:100%;
}



#logo {
background-color:rgb(249,155,28);
height:147px;
width:335px;
background-image: url(image/logo_content_media.png);
background-repeat: no-repeat;
background-position-x: 43%;
background-position-y: 40%;
}

.Contentnavi {
width:335px;
height:100%;
}


.Contentbar {
height:100%;
width:51px;
margin-left:335px;
position:fixed;
}

#bar {
background-color:rgb(74,74,74);
height:100%;
width:51px;
}

#navi {

margin-top:50px;
}

li {
list-style-type:none;
font-size:17px;
}

#aboutus {
margin-top:0;

}

#erstellung {
margin-top:30px;
}

#marketing {
margin-top:30px;
}

#link {
margin-top:30px;
}

#onside {
margin-top:30px;
}

#video {
margin-top:30px;
}

#reason {
margin-top:30px;
}

#kontakt {
margin-top:30px;
}

#impressum {
margin-top:360px;
}

.Contentmain {
width:100%;
height:100%;
margin-left:370px;
background-image: url(imagetwo/Fotolia_43252736_Subscription_Monthly_L.jpg);
background-repeat:no-repeat;
background-size: 1520px 978px;
background-position-x: 7%;
background-position-y: 0%;
position:fixed;
}
Zum Vergrößern anklicken....
 
mir ist gerade aufgefallen das sich background-image: url(imagetwo/Fotolia_43252736_Subscription_Monthly_L.jpg); verschiebt also sieht nicht mehr so auf wie aufm ursprungsbild was ich hier gepostet hab? ne kollegin hat mir mal folgendes empfohlen jquery backstretch weiß aber nicht wie ich das einpflegen soll. oder gibts ne andere möglichkeit . aktuell siehts so aus http://i43.tinypic.com/1rxgfs.jpg . benutzte ein 32" zoll als monitor bei der arbeit ein 24"

auch das impressum ist nicht mehr zu sehen. erst wenn man rauszoomt. -.-

http://www.care-verlag.de/try/index.html ich hab dir hier mal testweise online gepackt.
 
Zuletzt bearbeitet:
Hallo,

was soll ich da sagen "jquery backstretch" da von gibts einige und diese scheint doch recht einfach zu sein, nur die jquery.backstretch.min.js runterladen und einbinden und dann die eine zeile einfügen die da steht.

alles andere is ja mehr selbst gespräch als frage oder reicht ein ja :O)


Cheffchen
 
Ein Ja reicht :D.

wie krieg ich den das problem weg mit dem background bzw. generell das die seite auf unterschiedlichen auflösungen gleich bleibt und sich nix verschiebt.
 
Hallo,

hatte den link nicht gesehen.

so geht das gar nicht, kannst das Menü (header) nicht fixed so wird bei kleineren das menü abgeschnitten und gerade das impressum nicht erreichbar.
Contentbar ist auch wieder fixed wieso?

so auf die schnelle wüste ich auch nicht wie ich das umsetzt, dazu fehlen mir zu einem alle infos.

Aber wie so machst das bild nicht als body hintergrund als full-size mit jquery und dann legst das menü drüber aber nicht fixed oder müsstest mit jquery den viewport auslesen und wenn der zu klein ist halt das menü anbassen.

Cheffchen
 
was mich irretiert ist, warum das hintergrund bild und der schwarze balken verschwinden sobald ich position fixed im header rausnehme.
 
Hallo,

versteh ich leider nicht was meinst aber mach dich vertraut mit Firebug wie @threadi schon sagt. Firefox und F12 drücken, so kannst schauen wo was ist und wieso und vorallem mal schnel testen was zu ändern.

Cheffchen
 
Ja, den Firebug gibts auch für Chrome wie Du bei einer Suche nach dem Programm sicher schon rausgefunden haben solltest ;)
 
Könntet ihr mal ein blick drauf werfen. hab mal neu angefangen. bei mir sieht es aktuell so aus. http://i39.tinypic.com/fwix7c.jpg.

Soweit so gut. Hab aber leider kein anderen monitor um es auf andere größen zu testen. verschiebt sich bei euch etwas ?

Contentmedia . Wenn ja wie kann ich es behebn :) Danke im Vorraus.

Die seite soll ohne scrollbalken seien. Sprich alles auf einer fläche ohne das man runter / hoch bzw. links rechts scrollen muss.

Achja nochwas, mir ist gerade aufgefallen das im dreamweaver die seite so gezeigt wird http://i42.tinypic.com/m7dgyw.jpg. Arbeite mit notepad++. Bin nur durch zufall drauf gestoßen. Kann ich das ignorieren?

edit:
Ah ich seh gerade ich kanns nicht ignorieren . wenn ich beim header position fixed rausnehme hab ich a. ein scrollbalken und der balken ist wie bei dreamweaver unten. Sobald ich aber position fixed im header eingebe ist es wieder oben wie es seien soll .


edit: habs jetzt mal mit margin-top:-670px im class=blackbar versucht und es setzt wieder oben an und position fixed im header ist auch raus. also jetzt klappts. ich hoff nur ich hab nicht gemogelt :) oder gibts ne andere möglichkeit.

Weil was mich irretiert ist das es außerhalb des headers ist . also ne eigene div box also müsste es doch eigentlich oben direkt ansetzten und nicht am ende des headers
 
Zuletzt bearbeitet:
Das ist doch mal ein guter Neubeginn. Sauberer HTML-Code, wobei Du auch

HTML: 
<div id="menue">

durch

HTML: 
<nav>

ersetzen könntest, was ja möglich ist, da Du HTML5 als Doctype verwendest.

Und mögliche Verschiebungen bei kleineren Browserfenstern zu prüfen, reicht es wenn Du einfach mal dein Browserfenster kleiner und größer ziehst. Dafür braucht es keine unterschiedlichen Auflösungen oder Monitore da eine Webseite nie diese Auflösung einnimmt.
 
Erstmal danke furs lob :).

Werds mal so umsetzten bei weiteren fragen, komm ich nochmal hier zuruck.

p.s. Kann mal ein lob zuruck geben hier wied einem echt geholfen.
 
peyman schrieb:
Erstmal danke furs lob :).

Werds mal so umsetzten bei weiteren fragen, komm ich nochmal hier zuruck.
Zum Vergrößern anklicken....

Zu denen es unweigerlich kommen wird, wenn du anfängst, auf der rechten Seite Content zu platzieren. Alleine durch die Tatsache, dass du den schwarzen Balken als separates Div anlegt und anstatt ihn zu floaten mit einem negativen margin-top positionierst, sind spätere Probleme bereits vorprogrammiert.
 
Wie soll ich den sonst anlegen wenn nicht als div. Hab mal versucht die div box zu floaten. Landet aber bei mir mittig aufm grauen bereich .

was sind denn die fehler akutell.?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben