29.01.2012, 21:53
|
|||
|
|||
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ßerdem können Sie Musik aus Spielen anhö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ßerdem kö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ö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 älteren Versionen, anderen Bildschirmgrößen oder anderen Browsern könnte es zu Schwierigkeiten bei der Darstellung kommen.</p> </div> </div> </div> </body> </html> 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; }
lg Runa Geändert von Skiruna (29.01.2012 um 22:00 Uhr) 
|
| Sponsored Links |
|
30.01.2012, 04:33
|
|||
|
|||
Hi Skiruna
Zitat:
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
|
| Sponsored Links |
|
30.01.2012, 12:27
|
|||
|
|||
|
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
|
|
30.01.2012, 12:31
|
||||
|
||||
|
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!
|
 |
| Stichwörter |
| css, div, html, problem, runa, skiruna, xhtml |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| CSS - CMS - lange Menus Balken/BG oben? | shinobi | CSS | 3 | 13.10.2011 21:12 |
| joomla template entschlüsseln | nieselfriem | CSS | 2 | 18.03.2008 13:12 |
| Die maximale breite wird nicht erkannt | notebook20000 | CSS | 9 | 22.06.2006 20:14 |
| Flash in div Box springt bei Link-Rollover | kakktus | CSS | 8 | 22.03.2005 09:43 |
| div Positionierung bei Browsern | Ancient | CSS | 22 | 17.03.2005 00:49 |
Linear-Darstellung
