 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
Manu040
Threadersteller
Dabei seit: 03.07.2013
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Fr 30.08.2013 18:02
Titel Website in zwei Sprachen ohne einfach alles zu kopieren |
  |
|
Hallo,
arbeite grade mit dem Web Baukasten Weebly, das ist wie nPage- nur für Erwachsene.
Man kann dort sehr viel in CSS/HTML verändern, und ich wollte die Seite zweisprachig machen.
Klar, das einfachste wäre sie einfach zu kopieren.
Aber das geht gar nicht, ich will ein Button in der Navi Leiste, wo man einmal rauf klickt und die Sprache verändert sich.
Ich bin im Internet auf eine Möglichkeit gestoßen (Link leider weg), die komplette Navi Leiste selbst aufzubauen und irgendwas mit "Multi-Columns" zu machen, (habe wenig Ahnung von Programmieren) eine Top-Bar selbst grafisch zu gestalten und alles entsprechen zu verlinken. Die Standard Top-Bar ist nur ein Pixel der mit "repeat-x" einfach verlängert wird..
Ein Link zu der Seite an der ich arbeite kann/darf ich leider nicht geben ..
Falls ihr noch was braucht um es zu verstehen, kann ich es liefern.
Hier aber mal die unbearbeiteten Standard CSS und .html Datei um die es geht:
CSS Datei:
| Code: |
/* Resets
--------------------------------------------------------------------------------*/
ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote,
fieldset, input {
margin: 0;
padding: 0;
}
a img {
border: 0;
}
a {
text-decoration: none;
}
/* General Styling and Structure
--------------------------------------------------------------------------------*/
body {
font-family: 'Open Sans', Helvetica, sans-serif;
background:#242424;
}
.container {
margin: 0 auto;
width: 960px;
}
#header-wrap,
#banner-wrap,
#nav-wrap,
#main-wrap,
#footer-wrap,
#total-wrapper
{
width:100%;
min-width:960px;
background:#fff;
}
p a, h2 a, .blog-comments-bottom a {
color: #6ca29b;
border-bottom:1px solid #6ca29b;
}
p a:hover, h2 a:hover, .blog-comments-bottom a:hover {
color: #458a81;
border-bottom:1px solid #458a81;
}
h2 {
font-size:17px ;
padding: .5em 0 0.8em 0;
letter-spacing:1px;
line-height: 1.2;
font-weight:400;
color: #373737;
}
h2 a {
color: #373737;
}
p {
font-size: 13px;
line-height: 180%;
color:#464646;
padding: .5em 0;
}
blockquote {
font-style:italic;
border-left:4px solid #94C5BF;
margin:10px 0 10px 0;
padding-left:20px;
line-height:1.8;
font-size:13px;
color:#888;
}
#wsite-content {
min-height:500px;
}
/* Header
--------------------------------------------------------------------------------*/
#header-wrap {
text-align:center;
padding-bottom:120px;
}
#logo,
#logo a {
color:#000;
font:600 30px 'Open Sans', sans-serif;
text-transform:uppercase;
letter-spacing:7px;
z-index:2;
position:relative;
}
#logo a:hover {}
.logo-spacer {
width:80px;
height:5px;
display:inline-block;
background:#000;
margin:8px 0 0;
}
/* Header: Phone Number
--------------------------------------------------------------------------------*/
#header-wrap .phone-number .wsite-text {
color: #000;
font-size: 16px;
line-height:15px;
letter-spacing:2px;
font-weight: 600;
display: block;
text-transform:uppercase;
white-space: nowrap;
margin-top:10px;
}
#header-wrap .phone-number .wsite-text a {}
#header-wrap .phone-number .wsite-text a:hover {}
/* Header: Social Links
--------------------------------------------------------------------------------*/
#header-wrap .wsite-social {
vertical-align: middle;
margin-top:14px;
}
#header-wrap .social div {
text-align:center !important;
}
.wsite-social-item {
width: 22px;
height: 23px;
margin: 0 3px 0 0;
background-image:url(social.png);
}
.wsite-social-facebook {background-position:0 0;}
.wsite-social-facebook:hover {background-position:0 -23px;}
.wsite-social-facebook:active {background-position:0 -46px;}
.wsite-social-pinterest {background-position:-154px 0;}
.wsite-social-pinterest:hover {background-position:-154px -23px;}
.wsite-social-pinterest:active {background-position:-154px -46px;}
.wsite-social-twitter {background-position:-66px 0;}
.wsite-social-twitter:hover {background-position:-66px -23px;}
.wsite-social-twitter:active {background-position:-66px -46px;}
.wsite-social-linkedin {background-position:-110px 0;}
.wsite-social-linkedin:hover {background-position:-110px -23px;}
.wsite-social-linkedin:active {background-position:-110px -46px;}
.wsite-social-mail {background-position:-22px 0;}
.wsite-social-mail:hover {background-position:-22px -23px;}
.wsite-social-mail:active {background-position:-22px -46px;}
.wsite-social-rss {background-position:-44px 0;}
.wsite-social-rss:hover {background-position:-44px -23px;}
.wsite-social-rss:active {background-position:-44px -46px;}
.wsite-social-flickr {background-position:-132px 0;}
.wsite-social-flickr:hover {background-position:-132px -23px;}
.wsite-social-flickr:active {background-position:-132px -46px;}
.wsite-social-plus {background-position:-220px 0;}
.wsite-social-plus:hover {background-position:-220px -23px;}
.wsite-social-plus:active {background-position:-220px -46px;}
.wsite-social-vimeo {background-position:-176px 0;}
.wsite-social-vimeo:hover {background-position:-176px -23px;}
.wsite-social-vimeo:active {background-position:-176px -46px;}
.wsite-social-yahoo {background-position:-198px 0;}
.wsite-social-yahoo:hover {background-position:-198px -23px;}
.wsite-social-yahoo:active {background-position:-198px -46px;}
.wsite-social-youtube {background-position:-88px 0;}
.wsite-social-youtube:hover {background-position:-88px -23px;}
.wsite-social-youtube:active {background-position:-88px -46px;}
/* Header: Search Box
--------------------------------------------------------------------------------*/
#header-wrap .search {}
#header-wrap .wsite-search {
vertical-align: middle;
margin-top:15px;
}
#header-wrap .wsite-search-input {
width: 200px;
border:0 ;
line-height:20px;
height:20px;
border-radius:4px;
font-family: ;
color: #fff;
font-size: ;
background:#555;
}
#header-wrap .wsite-search-button {
position: absolute;
width: 13px;
height: 13px;
top:7px;
right:7px;
background:url(search.png) no-repeat ;
}
/* Navigation
--------------------------------------------------------------------------------*/
#nav-wrap {
background:url(top-bar.jpg) repeat-x;
}
#nav-wrap .nav-container {
float:right;
position:relative;
width:960px;
left:-50%;
text-align:left;
z-index:2;
margin-bottom:80px;
margin-top:-10px;
}
#nav-wrap .nav-container ul{
list-style:none;
position:relative;
left:50%;
z-index:2;
}
#nav-wrap .nav-container li{float:left;position:relative;}
#nav-wrap .nav-container a{
text-decoration:none;
font:600 16px 'Josefin Sans', sans-serif;
text-transform:uppercase;
margin:10px 15px;
float:left;
color:#666;
letter-spacing:2px;
padding:10px 2px 10px 4px;
text-align:center;
white-space:nowrap;
border-top:8px solid #353535;
}
#nav-wrap .nav-container a:hover{border-top:8px solid #6ca29b;}
#nav-wrap .nav-container li#active a {border-top:8px solid #458a81;}
#nav-wrap {overflow:hidden}/* hide horizontal scrollbar*/
/* Navigation Submenu's
--------------------------------------------------------------------------------*/
#wsite-menus .wsite-menu {
background:#fff;
border:1px solid #ddd;
margin-top:-1px;
border-bottom:0;
}
#wsite-menus .wsite-menu li {
border:none;
}
#wsite-menus .wsite-menu li a {
border-left:none;
border-right:none;
}
#wsite-menus .wsite-menu li a:hover {
color: #6ca29b;
background:#fff ;
}
/* Main Content
--------------------------------------------------------------------------------*/
.no-header-page #main-wrap {
border-top:1px solid #eee;
}
#main-wrap .container {
padding:50px 0;
}
.blog-post .blog-separator {display:none;}
.blog-post .blog-header {
margin-bottom:20px !important;
}
.blog-sidebar h2 {
padding:1em 0 .3em;
}
.blog-sidebar h2.blog-author-title {
padding:0 0 0.3em;
}
h2.blog-title, .blog-post .blog-header h2.blog-title {padding-bottom:5px !important;}
h2.blog-title a, .blog-post .blog-header h2.blog-title a { border:none;}
/* Universal banner
--------------------------------------------------------------------------------*/
#banner-wrap {
background:url(dust.png) fixed;
padding:30px 0;
}
/* Page type: Tall header
--------------------------------------------------------------------------------*/
.tall-header-page #banner {}
.tall-header-page .wsite-header {
width: 960px;
height: 300px;
background: url(banner-tall.jpg) no-repeat;
}
/* Page type: Short header
--------------------------------------------------------------------------------*/
.short-header-page #banner {}
.short-header-page .wsite-header {
width: 960px;
height: 200px;
background: url(banner-short.jpg) no-repeat;
}
/* Page type: No header
--------------------------------------------------------------------------------*/
.no-header-page .wsite-header {
display:none;
}
/* Page type: Landing page
--------------------------------------------------------------------------------*/
.landing-page #banner {
padding: 0;
}
#bannerleft {
float: right;
width: 400px;
}
.landing-page .wsite-header {
width: 400px;
height: 300px;
background: url(banner-landing.jpg) no-repeat;
}
#bannerright {
float:left ;
width: 500px;
height:300px;
}
#bannerright h2 {
font-size:25px;
font-weight:300;
padding: 0px;
line-height: 25px;
}
#bannerright p {
padding: 20px 0px;
line-height: 140%;
}
#bannerright .wsite-button {}
.landing-banner-outer {
display: table;
#position: relative;
overflow: hidden;
}
.landing-banner-mid {
#position: absolute;
#top: 50%;
display: table-cell;
vertical-align: middle;
}
.landing-banner-inner {
#position: relative;
#top: -50%;
}
/* Footer
--------------------------------------------------------------------------------*/
#footer-wrap {
background:#242424;
padding:50px 0;
color:#eee;
float:left;
}
#footer-wrap .container {}
#footer-wrap .container h2 {
color: #fff;
}
#footer-wrap .container p {
color:#ccc;
}
#footer-wrap blockquote {border-left-color:#666;}
#footer-wrap .container .wsite-form-container {
margin-top:0 !important;
}
#footer-wrap .container .weebly-footer, #footer-wrap .container .weebly-footer a, #weeblyfootertext {color:#fff; text-align:right;}
#footer-wrap .container .weebly-footer, #weeblyfootertext {float:right; text-transform:uppercase; font-size:14px; font-weight:600;}
#footer-wrap .container .wsite-form-input, #footer-wrap .container .wsite-search-element-input {
border:1px #333 solid;
background:#222;
color:#fff;
}
/* Form Customization
--------------------------------------------------------------------------------*/
.wsite-form-label {
display: inline-block;
font-size: 14px;
}
.form-radio-container {
font-size: 13px;
}
.wsite-form-input, .wsite-search-element-input {
border:1px #ccc solid;
background:none;
border-radius:2px;
padding:7px 5px !important;
}
.form-select {}
/* Buttons
--------------------------------------------------------------------------------*/
/* Small structure & regular style */
.wsite-button {
display: inline-block;
padding: 7px 12px;
background: #333;
text-transform:uppercase;
border-radius:2px;
}
.wsite-button:hover {
background: #000;
}
.wsite-button:active {
background: #222;
}
.wsite-button-inner {
color: #fff !important;
padding: 0;
background: none !important;
font: 500 18px 'Open Sans', sans-serif;
height:auto;
letter-spacing:1px;
}
/* Large structure & regular style */
.wsite-button-large {
color: #fff !important;
padding: 5px 20px;
}
.wsite-button-large:hover {
background: #000;
}
.wsite-button-large:active {
background: #222;
}
.wsite-button-large .wsite-button-inner {
background: none !important;
padding:0;
height:auto;
}
.wsite-button-large:hover .wsite-button-inner {
background: none !important;
}
.wsite-button-large:active .wsite-button-inner {
background: none !important;
}
/* Highlighted styles */
.wsite-button-highlight {
background: #94C5BF;
}
.wsite-button-highlight:hover {
background: #6ca29b;
}
.wsite-button-highlight .wsite-button-inner {
background: none;
}
.wsite-button-large .wsite-button-highlight {
background: #94C5BF;
}
.wsite-button-large .wsite-button-highlight .wsite-button-inner {
background: none;
}
.wsite-button-large.wsite-button-highlight {
background: #94C5BF;
}
.wsite-button-large.wsite-button-highlight:hover {
background: #6ca29b;
}
.wsite-button-highlight:active {
background: #458a81;
}
.wsite-button-large.wsite-button-highlight:active {
background: #458a81;
} |
Html Datei dazu:
| Code: | <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body class='landing-page wsite-theme-light'>
<div id="total-wrapper">
<div id="nav-wrap">
<div class="nav-container">{menu}</div>
</div>
<div id="header-wrap">
<div class="container">
<div id="logo">{logo}</div>
<div class="logo-spacer"></div>
<div class="phone-number">{phone:text}</div>
<div class="social">{social}</div>
<div class="search">{search}</div>
</div><!-- end container -->
</div><!-- end nav-wrap -->
<div id="banner-wrap">
<div class="container">
<div id="banner">
<div id="bannerleft">
<div class="wsite-header"></div>
</div><!-- end banner-left -->
<div id="bannerright" class="landing-banner-outer">
<div class="landing-banner-mid">
<div class="landing-banner-inner">
<h2>{headline:text global="false"}</h2>
<p>{headline-paragraph:text global="false"}</p>
{action:button global="false"}
</div><!-- end banner inner -->
</div><!-- end banner mid -->
</div><!-- end banner-right -->
<div style="clear:both;"></div>
</div><!-- end banner -->
</div><!-- end container -->
</div><!-- end banner-wrap -->
<div id="main-wrap">
<div class="container">
{content}
</div><!-- end container -->
</div><!-- end main-wrap -->
</div><!-- end total wrapper -->
<div id="footer-wrap">
<div class="container">
{footer}
</div><!-- end container -->
</div><!-- end footer-wrap -->
</body>
</html> |
|
|
| |
  |
 |
type1
Dabei seit: 19.11.2004
Ort: -
Alter: 44
Geschlecht: 
|
Verfasst Fr 30.08.2013 18:13
Titel
|
|
|
|
Nimm ein vernünftiges CMS.
|
|
| |
|
|
|
Anzeige
|
|
|
type1
Dabei seit: 19.11.2004
Ort: -
Alter: 44
Geschlecht:
|
Verfasst Fr 30.08.2013 18:14
Titel
|
|
|
|
Nimm ein vernünftiges CMS.
|
|
| |
|
|
Manu040
Threadersteller
Dabei seit: 03.07.2013
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Fr 30.08.2013 18:20
Titel
|
|
|
Was ist mit CMS?
Warum sollte ich es nehmen?
Wieso geht der Weg nicht, den ich schon so halb gefunden habe?
Zuletzt bearbeitet von Manu040 am Fr 30.08.2013 18:22, insgesamt 2-mal bearbeitet
|
|
| |
|
|
type1
Dabei seit: 19.11.2004
Ort: -
Alter: 44
Geschlecht:
|
Verfasst Fr 30.08.2013 18:38
Titel
|
|
|
|
Weil du dir da gerade einen abbastelst. Das System kann deine Anforderung nicht einfach erfüllen.
|
|
| |
|
|
Manu040
Threadersteller
Dabei seit: 03.07.2013
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Fr 30.08.2013 19:03
Titel
|
|
|
Bis auf kleine technische Sachen kann man damit sehr gut+schnell Seiten mit nicht-wechselnden Inhalten erstellen, die nicht so grottig aussehen wie der Rest im Netz- aber darüber will ich jetzt nicht diskutieren. Wenn du mir davon dringend abraten möchtest brauch ich da schon ein paar klare, stichhaltige Argumente. Die jetzigen zeigen mir nur das du ewig in CMS arbeitest und nichts anderes kennst/kennen lernen willst - somit auch nicht Weebly.
Also bitte zurück zu meiner Frage, wie ich die Navileiste realisieren kann.
|
|
| |
|
|
type1
Dabei seit: 19.11.2004
Ort: -
Alter: 44
Geschlecht:
|
Verfasst Fr 30.08.2013 19:04
Titel
|
|
|
|
Google doch erstmal CMS. Das ist kein Produkt.
|
|
| |
|
|
Manu040
Threadersteller
Dabei seit: 03.07.2013
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Sa 31.08.2013 09:16
Titel
|
|
|
Ich weiß das es kein Produkt ist..
Ich will bei meiner Arbeitsweise bleiben und habe nur mit der gestellten Frage Probleme. Es ist möglich, es ist kurz erklärt und einfach zu lösen (kein abbasteln). Habe eine Anleitung dazu gefunden die ich leider nicht mehr habe.. Lang war sie nicht.
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Zwei <Forms>, Zwei Checkboxen und ein Problem
verschiedenen sprachen
usability in andern sprachen
gebräuchliche Webdesignersätze in anderen Sprachen
Wie bezeichnet ihr die verschiedenen Sprachen (Sammelbegriff
In welchen Sprachen Websites erstellen?
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|
