zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Div springt falsch

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 29.01.2012, 22:53
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.01.2012
Beiträge: 2
Skiruna befindet sich auf einem aufstrebenden Ast
Frage Div springt falsch

Hi,
auf dieser Seite http://runastore.co.despringt die große Div "content" mit dem transparentem rahmen nicht bis zum ende der div "contenttxt". Das is nervig, da der hintergrund ja so falsch ist
HTML Code
HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
         <head>
                 <title>Startseite</title>
                 <link rel=stylesheet
                 type="text/css"
                 href ="stuff/formate.css">
                 <meta name = "author" content = "Malte Stollwerck">
                 <meta name = "description" content = "Auf dieser Seite biete ich Items und weiteres aus einigen Spielen an. Au&szlig;erdem k&ouml;nnen Sie Musik aus Spielen anh&ouml;ren."/>
                 <meta name = "keywords" content = "Malte Stollwerck, Skiruna, stolli66@googlemail.com, 4Story, Musik, Spiele, Games, Runa, sellingstore.co.de, runastore.co.de, 2012"/>
                 <link rel="shortcut icon" href="stuff/pictures/favicon.ico">
         </head>
         <body id = "home" text = "#000000" bgcolor = "#FFFFFF" link = "#FF0000" alink = "#FF0000" vlink = "#FF0000">

                 <div id = "content">
                         <img id = "rstore" src = "stuff/pictures/runastore.png">
                         <div id = "nav-bar">

                                 <ul class='clearfix' id='main-nav'>
                                         <li class = "home"><a href = "index.html"><img id = "homeicon" src = "stuff/pictures/home-icon2.png"></a></li>
                                         <li><a href = "#"><span>Spiele</span></a>
                                                 <ul>
                                                         <li><a href = "4story.html"><span>4Story</span></a></li>
                                                         <li><a href = "bfh.html"><span>Battlefield Heroes</span></a></li>
                                                 </ul>
                                         </li>
                                         <li><a href = "#"><span>Musik</span></a>
                                                 <ul>
                                                         <li><a href = "8bit.html"><span>8-Bit</span></a></li>
                                                         <li><a href = "thememusic.html"><span>Theme Songs</span></a></li>
                                                 </ul>
                                         </li>
                                         <li><a href = "impressum.html"><span>Impressum</span></a></li>
                                 </ul>
                         </div>
                         <div id = "contenttxt">
                                 <h1>Willkommen</h1>
                                 <p align = "justify">Willkommen auf <i>runastore.co.de</i>. Auf dieser Seite finden Sie Angebote von Items, Accounts und sonstigem aus verschiedenen Spielen. Au&szlig;erdem k&ouml;nnen Sie Musik von den guten alten 8-Bit Spielen bis hin zu Theme Songs von Spielen wie <i>The Elder Scrolls V: Skyrim</i> h&ouml;ren. Bitte geben Sie diese Seite weiter und machen Sie so Werbung.</p>
                         </div>
                         <div id = "sidebar">
                         <div class = "widgetwrap widget">
                                 <h4 class = "widgettitle">Hinweise</h4>
                                 <div class = "widgettxt">
                                         <p align = "justify">Diese Seite ist nicht fehlerfrei und derzeit noch im Aufbau. Sollten dir Fehler auffallen oder solltest du Ideen haben schicke bitte eine Mail an<br /><a id = "mail" href = "mailto:stolli66@googlemail.com">stolli66@googlemail.com</a>.<br />Vielen Dank.<br />Die Seite ist derzeit nur unter Firefox 9.0.1 und mit 15" getestet. Unter &auml;lteren Versionen, anderen Bildschirmgr&ouml;&szlig;en oder anderen Browsern k&ouml;nnte es zu Schwierigkeiten bei der Darstellung kommen.</p>
                                 </div>
                         </div>

                 </div>
         </body>
</html>
CSS
Code:
/* ALLGEMEIN */
html {                   height: 100.2% }
body {                   background-image: url(pictures/glossymetal.jpg)}
* {                      border: none;}
a:link {                 color: #000000; text-decoration: none; }
a:visted {               color: #000000; text-decoration: none; }
a:hover {                color: #000000; text-decoration: none; }
a:active {               color: #000000; text-decoration: none; }
h1 {                     color: #000000;
                         text-shadow: 0 1px 0 rgba(255,255,255,.7);
                         font-size: 20px; }
h2 {                     text-shadow: 0 1px 0 rgba(255,255,255,.7);
                         font-size: 15px; }
#mail {                  padding-left: 5px;
                         color: #333; }
#speciallink {           color: #186F00; }


/* ICON */
#rstore {                display: block;
                         position: relative;
                         top: -100px; }


/* NAVIGATION */
#nav-bar {               position: absolute;
                         left: 0.7%;
                         right: 0.7%;
                         top: 6px;
                         z-index: 100;
                         border: solid 1px #333;
                         background: #6a6a6a url(images/nav-bar-bg.png) repeat-x;
                         background: -webkit-gradient(linear, left top, left bottom, from(#b9b9b9), to(#6a6a6a));
                         background: -moz-linear-gradient(top,  #b9b9b9,  #6a6a6a);
                         background: linear-gradient(-90deg, #b9b9b9, #6a6a6a);
                         -webkit-border-radius: 8px;
                         -moz-border-radius: 8px;
                         border-radius: 8px;
                         -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 0 rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.3);
                         -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 0 rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.3);
                         box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 0 rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.3); }
#main-nav {              margin: 0;
                         padding: 0; }
#nav-bar span {          padding: 10px; }
#main-nav li {           margin: 0;
                         list-style: none;
                         float: left;
                         position: relative;
                         border-right: solid 1px #575757;
                         -webkit-box-shadow: 1px 0 0 rgba(255,255,255,.1), inset -1px 0 0 rgba(255,255,255,.1);
                         -moz-box-shadow: 1px 0 0 rgba(255,255,255,.1), inset -1px 0 0 rgba(255,255,255,.1);
                         box-shadow: 1px 0 0 rgba(255,255,255,.1), inset -1px 0 0 rgba(255,255,255,.1); }
#main-nav li:hover {     background: #474747;
                         background: -webkit-gradient(linear, left top, left bottom, from(#282828), to(#4f4f4f));
                         background: -moz-linear-gradient(top,  #282828,  #4f4f4f);
                         background: linear-gradient(-90deg, #282828, #4f4f4f);
                         -webkit-box-shadow: none;
                         -moz-box-shadow: none;
                         box-shadow: none; }
/* home icon */
#main-nav .home {        width: 42px;
                         -webkit-border-top-left-radius: 6px;
                         -webkit-border-bottom-left-radius: 6px;
                         -moz-border-radius-topleft: 6px;
                         -moz-border-radius-bottomleft: 6px;
                         border-top-left-radius: 6px;
                         border-bottom-left-radius: 6px; }
#homeicon {              display: block; }
#main-nav .home a {      background: url(stuff/pictures/home-icon2.png) no-repeat 14px center;
                         width: 16px;
                         text-indent: -9000em; }
/* main level link */
#main-nav a {            color: #fff;
                         display: block;
                         padding: 14px 15px;
                         text-decoration: none;
                         text-shadow: 0 -1px 0 rgba(0,0,0,.7); }
/* main level link :hover */
#main-nav a:hover {      color: #fff; }
/* current page li */
#main-nav .current_page_item,
#main-nav .current-menu-item { border-left: solid 1px #000;
                         border-right: solid 1px #000;
                         background: #474747;
                         background: -webkit-gradient(linear, left top, left bottom, from(#282828), to(#4f4f4f));
                         background: -moz-linear-gradient(top,  #282828,  #4f4f4f);
                         background: linear-gradient(-90deg, #282828, #4f4f4f);
                         -webkit-box-shadow: inset 0 2px 8px rgba(0,0,0,.8);
                         -moz-box-shadow: inset 0 2px 8px rgba(0,0,0,.8);
                         box-shadow: inset 0 2px 8px rgba(0,0,0,.8); }
/* current link */
#main-nav .current_page_item a,
#main-nav .current-menu-item a { color: #fff; }
/* current link :hover */
#main-nav .current_page_item a:hover,
#main-nav .current-menu-item a:hover { color: #fff; }
/* sub-levels current page li */
#main-nav ul .current_page_item,
#main-nav ul .current-menu-item { border: none;
                         background: none;
                         -webkit-box-shadow: none;
                         -moz-box-shadow: none;
                         box-shadow: none; }
/* sub-levels link */
#main-nav ul a,
#main-nav .current_page_item ul a,
#main-nav ul .current_page_item a,
#main-nav .current-menu-item ul a,
#main-nav ul .current-menu-item a { color: #666;
                         font-size: 95%;
                         font-weight: normal;
                         padding: 5px 0 5px 15px;
                         margin: 0;
                         width: 180px;
                         height: auto;
                         background: none;
                         -webkit-box-shadow: none;
                         -moz-box-shadow: none;
                         box-shadow: none;
                         text-shadow: none; }
/* sub-levels link :hover */
#main-nav ul a:hover,
#main-nav .current_page_item ul a:hover,
#main-nav ul .current_page_item a:hover,
#main-nav .current-menu-item ul a:hover,
#main-nav ul .current-menu-item a:hover { background: #F3F3F3;
                         color: #000;
                         color: black; }
/* dropdown ul */
#main-nav ul {           border: solid 1px #ccc;
                         background: #fff;
                         margin: 0;
                         padding: 5px 0;
                         list-style: none;
                         position: absolute;
                         z-index: 100;
                         display: none;
                         -webkit-border-radius: 5px;
                         -moz-border-radius: 5px;
                         border-radius: 5px;
                         -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.3);
                         -moz-box-shadow: 0 1px 2px rgba(0,0,0,.3);
                         box-shadow: 0 1px 2px rgba(0,0,0,.3); }
#main-nav ul li {        background: none;
                         padding: 0;
                         margin: 0;
                         height: auto;
                         border: none; }
#main-nav ul li:hover {  background: none; }
/* sub-levels dropdown */
#main-nav ul ul {        left: 190px;
                         top: 5px; }
/* show dropdown ul */
#main-nav li:hover > ul { display: block; }


/* CONTENT */
#content {               width: 76%;
                         height: auto;
                         position: absolute;
                         left: 12%;
                         right: 12%;
                         top: 17%;
                         padding: 20px;
                         padding-bottom: 0.7%;
                         background: #fff;
                         background: rgb(210, 210, 210); /* The Fallback */
                         background: rgba(210, 210, 210, 0.7);
                         float: left;
                         -webkit-border-radius: 8px;
                         -moz-border-radius: 8px;
                         border-radius: 8px;
                         -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.4);
                         -moz-box-shadow: 0 1px 3px rgba(0,0,0,.4);
                         box-shadow: 0 1px 3px rgba(0,0,0,.4); }
/* Text */
#contenttxt {            position: absolute;
                         left: 0.7%;
                         width: 800px;
                         padding: 5px;
                         background-color: #FFFFFF;
                         -webkit-border-radius: 8px;
                         -moz-border-radius: 8px;
                         border-radius: 8px;
                         -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.4);
                         -moz-box-shadow: 0 1px 3px rgba(0,0,0,.4);
                         box-shadow: 0 1px 3px rgba(0,0,0,.4); }
/* Tabelle */
#list {                  width: 40%;
                         border: 2px;
                         border-color: black;
                         cellpadding: 0;
                         cellspacing: 2; }
/* SIDEBAR */
#sidebar {               float: right;
                         width: 210px;
                         margin-top: 1px;
                         font-size: 90%; }
.widget {                background: #fff;
                         padding: 15px 18px;
                         padding-bottom: 4px;
                         -webkit-border-radius: 8px;
                         -moz-border-radius: 8px;
                         border-radius: 8px;
                         -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.4);
                         -moz-box-shadow: 0 1px 3px rgba(0,0,0,.4);
                         box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.widgettitle {           width: 100%;
                         display: block;
                         padding: 6px 18px 7px 18px;
                         margin: 0 0 -5px 0;
                         position: relative;
                         left: -18px;
                         top: -16px;
                         border-top: solid 1px #f5f5f5;
                         border-bottom: solid 1px #848484;
                         font: bold 14px/110% "Lucida Grande", Arial, "Lucida Sans Unicode", sans-serif;
                         color: #333;
                         background: #a9a9a9 repeat-x;
                         background: -webkit-gradient(linear, left top, left bottom, from(#d7d7d7), to(#a9a9a9));
                         background: -moz-linear-gradient(top,  #d7d7d7,  #a9a9a9);
                         background: linear-gradient(-90deg, #d7d7d7, #a9a9a9);
                         -webkit-border-top-left-radius: 8px;
                         -webkit-border-top-right-radius: 8px;
                         -moz-border-radius-topleft: 8px;
                         -moz-border-radius-topright: 8px;
                         border-top-left-radius: 8px;
                         border-top-right-radius: 8px;
                         -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.15);
                         -moz-box-shadow: 0 1px 1px rgba(0,0,0,.15);
                         box-shadow: 0 1px 1px rgba(0,0,0,.15);
                         text-shadow: 0 1px 0 rgba(255,255,255,.7); }
.widgettitle a {         color: #333;
                         text-decoration: none; }


/* SCREENSHOT */
#screen {                display: block;
                         width: 100%;
                         padding-top: 5px; }
Kann mir jemand helfen? hab ich einfach die divs falsch geschlossen?

lg
Runa

Geändert von Skiruna (29.01.2012 um 23:00 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 30.01.2012, 05:33
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 28.01.2011
Beiträge: 338
Webcoder sorgt für eine eindrucksvolle AtmosphäreWebcoder sorgt für eine eindrucksvolle Atmosphäre
Standard

Hi Skiruna
Zitat:
Zitat von Skiruna Beitrag anzeigen
Kann mir jemand helfen? hab ich einfach die divs falsch geschlossen?
JA, du hast das Div (#content) nicht geschlossen und noch einige weitere Fehler laut Validator.

Daran liegt es aber nicht, dass die Dvis sich so falsch verschieben, sondern eher an der position:absolute; vom Div (#contenttxt). Hier könnte ein float:left; statt der absoluten Positionierung helfen.


Besser wäre jedoch du lernst noch mal die Grundlagen, denn es sind noch einige grobe Macken in deiner Seite.


Gruß
Webcoder
__________________
Websites erstellen ist ein Hobby von mir.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 30.01.2012, 13:27
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.01.2012
Beiträge: 2
Skiruna befindet sich auf einem aufstrebenden Ast
Standard

Grobe Fehler sind mir wurst solange es funktioniert Ich weiß dass ich kein Gott im xhtml bin
ich werds ma probieren dankeschön


EDIT; Funktioniert vielen vielen dank, das mit dem float hätt ich ewig gesucht
Mit Zitat antworten
  #4 (permalink)  
Alt 30.01.2012, 13:31
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.989
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

Verbessere einfach die Fehler. Das macht eine Fehlersuche einfacher und verhindert böse Überraschungen in anderen Browsern
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
Antwort

Stichwörter
css, div, html, problem, runa, skiruna, xhtml

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
CSS - CMS - lange Menus Balken/BG oben? shinobi CSS 3 13.10.2011 22:12
joomla template entschlüsseln nieselfriem CSS 2 18.03.2008 14:12
Die maximale breite wird nicht erkannt notebook20000 CSS 9 22.06.2006 21:14
Flash in div Box springt bei Link-Rollover kakktus CSS 8 22.03.2005 10:43
div Positionierung bei Browsern Ancient CSS 22 17.03.2005 01:49


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:29 Uhr.