Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag30.08.2010 um 10:59 (UTC)    
Titel: [erledigt] Text nach unten verschoben wegen linker Box

edit: Erstes Problem gelöst. Bitte 2. Post lesen!


Hab normalerweise 1366 x 768 Auflösung und meine HP gerade mit 1024 Auflösung getestet. Ergebnis: Das coolmenü und die linke Box sind nach rechts verschoben. Was muss ich ändern? Poste hier mal meinen Code:

Unter Design einstellen (CSS ohne Style tags:)

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: right; /* 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 dieser Code ist einzeln auf manchen Seiten, er erzeugt eine linke Box anstelle der Navigation:

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

-->
</style>
<table width="100" cellspacing="0" cellpadding="0" border="0" id="table1" class="rb_neu">
<tbody>
<tr>
<td height="24" background="" class="sidebar_heading">&nbsp;</td>
</tr>
<tr>
<td background="" class="shouty" style="background-repeat: no-repeat; background-color: rgb(255, 240, 245);">coming soon <marquee scrollamount="5" behavior="scroll" direction="left" style="border: 1px solid rgb(51, 51, 51); width: 100px; height: 200px;"> <img src="http://i919.photobucket.com/albums/ad40/oida_schwede/bild3.png?t=1283120913" alt="" /><img src="http://i919.photobucket.com/albums/ad40/oida_schwede/bild2.png?t=1283120933" alt="" /><img src="http://i919.photobucket.com/albums/ad40/oida_schwede/bild1.png?t=1283120964" alt="" /> </marquee> <br />
<br />
<p><br />
&nbsp;</p>
</td>
</tr>
<tr>
<td height="27" background="" class="edit_rb_footer">&nbsp;</td>
</tr>
</tbody>
</table>
<style type="text/css">
#nav {
display: none;
}
</style>


Zuletzt bearbeitet von cindysimsdownloads am 30.08.2010, 16:52, insgesamt 3-mal bearbeitet
Beitrag30.08.2010 um 11:35 (UTC)    
Titel: Problem gelöst - neues Problem

Habe das Coolmenü und die linke Box jetzt für alle Auflösungen richtig positioniert. Aber es gibt ein neues Problem. Auf den Seiten, auf denen ich die linke Box positioniert habe, ist der Text auf dem mittleren Feld jetzt nach unten gerutscht! Auch bei den Extras.

Hier der neue Code für die linke Box:

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

-->
</style>
<table width="100" cellspacing="0" cellpadding="0" border="0" class="rb_neu" id="table1">
<tbody>
<tr>
<td height="24" background="" class="sidebar_heading">&nbsp;</td>
</tr>
<tr>
<td background="" style="background-repeat: no-repeat; background-color: rgb(255, 240, 245);" class="shouty">coming soon <marquee style="border: 1px solid rgb(51, 51, 51); width: 100px; height: 200px;" direction="left" behavior="scroll" scrollamount="5"> <img alt="" src="http://i919.photobucket.com/albums/ad40/oida_schwede/bild3.png?t=1283120913" /><img alt="" src="http://i919.photobucket.com/albums/ad40/oida_schwede/bild2.png?t=1283120933" /><img alt="" src="http://i919.photobucket.com/albums/ad40/oida_schwede/bild1.png?t=1283120964" /> </marquee> <br />
<br />
<p><br />
&nbsp;</p>
</td>
</tr>
<tr>
<td height="27" background="" class="edit_rb_footer">&nbsp;</td>
</tr>
</tbody>
</table>
<style type="text/css">
#nav {
display: none;
}
</style>
Beitrag30.08.2010 um 11:37 (UTC)    
Titel:

Code:
div.menu {
position: absolute;
[b]left: 50%;[/b]
top: 190px;
[b]margin-left: +300px;[/b]
width: 900px; }
<!--
/* Allgemeine Einstellungen (Schriftart, Schriftgröße...) */
body {
font-family: Verdana, sans-serif;
font-size: 14px;
overflow: auto;
margin: 0px; }


Das left 50% bewirkt, dass das Coolmenü von der Mitte aus Positioniert wird (um die margin-left: 300px

Da sich dein Design nicht automatisch verbreitern, könntest du mal versuchen das left:50% wegzulassen und das Menü nur über margin-left zu positionieren. Hat bei mir auch geklappt Mr. Green
Edit: Kann aber sein, dass du erst noch eine Tabelle um das Design legen musst.


ComicBase


Zuletzt bearbeitet von comicbase am 30.08.2010, 12:38, insgesamt einmal bearbeitet
Beitrag30.08.2010 um 11:39 (UTC)    
Titel:

Danke, aber das mit dem Coolmenü hab ich schon (siehe oberer Beitrag). Mein jetziges Problem ist, dass durch die linke Box der Text im mittleren Bereich nach unten rutscht. Übrigens sieht man die Bilder von der linken Box in dem normalen Editor auch.

Edit: Problem gelöst. Hier der "richtige" Code für interessierte:

Zitat:


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

-->

-->
</style>
<table width="100" cellspacing="0" cellpadding="0" border="0" class="rb_neu" id="table1">
<tbody>
<tr>
<td height="24" background="" class="sidebar_heading">&nbsp;</td>
</tr>
<tr>
<td background="" style="background-repeat: no-repeat; background-color: rgb(255, 240, 245);" class="shouty">coming soon <marquee style="border: 1px solid rgb(51, 51, 51); width: 100px; height: 200px;" direction="left" behavior="scroll" scrollamount="5"> <img alt="" src="http://i919.photobucket.com/albums/ad40/oida_schwede/bild3.png?t=1283120913" /><img alt="" src="http://i919.photobucket.com/albums/ad40/oida_schwede/bild2.png?t=1283120933" /><img alt="" src="http://i919.photobucket.com/albums/ad40/oida_schwede/bild1.png?t=1283120964" /> </marquee>
<p>&nbsp;</p>
</td>
</tr>
<tr>
<td height="27" background="" class="edit_rb_footer">&nbsp;</td>
</tr>
</tbody>
</table>
<style type="text/css">
#nav {
display: none;
}
</style>


Zuletzt bearbeitet von cindysimsdownloads am 30.08.2010, 16:52, insgesamt einmal bearbeitet
Beiträge der letzten Zeit anzeigen:   


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