|
|||
div-höhe? - Hauptcontainer über ganze Seite will nicht...
Hallo an Alle !
Ich habe ein Script und möchte diesem gern ein Design verpassen, was bisher gut funktionierte. Nur scheitere ich an einem Punkt... Der Hauptcontainer (main) sollte mit einem Hintergrund über die ganze Seite gehen. Da die Menus sich ja in Größe verändern, muss der also mitwachsen. Hier der Code-Anfang der Templatedatei... HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de" dir="ltr"> <head> <link rel="shortcut icon" href="animated1_favicon.gif" type="image/x-icon"> <script language="JavaScript" type="text/javascript"> function onImage(what) { document.images[what].src='img/design/button_'+what+'_hover.png'; } function offImage(what) { document.images[what].src='img/design/button_'+what+'.png'; } </script> <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="expires" content="Wed, 20 Feb 2000 08:30:00 GMT" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15"/> <title>%config_sitetitle%</title> <css>style.css</css> %popup% </head> <body> <center> <div id="main"> <include>json</include> <div style="background-image:url(img/design_neu/header_bg.png); background-repeat:no-repeat; height:111px; width:916px;"><div align="left"><img src="img/design_neu/headerani.gif" alt="Header"/></div></div> <div id="mini"> <!--<font color="#ffffff" size="3"><b><format>%globalpot_small%</format></b></font>--> </div> <div id="midi"> <!--<font color="#ffffff" size="3"><b><format>%globalpot_middle%</format></b></font>--> </div> <div id="maxi"> <font color="#00045e" size="5"><b><format>%globalpot_big%</format></b></font> </div> <div id="maxi2"> <font color="#3ccd38" size="5"><b><format>%globalpot_big%</format></b></font> </div> <include>navi</include> <!--<include>globalticker</include>--> <div id="leftmenu"> <include>leftmenu</include> </div> <div id="logo"></div> <if var="loggedon" value="1" id="2"><then id="2"><div id="pinboard"><include>pinboard</include></div></then id="2"></if id="2"> <div id="content"> <include>%page%</include> <include>footer</include> </div> Code:
body { background: url(img/design_neu/bg.png) repeat-x #370303; color: #C0C0C0; font-size: 12px; font-family: sans-serif; margin: 0; padding: 0; height: 100%; } #main { z-index:0; background-image:url(img/design_neu/main_bg.png); background-repeat: repeat-y; width: 916px; height:100% !important; min-height: 100% !important; margin:0; padding:0; font-size: 12px; position: relative; border: 1px solid white; } Normalerweise müsste der Rahmen auf die vorgegebene Breite auf 100% der Seite verlaufen, oder? Er bringt mir aber den Rahmen nur bis zur Navigationsleiste, welche nach dem Header kommt. Danach nix weiter. Wo mache ich da denn was falsch? Hat jemand einen Tip für mich? Bin für jede Hilfe dankbar ! |
Sponsored Links |
|
|||
Wie 100% Midesthöhe anzuwenden ist, steht in den [FAQ]FAQ[/FAQ].
Du gibst #main eine Höhe von 100%, keine Mindesthöhe, weil du vermutlich den important-Hack für IE6 nicht verstanden bzw. falsch kopiert hast. Außerdem müssen alle Vorfahren des Elements mit 100%-Mindesthöhe eine 100%-Höhe haben. Bei dir fehlt die Angabe für html und das überflüssige und veraltete center-Element ist auch noch im Weg. Noch was: Wir können mit deinen Variablen nichts anfangen und sehen auch deine Hintergrundbilder nicht. Deshalb gib bitte immer einen Link zum Problem an. Siehe dazu auch die Hinweise für Fragende.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
Sponsored Links |
|
|||
Danke erstmal für deinen Post...
Dann will ich doch hier gleich mal den kompletten Code posten. hier der Code der Templatedatei... HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de" dir="ltr"> <head> <link rel="shortcut icon" href="animated1_favicon.gif" type="image/x-icon"> <script language="JavaScript" type="text/javascript"> function onImage(what) { document.images[what].src='img/design/button_'+what+'_hover.png'; } function offImage(what) { document.images[what].src='img/design/button_'+what+'.png'; } </script> <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="expires" content="Wed, 20 Feb 2000 08:30:00 GMT" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15"/> <title>%config_sitetitle%</title> <css>style.css</css> %popup% </head> <body> <center> <div id="main"> <include>json</include> <div style="background-image:url(img/design_neu/header_bg.png); background-repeat:no-repeat; height:111px; width:916px;"><div align="left"><img src="img/design_neu/headerani.gif" alt="Header"/></div></div> <div id="mini"> <!--<font color="#ffffff" size="3"><b><format>%globalpot_small%</format></b></font>--> </div> <div id="midi"> <!--<font color="#ffffff" size="3"><b><format>%globalpot_middle%</format></b></font>--> </div> <div id="maxi"> <font color="#00045e" size="5"><b><format>%globalpot_big%</format></b></font> </div> <div id="maxi2"> <font color="#3ccd38" size="5"><b><format>%globalpot_big%</format></b></font> </div> <include>navi</include> <!--<include>globalticker</include>--> <div id="leftmenu"> <include>leftmenu</include> </div> <div id="logo"></div> <if var="loggedon" value="1" id="2"><then id="2"><div id="pinboard"><include>pinboard</include></div></then id="2"></if id="2"> <div id="content"> <include>%page%</include> <include>footer</include> </div> <div id="rightmenu"> <include>rightmenu</include> </div> <div id="login"> <form name="login" action="page.php?cat=default&p=login_do" method="post"> <div style="position:absolute; top:3px; right:170px;"><font color="blue">ID:</font></div> <div style="position:absolute; top:0px; right:60px;"><font color="blue"><input type="text" name="u_id" lenght="10" style="background : transparent; width:100px; border:0px;" size="30" value="deine ID" onclick="value=''"/></font></div> <div style="position:absolute; top:26px; right:170px;"><font color="blue">PW:</font></div> <div style="position:absolute; top:24px; right:60px;"><font color="blue"><input type="password" name="u_pwd" height="10" lenght="10" style="background : transparent; width:100px; border:0px;" size="30" value="Passwort" onclick="value=''"/></font></div> <div style="position:absolute; top:0px; right:0px; border:0px;"><input type="image" src="img/design_neu/go.png" alt="Go" border="0"> <div style="position:absolute; top:48px; right:62px; width:100px;"><font color="blue" size="1"><a href="page.php?cat=default&p=forgotpwd">Passwort vergessen?</a></font></div> </form> </div> </div></div></center> </body> </html> Code:
/* **************** cascading style sheet ******************* */ a { color: #C0C0C0; text-decoration: none; } a:hover { /*color: #c0c0c0;*/ text-decoration: underline; background-color: none; } body { background: url(img/design_neu/bg.png) repeat-x #370303; color: #C0C0C0; font-size: 12px; font-family: sans-serif; margin: 0; padding: 0; height: 100%; } img { border: 0; } table { font-size: 12px; font-family: Verdana; color: #c0c0c0; } input, textarea, select, file { font-size:12px; border: 1px solid; background-color: #ffffff; color: #000000; } #rotator { position: absolute; top: 60px; left: 450px; } #login { position: absolute; top: 90px; right: 18px; height: 100px; width: 210px; background-image: url(img/design_neu/login_bg.png); background-repeat: no-repeat; } #navi { position: absolute; top: 111px; background: url(img/design_neu/navi_bg.png); height: 30px; width: 916px; } *.navi_co { padding-top:0px; padding-left: 14px; font-size:16px; font-weight: bold; } #pinboard { /*background-image: url(img/design/pn_news_zettel.png); */ position: absolute; left: 750px; top: 172px; width: 150px; height: 78px; z-index: 4; } #pinboard_content { position: absolute; top: 20px; left: 20px; font-weight: bold; font-size: 10px; color: #150185; border: none; } #pinboard_content a { color: #150185; } #shoutbox { height: 520px; width: 480px; background: url(img/design/bg.jpg) repeat-x #ffffff; } #shouts_add { border: 1px solid #333333; font: 12px bold Verdana; width: 480px; } *.shouts { border: 1px solid #ffffff; } *.shouts_head { background-color: #ffffff; font-size: 12px; font-weight: bold; margin-left: 3px; } *.shouts_body { background-color: #ffffff; font-size: 12px; margin-left: 3px; } *.grey { color: #000000; } #content { position: absolute; color:#c0c0c0; background: #581616; left: 180px; width: 555px; top: 141px; z-index: 2; } *.box { width: 550px; } *.box_title { text-align: left; color: #e1ca69; position: relative; top: 11px; left: 35px; /*font-weight: bold;*/ } *.box_head { height: 32px; background: url(img/design_neu/content_head.png); position: relative; top: 10px; } *.box_middle { background: url(img/design_neu/content_middle.png); } *.box_content { text-align: center; width: 500px; position:relative; top:15px; } *.box_footer { background: url(img/design_neu/content_foot.png); height: 20px; } *.jackpot_games_home { color: #000000; } #layer1 { color: #FFF1E0; } #layer2 { color: #000000; } #layer3 { color: #000000; } #layer4 { color: #000000; } #layer5 { color: #000000; } #nickpage_text { position: relative; top: 0px; left: 20px; text-align: left; } #nickpage_avatar { position: absolute; top: 5px; right: 5px; } #main { z-index:0; background-image:url(img/design_neu/page.png); background-repeat: repeat-y; width: 916px; height:100% !important; min-height: 100% !important; margin:0; padding:0; font-size: 12px; position: relative; border: 1px solid white; } *.menucontent { position: relative; width: 140px; left: 0px; text-align: left; font-family: Verdana; font-size: 12px; color: #e1ca69; font-weight: bold; } *.submenucontent a { display: block; color: #e1ca69; font-weight: normal; } *.submenucontent a:hover { background: none; display: block; /*color: #c0c0c0;*/ } *.submenucontent { position: relative; width: 168px; top: 0px; left: 15px; text-align: left; font-size: 14px; font-family: Tahoma; color: #e1ca69; font-weight: bold; font-style: normal; line-height: 22px; } *.rightmenucontent a { display: block; } *.wiw_admin { color: #ff0000; font-weight: bold; } a.wiw_admin:link, a.wiw_admin:active, a.wiw_admin:visited { color: #ff0000; } *.wiw_male { color: #429afc; } a.wiw_male:link, a.wiw_male:active, a.wiw_male:visited { color: #429afc; } *.wiw_female { color: #f196f9; } a.wiw_female:link, a.wiw_female:active, a.wiw_female:visited { color: #f196f9; } *.rightmenucontent a:hover { background: none; display: block; /*color: #ffffff;*/ } *.rightmenucontent { position: relative; width: 135px; top: 0px; left: 0px; text-align: left; font-size: 14px; font-family: Tahoma; line-height: 22px; color: #e1ca69; } #leftmenu { background-image:url(img/design_neu/leftmenu_bg.png); background-repeat:repeat-y; width: 180px; position: absolute; left: 0px; top: 141px; height:auto !important; /* real browsers */ height:100%; /* IE6: treaded as min-height*/ min-height:100%; /* real browsers */ } #leftmenu_title { color: #e1ca69; text-align: left; position: relative; top: 13px; left: 35px; font-weight: bold; } #leftmenu_head { color: #e1ca69; background: url(img/design_neu/menu_head.png) no-repeat; height: 38px; width: 168px; position: relative; left: 5px; top: 10px; } #leftmenu_head_middle { color: #e1ca69; background: url(img/design_neu/menu_head_middle.png) no-repeat; height: 30px; width: 168px; position: relative; left: 5px; top: 10px; } #leftmenu_middle { background: url(img/design_neu/menu_middle.png); position: relative; width: 168px; left: 5px; top: 10px; } #leftmenu_footer { background: url(img/design_neu/menu_footer.png); position: relative; top: 10px; left: 5px; height: 30px; width: 168px; } #rightmenu_title { text-align: left; position: relative; top: 13px; left: 35px; font-weight: bold; } #rightmenu { background-image:url(img/design_neu/rightmenu_bg.png); background-repeat:repeat-y; width: 180px; position: absolute; right: 1px; top: 141px; height:auto !important; /* real browsers */ height:100%; /* IE6: treaded as min-height*/ min-height:100%; /* real browsers */ } #rightmenu_head { background: url(img/design_neu/menu_head.png); height: 38px; width: 168px; position: relative; right: 5px; top:10px; } #rightmenu_middle { background: url(img/design_neu/menu_middle.png); position: relative; right: 5px; width: 168px; top:10px; } #rightmenu_bottom { background: url(img/design_neu/menu_footer.png); height:30px; position: relative; right: 5px; top:10px; width: 168px; } #rightmenu_wio_head { background: url(img/design/navigation_01.png); height: 35px; position: relative; right: 5px; width: 168px; } #rightmenu_wio_middle { background: url(img/design/navigation_02.png); position: relative; right: 5px; width: 168px; } #rightmenu_wio_footer { background: url(img/design/navigation_03.png); height: 20px; position: relative; right: 5px; width: 168px; } #footer { background: url(img/design/footer.png); height: 42px; } *.footer_co { padding-top:7px; } *.news_subject { background-color: #6699cc; } *.tv_item { width: 450px; font-size: 10px; text-align: left; position: relative; left: 40px; } *.paid_up { font-size:10px; } *.headline { background-color: #6699cc; color: #000000; font-weight: bold; } *.explanation { background-color: #79a2c5; font-weight: bold; } *.coloredlink { color: #09bb00; text-decoration: none; font-weight: bold; } *.paid4 { background-color: #6699cc; } *.question { font-style: italic; color: #009900; text-align: left; } *.answer { color: #000000; text-align: left; } .mooquee { border: solid 2px #C0C0C0; padding: 5px; /* don't change */ position: absolute; overflow: hidden; white-space: nowrap; } .mooquee-text { /* don't change */ position: absolute; } #showpn { visibility: hidden; width: 350px; height: 100px; border: 1px solid #000; background-color: #ffffff; position: absolute; z-index: 5; top: 250px; left: 100px; padding: 10px 10px; } #nav_jp_winner { position: absolute; top: 126px; left: 760px; width: 152px; height: 55px; z-index: 1; } #jp_winner_trans { position: absolute; top: 126px; left: 760px; width: 152px; height: 55px; z-index: 2; } .games_bold { color: #7CFC00; } .games_red { font-weight: bold; color: #FF0000; } #globalticker { top: 127px; left: 140px; z-index: 5; height: 10px; width: 500px; } #mini { position: absolute; left: 710px; top: 120px; } #midi { position: absolute; left: 480px; top: 120px; } #maxi { position: absolute; left: 460px; top: 68px; } #maxi2 { position: absolute; left: 462px; top: 70px; } Ich habe schon hier und da gelesen, dies und jenes ausprobiert aber irgendwie schau ich hier wie ein Schwein ins Uhrwerk. Wo hab ich da nen Fehler drin? Danke für Eure Hilfe! |
|
|||
Das steht bereits in meinem Vorposting.
edit: Und unter deinem Link jetzt sieht man auch noch, dass das umgebende Element nie mitwachsen wird, weil du die Inhalte absolut positionierst. Da verlinke ich einfach mal in den Nachbarthread.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken Geändert von fricca (13.12.2010 um 14:50 Uhr) |
|
|||
Problem ist wohl, dass das Script im Originalzustand schon im css position:absolute; verwendet. Oder?
hier mal die originale css Code:
body { color: #000000; font-size: 12px; font-family: sans-serif; } a { color: #000000; text-decoration: none; } a:hover { color: #000; text-decoration: underline; } img { border: 0; } input, select, textarea, select { border: 1px solid black; background-color: #ffc109; font-weight: bold; } table { text-align: left; } #main { width: 978px; z-index: 0; position: absolute; top: 0px; left: 5px; height: 100% !important; border: 1px solid blue; } #header { position: absolute; width: 978px; height: 245px; top: 10px; z-index: 2; } #konto_info { position: absolute; width: 256px; height: 116px; background-image: url(img/design/kontoinfo.png); z-index: 3; right: 30px; top: 20px; } #konto_text { position: relative; top: 30px; width: 220px; height: 70px; left: 15px; padding: 0; border-collapse: collapse; font-size: 10px; } #header_left { position: absolute; top: 253px; width: 168px; z-index: 1; } #header_left_top { background-image: url(img/design/frame_left_top.png); height: 20px; width: 168px; } #header_left_middle { background-image: url(img/design/frame_left_middle.png); width: 168px; } #header_left_bottom { background-image: url(img/design/frame_left_bottom.png); width: 168px; height: 32px; } #logo { background-image: url(img/design/fwx_logo.png); position: absolute; left: 12px; top: 25px; width: 231px; height: 212px; z-index: 3; } #rotator { position: absolute; top: 40px; left: 225px; z-index: 5; } #pinboard { background-image: url(img/design/pn_news_zettel.png); position: absolute; left: 112px; top: 167px; width: 96px; height: 78px; z-index: 4; } #pinboard_content { position: absolute; top: 20px; left: 20px; font-weight: bold; font-size: 10px; color: #150185; border: none; } #pinboard_content2 { position: absolute; top: 13px; left: 20px; font-weight: bold; font-size: 10px; color: #150185; border: none; } #pinboard_content a { color: #150185; } #pinboard_content2 a { color: #150185; } #nav_home { position: absolute; top: 126px; left: 190px; width: 149px; height: 55px; z-index: 1; } #home_trans { position: absolute; top: 126px; left: 190px; width: 149px; height: 55px; z-index: 2; } #nav_media { position: absolute; top: 126px; left: 330px; width: 152px; height: 55px; z-index: 1; } #media_trans { position: absolute; top: 126px; left: 330px; width: 152px; height: 55px; z-index: 2; } #nav_agb { position: absolute; top: 126px; left: 470px; width: 152px; height: 55px; z-index: 1; } #agb_trans { position: absolute; top: 126px; left: 470px; width: 152px; height: 55px; z-index: 2; } #nav_faq { position: absolute; top: 126px; left: 550px; width: 152px; height: 55px; z-index: 1; } #faq_trans { position: absolute; top: 126px; left: 550px; width: 152px; height: 55px; z-index: 2; } #nav_impressum { position: absolute; top: 126px; left: 625px; width: 152px; height: 55px; z-index: 1; } #impressum_trans { position: absolute; top: 126px; left: 625px; width: 152px; height: 55px; z-index: 2; } #nav_jp_winner { position: absolute; top: 126px; left: 760px; width: 152px; height: 55px; z-index: 1; } #jp_winner_trans { position: absolute; top: 126px; left: 760px; width: 152px; height: 55px; z-index: 2; } #nav_login { position: absolute; top: 126px; left: 915px; width: 55px; height: 55px; z-index: 1; } #login_trans { position: absolute; top: 126px; left: 915px; width: 55px; height: 55px; z-index: 2; } #content { position: absolute; left: 175px; width: 650px; top: 215px; z-index: 2; } *.box { width: 641px; } *.box_title { text-align: left; position: relative; top: 15px; left: 20px; font-weight: bold; } *.box_head { background-image: url(img/design/box_head.png); height: 51px; } *.box_middle { background-image: url(img/design/box_middle.png); } *.box_content { text-align: center; width: 590px; } *.box_footer { background-image: url(img/design/box_foot.png); height: 44px; } #leftmenu { position: relative; left: 15px; width: 135px; } *.navi_left_head { background-image: url(img/design/navi_top.png); height: 38px; width: 135px; } *.navi_left_middle { background-image: url(img/design/navi_middle.png); width: 135px; } *.navi_left_bottom { background-image: url(img/design/navi_bottom.png); height: 36px; width: 135px; } *.menucontent { font-size: 10px; font-weight: bold; width: 100px; } *.submenucontent { font-size: 10px; position: relative; left: 20px; width: 100px; } *.submenucontent a { display: block; } #shoutbox { height: 200px; width: 410px; background-color: #ffca2f; } #rightmenu { position: absolute; left: 817px; top: 215px; width: 164px; } #rightmenu_head { background-image: url(img/design/wio_top.png); height: 59px; } #rightmenu_middle { background-image: url(img/design/wio_middle.png); } #rightmenu_bottom { background-image: url(img/design/wio_bottom.png); height: 41px; } *.rightmenucontent { position: relative; left: 25px; width: 120px; } *.rightmenucontent a { display: block; } *.wiw_admin { color: red; font-weight: bold; } *.wiw_male { color: #1981ec; } *.wiw_female { color: #fc32d8; } #footer { background-image: url(img/design/footer.png); width: 562px; height: 35px; position: relative; left: 40px; } *.footer_content { position: relative; text-align: center; top: 10px; font-weight: bold; } #nickpage_text { text-align: left; position: relative; left: 25px; } #nickpage_avatar { position: absolute; right: 50px; top: 150px; } #showpn { visibility: hidden; width: 350px; height: 100px; border: 1px solid #000; background-color: #ffffff; position: absolute; z-index: 5; top: 250px; left: 100px; padding: 10px 10px; } .mooquee { border: solid 2px #C0C0C0; padding: 5px; /* don't change */ position: absolute; overflow: hidden; white-space: nowrap; } .mooquee-text { /* don't change */ position: absolute; } .games_bold { font-weight: bold; } .games_red { color: red; font-weight: bold; } #globalticker { top: 180px; left: 220px; z-index: 5; height: 20px; width: 500px; } HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de" dir="ltr"> <head> <script language="JavaScript" type="text/javascript"> <!-- function onImage(what) { document.images[what].src='img/design/button_'+what+'_hover.png'; } function offImage(what) { document.images[what].src='img/design/button_'+what+'.png'; } --> </script> <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="expires" content="Wed, 20 Feb 2000 08:30:00 GMT" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15"/> <title>%config_sitetitle%</title> <css>%config_style%</css> %popup% </head> <body> <div id="main"> <div id="header"><img src="%config_header_img%" alt="Header oben" /></div> <if var="loggedon" value="1"><then><div id="konto_info"> <table id="konto_text" border="0"> <tr><td>Konto</td><td><span id="usrkonto"><format>%usrkonto%</format></span> %config_curname%</td></tr> <tr><td>Bonus</td><td><span id="usrbonus"><format>%usrbonus%</format></span> Bonus%config_curname%</td></tr> <tr><td>Aktivität</td><td><span id="usrap"><format>%usrap%</format></span> APs<br /><span id="usrap_all"><format>%usrap_all%</format></span> APz</td></tr> <tr><td><a href="page.php?cat=bank&p=tresor">Tresor</a></td><td><span id="usrtresor"><format>%usrtresor%</format></span> %config_curname%</td></tr> </table> </div> </then></if> <include>json</include> <include>globalticker</include> <!-- HeaderNavi --> <div id="nav_home"><img src="img/design/button_home.png" id="home" alt="Home"/></div> <div id="nav_media"><img src="img/design/button_media.png" id="media" alt="Media" /></div> <div id="nav_agb"><img src="img/design/button_agb.png" id="agb" alt="AGB" /></div> <div id="nav_faq"><img src="img/design/button_faq.png" id="faq" alt="FAQ" /></div> <div id="nav_impressum"><img src="img/design/button_impress.png" id="impress" alt="Impressum" /></div> <div id="nav_jp_winner"><img src="img/design/button_jp.png" id="jp" alt="Jackpots" /></div> <if var="loggedon" value="1"><then><div id="nav_login"><img src="img/design/button_logout.png" id="logout" alt="LogOut" /></div> </then><else><div id="nav_login"><img src="img/design/button_login.png" id="login" alt="LogIn" /></div></else></if> <div id="rotator"><if var="tpl_banner" value="none"><then></then><else>%tpl_banner%</else></if></div> <!-- Making links for menu from transparent pictures --> <div id="home_trans"><a href="page.php" onmouseover="onImage('home');" onmouseout="offImage('home');"><img src="img/design/transparent.png" border="0" alt="Home" /></a></div> <div id="media_trans"><a href="page.php?p=media" onmouseover="onImage('media');" onmouseout="offImage('media');"><img src="img/design/transparent.png" border="0" alt="MediaDaten" /></a></div> <div id="agb_trans"><a href="page.php?p=agb" onmouseover="onImage('agb');" onmouseout="offImage('agb');"><img src="img/design/transparent.png" border="0" alt="AGB" width="80" height="55" /></a></div> <div id="faq_trans"><a href="page.php?p=faq" onmouseover="onImage('faq');" onmouseout="offImage('faq');"><img src="img/design/transparent.png" border="0" alt="FAQ" width="80" height="55" /></a></div> <div id="impressum_trans"><a href="page.php?p=about" onmouseover="onImage('impress');" onmouseout="offImage('impress');"><img src="img/design/transparent.png" border="0" alt="Impressum" /></a></div> <div id="jp_winner_trans"><a href="page.php?cat=games&p=jackpots" onmouseover="onImage('jp');" onmouseout="offImage('jp');"><img src="img/design/transparent.png" border="0" alt="Jackpot Gewinner" /></a></div> <if var="loggedon" value="1"><then><div id="login_trans"><a href="page.php?p=logout" onmouseover="onImage('logout');" onmouseout="offImage('logout');"><img src="img/design/transparent.png" border="0" alt="LogOut" width="60" height="55" /></a></div> </then><else><div id="login_trans"><a href="page.php?p=login" onmouseover="onImage('login');" onmouseout="offImage('login');"><img src="img/design/transparent.png" width="60" height="55" border="0" alt="LogIn" /></a></div></else></if> <!-- building navigation --> <div id="header_left"> <include>leftmenu</include> </div> <div id="logo"></div> <if var="loggedon" value="1" id="2"><then id="2"><div id="pinboard"><include>pinboard</include></div></then id="2"></if id="2"> <div id="content"> <include>%page%</include> <include>footer</include> <debug> </div> <div id="rightmenu"> <include>rightmenu</include> </div> </div> </body> </html> |
|
|||
Zitat:
Was ist das, was du jetzt postest -- mit dem wir aus oben bereits genannten Gründen nichts anfangen können? edit: Ach, jetzt verstehe ich. Was du jetzt gepostet hast nennst du "Script im Originalzustand". Ja, das ist ein Problem, denn es ist nicht tauglich. Soll vermutlich ein Design-Template sein, aus dem man erst noch etwas fürs Web verwendbares machen muss. Zitat:
Mit dem, was du hier zeigst, wirst du dein Ziel nicht erreichen können. Abs. pos. Elemente haben keinen Bezug zueinander. Punkt. Nimm Float, um deine Bereiche nebeneinander zu stellen. Wie das geht kannst du im bereits verlinkten Little Boxes lernen. Ja, du wirst Zeit benötigen, dich einzuarbeiten. Beginnen musst du mit dem Erlernen von HTML. Du klebst bisher nur Divs aneinander. Das hat nichts mit "Webdesign" zu tun. Es fehlt jegliche Semantik. Lesestoff: Vorsprung durch Webstandards | Retro-Coding: Semantischer Code ist der Anfang von gutem Design
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken Geändert von fricca (13.12.2010 um 15:48 Uhr) |
Stichwörter |
container, div höhe, main, wrapper |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Brauche Hilfe: Schwarzes Nichts | Zwox | CSS | 10 | 19.11.2010 17:53 |
div container Höhe anpassen funktioniert nicht! | hopaba | CSS | 4 | 21.02.2010 18:23 |
CSS Text nebeinander? | carstiee09 | CSS | 13 | 13.11.2009 20:18 |
DIV in DIV IE 6 Höhe 100% | BooKer | CSS | 0 | 01.04.2009 18:11 |
div höhe anpassen | Dgx | CSS | 3 | 02.03.2007 19:02 |