Probleme mit CSS-Layout

Maho88

Dabei seit: 18.09.2005

Beiträge: 47
#1

Probleme mit CSS-Layout

30.10.2005, 15:38

Hallo,
ich hab mit "Gimp" ein Design für unsere Klassenhomepage erstellt. Jetzt
haben wir aber einige probleme damit, bei denen wir einfach nicht weiter wissen:

1. Im IE wird das Design normalerweise richtig angezeigt. Aber wenn ich die DOCTYPE Angabe in die Datei reinschreibe wird der Inhalt unter der Navigation angezeigt

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

www.my-class.de/Screen-DOCTYPE.JPG

2. Im Firefox wird das irgendwie ganz komisch dargestellt.
www.my-class.de/Screen-Firefox.JPG

3. Wir hätten noch gerne, dass die Navigationsleiste immer genauso lang ist, wie der Inhalt. Funktioniert das, und wenn ja wie?

Hier ein Bild wie das Design ohne DOCTYPE-Angabe im IE aussieht:
www.my-class.de/Screen1.JPG

Hier die CSS: www.my-class.de/css.txt
und hier die Index:www.my-class.de/index.txt
Stichworte: -
#2

31.10.2005, 10:47

Sinnvollerweise denke ich solltest du vielleicht den Inhalt der navi.php und der content.php zufügen...sonst lässt sich das Problem schlecht analysieren...
oder zumindest die struktur der seiten....
Kommentar
Maho88

Dabei seit: 18.09.2005

Beiträge: 47
#3

31.10.2005, 16:27

Ok, hier die Navi.php: www.my-class.de/navi.txt
die content.php: www.my-class.de/content.txt
in die content.php wird der Inhalt included (wie beim Tut von tut.php-q.net)
z.B. de Startseite: www.my-class.de/start.txt
Grüße
Alex
Kommentar
Maho88

Dabei seit: 18.09.2005

Beiträge: 47
#4

01.11.2005, 14:16

Und jetzt? weiß keiner weiter?
Kommentar
derHund

Dabei seit: 29.10.2004

Beiträge: 1781
#5

01.11.2005, 14:37

doch sicher, aber vielleicht läßt sich mit deinen infos nicht viel anfangen? oder es hat niemand lust, alles, was schon hundert mal gesagt wurde, zu wiederholen?

- entwickele deine seite primär im firefox, danach kannst du dich um die ie-möhre kümmern
- denk dabei aber immer an den box-model-bug (=> kombiniere niemals width/height und padding)
- setz am anfang alle (universeller selector (*)) innen- und außenabstände (margin/padding) auf 0
- verichte vollständig auf layout-tabellen
- poste das html-grundgerüst _hier_ in code-tags (kein php bitte)
- und das css dazu ...
- und ein online-beispiel

edit: validier css und html ...

[URL=http://www.mozilla.org/products/firefox/][img]http://www.nophia.de/misc/spreadtheword/feuerfuchs.gif[/img][/URL]
Kommentar

Maho88

Dabei seit: 18.09.2005
Beiträge: 47

01.11.2005, 15:35

Hallo,
danke erst mal für die Antwort!

- entwickele deine seite primär im firefox, danach kannst du dich um die ie-möhre kümmern

Ok, mach ich ab jetzt...

- denk dabei aber immer an den box-model-bug (=> kombiniere niemals width/height und padding)

Kann ich width/height einfach weglassen? Padding brauch ich ja, damit der Inhalt am richtigen Ort steht oder gibts da eine Alternative?

- setz am anfang alle (universeller selector (*)) innen- und außenabstände (margin/padding) auf 0

Code:

 * { padding: 0px; margin: 0px; }

So?

- verichte vollständig auf layout-tabellen

Wie meinst du das?

- poste das html-grundgerüst _hier_ in code-tags (kein php bitte)

Code:

  
 			
<html>
<head>
<title>Meine Klasse am KG</title>
<link rel="stylesheet" type="text/css" href="styles/main.css"/>
</head>
<body>
     <div id="root">
          <div id="header">
               <div id="header_l"></div>
               <div id="header_r"></div>
          </div>
          <div id="navi">
               <div id="navi_body">
                    <ul>[*]Startseite[*]News[*]Games/Fun[*]Links[*]Termine[*]Stundenplan[*]Schüler[*]Lehrer[*]Klassensp.[*]Unterstufe[/list]			
               </div>
               <div id="navi_footer"></div>
          </div>
          <div id="content">
               <div id="content_body">
User Online: 1

<marquee direction="left"><h1>+++Die Homepage der 8f+++</h1></marquee>
<center>
<h3 align="center">Herzlich Wilkommen auf der Homepage meiner Klasse, der 8f des Karolinengymnasiums Frankenthal.</h3>




<h1>&gt;&gt;&gt;&gt; Zum Forum &lt;&lt;&lt;&lt;</h1>


<h2 class="Üschrift">NEWS</h2>

<table border="1" cellpadding="5" width="50%">
        <tr>
        <td valign="top">9.9.2005</td>
        <td>XXX</td>
        </tr>
        <tr>
        <td valign="top">8.9.2005</td>
        <td>XXX</td>
        </tr>
        <tr>
        <td valign="top">7.9.2005</td>
        <td>XXX</td>
        </tr>
        <tr>
        <td valign="top">17.8.2005</td>
        <td>XXX</td>
        </tr>
</table>
	</div>
	<div id="content_footer"></div>
          </div>
     </div>
</body>
</html>

Hier das CSS:

Code:

body {
	text-align: center;
		
	}
div#root {
	width: 802px;
	margin: 0px auto;
	text-align: left;
	border: 1px solid orange;	
	background-color: yellow;
	}

div#header {
	width: 800px;
	height: 218px;
	}
div#header_l {
	width: 230px;
	height: 218px;
	background-image: url(../images/head_left.jpg);
	float:left;
	}
div#header_r {
	width:570px;
    height:218px;
	background-image: url(../images/head_right.jpg);
	float:left;
	}
div#navi {
		float: left;
	
	}
div#navi_body {
	width: 230px;
	background-image: url(../images/navi_body.jpg);
	background-repeat: repeat-y;
	padding-left: 50px;
	padding-right: 30px;
	}
div#navi_footer {
	width: 230px;
	height: 59px;
	background-image: url(../images/navi_footer.jpg);
	}
div#content{
	width: 569px;
	float: left;
	}
div#content_body{
	width: 570px;
	background-image: url(../images/content_body.jpg);
	background-repeat: repeat-y;
	padding-left: 20px;
	padding-right: 45px;
	}
div#content_footer{
	width: 570px;
	height: 59px;
	background-image: url(../images/content_footer.jpg);
	}

Die Testseite läuft leider auf meinem lokalen Server... Aber ich schaue, dass ich sie noch irgendwo hochlade...
Viele Grüße
Alexander

Kommentar

popel95

Dabei seit: 20.10.2005
Beiträge: 68

01.11.2005, 17:02

hallo ich hab ein doofes problem wen ich nen link im menü anklicke öfnet er sich im gleichen fram

Code:

<html>
<head>
<title></title>
</head>
<frameset rows="20%,*" border="4">
        <frame name="Header"
         src="http://de.geocities.com/klasse4_05/test.html"
         scrolling="No">
<frameset cols="20%,*">
        <frame name="Frame1"
         src="http://de.geocities.com/klasse4_05/test.html"
         scrolling="No">
        <frame name="Frame2"
         src="http://de.geocities.com/klasse4_05/test.html">

</html>
<HTML><HEAD></HEAD><BODY>



<CENTER><CODE>[-------- Ende der Seite --------]</CODE></CENTER>

<HR> 


<TABLE bgColor=#ffffff border=0 cellPadding=0 cellSpacing=0 width="100%">
<tr><td bgColor=#ffffff>
<TABLE bgColor=#9999cc border=0 cellPadding=4 cellSpacing=0 width="100%">
<TR>
<TD><FONT face=arial>Erweiterter HTML-Editor</FONT></TD>
<td align=right>
<TABLE border=0 cellPadding=1 cellSpacing=0>
<TR>
<TD bgColor=#ccccff noWrap><FONT face=Arial size=-1>
 HTML-Hilfe
</FONT>
</TD></TR></TABLE>
</TR>
</TABLE>
<table width="100%" cellspacing="0" cellpadding="0" border="0"><tr><td width="50%">
<font face=arial size=-1>Titelseite &gt; Datei-Manager &gt; Erweiterter HTML Editor</font>
</td></tr></table>



<form method=post action="/filemanager/advancededitor">



<table width="100%" border=0 cellspacing=0 cellpadding=4 bgcolor=#FFFFCC>
<tr>
<td noWrap><font face=Arial size=-1>Dateiname:
<input name="newfile" value="" size=20 maxlength=30></font></td>
</tr>
</table>
<table border=0 cellPadding=2 cellSpacing=0 bgColor="#cccccc" width="100%">
<tr>
<td bgColor="#cccccc" noWrap>
<input name="directory" type=hidden value="">
<input name="dispopts" type=hidden value="html, gif, jpg, other;;*">
<input type="submit" name="op-newfile" value="Neu">
<input type="submit" name="op-preview" value="Vorschau">
<input type="submit" name="op-savefile" value="Speichern">
<input type="submit" name="op-savecontinue" value="Speichern und fortfahren">
<input type="reset" value="Löschen">
</td><td align="right">
<input type="submit" name="op-cancel" value="Abbrechen">
</td></tr></table>
<font face="Arial" size=2>Willkommen bei Ihrem Erweiterten HTML-Editor. Mit diesem Editor können Sie Ihre eigene, benutzerdefinierte HTML kodieren. Wenn Sie auf die Schaltfläche Voransicht klicken, können Sie außerdem sehen, wie Ihre Seite im Web tatsächlich aussieht.
</font>



<center>
<textarea wrap=virtual name="body" rows=25 cols=65>
<html>
<head>
<title></title>
</head>
<frameset rows="20%,*" border="4">
        <frame name="Header"
         src="test.html"
         scrolling="No">
<frameset cols="20%,*">
        <frame name="Frame1"
         src="test.html"
         scrolling="No">
        <frame name="Frame2"
         src="test.html">

</html></textarea>
</center>

<font face="Arial" size=2>Achten Sie darauf, Ihre Änderungen regelmäßig zu speichern. Sollte Ihre Internet-Verbindung &quot;ablaufen,&quot; (Time out) wird Ihre Arbeit NICHT automatisch gespeichert.</font>



<table border=0 cellPadding=2 cellSpacing=0 bgColor="#cccccc" width="100%">
<tr>
<td bgColor="#cccccc" noWrap>
<input type="submit" name="op-newfile" value="Neu">
<input type="submit" name="op-preview" value="Vorschau">
<input type="submit" name="op-savefile" value="Speichern">
<input type="submit" name="op-savecontinue" value="Speichern und fortfahren">
<input type="reset" value="Löschen">
</td><td align="right">
<input type="submit" name="op-cancel" value="Abbrechen">
</td></tr></table>
</form>
<CENTER><hr size=1 width=675><font face=verdana size=-2>Copyright &copy; 
2005 Yahoo! Inc. Alle Rechte vorbehalten.

Hilfe
Geschäftsbedingungen
Richtlinien
Rechtliche Hinweise

<font size=2>Datenschutzbestimmungen</font>
</font></CENTER>

<script language="JavaScript" type="text/javascript" src="http://uk.adserver.yahoo.com/a?f=382041053:RS&p=de&l=RS&c=r&site-country=de&rand=1130864424">
</script>



</td></tr></table>
</body>
</html>


<script language="javascript" src="http://us.i1.yimg.com/us.yimg.com/i/mc/mc.js">
</script>

Kommentar

#8

01.11.2005, 17:05

Was soll denn bitte der Mist hier?
Kommentar
Maho88

Dabei seit: 18.09.2005

Beiträge: 47
#9

01.11.2005, 21:01

hat das irgendwas mit meiner Frage zu tun?
Nur so als Tipp...: Neues Thema aufmachen :wink:
Kommentar

Ankündigung

Probleme mit CSS-Layout

Neue Werbung 2019