Ergebnis 1 bis 6 von 6
  1. #1
    flashfreak ist offline Mitglied
    registriert
    10-02-2005
    Beiträge
    26

    Unhappy [HELP] Layout Problem mit CSS :-/

    guten abend allezusammen,
    ich versuche mich solangsam daran meine homepages W3C konform zu gestalten und fange mit meiner privaten hp an.

    folgendes layout habe ich bisher verwendet:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    		<title>{bereich}{title}</title>
    		<style type="text/css" media="screen"><!--
    body { color: #000000; font-size: 11; background: url(bg_main.png) repeat-y fixed center; padding-top: 0 }
    .header { color: black; font-size: 11; font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: none; background-color: white; text-align: left; margin: 0 auto; width: 620px }
    .blog { position: relative; top: 4px }
    .blog_navi { text-indent: 20px }
    .blog_footer { color: #000; font-size: 11px; position: relative; top: 6px; width: 570px; height: 12px; border: solid 1px #b7b7b7 }
    --></style>
    	</head>
    <body topmargin="0">
    		<div align="center">
    			a<a name="top" id="top"></a>
    			<div id="header">
    			<table width="620" border="0" cellspacing="0" cellpadding="0">
    				<tr height="82">
    					<td height="82"><a href="./"><img src="images/freakblog-logo.jpg" alt="" height="120" width="620" border="0"></a></td>
    				</tr>
    			</table>
    			</div>
    			<table width="620" border="0" cellspacing="0" cellpadding="0" background="images/mein-blog-header.jpg" height="19">
    				<tr>
    					<td class="blog_navi">{blog_navi}</td>
    				</tr>
    			</table>
    			<table class="blog" width="620" border="0" cellspacing="0" cellpadding="2" height="70%">
    				<tr>
    					<td align="left" valign="top" width="420">{bodydata}</td>
    					<td align="left" valign="top">{news}</td>
    				</tr>
    			</table>
    			<br>
    			<table class="main_footer" width="620" border="0" cellspacing="0" cellpadding="0" background="images/mein-blog-footer.jpg" height="20">
    				<tr>
    					<td>Copyright &copy; freaky666.com 2003-2005</td>
    				</tr>
    			</table>
    		
    	</body>
    </html>
    wenn ich die grösse vom browser fenster verändere bleiben die tabellen immer in der position in der sie auf bei der normalen/vollbildgrösse waren.

    habe ich allerdings nun dieses layout:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    		<title>Freaky666.com</title>
    		<style type="text/css" media="screen"><!--
    html { 
      padding:0px;
      margin:0px;
    }
    body {
      background: url("bg_main.png") repeat-y fixed center top;
      font-size: 11px;
      font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
      padding:0px;
      margin:0px;
    }
    #logo   { background-image: url(../images/freakblog-logo.jpg); visibility: visible; position: absolute; top: 0; left: 20%; width: 620px; height: 120px }
    #navi  { background-image: url(../images/mein-blog-header.jpg); visibility: visible; position: absolute; top: 119px; left: 20%; width: 620px; height: 19px }
    #content  { background-color: #fff; visibility: visible; position: absolute; top: 137px; left: 20%; width: 620px; height: 250px }
    #footer  { background-color: #fff; background-image: url(../images/mein-blog-footer.jpg); visibility: visible; position: absolute; top: 386px; left: 20%; width: 620px; height: 20px }
    --></style>
    </head>
    <body>
    		<div id="logo"></div>
    		<div id="navi"></div>
    		<div id="content"></div>
    		<div id="footer"></div>
    	</body>
    </html>
    richtet sich die <div> elemente wie angegeben immer prozentual zum rand aus.
    wie kann man das so hinbekommen das sie wie beim oberen layout immer ihre position beibehalten ?

    habe mich schon mit den einzelnen möglichkeiten auseinandergesetzt (http://www.intensivstation.ch/css/8.html) komme aber nicht so recht weiter..


    mfg
    freaky
    Geändert von flashfreak (09-10-2005 um 23:22 Uhr)

  2. #2
    Avatar von dkdenz
    dkdenz ist offline Foren-Gott
    registriert
    13-04-2004
    Ort
    Lübeck
    Beiträge
    12.050

    AW: [HELP] Layout Problem mit CSS :-/

    Naja, mit absoluten Angaben.
    Statt 20% dann eben 180px oder so...

    Aber nebenbei. Dieses position:absolute brauchst Du eigentlich gar nicht.
    Z.B. könntest Du
    Code:
    body {
    margin:0px 0px 0px 180px; }
    machen und dann Deine Divs einfach definieren.
    So sollte es eigentlich auch gehen (ungetestet):
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    		<title>Freaky666.com</title>
    		<style type="text/css" media="screen"><!--
    html, body {
      background: url("bg_main.png") repeat-y fixed center top;
      font-size: 11px;
      font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
      padding:0px;
      margin:0px 0px 0px 180px; 
    }
    #logo   { background-image: url(../images/freakblog-logo.jpg); width: 620px; height: 120px }
    #navi  { background-image: url(../images/mein-blog-header.jpg); width: 620px; height: 19px }
    #content  { background-color: #fff; width: 620px; height: 250px }
    #footer  { background-color: #fff; background-image: url(../images/mein-blog-footer.jpg); width: 620px; height: 20px }
    --></style>
    </head>
    <body>
    		<div id="logo"></div>
    		<div id="navi"></div>
    		<div id="content"></div>
    		<div id="footer"></div>
    	</body>
    </html>

  3. #3
    flashfreak ist offline Mitglied
    registriert
    10-02-2005
    Beiträge
    26

    AW: [HELP] Layout Problem mit CSS :-/

    erstmal danke für den tip,
    nur bleiben logischerweise auch so die <div> elemte immer mit einem abstand von 180px (deinem bsp) vom rand weg stehen wenn man die grösse vom browserfenster ändert.

    und so schauts aus:


    der oberste und erste quellcode aus meinem threadpost funzt so wie ich es gerne haben will, sprich das der mittlere bereich sich auch anpasst beim ändern der browserfenstergrösse.

    denn nicht jeder surft mit 1024x768



    mfg
    freaky

  4. #4
    Avatar von dkdenz
    dkdenz ist offline Foren-Gott
    registriert
    13-04-2004
    Ort
    Lübeck
    Beiträge
    12.050

    AW: [HELP] Layout Problem mit CSS :-/

    Sag doch gleich das Du das zentriert haben willst.
    Hatte den oberen QT nicht ausprobiert - zu faul.
    http://forum.jswelt.de/showthread.php?t=19378 (Mit CSS den Inhalt der Seite mittig Platzieren)

  5. #5
    flashfreak ist offline Mitglied
    registriert
    10-02-2005
    Beiträge
    26

    AW: [HELP] Layout Problem mit CSS :-/

    klar kann ich den gesamten content mit algin einfach zentrieren, aber dann tun sich andere probleme auf... naja egal.
    trotzdem danke erstmal für die hilfestellungen.


    mfg
    freaky

  6. #6
    Avatar von dkdenz
    dkdenz ist offline Foren-Gott
    registriert
    13-04-2004
    Ort
    Lübeck
    Beiträge
    12.050

    AW: [HELP] Layout Problem mit CSS :-/

    Stehe ich auf der Leitung?
    Kannst Du mal in einfachen Worten erklären, was Du wie haben willst?

Ähnliche Themen

  1. CSS DIV Problem
    Von invy im Forum CSS und (X)HTML
    Antworten: 8
    Letzter Beitrag: 06-08-2005, 23:58
  2. Antworten: 3
    Letzter Beitrag: 13-06-2005, 00:02
  3. Problem mit CSS "position:absolute" mit JS
    Von bossi im Forum JavaScript
    Antworten: 6
    Letzter Beitrag: 25-03-2005, 10:45
  4. Problem: CSS Ebene Links
    Von utang im Forum CSS und (X)HTML
    Antworten: 5
    Letzter Beitrag: 12-12-2004, 10:52
  5. CSS Problem Netscape 7.1 IE 6.0
    Von Gaga01 im Forum CSS und (X)HTML
    Antworten: 3
    Letzter Beitrag: 12-08-2004, 10:52

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •