Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag29.08.2010 um 21:24 (UTC)    
Titel: [erledigt] Bild anstelle von Navi

Ich habe zur Zeit meine Navigation auf bestimmten Seiten ausgeblendet. Allerdings rutscht dann die "mittlere Box" ganz nach links und die rechte Box rutscht etwas nach. Deshalb würde ich gerne anstelle der Navigation eine linke Box mit einem Bild oder sonst irgendwas (da fällt mir schon noch was ein Smile ) einfügen.
Wie geht das?

Poste hier mal meinen Code:
Zitat:




/* Allgemein */

body {


background-image: url(http://i919.photobucket.com/albums/ad40/oida_schwede/possible2-1.jpg?t=1283111009); /* Wenn vorhanden, Klammer mit Bildadresse füllen */
background-color: #FAEBD7; /* Hintergrundfarbe mithilfe eines Hex-Codes*/
font-family: sans-serif; /* Schriftart */
font-size: 0.8em; /* Schriftgröße */
text-align: center; /* zentriert das Design im IE */
}

a {
color: #8B008B /* Farbe der Links */
}
/* Container */


#design1 {
width: 900px; /* Breite des Designs */
margin: 0 auto; /* zentriert das Design */
text-align: left; /* positioniert den Text links */
background-color: #FFF0F5; /* Hintergrundfarbe des Containers */
border: 1px solid #FFF0F5; /* Rand um das Design */
}
#unten {
clear: both; /* sorgt dafür, das Hintergrundfarbe über gesamten Container läuft */
}

/* Header */

#header_container {
height: 199px; /* Höhe des Headers */
background-image: url(http://i919.photobucket.com/albums/ad40/oida_schwede/header.png?t=12831115705);
background-color: #transparent; /* Hintergrundfarbe des Headers */
border-bottom: 0px solid #FFF0F5; /* Rand am unteren Ende des Headers */
}

#pre_header, #post_header {
display: none; /* entfernt nicht genutzte Klassen */
}

#header {
margin: 0px; /* entfernt den weißen Rand oben */
padding-left: 400px; /* Abstand vom linken Rand */
padding-top: 50px; /* Abstand vom oberen Rand */
color: #000; /* Schriftfarbe */
font-family: serif; /* Schriftart */
}

/* Navigation */

#nav_heading {
display: none; /* nicht genutzte Klasse wird entfernt */
}

#nav {
padding: 0; /* keinen Innenabstand der Liste (links und rechts) */
margin: 0; /* keinen Außenabstand der Liste (oben und untent) */
float: left; /* Richtet die Navigation links aus und sorgt dafür, dass der Content rechts daneben ist */
width: 150px; /* Definiert die Breite der Navigation */
}

#nav li {
list-style-type: none; /* löscht den Listenpunkt */
padding: 2px; /* Innenabstand eines einzelnen Punktes */
padding-left: 15px; /* Innenabstand eines einzelnen Punktes nach links */
padding-right: 15px; /* Innenabstand eines einzelnen Punktes nach rechts */
font-size: 1.0em; /* Schriftgröße */
display: block; /* vergrößert die Navigation auf volle nav_container Breite */
border-bottom: 1px solid #BC8762; /* unterer Rand */
}

#nav li:hover {
background-color: #ffd194; /* Hintergrundfarbe beim Hovereffekt */
}



#nav a {
text-decoration: none; /* macht Verlinkungen in der Navigation ohne Unterstrich */
}

#nav a:hover {
color: #000; /* ändert die Schriftfarbe beim Hovereffekt */
}

/* Content Container */

#content_container {
width: 749px; /* Definiert die Breite des gesamten Contentbereiches inklusive der Sidebar (Breite des Containers - der Navigation - Rahmen des Contents) */
float: left; /* Sorgt dafür, dass der gesamte Content (inkl. Header) auch wirklich rechts steht */
border-left: 1px solid #BC8762; /* kleine Abtrennung zwischen Content und Navigation, Benutzung optional */
}

/* Content */

#content {
width: 518px; /* Breite des Inhaltbereichs */
padding: 15px; /* Innenabstände des Inhaltsbereiches */
float: left; /* wird für die Anordnung benötigt (Sidebar rechts neben dem Content */
border-right: 1px solid #BC8762; /* Kleine Trennung zwischen Sidebar und Content. Benutzung optional */
}

/* Sidebar */

#sidebar_container {
float: left; /* wird für die Anordnung benötigt (Sidebar rechts neben dem Content */
width: 170px; /* Breite der Sidebar */
padding: 15px; /* Innenabstand der Sidebar */
}




div.menu {
position: absolute;
left: 50%;
top: 190px;
margin-left: +300px;
width: 900px; }
<!--
/* Allgemeine Einstellungen (Schriftart, Schriftgröße...) */
body {
font-family: Verdana, sans-serif;
font-size: 14px;
overflow: auto;
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: 5px; }

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

/* Breite der Menüpunkte einstellen */
.menu li {
width: 200px;
float: left; }
/* Aussehen der Menüpunkte einstellen */
.menu a {
border: 0px solid #CDC1C5;
background-color: #CDC1C5;
background-image: url(URL);
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
margin: 0px;
display: block;
height: 23px;
color: #FFF5EE ; }


/* Aussehen der Menüpunkte beim Hover Effekt */
.menu a:hover {
background-color: #F5DEB3
background-image: url(URL);
color: # #FFF5EE; }

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

#smenu1 a, #smenu2 a, #smenu3 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 class="top_menu"><a href="http://cindysimsdownloads.de.tl/">Home</a></li>
</li>





<li><a href="javascript:void(0);" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">Downloads</a>
<ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
<li><a href="http://cindysimsdownloads.de.tl/Erwachsene-weiblich.htm">Erwachsene weiblich</a></li>
<li><a href="http://cindysimsdownloads.de.tl/Teenager-weiblich.htm">Teenager weiblich</a></li>
<li><a href="http://cindysimsdownloads.de.tl/Kleinkind-weiblich.htm2">Kleinkind weiblich</a></li>
<li><a href="http://cindysimsdownloads.de.tl/Erwachsene-m.ae.nnlich.htm">Erwachsene männlich</a></li>
<li><a href="http://cindysimsdownloads.de.tl/Kleinkind-m.ae.nnlich.htm">Kleinkind männlich</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">Über diese Seite</a>
<ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
<li><a href="http://cindysimsdownloads.de.tl/G.ae.stebuch.htm">Gästebuch</a></li>
<li><a href="http://cindysimsdownloads.de.tl/Kontakt.htm2">Kontakt</a></li>
<li><a href="http://cindysimsdownloads.de.tl/Anleitung-.htm">Downloadanleitung</a></li>
<li><a href="http://cindysimsdownloads.de.tl/Links.htm">Links</a></li>
<li><a href="http://cindysimsdownloads.de.tl/FAQ-und-TOU.htm">FAQ & TOU</a></li>
<li><a href="http://cindysimsdownloads.de.tl/Diese-Seite-unterst.ue.tzen.htm">
Seite unterstützen</li>
</ul>

</div>


und der ist auf den einzelnen Seiten zum weglassen der Navi:

Zitat:
<style type="text/css">
#nav {
display: none;
}


Wie bekomm ich jetzt die linke Box da hin?

edit: hab oben bei content flow right statt left eingefügt, jetzt ist alles in der Position, wie ich es haben will. Jetzt würd ich nur links gern noch eine Box mit Bild einfügen.


Zuletzt bearbeitet von cindysimsdownloads am 29.08.2010, 23:34, insgesamt 2-mal bearbeitet
Beitrag29.08.2010 um 22:34 (UTC)    
Titel:

habs selbst rausgefunden. Hier der Code für Interessierte:

Zitat:
<!-- CSS für die Positionierung -->
<style type="text/css">
<!--
table.rb_neu{
position:absolute;left:250px;top:350px;}

-->
</style> <table class="rb_neu" width="100" border="0" cellspacing="0" cellpadding="0" id="table1">
<tr>
<td height="24" class="sidebar_heading" background="">&nbsp;</td>
</tr>
<tr>
<td style="background-repeat: no-repeat;background-color:#FFF0F5;" background="" class="shouty"> coming soon <MARQUEE style="border: 1px solid #333333; width:100px; height:200px; " direction="left" behavior="scroll" scrollamount="5" >
<IMG src="http://i919.photobucket.com/albums/ad40/oida_schwede/bild3.png?t=1283120913"><IMG src="http://i919.photobucket.com/albums/ad40/oida_schwede/bild2.png?t=1283120933"><IMG src="http://i919.photobucket.com/albums/ad40/oida_schwede/bild1.png?t=1283120964">
</MARQUEE> <br><br><p><br><br></td>
</tr>
<tr>
<td background="" height="27" class="edit_rb_footer">
&nbsp;</td>
</tr>
</table>


Mit Bildlauf. Bildadressen, Text und "höhe/weite"zahlen müsst ihr halt austauschen.
Beiträge der letzten Zeit anzeigen:   


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