Suche im Forum:
Suchen


Autor Nachricht
Beitrag25.04.2013 um 19:32 (UTC)    
Titel: [erledigt] Sprach-Button an Content Box angliedern!

Seid gegrüßt!
Ich würde gerne die Content-Box meiner Seite www.gewalgon.de zentrieren, sodass sie auf jeder Bildschirmgröße/Browserfenstergröße in der Mitte angezeigt wird.
Die Navigation, sowie der Spracheinstellungsbutton sollten sich der Box anpassen, sprich: Die Navigation sollte immer links von ihr sein, der Spracheinstellungsbutton rechts.

Ich habe schon ein wenig rumprobiert bei den HTML Codes, bin auch sehr experimentierfreudig und lernbereit, allerdings gehöre ich, was das anbelangt, dennoch wohl grad mal zu den Fortgeschrittenen, wenn überhaupt.

Deshalb würde ich mich sehr über Hilfe/Unterstützung/Anregungen freuen!
Auch was das Design und die Benutzerfreundlichkeit angeht Smile

Liebe Grüße,

Gewalgon!
______________


Zuletzt bearbeitet von gewalgon am 02.06.2013, 18:12, insgesamt 3-mal bearbeitet
Beitrag10.05.2013 um 12:03 (UTC)    
Titel:

Ich würde das wie folgt angehen:

Bei "Text über dem Design" ein Div-Element beginnen, welches als Box sämtlichen Inhalt beherbergt (z.B. <div id="wrapper">) und dieses Div dann entsprechend bei "Text unter dem Design" wieder schließen (</div>).

Anschließend geben wir dem Body-Tag ein margin-left (oder padding-left) von 50%, sodass die gesamte Webseite rechts von der Mitte des Browserfensters beginnt. Um das zu korrigieren verschieben wir unseren "wrapper" um die Hälfte der Breite der eigentlichen Homepage zurück nach links (also z.B. margin-left: -445px;). Da du aber einige Elemente absolut positioniert hast bleiben diese davon zunächst unbeeindruckt, weshalb wir dem "wrapper" zusätzlich die Eigenschaft position:relative; zuweisen, sodass sich alleren darin befindlichen, absolut positionierten Elemente, am "wrapper" orientieren.

Nun sollte die Seite schon ordentlich zentriert sein. Was noch nicht passt ist die Headergrafik, die nun nur noch so Breit ist, wie die zentrierten Inhalte. Hier kommt nun deine experimentierfreude ins Spiel: Nutze ein weiteres "wrapper" Element, anstatt des Body-Tags, welches die 50% Verschiebung bewirkt und Platziere den Code, welcher für den head Bereich zuständig ist außerhalb. Alvrericjas und Welcome können im zentrierten Bereich verbleiben.

Ein Problem stellt dann noch der Spracheinstellungsbutton dar, welcher fix positioniert ist. Die einfachste Möglichkeit wäre hier, auch diesen absolut zum "wrapper" zu positionieren.

Viel Erfolg. Wink
______________
Mit mir chatten? Besuche uns auf CookieChat.de (keine Anmeldung nötig, einfach einen Spitznamen einegeben)
Beitrag01.06.2013 um 00:31 (UTC)    
Titel:

Sei gegrüßt freefunstuff!

Erst einmal bedanke ich mich herzlich für deine Mühe!
Habe ein wenig rumprobiert, allerdings befürchte ich dass ich da einiges falsch gemacht habe und dass dafür meine Kentnisse dann doch nicht ausreichen.

Habe, wie du beschrieben hast, so ein "wrapper" erstellt und ihn unten im css Bereich mit den Werten versehen wie du beschrieben hast. Auch dem body-bereich habe ich das was du beschrieben hast dazu getan.

Aber wie gesagt, ich glaube ich hätte doch noch mehr dafür machen müssen...

Vielleicht kannst du mir direkter helfen, wenn ich dir die Codes mal zeige... das wäre wirklich klasse! (Das sind die aktuellen, ohne die Veränderungen die ich versucht habe)

Text über dem Design:
Zitat:
<div id="Welcome">
<a href="http://gewalgon.deviantart.com/"><img alt="" height="150" src="http://fc00.deviantart.net/fs70/f/2013/042/5/2/gewalgon_logo_by_gewalgon-d5ukkwo.png" /></a></div>

<div id="Alvrericjas">
<img height="213" src="http://img.webme.com/pic/g/gewalgon/alvrericjas_gewalgon.png" alt="">
</div>

<div id="Moon"></div><style type="text/css">
<!--

-->
</style>



Text unter dem Design:

Zitat:
<div id="footer"> Copyright by Gewalgon ©</div>


<div id="language">
<div id="eng"><img src="http://img.webme.com/pic/g/gewalgon/englishbutton.png"></div>
<div id="ger" style="display:none"><img src="http://img.webme.com/pic/g/gewalgon-english/deutschbutton.png"></div>
</div>
<script type="text/javascript">
$("#eng").click(function () {
$("#eng").hide();
$("#ger").show();
$(".ger").fadeOut("slow", function() {
$(".eng").fadeIn("slow");
});
});
$("#ger").click(function () {
$("#ger").hide();
$("#eng").show();
$(".eng").fadeOut("slow", function() {
$(".ger").fadeIn("slow");
});
});
</script>



CSS-Code
ohne Style Tags:


Zitat:
/* für alle Browser */
*{margin:0px; padding: 0px;}

/* Werbung platziert */
table[height="102"] {
position: absolute;
left: 50%;
top:0px;
margin-left: -440px; }

/* Hintergrund hinter Design */
body {
background-color: #000000;
background-image: url(http://img.webme.com/pic/g/gewalgon/gewalgonsgreen.png);
background-repeat: repeat-x;
font-family: Morris Roman Schwarz;
font-style: italic;}

/* Design-Container */
#container {
width: 100%;
margin: auto;
overflow: hidden; }


/* Headerfeld */
#header_container {
width: 100% ;
height: 240px;
background-image: url(http://img.webme.com/pic/g/gewalgon/gewalgon_header2.jpg); }
background-repeat: repeat-x;

/* Titel im Header entfernt */
h2#title{display:none;}
h1#header {display:none;}

/* Feld der Navigation */
#nav_container {
float:left;
width: 180px;
margin-left: 10px;
overflow: hidden; }

/* Liste Navigation */
#nav_container ul {
list-style-type: square;
margin-left: 15px; }

/* Navibutton Navigation */
li.nav_element {
width: 180px;;
height: 30px;
text-align: left;
border-bottom: 1px dotted #050609; }

/* Linkfarbe Navigation */
li.nav_element a {
display: block;
line-height: 30px;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none; }

/* Hover Linkfarbe */
li.nav_element a:hover {
display: block;
line-height: 30px;
font-size: 14px;
color: #C8FE2E;
text-decoration: none; }

/* Buttonfarbe aktuell besuchte Seite */
li.checked_menu a{
color: orange; }


/* Titel der Navigation entfernt */
#nav_heading {display:none; }


/* das Feld um content */
#content_container {
position: absolute;
left:200px;
width: 640px;
margin-top: -55px;
float:left;
overflow: hidden;
text-align: left;
background-image: url(http://img.webme.com/pic/g/gewalgon/gewal_background.jpg);
border: 5px solid #c9c9c9;
border-radius: 10px; }

/* Seiteninhalt */
#content {
width: 590px;
margin-left: 25px;
min-height: 300px;
margin-bottom: 20px;
overflow: hidden; }

/* Ueberschriften */
h1, h2 {
font-family: Morris Roman Schwarz;
font-size: 24px;
font-style: italic;
color: #496d3c;
margin-bottom: 10px;}

/* Schrift im Seiteninhalt */
#content, #content p #content span {
font-size: 15px;
color: #000000; }

/* Linkfarbe Seiteninhalt */
#content a {
color: #283c21;
text-decoration: bold;
font-size:14px; }

/* Hover Link Seiteninhalt */
#content a:hover {
color: #ff5700;
text-decoration: underline; }

/* Titel im Seiteninhalt entfernt */
#title span {display:none; }

/* die rechte Box entfernt */
#sidebar_container {display:none;}


#Alvrericjas {
position: absolute;
left: 0px;
top: 0px; }

#Moon {
position: absolute;
right: 7%;
top: 15px; }


#Welcome {
position: absolute;
left: 390px;
top: 5px; }


/* Feld unter dem Design */
#footer {
position: absolute;
top: 160px;
right: 3px;
padding: 10px;
margin: auto;
margin-bottom: 40px;
text-align: right;
font-size: 13px;
color: #FFFFFF; }

/* Das kleine Teil da rechts aussen */
#language {
height: auto;
width : auto;
padding: 5px;
position: fixed;
left: 845px;
top: 207px;
background-color: #FFFFFF;
border: 5px solid #c9c9c9;
border-left: none;
border-radius: 0 10px 10px 0;
}
#language img {
cursor: pointer;
}

#counter {display:none;}

input, textarea {
border: 1px solid #fff;
border-radius: 3px;
background: #fff;
padding: 5px;
color: #888;
-webkit-box-shadow: inset 0 0 2px 0 #888;
-moz-box-shadow:inset 0 0 2px 0 #888;
box-shadow: inset 0 0 2px 0 #888;
font-size: 11px;
}
input[type="submit"] {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #ffffff;
padding: 10px 15px;
background: -moz-linear-gradient(top,#a1ffa1 0%,#135c01);
background: -webkit-gradient(linear, left top, left bottom, from(#a1ffa1), to(#135c01));
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 1px solid #134201;
-moz-box-shadow:0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,1);
-webkit-box-shadow:0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,1);
box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,1);
text-shadow: 0px -1px 0px rgba(000,000,000,0.4), 0px 1px 0px rgba(255,255,255,0.3);
cursor: pointer;
float: right;
margin: 5px 10px;
}
input[type="submit"]:hover {
-moz-box-shadow: inset 0px 0px 1px rgba(000,000,000,1);
-webkit-box-shadow:inset 0px 0px 1px rgba(000,000,000,1);
box-shadow:inset 0px 0px 1px rgba(000,000,000,1);
}
#nav_Kontakt {
display:none;
}



//-->
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
<!--




Über jegliche Hilfe bin ich Dankbar!


PS: Bitte noch NICHT als "Erledigt" markieren!
______________


Zuletzt bearbeitet von gewalgon am 01.06.2013, 01:44, insgesamt einmal bearbeitet
Beitrag01.06.2013 um 09:25 (UTC)    
Titel:

Kurze Info dazu: Wer ein ähnliches Design kennt, dass zentriert ist, wo der Code vorgefertigt ist, den würde ich auch annehmen. Denn ich wünsche mir auch eine Slidershow beim Banner. Wichtig wäre mir nur diesen Englisch-Deutsch-Button beibehalten zu können!
______________
Beitrag02.06.2013 um 01:47 (UTC)    
Titel:

Soooo.... Mit viel Müh und Not und eine halbe Nacht ist es mir soweit gelungen das Design zu zentrieren. Zwar nicht 100% wie ich wollte, da ich mir die Navigation weiterhin auf der linken Seite der Kontent Box gewünscht habe, dafür jetzt unter dem Header. Ich hoffe dass es so aber auch übersichtlich genug ist.
Das ist jetzt noch die Rohfassung und wird auf jeden Fall noch vom Design her verfeinert. Ich brauch jetzt erstmal ne Mütze Schlaf Very Happy

Mein letztes Problem, wie man auch sehen wird, wenn man meine Seite Besucht: Der Spracheinstellungsbutton. Ich weiß nicht wie ich ihn an der Content-Box angliedern kann, sodass sie, egal bei welcher Browsergröße auch da bleibt wo sie sein soll. Hab schon jede Menge Positionen und was weiß ich was ausprobiert, aber..... naja, daraus ist halt leider nichts geworden.

Über jede Hilfe würde ich mich riesig freuen!
______________
Beitrag02.06.2013 um 17:12 (UTC)    
Titel:

Sodala. Jetzt hab ich mal ein ganz anderes Design hergenommen, und an dem konnte ich es jetzt an der Content Box angliedern, hat sich also erledigt!
______________
Beiträge der letzten Zeit anzeigen:   


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