Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag03.10.2009 um 18:37 (UTC)    
Titel: Content nach links zur Menü verschieben

Hallo Informatiker!

Ich komme nicht weiter mit meiner "Programmierung" ...
Mein Ziel wäre es, die "Inhaltabteilung" nach links zu verschieben, dort, wo aktuell noch die Menüleiste ist.
Desweiteren würde ich gerne haben, dass alles [einschließlich der oberen, neueren Menüleiste] zentriert wäre ...

Könntet Ihr mir vielleicht weiterhelfen?

Viele Grüße
Andy
Beitrag03.10.2009 um 19:12 (UTC)    
Titel:

Dann mal her mit deinem Code!!!
______________
Search Designs and Grafics? - Come to me!
Beitrag03.10.2009 um 19:17 (UTC)    
Titel:

<style typ= "text/css">

<style type="text/css">

td.headline_bar_left { visibility:hidden; }
<!--td.headline_bar_middle {visibility:hidden; }
<!--td.headline_bar_right { visibility:hidden; }

<!--
td.edit_nav_main {
background-image:url(http://up.picr.de/2852245.jpg);
}

td.edit_content_headline3 {background-image:url(http://up.picr.de/2852531.jpg);
background-color:#FFFFFF;}

td.edit_headline3{background-coloer:#FFFFFF;}

-->
</style>

<style type="text/css" media="screen">
div#nav_container{visibility: hidden;}
li.nav_element{display: none;}
h1#title{display: none;}
h2#title span {display: none;}
li.nav_element{display: none;}
li.nav_element a{display: none;}
div.header{display: none;}´

<!--
/* Allgemeine Einstellungen (Schriftart, Schriftgröße...) */
body {
font-family: Arial
font-size: 18px;
overflow: auto;
padding: 10px;
margin: 0px; }

/* keine Auflistungspunkte vor Navi-Links */
ul, li {
list-style-type: none;
padding: 0px;
margin: 0px; }

/* Abstand zwischen Schrift zum Rand */
li a {
padding-right: 20px;
padding-top: 10px; }

/* Coolmenü positionieren, Werte bei "top" , "left" und "width" anpassen */
div.menu {
position: absolute;
z-index: 3;
top: 190px;
left: 100px;
width:850px; }

/* Breite der Menüpunkte einstellen */
.menu li {
width: 160px;
float: left; }

/* Aussehen der Menüpunkte einstellen */
.menu a {
border: 0px solid #000000;
background-color: #000000;
background-image: url(http://up.picr.de/2852245.jpg);
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
margin: 0px;
display: block;
height: 35px;
color: #000000; }

/* Aussehen der Menüpunkte beim Hover Effekt */
.menu a:hover {
background-color: #000000;
background-image: url(http://up.picr.de/3015808.jpg);
color: #000000; }

#smenu1, #smenu2, #smenu3, #smenu4, #smenu5 {
font-size: 18px;
display: none;
width: 160px;
float: left; }

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a {
font-weight: bold;
padding-top: 5px;
border-top: 0px;
cursor: pointer;
color: #000000; }
//-->
</style>

<!-- Anfang des Scriptes -->
<script type="text/javascript">
<!--
function montre(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'block';
else if (all)
all[id].style.display = 'block';
else
layers[id].display = 'block';
}
}
function cache(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'none';
else if (all)
all[id].style.display = 'none';
else
layers[id].display = 'none';
}
}
//-->
</script>
<!-- Ende des Scriptes -->

<div class="menu">
<li><a href="javascript:void(0);" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">Hauptmenü</a>
<ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
<li><a href="http://sikuner.de.tl/Home.htm">Startseite</a></li>
<li><a href="http://sikuner.de.tl/Kontakt.htm">Kontakt</a></li>
<li><a href="http://sikuner.de.tl/News.htm">Neuigkeiten</a></li>
<li><a href="http://sikuner.de.tl/Impressum.htm">Impressum</a></li>

</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">Siku V-Serie</a>
<ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
<li><a href="http://sikuner.de.tl/Siku-V_Serie.htm">Serienmodelle</a></li>
<li><a href="http://sikuner.de.tl/Siku-V_Serie-_-Werbemodelle.htm">Werbemodelle</a></li>
</ul>
</li>

<li><a href="javascript:void(0);" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">Marktplatz</a>
<ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
<li><a href="http://sikuner.de.tl/Ankauf-_-Verkauf.htm">Ankauf - Verkauf</a></li>
<li><a href="http://sikuner.de.tl/eBay_Angebote.htm">eBay-Angebote</a></li>
</ul>
</li>

<li><a href="javascript:void(0);" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">Linkliste</a>
<ul id="smenu4" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">
<li><a href="Unterlink 4.1">www.siku.de</a></li>
<li><a href="Unterlink 4.2">www.toycar-friends.de</a></li>
<li><a href="Unterlink 4.2">www.oldtoycars.de</a></li>
<li><a href=" http://sikuner.de.tl/Siku-Museum.htm”>siku-Museum</a></li>
<li><a href=" http://sikuner.de.tl/Siku-Museum.htm”>Siku Sammler Club</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu5');" onmouseout="cache('smenu5');">Hauptmenü 5</a>
<ul id="smenu5" onmouseover="montre('smenu5');" onmouseout="cache('smenu5');">
<li><a href="Unterlink 5.1">Untermenü 5.1</a></li>
<li><a href="Unterlink 5.2">Untermenü 5.2</a></li>
</ul>
</li>
</div>

Das sind meine Veränderungen sozusagen, die sich im Feld "Text über dem Design" befinden. Ansonsten habe ich das normale Butterfly-Design verwendet.
Beitrag03.10.2009 um 20:02 (UTC)    
Titel:

Zitat:

<style typ= "text/css">

<style type="text/css">

td.headline_bar_left { visibility:hidden; }
<!--td.headline_bar_middle {visibility:hidden; }
<!--td.headline_bar_right { visibility:hidden; }

<!--
td.edit_nav_main {
background-image:url(http://up.picr.de/2852245.jpg);
}

td.edit_content_headline3 {background-image:url(http://up.picr.de/2852531.jpg);
background-color:#FFFFFF;}

td.edit_headline3{background-coloer:#FFFFFF;}

-->
</style>

<style type="text/css" media="screen">
div#nav_container{visibility: hidden;}
li.nav_element{display: none;}
h1#title{display: none;}
h2#title span {display: none;}
li.nav_element{display: none;}
li.nav_element a{display: none;}
div.header{display: none;}´

<!--
/* Allgemeine Einstellungen (Schriftart, Schriftgröße...) */
body {
font-family: Arial
font-size: 18px;
overflow: auto;
padding: 10px;
margin: 0px; }

/* keine Auflistungspunkte vor Navi-Links */
ul, li {
list-style-type: none;
padding: 0px;
margin: 0px; }

/* Abstand zwischen Schrift zum Rand */
li a {
padding-right: 20px;
padding-top: 10px; }

/* Coolmenü positionieren, Werte bei "top" , "left" und "width" anpassen */
div.menu {
position: absolute;
z-index: 3;
top: 190px;
left: 100px;
width:850px;
}

/* Breite der Menüpunkte einstellen */
.menu li {
width: 160px;
float: left; }

/* Aussehen der Menüpunkte einstellen */
.menu a {
border: 0px solid #000000;
background-color: #000000;
background-image: url(http://up.picr.de/2852245.jpg);
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
margin: 0px;
display: block;
height: 35px;
color: #000000; }

/* Aussehen der Menüpunkte beim Hover Effekt */
.menu a:hover {
background-color: #000000;
background-image: url(http://up.picr.de/3015808.jpg);
color: #000000; }

#smenu1, #smenu2, #smenu3, #smenu4, #smenu5 {
font-size: 18px;
display: none;
width: 160px;
float: left; }

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a {
font-weight: bold;
padding-top: 5px;
border-top: 0px;
cursor: pointer;
color: #000000; }
//-->
</style>

<!-- Anfang des Scriptes -->
<script type="text/javascript">
<!--
function montre(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'block';
else if (all)
all[id].style.display = 'block';
else
layers[id].display = 'block';
}
}
function cache(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'none';
else if (all)
all[id].style.display = 'none';
else
layers[id].display = 'none';
}
}
//-->
</script>
<!-- Ende des Scriptes -->

<div class="menu">
<li><a href="javascript:void(0);" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">Hauptmenü</a>
<ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
<li><a href="http://sikuner.de.tl/Home.htm">Startseite</a></li>
<li><a href="http://sikuner.de.tl/Kontakt.htm">Kontakt</a></li>
<li><a href="http://sikuner.de.tl/News.htm">Neuigkeiten</a></li>
<li><a href="http://sikuner.de.tl/Impressum.htm">Impressum</a></li>

</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">Siku V-Serie</a>
<ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
<li><a href="http://sikuner.de.tl/Siku-V_Serie.htm">Serienmodelle</a></li>
<li><a href="http://sikuner.de.tl/Siku-V_Serie-_-Werbemodelle.htm">Werbemodelle</a></li>
</ul>
</li>

<li><a href="javascript:void(0);" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">Marktplatz</a>
<ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
<li><a href="http://sikuner.de.tl/Ankauf-_-Verkauf.htm">Ankauf - Verkauf</a></li>
<li><a href="http://sikuner.de.tl/eBay_Angebote.htm">eBay-Angebote</a></li>
</ul>
</li>

<li><a href="javascript:void(0);" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">Linkliste</a>
<ul id="smenu4" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">
<li><a href="Unterlink 4.1">www.siku.de</a></li>
<li><a href="Unterlink 4.2">www.toycar-friends.de</a></li>
<li><a href="Unterlink 4.2">www.oldtoycars.de</a></li>
<li><a href=" http://sikuner.de.tl/Siku-Museum.htm”>siku-Museum</a></li>
<li><a href=" http://sikuner.de.tl/Siku-Museum.htm”>Siku Sammler Club</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu5');" onmouseout="cache('smenu5');">Hauptmenü 5</a>
<ul id="smenu5" onmouseover="montre('smenu5');" onmouseout="cache('smenu5');">
<li><a href="Unterlink 5.1">Untermenü 5.1</a></li>
<li><a href="Unterlink 5.2">Untermenü 5.2</a></li>
</ul>
</li>
</div>


_____________________________________________________________

Indem Du die Zahlen der rot-markierten Codes umstellst, kannst du dein Coolmenü positionieren.

Deinen Content müsstest du so verschieben können:
(Text über dem Design)

______________________________________
Zitat:
td.edit_content {
top:XXXpx; -> Abstand von oberster Designkante
width:XXXpx; -> breite
height:XXXpx;} -> höhe

_______________________________________



Und nun das zentrieren der ganzen Geschichte:


Text über dem Design:

_______________________________________
Zitat:
<div align="center">


_______________________________________

Text unter dem Design:

_______________________________________
Zitat:
</div>

______________
Search Designs and Grafics? - Come to me!


Zuletzt bearbeitet von grafic4you am 03.10.2009, 21:05, insgesamt 2-mal bearbeitet
Beitrag03.10.2009 um 20:23 (UTC)    
Titel:

Also irgendwie klappt das nicht so ganz. Die Breite der Menüleiste konnte ich anpassen, aber zentrieren will er nicht...
<div align="center"> habe ich ganz oben, noch vor den CSS-Style-Tags eingegeben.
Desweiteren würde ich noch gerne wissen, wie ich das denn machen könnte, dass die Menüleiste links verschwindet, denn der Content muss da ja hin. Diese invisible Tags habe ich schon versucht, klappt aber nicht ...
Aber wichtig ist, dass ich noch auf die Inhalte des Menüs zugreifen kann, denn ich habe die Seiten von dem alten auf die neue Leiste verlinkt. Wenn ich das lösche, verschwinden die doch, oder?

Danke für die Mühe!
Smile
Beitrag03.10.2009 um 21:48 (UTC)    
Titel:

Vielleicht wird dir diese Seite weiterhelfen:
http://freizeit-hp.de.tl/Navigation-ausblenden.htm Wink

Zum zentrieren der Menüpunkte, musst du folgendes auf 0 stelen:
Zitat:
/* Abstand zwischen Schrift zum Rand */
li a {
padding-right: 20px;
padding-top: 10px; }
mfg Dominik
______________
Besucht die offizielle Hilfeseite vom Homepage-Baukasten:

Iceblue Generator | Red Generator | Butterfly Generator
Beitrag03.10.2009 um 22:11 (UTC)    
Titel:

Ich bin jetzt auf Iceblue umgestiegen, weil bei Butterfly konnte ich mein Vorhaben nicht umsetzen...
Hier habe ich den Überblick jetzt komplett verloren.
Was möchte ich ändern?

1. Der Seitenhintergrund sollte so grau sein, wie der Forenhintergrund hier (inkl. dem ganzen Balkenzeugs).
2. Der blau Scroll-Balken auf jeder Seite sollte nicht mehr da sein. Wie kommt der eigentlich da hin??
3. Ich müsste den Content nach unten verschieden, sodass ich die Menüleiste schön zwischen Header und Content einsetzen kann.
4. Der Content-Inhalt sollte komplett weiß sein.

Herrje, ist das alles kompliziert..
Achja, der Durcheinander-"Code" noch:

<div align="center">

<style type="text/css"><!--
.edit_rechts_tabelle,.edit_rechts_cbg{width: 100%;}
.edit_navi_headbg{display:none;}

td.edit_rechts_cbg{background-image: url(http://img.webme.com/pic/f/freizeit-hp/content_bg.png);}
td.edit_content_top{background-image: url(http://img.webme.com/pic/f/freizeit-hp/content_top.png);}
td.edit_content{background-image: url(http://img.webme.com/pic/f/freizeit-hp/content.png);}
td.edit_content_bottom{background-image: url(http://img.webme.com/pic/f/freizeit-hp/content_bottom.png);}
td.edit_content_bottom2{background-image: url(http://img.webme.com/pic/f/freizeit-hp/content_bottom2.png);}
--></style>
<style type="text/css">

<!-- td.edit_navi_headbg{display: none;}
<!--td.edit_below_nav{display: none;}

td.nav_heading{ visibility:hidden;}
td.nav{visibility:hidden; }
td.nav:hover{visibility:hidden; }
td.nav a{visibility:hidden;}
</style>


<!--
td.edit_content{background-image:none;background-color: #ffffff;}
-->
</style>

<!--td.headline_bar_middle {visibility:hidden; }
<!--td.headline_bar_right { visibility:hidden; }

<!--
td.edit_nav_main {;
}

td.edit_content_headline3 {background-image:url(http://up.picr.de/2852531.jpg);
background-color:#FFFFFF;}

td.edit_headline3{background-coloer:#FFFFFF;}

-->
</style>

<style type="text/css" media="screen">
div#nav_container{visibility: hidden;}
li.nav_element{display: none;}
h1#title{display: none;}
h2#title span {display: none;}
li.nav_element{display: none;}
li.nav_element a{display: none;}
div.header{display: none;}´

<!--
/* Allgemeine Einstellungen (Schriftart, Schriftgröße...) */
body {
font-family: Arial
font-size: 18px;
overflow: auto;
padding: 10px;
margin: 0px; }

/* keine Auflistungspunkte vor Navi-Links */
ul, li {
list-style-type: none;
padding: 0px;
margin: 0px; }

/* Abstand zwischen Schrift zum Rand */
li a {
padding-right: 20px;
padding-top: 10px; }

/* Coolmenü positionieren, Werte bei "top" , "left" und "width" anpassen */
div.menu {
position: absolute;
z-index: 3;
top: 126px;
left: 150px;
width:1024px; }

/* Breite der Menüpunkte einstellen */
.menu li {
width: 160px;
float: left; }

/* Aussehen der Menüpunkte einstellen */
.menu a {
border: 0px solid #000000;
background-color: #000000;
background-image: url(http://up.picr.de/2852245.jpg);
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
margin: 0px;
display: block;
height: 35px;
color: #000000; }

/* Aussehen der Menüpunkte beim Hover Effekt */
.menu a:hover {
background-color: #000000;
background-image: url(http://up.picr.de/3015808.jpg);
color: #000000; }

#smenu1, #smenu2, #smenu3, #smenu4, #smenu5 {
font-size: 18px;
display: none;
width: 160px;
float: left; }

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a {
font-weight: bold;
padding-top: 5px;
border-top: 0px;
cursor: pointer;
color: #000000; }
//-->
</style>

<!-- Anfang des Scriptes -->
<script type="text/javascript">
<!--
function montre(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'block';
else if (all)
all[id].style.display = 'block';
else
layers[id].display = 'block';
}
}
function cache(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'none';
else if (all)
all[id].style.display = 'none';
else
layers[id].display = 'none';
}
}
//-->
</script>
<!-- Ende des Scriptes -->

<div class="menu">
<li><a href="javascript:void(0);" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">Hauptmenü</a>
<ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
<li><a href="http://sikuner.de.tl/Home.htm">Startseite</a></li>
<li><a href="http://sikuner.de.tl/Kontakt.htm">Kontakt</a></li>
<li><a href="http://sikuner.de.tl/News.htm">Neuigkeiten</a></li>
<li><a href="http://sikuner.de.tl/Impressum.htm">Impressum</a></li>

</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">Siku V-Serie</a>
<ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
<li><a href="http://sikuner.de.tl/Siku-V_Serie.htm">Serienmodelle</a></li>
<li><a href="http://sikuner.de.tl/Siku-V_Serie-_-Werbemodelle.htm">Werbemodelle</a></li>
</ul>
</li>

<li><a href="javascript:void(0);" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">Marktplatz</a>
<ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
<li><a href="http://sikuner.de.tl/Ankauf-_-Verkauf.htm">Ankauf - Verkauf</a></li>
<li><a href="http://sikuner.de.tl/eBay_Angebote.htm">eBay-Angebote</a></li>
</ul>
</li>

<li><a href="javascript:void(0);" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">Linkliste</a>
<ul id="smenu4" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">
<li><a href="Unterlink 4.1">www.siku.de</a></li>
<li><a href="Unterlink 4.2">www.toycar-friends.de</a></li>
<li><a href="Unterlink 4.2">www.oldtoycars.de</a></li>
<li><a href=" http://sikuner.de.tl/Siku-Museum.htm”>siku-Museum</a></li>
<li><a href=" http://sikuner.de.tl/Siku-Museum.htm”>Siku Sammler Club</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu5');" onmouseout="cache('smenu5');">Hauptmenü 5</a>
<ul id="smenu5" onmouseover="montre('smenu5');" onmouseout="cache('smenu5');">
<li><a href="Unterlink 5.1">Untermenü 5.1</a></li>
<li><a href="Unterlink 5.2">Untermenü 5.2</a></li>
</ul>
</li>
</div>
Beitrag05.10.2009 um 12:40 (UTC)    
Titel:

Kann mir denn keiner helfen..? Sad
Beiträge der letzten Zeit anzeigen:   


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