Suche im Forum:
Suchen


Autor Nachricht
Beitrag09.08.2009 um 18:40 (UTC)    
Titel: CSS Design: Zu viele Seiten?

Hallo HPBK-User!

Ich hatte heute ein Design von Zitapage gefunden und gleich etwas optimiert für meinem Gebrauch. Nun ist es mein Problem, dass oben ein fetter Weißer Bolzen zu sehen ist. Den könnt ihe hier sehen: http://todesboten-home.de.tl/willkommen.htm

Hier der Code:

Text über dem Design:
Code:

<div id="Design">

<div id="Header"></div>

<div id="Coolmenu"></div>

<style type="text/css" media="screen">
<!--
/* Allgemeine Einstellungen (Schriftart, Schriftgröße...) */
body
{
font-family: Verdana, sans-serif;
font-size: 14px;
overflow: auto;
padding: 10px;
margin: 0px;
}

/* Durch diesen Code werden keine Auflistungspunkte angezeigt */
ul, li
{
list-style-type: none;
padding: 0px;
margin: 0px;
}

/* Hier könnt ihr die Entfernung der Schrift zum Rand einstellen */
li a
{
padding-right: 20px;padding-top: 5px;
}

/* Hier könnt ihr das Coolmenü positionieren, dazu die Werte bei "top" und "margin-left" verändern */
div.menu
{
position: absolute;
z-index: 3;
top: 358px;
left: 40%;
margin-left:-330px;
width:900px;
}

/* Hier könnt ihr die Breite der Menüpunkte einstellen */
.menu li
{
width: 150px;
float: left;
}

/* Hier stellt ihr das ganze Aussehen der Menüpunkte ein */
.menu a
{
border: 0px solid #000000;
background-color: #000000;
background-image: url(URL);
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
margin: 0px;
display: block;
height: 23px;
color: #00CCFF;
}

/* Hier stellt ihr das ganze Aussehen der Menüpunkte beim Hover Effekt ein */
.menu a:hover
{
background-color: #FF66FF;
background-image: url(URL);
color: #000000;
}

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

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a, #smenu6 a
{
font-weight: bold;
padding-top: 5px;
border-top: 0px;
cursor: pointer;
color: #FFFFFF;
}
//-->
</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ü 1</a>
<ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
<li><a href="http://todesboten-home.de.tl/Willkommen.tm">Willkommen</a></li>
<li><a href="http://todesboten-home.de.tl/News.htm">News</a></li>
<li><a href="http://todesboten-home.de.tl/Regelwerk.htm"Regeln</a></li>
<li><a href="http://todesboten-home.de.tl/bewerbung.htm">Bewerbung</a></li>
<li><a href="http://todesboten-home.de.tl/Fakten.htm">Fakten</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">Hauptmenü 2</a>
<ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
<li><a href="http://todesboten-home.de.tl/Bef.oe.rderung.htm">Beförderung</a></li>
<li><a href="http://todesboten-home.de.tl/Witze.htm">Witze</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">Hauptmenü 3</a>
<ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
<li><a href="http://todesboten-home.de.tl/Teamspeak.htm">Teamspeak</a></li>
<li><a href="http://todesboten-home.de.tl/Archiv">Archiv</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">Hauptmenü 4</a>
<ul id="smenu4" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">
<li><a href="http://todesboten-home.de.tl/geschichte.htm">Geschichte</a></li>
<li><a href="http://todesboten-home.de.tl/Addons.htm">Addons</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="http://todesboten-home.de.tl/raidplaner.htm">Raidplaner</a></li>
<li><a href="http://todesboten-home.de.tl/forum.htm">Forum</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu6');" onmouseout="cache('smenu6');">Hauptmenü 5</a>
<ul id="smenu6" onmouseover="montre('smenu6');" onmouseout="cache('smenu6');">
<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>


Text unter dem Design:
Code:

<div id="Footer">
<div style="text-align: center;">Design by www.zitapage.com </div></div>


CSS-Code ohne Style-tags:
Code:

h1#title{display: none;}
h2#title span {display: none;}
div.header{display: none;}
li.nav_element{list-style-type: none;}



body {
background-color: #000000;}


p, div, b{
font-family: Arial;
font-size: 12px;
text-decoration: none;}


a{color : #000000;
font-size : 12px;
font-weight: bold;
text-decoration : none;}


a:hover {
color : #000000;
font-size : 12px;
text-decoration : underline;}


a:active {color : #000000;
font-size : 12px;
text-decoration : none;}


li.nav_element a{
color:#ffffff;
display: block;
margin: 5px;
padding-left: 10px;
text-decoration: none;
width: 120px;
height: 20px;
background-image:url();
background-color:#FFFFFF;}



h1#title{display: none;}
h2#title span {display: none;}
div.header{display: none;}
li.nav_element{list-style-type: none;}



body {
background-color: #000000;}


p, div, b{
font-family: Arial;
font-size: 12px;
text-decoration: none;}


a{color : #000000;
font-size : 12px;
font-weight: bold;
text-decoration : none;}


a:hover {
color : #000000;
font-size : 12px;
text-decoration : underline;}


a:active {color : #000000;
font-size : 12px;
text-decoration : none;}

#box4{
background-color: #000000;
border: 1px solid #bababa;
width: 125px;
height: 30px;
color: #000000;
font-size: 12px;
font-weight: bold;
float: right;
margin: 0px 0px 0px 0px;}


#Design {
margin : 0 auto;
border: 2px solid #bababa;

margin-top: 10px;
margin-bottom: 10px;
width : 1000px;
background-color: #ffffff;
padding: 5px;}


#Header{
background-image: url(http://www.Bildermonster24.de/images/446_Todesboten2.gif);
background-color: #000000;
border: 2px solid #bababa;
width : 995px;
height : 150px;
float : left;
margin: ´5px 0px 0px 0px;}

#box{
background-color: #bababa;
border: 2px solid #bababa;
width: 176px;
height: 30px;
color: #000000;
font-size: 12px;
font-weight: bold;
float: left;
margin: 2px 0px 5px 0px;}

#menu{
background-color: #000000;
background-image: url();
width: 996px;
height: 60px;
color: #bababa;
font-size: 12px;
font-weight: bold;
float: left;
margin: 5px 0px 5px 0px;}



#Coolmenu{
background-color: #000000;
background-image: url(http://img.webme.com/pic/t/testseite2009/2thheader.png);
width: 995px;
height: 100px;
color: #bababa;
font-size: 12px;
font-weight: bold;
float: left;
margin: 5px 0px 5px 0px;}




#content{
width: 980px;
background-image : url();
background-color: #ffffff;
color: #bababa;
border: 1px solid #bababa;
font-size: 12px;
float: left;
margin: 0px 0px 0px 0px;
padding: 10px;}


#Footer{
width: 985px;
height: 20px;
background-color: #000000;
color: #bababa;
font-size: 12px;
text-align: center;
clear: both;
margin: 5px 0px 0px 0px;
padding: 5px;}


[/code]


Zuletzt bearbeitet von todesboten-home am 09.08.2009, 20:04, insgesamt einmal bearbeitet
Beitrag09.08.2009 um 20:03 (UTC)    
Titel:

ehrlich gesagt seehe ich nichteinmal den "Weißen Bolzen"

MFG Matz
Beitrag10.08.2009 um 06:56 (UTC)    
Titel:

Unter dem Menü ist eine Weiße Fläche, die ich aber nicht haben möchte, dass soll der "Bolzen" sein. Kennt wer da den Fehler?
Beitrag10.08.2009 um 07:50 (UTC)    
Titel:

Unter der Navi oben ist das weiße Textfeld (#content) .
Sonst wüsste ich nicht, was du mit weißen Bolzen" meinst .
Auch können wir nicht sehen, wie das Design denn ursprünglich aussehen sollte

Du hast 4 Möglichkeiten :

- entweder an den wenden, der den Code erstellt hat
- oder du schaust in den deinen Code nach background-color:#FFFFFF;
- also = prüfen, was hat da alles weißen Hintergrund, und welche Höhe ?
- oder ein User macht sie hier die Mühe, deinen Code selbst zu testen

- oder .... das Tool Mozilla Firebug benutzen
- http://www.homepage-baukasten.de/forum/viewtopic.php?t=102256
- ist für den FF Mozilla-Browser .....
- man besucht mit dem Mozilla Browser seine Homepage
- man fährt mit der Maus ins Design in den störenden Bereich
- Mozilla Firebung zeigt unten in einem Fenster die dazugehörige ID / Klasse an
- man weiß sofort , welche ID / Klasse anzupassen ist Wink

Gruß Wolfgang
______________


Zuletzt bearbeitet von 24939 am 10.08.2009, 08:51, insgesamt 2-mal bearbeitet
Beitrag10.08.2009 um 08:36 (UTC)    
Titel:

Mein Design, das grad Problematisch ist:
todesboten-home.de.tl/willkommen.htm

So sollte es aussehen:
Testseite2009.de.tl
Beiträge der letzten Zeit anzeigen:   


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