Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag15.10.2010 um 15:55 (UTC)    
Titel: Design an Auflösung anpassen

Solange ich mit meiner 1366 x 768 meine HP öffne, ist alles in Ordnung. Ändere ich aber die Bildschirmauflösung, erscheint unten ein Scrollbalken, da das Design zu lang ist. Was muss ich am Code ändern, damit sich das Hintergrundbild und das Design automatisch an die Auflösung anpassen? Hier mein Code:


Zitat:
h1#header {
display:none;}

h2#title{
display:none;}

/* Allgemein */

body {


background-image: url(); /* Wenn vorhanden, Klammer mit Bildadresse füllen */
background-color: #005b5b; /* Hintergrundfarbe mithilfe eines Hex-Codes*/
font-family: sans-serif; /* Schriftart */
font-size: 1.0em; /* Schriftgröße */
text-align: center; /* zentriert das Design im IE */
}
a {
color: #005b5b /* Farbe der Links */
}
/* Container */


#design1 {
width: 1200px; /* Breite des Designs */
margin: 0 auto; /* zentriert das Design */
text-align: left; /* positioniert den Text links */
background-color: #Fcfcfcf; /* Hintergrundfarbe des Containers */
background-image: url(http://img153.imageshack.us/img153/139/designgut2.png);
color: #0000;
border: 0px solid #F0FFF0; /* Rand um das Design */
}
#unten {
clear: both; /* sorgt dafür, das Hintergrundfarbe über gesamten Container läuft */
}

/* Header */

#header_container {
height: 310px; /* Höhe des Headers */
background-image: url();
background-color: transparent; /* Hintergrundfarbe des Headers */
border-bottom: 0px solid #F0FFF0; /* 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 */

}

/* Navigation */

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

#nav {
padding: 0px; /* keinen Innenabstand der Liste (links und rechts) */
padding-top: 50px;
margin: 0px; /* 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 */
color: #F0FFF0;
}

#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.03em; /* Schriftgröße */
display: block; /* vergrößert die Navigation auf volle nav_container Breite */
border-bottom: 0px solid #BC8762; /* unterer Rand */
}

#nav li:hover {
background-color: #F0FFF0; /* 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: 1000px; /* 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 #B4CDCD; /* kleine Abtrennung zwischen Content und Navigation, Benutzung optional */
}

/* Content */

#content {
width: 750px; /* 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 #B4CDCD; /* Kleine Trennung zwischen Sidebar und Content. Benutzung optional */
}

/* Sidebar */

#sidebar_container {
float: right; /* wird für die Anordnung benötigt (Sidebar rechts neben dem Content */
width: 170px; /* Breite der Sidebar */
padding: 15px; /* Innenabstand der Sidebar */
}
/* 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: 390px;
left: 50%;
margin-left: -590px;
width:1200px; }


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

.menu a {
border: 0px solid #000000;
background-color: transparent
background-image: url(URL);
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
margin: 0px;
display: block;
height: 23px;
color: #005b5b; }


#smenu2 li {
background-image: url(http://i919.photobucket.com/albums/ad40/oida_schwede/buttonblau-1.gif?t=1286627311);
}

#smenu8 li {
background-image: url(http://i919.photobucket.com/albums/ad40/oida_schwede/buttongelb-1.gif?t=1286627329);
}

/* Aussehen der Menüpunkte beim Hover Effekt */
.menu a:hover {
color: #000000; }






#smenu1, #smenu2, #smenu3, #smenu4, #smenu5, #smenu6, #smenu7, #smenu8, #smenu9, #smenu10, #smenu11, #smenu12, #smenu13, #smenu14 {
font-size: 14px;
display: none;
width: 160px;
float: left; }

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a, #smenu6 a, #smenu7 a, #smenu8 a, #smenu9 a, #smenu10 a, #smenu11 a, #smenu12 a, #smenu13 a, #smenu14 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-%26%239792%3B.htm">Erwachsene weiblich</a></li>
<li><a href="http://cindysimsdownloads.de.tl/Teenager-%26%239792%3B.htm">Teenager weiblich</a></li>
<li><a href="http://cindysimsdownloads.de.tl/Kleinkind-%26%239792%3B.htm">Kleinkind weiblich</a></li>
<li><a href="http://cindysimsdownloads.de.tl/Erwachsene-%26%239794%3B.htm">Erwachsene männlich</a></li>
<li><a href="http://cindysimsdownloads.de.tl/Kleinkind-%26%239794%3B.htm">Kleinkind männlich</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu8');" onmouseout="cache('smenu8');">Über diese Seite</a>
<ul id="smenu8" onmouseover="montre('smenu8');" onmouseout="cache('smenu8');">
<li><a href="http://cindysimsdownloads.de.tl/G.ae.stebuch.htm">Gästebuch</a></li>
<li><a href="http://cindysimsdownloads.de.tl/Kontakt.htm">Kontakt</a></li>
<li><a href="http://cindysimsdownloads.de.tl/Anleitung-.htm">Downloadanleitung</a></li>
<li><a href="http://cindysimsdownloads.de.tl/Links-und-Partner.htm">Links und Partner</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</a></li>
</ul>

</div>
Beitrag20.10.2010 um 18:06 (UTC)    
Titel:

Weiß keiner Rat?
Beiträge der letzten Zeit anzeigen:   


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