hi wollte fragen wieso das so ist, wenn man den Browser auf eine bestimmte breite verkleinert verschiebt sich alles außerhalb des randes
(SIEHE RECHTS)
hier meine codes falls das helfen sollte !
"Text über den Deisgn"
Code: <div align="center">
<table align="center" id="main" cellspacing="0" cellpadding="0" border="0" >
<tr>
<td align="center" >
<table align="center" id="main_top" cellspacing="0" cellpadding="0" border="0" >
<tr>
<td>
<table align="center" cellspacing="0" cellpadding="0" border="0" >
<tr>
<td id="top">
<!-- menü GANZ oben-->
<table align="right" id="menu" border="0" cellpadding="0" cellspacing="0" >
<tr>
</tr>
</table>
<!-- ende menü GANZ oben--></td>
</tr>
<tr>
<td align="right" id="top1" >
</td>
</tr>
<tr>
<td id="top2" >
<table width="900" align="center" id="menuhorizontal" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td width="20%" ><a href="http://brawl-crushers.de.tl/Startseite.htm" >Startseite</a></td>
<td class="line"><img src="http://img.webme.com/pic/s/superspinsonic/pixelspace.gif" width="1" height="1" border="0" alt=""></td>
<td width="20%"><a href="http://brawl-crushers.de.tl/Spiele_Guide.htm" >Spiele-Guide</a></td>
<td class="line"><img src="http://img.webme.com/pic/s/superspinsonic/pixelspace.gif" width="1" height="1" border="0" alt=""></td>
<td width="20%"><a href="http://brawl-crushers.de.tl/Downloads.htm" >Downloads</a></td>
<td class="line"><img src="http://img.webme.com/pic/s/superspinsonic/pixelspace.gif" width="1" height="1" border="0" alt=""></td>
<td width="20%"><a href="http://brawl-crushers.de.tl/Preloader.htm" >Preloader</a></td>
<td class="line"><img src="http://img.webme.com/pic/s/superspinsonic/pixelspace.gif" width="1" height="1" border="0" alt=""></td>
<td width="20%"><a href="http://brawl-crushers.de.tl/Bilder_Galerie/index.htm" >Bilder-Galerie</a></td>
</tr>
</table>
</td>
</tr>
</table >
</td>
</tr>
</table>
<table align="center" id="main_inhalt" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td valign="top" align="center" >
<table align="center" id="inhalt" border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="sp1" valign="top" >
<img src="http://img.webme.com/pic/s/superspinsonic/pixelspace.gif" width="260" height="1" border="0" alt="">
<!--BOX 1-->
<div class="boxnav">
<div id="navi_box">
<div id="navi_container_pre"> </div>
<div id="navi_container">
<div id="navi_heading">
<h1 class="navi_text">Homepage</h1>
</div>
<div id="navi_links">
<ul>
<li><a href="http://brawl-crushers.de.tl/Tutorials.htm">Tutorials</a></li>
<li><a href="http://brawlcrushers.foren-city.de/">Forum</a></li>
<li><a href="http://brawl-crushers.de.tl/-Ue-ber-uns.htm">Über Uns</a></li>
<li><a href="http://brawl-crushers.de.tl/Chatbox.htm">Chat</a></li>
<li><a href="http://brawl-crushers.de.tl/Flash-Games.htm">Flash-Games</a></li>
<li><a href="http://brawl-crushers.de.tl/Super-Smash-Bros-.--Brawl.htm">Super Smash Bros. Brawl</a></li>
</ul>
</div>
</div>
<div id="navi_container_post"> </div>
</div>
<!--ende BOX 1-->
<!--BOX 2-->
<div class="boxnav1">
<div id="navi_box">
<div id="navi_container_pre"> </div>
<div id="navi_container">
<div id="navi_heading">
<h1 class="navi_text">Sonstiges</h1>
</div>
<div id="navi_links">
<ul>
<li><a href="http://brawl-crushers.de.tl/YouTube_User.htm">YouTube-User</a></li>
<li><a href="http://brawl-crushers.de.tl/Feedback.htm">Feedback</a></li>
</ul>
</div>
</div>
<div id="navi_container_post"> </div>
</div>
<!--ende BOX 2-->
<!--BOX 3-->
<div class="boxnav2">
<div id="navi_box">
<div id="navi_container_pre"> </div>
<div id="navi_container">
<div id="navi_heading">
<h1 class="navi_text">Partner</h1>
</div>
<div id="navi_links">
<div style="text-align: right;"><a target="_blank" href="http://www.ca-ls.de/"><img alt="" src="http://img.webme.com/pic/s/superspinsonic/ca-is1.png" /></a></div>
<br />
<div style="text-align: right;"><a target="_blank" href="http://www.g-vs-w.de.tl/"><img alt="" src="http://img.webme.com/pic/s/superspinsonic/g-vs-w1.png" /></a></div>
<br />
<div style="text-align: right;"><a target="_blank" href="http://www.badweb.de.tl"><img width="165" height="55" src="http://img.webme.com/pic/s/superspinsonic/badweb.png" alt="" /></a></div>
<br />
<div style="text-align: right;"><a target="_blank" href="http://www.max-stanchly.de/"><img width="165" height="55" src="http://img.webme.com/pic/s/superspinsonic/max.png" alt="" /></a></div>
</div>
</div>
<div id="navi_container_post"> </div>
</div>
<!--ende BOX 3-->
<!-- BOX 4-->
<div class="boxnav3">
<div id="navi_box">
<div id="navi_container_pre"> </div>
<div id="navi_container">
<div id="navi_heading">
<h1 class="navi_text">Login</h1>
</div>
<div id="navi_links">
<form method="POST" action="Adminbereich.htm">
<table>
<tbody>
<tr>
<td> </td>
<td><input type="text" value="Benutzername" name="logindata[name]" /></td>
</tr>
<tr>
<td> </td>
<td><input type="PASSWORD" value="" name="logindata[kennwort]" /></td>
</tr>
</tbody>
</table>
<input type="hidden" value="1" name="mode" /> <input type="hidden" value="1" name="checklogin" /> <input type="hidden" value="1" name="logindata[checklogin]" />
<div style="text-align: center;"><input type="submit" value="Einloggen" /> </div>
</form>
<div style="text-align: center;"><span style="font-size: smaller;"><span><br />
Noch nicht registriert ? <br />
<a href="http://brawl-crushers.de.tl/Registrierung.htm">"Hier meldest du dich an"</a></span></span></div>
</div>
</div>
<div id="navi_container_post"> </div>
</div>
<!--ende BOX 4-->
<!--BOX 5-->
<div class="boxnav4">
<div id="navi_box">
<div id="navi_container_pre"> </div>
<div id="navi_container">
<div id="navi_heading">
<h1 class="navi_text">Folge Uns</h1>
</div>
<div id="navi_links">
<div style="text-align: center;"><a href="http://www.youtube.com/user/thebrawlcrushers"> <img alt="" src="http://img.webme.com/pic/b/brawl-crushers/youtube_thumb_copy.png" title="Brawl-Crushers auf YouTube" /></a></div>
</div>
</div>
<div id="navi_container_post"> </div>
</div>
<!--ende BOX 5-->
<!-- ende boxen inhalt--></td>
<td valign="top" id="inbox">
"Text under den Design"
Code:
</td>
<!-- ende inhalt-->
</tr>
</table>
</td>
</tr>
</table>
<!-- fuss-->
<table id="main_fuss" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td id="fuss">
</td>
</tr>
<tr>
<td width="100%" id="fuss2" align="center" >
<!-- menü GANZ unten-->
<table align="center" id="menu_un" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td ><a href="mailto:brawl-crushers@live.de" >Mail</a></td><td class="trenn">|</td>
<td ><a href="http://brawl-crushers.de.tl/Kontakt.htm" >Kontakt</a></td><td class="trenn">|</td>
<td ><a href="http://brawl-crushers.de.tl/Impressum.htm" >Impressum</a></td><td class="trenn">|</td>
<td ><a href="index.html" >Nutzung</a></td><td class="trenn">|</td>
<td ><a href="index.html" >Service</a></td>
</tr>
</table>
<!-- ende menü GANZ unten-->
© Brawl-Crushers 2010 - All Rights Reserved.<br><br>
</td>
</tr>
</table>
<!-- ende fuss-->
</td>
</tr>
</table></div>
"CSS-Code ohne Stye Tags"
Code: /* ================ ALLGEMEIN =============== */
#counter { display: none; }
div#nav_container{visibility: hidden;}
li.nav_element{display: none;}
h1#title{display: none;}
h2#title span {display: none;}
li.nav_element{display: none;}
li.nav_element a{display: none;}
div.header{display: none;}
body
{margin-top: 0px; margin-left: 0px; margin-right: 0px;margin-bottom: 0px;
background-color: #ffffff; padding:0px;
width:100%;background-image:url(http://img.webme.com/pic/s/superspinsonic/back_main.jpg);background-repeat:repeat-y;
background-position:center top;
}
/* hinweis: die schrift für den inhaltsbereich ändern sie weiter unten bei #inbox */
/* scrolleiste internet explorer ab vers.5.5 */
body
{scrollbar-arrow-color: #000; scrollbar-base-color: #fff;
scrollbar-highlight-color : #000; scrollbar-shadow-color : #fff;
SCROLLBAR-TRACK-COLOR: #F2f2f2;}
#main {margin:0px;width:100%;
}
/* überschriften */
h2{ font-family: trebuchet ms,georgia,tahoma,arial, helvetica, tahoma ,verdana, sans-serif;
color:#000000;
margin-bottom:25px;letter-spacing:2px;font-size: 22px;
border-bottom:solid 0px #2D2D2D;
padding-bottom:4px;font-style:normal;
}
#hpname {letter-spacing:-1px;font-size:38px;
font-family: georgia,arial, helvetica, verdana, tahoma, sans-serif;
color:#fff;
font-weight:bold;
}
#hpname2 {
color:#F5F5F5;
letter-spacing:-1px;font-size:38px;
font-family: georgia,arial, helvetica, verdana, tahoma, sans-serif;
}
/* ================ KOPFBEREICH ================ */
#main_top{width:0px;width:100%;
background-image:url(http://img.webme.com/pic/s/superspinsonic/header.png);background-repeat:no-repeat;
background-position:center top;
}
#top {
height:54px;
text-align:right;
padding-right:20px;
}
#top1 {
height:224px;
vertical-align:middle;
text-align:center;
color:#fff;
padding-top:12px;
}
#top2 {
width:900px;
height:45px;
line-height:38px;
text-align:center;
vertical-align:middle;
color:#000;
font-size:14px;
}
/* ================ INHALTSBEREICH ================ */
#main_inhalt{
width:100%;
height:1000px;
background-image:url(http://img.webme.com/pic/b/brawl-crushers/bc_back_in1.png);background-repeat:no-repeat;
background-position:center top;
}
#inhalt{width:899px;
height:100%;
}
#inbox {height:900px;
color:#3B3B3B;
padding-top: 0px; padding-bottom: 0px;
padding-left: 30px;padding-right:30px;
letter-spacing:0px;
width:100%;
vertical-align:top;
text-align:justify;
font-size: 12px;line-height: 22px;
font-family: trebuchet ms,arial, helvetica, tahoma ,verdana, sans-serif;
}
#sp1 {
height:900px;color:#000;
font-size: 14px;line-height: 18px;
font-family: arial, helvetica, tahoma ,verdana, sans-serif; padding-right:0px;
padding-top: 30px;
padding-left: 10px;
padding-bottom:30px;
}
h3.boxheader {color:#fff;
font-size: 16px;line-height: 20px;
font-style:normal;
font-family: trebuchet ms,georgia,arial, helvetica, tahoma ,verdana, sans-serif;
border:solid 0px #fff;
background-color:#000000;
padding-left:4px;
padding-bottom:2px;
padding-top:2px;
padding-right:2px;
}
.boxnav{
font-size: 11px;line-height: 15px;
font-family: arial, helvetica, tahoma ,verdana, sans-serif;
background-color:#;
padding:10px;
margin-top:0px;
margin-left:0px;
margin-right:0px;
margin-bottom:0px;
vertical-align:top;
color:#000;
border-bottom:dashed 0px #506a13;
border-right:solid 0px #fff;
border-left:solid 0px #fff;
}
.boxspruch{
font-size: 14px;line-height: 15px;
font-family: trebuchet ms,arial, helvetica, tahoma ,verdana, sans-serif;
background-color:#;
padding:10px;
margin-top:0px;
margin-left:0px;
margin-right:0px;
margin-bottom:0px;
vertical-align:top;
color:#202020;
}
.boxnews{
font-size: 14px;line-height: 15px;
font-family: trebuchet ms,arial, helvetica, tahoma ,verdana, sans-serif;
background-color:#;
padding:10px;
margin-top:0px;
margin-left:0px;
margin-right:0px;
margin-bottom:0px;
vertical-align:top;
color:#202020;
}
.boxbilder{
font-size: 12px;line-height: 15px;
font-family: arial, helvetica, tahoma ,verdana, sans-serif;
background-color:#;
padding:10px;
margin-top:0px;
margin-left:0px;
margin-right:0px;
margin-bottom:0px;
vertical-align:top;
color:#202020;
}
/* =============== FUSSBEREICH =============== */
#main_fuss{width:0px;width:100%;
}
#fuss {width:100%;
font-family: trebuchet ms,georgia,arial, helvetica, tahoma ,verdana, sans-serif;
font-size:14px;
color: #152640;
height:247px;
text-align:center;
vertical-align:middle;
letter-spacing:4px;
background-color:#;
background-image:url(http://img.webme.com/pic/b/brawl-crushers/bc_fuss1.png);background-repeat:no-repeat;
background-position:center top;
}
#fuss2 {width:100%;
font-family: georgia,arial, helvetica, tahoma ,verdana, sans-serif;
color: #000000;
height:100px;
text-align:center;
vertical-align:middle;
background-color:#fefefe;font-size:12px;
}
/* =============== NAVIGATION =============== */
/* allgemeine links im text */
a:link, a:visited, a:active{font-size:px;line-height: 22px;
font-family: trebuchet ms,arial, helvetica, tahoma ,verdana, sans-serif;
color:#3b3b3b;
text-decoration:none;
background:transparent;
}
/* ============================== */
/* menue ganz oben */
.trenn {color:#333333}
#menu a, #menu a:visited , #menu a:active {display: block;
color:#000;
text-decoration:none ;
font-family: trebuchet ms,georgia,arial, helvetica, tahoma ,verdana, sans-serif; font-size: 14px;
padding-left: 10px;padding-right: 10px; padding-bottom: 0px; padding-top:0px;
margin-left: 0px;margin-right: 0px;
height:54px;
line-height:54px;
text-align:center;
background:transparent;
}
#menu a:hover {color:#2C4D80; text-decoration:none ;
background:transparent;}
/* ============================== */
/* menue im logo-bereich */
#menuhorizontal a, #menuhorizontal a:visited , #menuhorizontal a:active {display: block;
color:#F3F7FC;
font-weight:normal;
text-decoration:none ;font-family:trebuchet ms,georgia,verdana, sans-serif; font-size: 15px;
padding-left: 0px;padding-right: 0px; padding-bottom: 0px; padding-top:0px;
margin-left: 0px;margin-right: 0px;
border:solid 0px #fff;
height:45px;
line-height:45px;
text-align:center;font-weight:bold;
}
#menuhorizontal a:hover {
background-color:#638DC8; text-decoration:none ;
color:#fff;
background-image:url(http://img.webme.com/pic/s/superspinsonic/nav_back.gif);background-repeat:repeat-x;
background-position:center top;
}
/* ===== trennlinien in den menüs ===== */
.line {width:1px;background-color:#fff;}
/* ============================== */
/* menue linke spalte */
#menu2 {
border: dashed 0px #fff;
background-color:#;
text-align: left;
margin-top:0px;
margin-bottom:0px;
margin-right:0px;
margin-left:0px;
padding-bottom:0px;
padding-top:0px;
}
#menu2 ul, #menu2 li {
list-style-type: square;
margin-left:12px;
padding: 0px;
color:#04537D
}
#menu2 li a:link, #menu2 li a:visited, #menu2 li a:active {display:block;
border-bottom: dashed 0px #C2631D;
width:200px;
color:#000;text-decoration:none;
font-size: 14px;line-height: 15px;
font-family: trebuchet ms,arial, helvetica, tahoma ,verdana, sans-serif;
line-height: 19px;
padding-left:4px;
}
#menu2 li a:hover { background:TRANSPARENT;
color:#2C4D7E;
text-decoration:underline;
}
/* zweites menue linke spalte */
#menu2b {
border: dashed 0px #fff;
background-color:#;
text-align: left;
margin-top:0px;
margin-bottom:0px;
margin-right:0px;
margin-left:0px;
padding-bottom:0px;
padding-top:0px;
}
#menu2b ul, #menu2b li {
list-style-type: square;
margin-left:12px;
padding: 0px;
color:#04537D
}
#menu2b li a:link, #menu2b li a:visited, #menu2b li a:active {display:block;
border-bottom: dashed 0px #C2631D;
width:200px;
color:#000;text-decoration:none;
font-size: 14px;line-height: 15px;
font-family: trebuchet ms,arial, helvetica, tahoma ,verdana, sans-serif;
line-height: 19px;
padding-left:4px;
}
#menu2b li a:hover { background:TRANSPARENT;
color:#2C4D7E;
text-decoration:underline;
}
/* ============================== */
/* menue in box3 (weiter-links unter news) */
#menubox a , #menubox a:visited , #menubox a:active {display:inline;
background-color:#;
color:#000;
font-size: 14px;line-height: 15px;
font-family: trebuchet ms,arial, helvetica, tahoma ,verdana, sans-serif;
text-decoration:underline;
text-align:left;
font-style:normal;
}
#menubox a:hover{
color:#fff;background-color:background-color:#2C4D80;
text-decoration:underline ;
}
/* menue ganz unten */
img {
border:none;
}
#menu_un a, #menu_un a:visited , #menu_un a:active {display: block;
color:#000;
text-decoration:none ;
font-family: trebuchet ms,georgia,arial, helvetica, tahoma ,verdana, sans-serif; font-size: 14px;
padding-left: 10px;padding-right: 10px; padding-bottom: 0px; padding-top:0px;
margin-left: 0px;margin-right: 0px;
height:54px;
line-height:54px;
text-align:center;
background:transparent;
}
#menu_un a:hover {color:#2C4D80; text-decoration:underline ;
background:transparent;}
}
#navi_box {
width: 198px;
}
#navi_container_pre {
width: 198px;
height: 15px;
background: url(http://i37.tinypic.com/1qn52s.jpg) no-repeat;
float: left;
}
#navi_heading {
width: 183px;
height: 48px;
margin-left: 5px;
margin-top: -10px;
float: left;
background: url(http://i33.tinypic.com/10eftar.jpg) no-repeat;
}
.navi_text {
font-size: 14px;
font-family: arial;
font-weight: bold;
color: #f2f2f2;
padding-top: 5px;
padding-left: 15px;
}
#navi_container {
width: 198px;
background: url(http://i38.tinypic.com/2iar4vp.jpg) repeat-y;
float: left;
}
#navi_links {
width: 180px;
float: left;
margin-left: 0px;
margin-top: 1px;
margin-right: 0px;
}
#navi_links a {
text-decoration: none;
font-size: px;
color: #000000;
line-height 12px;
}
#navi_links li {
list-style-image: url(http://i35.tinypic.com/zsp98z.jpg);
border-bottom: 1px solid #000000;
}
#navi_links li:hover {
list-style-image: url(http://i36.tinypic.com/s17zir.jpg);
}
#navi_container_post {
width: 198px;
height: 15px;
background: url(http://i38.tinypic.com/e9vwnd.jpg) no-repeat;
float: left;
}
danke schon mal für eure hilfe
Zuletzt bearbeitet von brawl-crushers am 05.09.2010, 02:23, insgesamt einmal bearbeitet
|