Suche im Forum:
Suchen


Autor Nachricht
Beitrag04.09.2010 um 16:01 (UTC)    
Titel: css design problem "hilfe"

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
Beiträge der letzten Zeit anzeigen:   


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