Suche im Forum:
Suchen


Autor Nachricht
Beitrag18.07.2012 um 15:40 (UTC)    
Titel: IceBlue -> Hitergrund - geschloßenes Design

Guten tag,

könnte mir jemand mit dem Code helfen?

z.Z sieht das Design so aus: www.GWE-2Herren.de.tl
und soll so aussehen: http://img.webme.com/pic/g/gwe-2herren/designgwe.png

Was ich für Hilfe brauche?
-> der content soll still stehen und nicht größer werden, den content soll man scrollen können und somit das design um 20px breiter machen.

bei der navi soll die farbe ( #41af77 ) für die weißen lücken ersetzt werden.
genau das selbe soll bei den rechten boxen passieren, der komplette hintergrund der boxen soll ( #41af77 ) sein.


würde mich freuen wenn jemand ein feedback gibt oder mir direkt helfen könnte.

Der Code:
Code:
<center><style type="text/css" typ="text/css"> <!--

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

/* Hintergrund hinter Design */
body {
    background-color: #000000;
    background-image: url(http://img.webme.com/pic/a/akimkin/bg123.jpg);
    background-repeat: repeat;
align: center;
    background-attachment: ; }

/* Werbung über Design mittig */
table[height="102"] { margin: auto; }

/* Das Design mittig - zentriert ausrichten */
table.edit_main_table { margin: auto; }

/* Design kürzen (kein scrollen des Designs bei kurzen Seiten) */
td.edit_main_tr {
    height: 50% !important; }

/* Schriftfarbe + Größe Baukasten-Extras */
td {
    color: #000000;
    font-size: 14px;
    text-align: left;
    font-family: arial,verdana; }

/* Schriftfarbe und Größe Seiteninhalt */
DIV {
    color: #000000;
    font-size: 14px;
    text-align: left;
    font-family: arial,verdana; }

/* Header oben */
td.edit_header_full {
    background-color: #FFFFFF;
height: 261px;
    background-image: url(http://img.webme.com/pic/a/akimkin/header123.png);
    background-repeat: no-repeat;
    border: 0px solid #000000; }

/* Titel im Header entfernen */
td.headline {visibility: hidden;}

/* Titel über Navigation */
td.nav_heading {
    color: #62b1ff;
    font-size: 0px;
    font-family: arial,verdana;
    text-align: center;
    height: 29px;
    background-color: #000000;
    background-image: url(http://img.webme.com/pic/a/akimkin/slider123.jpg);
    border: 0px solid #000000; }

/* Navi Buttons */
td.nav {
    background-color: ;
    background-image: url(http://img.webme.com/pic/a/akimkin/buttonnormal123.jpg);
    border: 0px solid #000000; }

/* Hover Navi-Button */
td.nav:hover {
    background-color: ;
    background-image: url(http://img.webme.com/pic/a/akimkin/buttonhover12345.jpg);
    border: 0px solid #000000; }

/* Textlinks in Navigation */
td.nav a {
    color: #ffffff;
    font-size: 14px;
    font-family: arial,verdana;
    text-decoration: none;
    text-align: center; }

/* Hover Textlink Navigation */
td.nav a:hover{
    color: #ffffff;}

/* aktuell besuchte Seite */
tr.checked_menu td {
    background-color: #XXXXXX;
    background-image: url(http://img.webme.com/pic/a/akimkin/buttonnormal123.jpg); }

/* Hover-Effekt löschen für aktuell besuchte Seite */
tr.checked_menu td:hover {
    background-color: #XXXXXX;
    background-image: url(http://img.webme.com/pic/a/akimkin/buttonhover12345.jpg); }

/* Bild unter Navigation entfernt */
td.edit_below_nav {display: none;}

/* Hintergrund Navigation */
td.edit_navi_headbg {
    height: 50%;
    background-color: #XXXXXX ;
    background-image: url();
    border: 0px solid #000000; }

/* Balken über Textfeld */
td.edit_content_top {
    height: 29px;
    background-color: #000000;
    background-image: url(http://img.webme.com/pic/a/akimkin/slider123.jpg);
    border: 0px solid #000000; }

/* Seitentitel über Textfeld */
td.headline2 {
    color: #000000;
    font-size:0px;
    font-family: arial,verdana;
    text-align: left; }

/* Textfeld */
td.edit_content {
    padding-top: 15px;
    padding-bottom: 15px;
    background-color: #FFFFFF;
    background-image: url();
    border: 0px solid #000000; }

/* Linke Spalte im Textfeld */
td.edit_content_left_spacer {
    background-color: #XXXXXX;
    background-image: url(); }

/* Rechte Spalte im Textfeld */
td.edit_content_right_spacer {
    background-color: #XXXXXX;
    background-image: url(); }

/* Erste Balken unter Textfeld */
td.edit_content_bottom {
    height: 29px;
    background-color: #XXXXXX;
    background-image: url();
    border: 0px solid #000000; }



/* Zweiter Balken unter Textfeld (mit Counter) */
td.edit_content_bottom2 {
background-image:url(http://img.webme.com/pic/a/akimkin/slider123.jpg);
background-color: #XXxXXX; }

/* Counter / Besucherzähler */
td.edit_content_bottom2_counter {
    font-family: arial,verdana;
    color: #62b1ff;
    font-size: 12px;
    background-image: url(http://img.webme.com/pic/a/akimkin/slider123.jpg)
    background-color: #XXXXXX;
    border: 0px solid #000000; }

/* große Feld unter Textfeld */
td.edit_rechts_cbg {
    height: 300px;
    background-color: ;
    background-image: url();
    border: 0px solid #000000; }

/* Streifen rechts vom Design entfernt mit */
td.edit_rechts_sbg {display:none;}

/* Titel über rechter Box */
td.sidebar_heading {
    color: #ffffff;
    font-size: 14px;
    font-family: arial,verdana ;
    text-align: center;
    height: 29px;
    background-color: #41a77;
    background-image: url(http://img.webme.com/pic/a/akimkin/slider123.jpg);
    border: 0px solid #000000; }

/* rechte Boxen 1 bis 5 */
td.shouty, .shouty2, .shouty3, .shouty4, .shouty5 {
    color: #000000;
    font-size: 14px;
    font-family: arial,verdana;
    text-align: left;
    background-color: #;
    background-image: url();
    background-repeat: repeat;
    border: 0px solid #000000; }

/* Abschluß unter Boxen 1 bis 5 entfernt mit */
td.edit_rb_footer {   
display:none;
}

/* Hintergrund unter rechten Boxen */
td.edit_rechts_bottom {
    background-color: #XXXXXX;
    background-image: url();
    border: 0px solid #000000; }
--> </style> <!-- Nach dem </style> keine CSS-Codes mehr -->
</center>

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

//Execute the slideShow
slideShow();

});

function slideShow() {

//Set the opacity of all images to 0
$('#gallery a').css({opacity: 0.0});

//Get the first image and display it (set it to full opacity)
$('#gallery a:first').css({opacity: 1.0});

//Set the caption background to semi-transparent
$('#gallery .caption').css({opacity: 0.7});

//Resize the width of the caption according to the image width
$('#gallery .caption').css({width: $('#gallery a').find('img').css('width')});

//Get the caption of the first image from REL attribute and display it
$('#gallery .content').html($('#gallery a:first').find('img').attr('rel'))
.animate({opacity: 0.7}, 400);

//Bilderwechsel Zeit 3000 = 3 sekunden
setInterval('gallery()',3000);

}

function gallery() {

//if no IMGs have the show class, grab the first image
var current = ($('#gallery a.show')? $('#gallery a.show') : $('#gallery a:first'));

//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first'));

//Get next image caption
var caption = next.find('img').attr('rel');

//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0})
.addClass('show')
.animate({opacity: 1.0}, 1000);

//Hide the current image
current.animate({opacity: 0.0}, 1000)
.removeClass('show');

//Set the opacity to 0 and height to 1px
$('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 });

//Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
$('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '50px'},500 );

//Display the content
$('#gallery .content').html(caption);

}

</script>



<style type="text/css">
   <!--

.left{
    float: left;
    margin: 2px;
    }

.right{
    float: right;
    margin: 2px;
    }
   
    -->
</style>
<style type="text/css">
<!--
td#nav_Abstand1{visibility:hidden;height:5px;}
td#nav_Abstand2{visibility:hidden;height:5px;}
td#nav_Abstand3{visibility:hidden;height:5px;}
td#nav_Abstand4{visibility:hidden;height:5px;}
-->
</style>



<style type="text/css">
<!--
td#nav_Abstand1{visibility:hidden;height:5px;}
td#nav_Abstand2{visibility:hidden;height:5px;}
td#nav_Abstand3{visibility:hidden;height:5px;}
td#nav_Abstand4{visibility:hidden;height:5px;}
-->
</style>



Mit freundliche Grüßen
GWE
Beitrag18.07.2012 um 16:34 (UTC)    
Titel:

Füge dazu einfach folgenden CSS Code ein:
Zitat:
.edit_navi_headbg,.edit_rechts_bottom,.shouty,.shouty2,.shouty5{
background: url() #42AF78!important;
}
Ich könnte dir dann später auch den restlichen Code ordnen.

mfg Dominik
______________
Besucht die offizielle Hilfeseite vom Homepage-Baukasten:

Iceblue Generator | Red Generator | Butterfly Generator


Zuletzt bearbeitet von der-bielefeld-club am 18.07.2012, 17:34, insgesamt einmal bearbeitet
Beitrag19.07.2012 um 12:25 (UTC)    
Titel:

Vielen dank,
habe den Content selber noch gemacht.

kleine Frage noch, wie kann ich bei den rechten boxen die überschrift so machen wie in der navi?
damit es schwarz, dick und unterstrichen ist und gleiche schriftgröße.

Gruß
GWE


Zuletzt bearbeitet von gwe-2herren am 19.07.2012, 13:28, insgesamt 2-mal bearbeitet
Beitrag19.07.2012 um 12:36 (UTC)    
Titel:

Hallo,
suchen sie mal bitte folgende Stelle bei Text über dem Design:
Zitat:
/* Titel über rechter Box */
td.sidebar_heading {
color: #ffffff;
font-size: 14px;
font-family: arial,verdana ;
text-align: center;
height: 29px;
background-color: #41a77;
background-image: url(http://img.webme.com/pic/a/akimkin/slider123.jpg);
border: 0px solid #000000; }
Diese Stelle wird nun gegen diesen Code ausgetauscht:
Zitat:

/* Titel über rechter Box */
td.sidebar_heading{
color: #000000;
font-family: arial,verdana;
font-size: 14px;
font-weight: bold;
text-decoration: underline;
background: url() #42AF78;
height: 29px;
}
mfg Dominik
______________
Besucht die offizielle Hilfeseite vom Homepage-Baukasten:

Iceblue Generator | Red Generator | Butterfly Generator
Beiträge der letzten Zeit anzeigen:   


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