zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Container "verlängern"

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 11.07.2004, 15:17
Gast
Thread-Ersteller
 
Beiträge: n/a
Standard Container "verlängern"

Hi!

Ich habe angefangen meine Hp mit CSS zu gestalten. Natürlich möchte ich das Design der "Tabellenvorlage" beibehalten. Jetzt habe ich allerdings ein Problem:

Auf http://sts.name ...

...werden die seitlichen Menüs automatisch bis zur untersten Zeile verlängert und auch weitergezogen, wenn ich eine Inhaltsseite aufrufe. Is ja klar, sind ja auch Spalten einer Tabelle.

Bei meiner CSS Version auf http://ww8755.rw08.de/hola/2index.php ...

...dagegen werden die Menücontainer nicht verlängert. Is ja auch wiederrum klar, da ich ja keine Höhe definiert habe und sich die Höhe der Container nach dem Inhalt richtet.

Ok, soweit so gut, wie krieg ich das jetzt hin, dass ich den selben Effekt wie bei einer Tabelle erziele, dass die Seitenmenüs automatisch mit der Höhe der Inhaltsseite konform gehen ?

Gruß Xabbu

PS: Momentan stelle ich nur die index.php auf CSS um, der Inhalt wird nach wie vor mit Tabellen dargestellt, innerhalb eines Containers natürlich.

PPS: der Inhalt der style.css

Code:

#links {
width:115;
line-height:40px;
float:left;
background-image: url(http://ww8755.rw08.de/hola/back.gif);
border-left-style:dashed;
border-left-width:thin;
border-right-style:dashed;
border-right-width:thin;
border-color:#c9c9c9;
clear:right;
}

#rechts {
width:115;
line-height:18px;
float:right;
background-image: url(http://ww8755.rw08.de/hola/back.gif);
border-left-style:dashed;
border-left-width:thin;
border-right-style:dashed;
border-right-width:thin;
border-color:#c9c9c9;
}

#inhalt {
float:justify;
width:562;
margin:10;
}


#titel {
height:105px;
width:818px;
border-style:dashed;
border-width:thin;
border-color:#c9c9c9;
}

#titeloben {
height:43px;
width:820px;
padding:0px;
background-image: url(http://ww8755.rw08.de/hola/top.gif);
}

#titelunten {
height:43px;
width:820px;
padding:0px;
background-image: url(http://ww8755.rw08.de/hola/bottom.gif);
border-top-style:dashed;
border-top-width:thin;
border-top-color:#c9c9c9;
}

#spec {
border-style:solid;
border-width:thin;
border-color:#c9c9c9;
background-color:#ffffff;
width:105px;
float:center;
padding:0px;
margin:0px 0px 0px 0px;
}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 11.07.2004, 20:01
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 11.07.2004
Beiträge: 106
come@death befindet sich auf einem aufstrebenden Ast
Standard

so einfach geht das nicht. du müsstest einen <div>-kontainer um menü und content haben, der die hintergrundeigenschaften beeinhaltet.

mit sowas hab ich allerdings auch ein problem:
http://www.xhtmlforum.de/viewtopic.php?t=1478[/url]
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 11.07.2004, 21:09
Gast
Thread-Ersteller
 
Beiträge: n/a
Standard

was hat dann der äußere Container mit Content und Menüs zu tun?
Mit Zitat antworten
  #4 (permalink)  
Alt 11.07.2004, 21:40
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 24.05.2004
Beiträge: 1.176
terrikay befindet sich auf einem aufstrebenden Ast
Standard

Könntest Du bitte einen vollständigen Code posten, so wie ulle das hier aufgeführt hat: http://www.xhtmlforum.de/viewtopic.php?t=1399

Wenn Du nur die CSS angibst ohne den HTML-Teil, dann kann man halt auch nicht sehen, wo das Problem ist.
Mit Zitat antworten
  #5 (permalink)  
Alt 11.07.2004, 21:49
Gast
Thread-Ersteller
 
Beiträge: n/a
Standard

das ist der code der index.php:

Code:
<html>
<head>
<LINK rel='stylesheet' type='text/css' href='holaDB/conf/stylesheets'>
<meta name="description" content="philoskop">
<meta name="author" content="Stefan Schneider">
<meta name="generator" content="holaCMS">
<meta name="keywords" content="gedichte, geschichten, text, about, computer, links, download, free. pictures, bilder, gallery, gallerie, kostenlos, kunst, art, neu, new, nouveau, portal, stefan, schneider">
<meta http-equiv="Content-Type" content="text/html; charset=de">
<title>philoskop</title>
<script language="JavaScript">
</script>

</head>
<body>

<center>

<div style="width:820" >




<div id="titeloben" class="klein" align="center">




[
<a href="http://ww8755.rw08.de/hola"  onFocus="this.blur()"  target="_self"  class="klein">
philoskop
</a>
]

</div>

<div id="titel" align="center">

[img]http://ww8755.rw08.de/hola/main15.jpg[/img]

</div>

<div id="links" align="right">

home




about




books




poetry




spec. issue




p. hirinja




computer




the rest




guestbook




<script language="JavaScript" src="http://www.hitmaster.de/hm3c.php?cid=155201"></script> 
<span class="ganzklein"> visitors</span>

</div>

<div id="rechts" align="left">

date and time




<div style="margin:4px; margin-bottom:10px">

  unix_

<span class="ganzganzklein">

1089568364
</span>




  swatch_

<span class="ganzganzklein">

786
</span>




<span class="ganzganzklein">

CEST_ 07:52:44 pm
 11/July/2004
</span>




</div>

 spec. issue




<div id="spec">

[img]http://ww8755.rw08.de/hola/holaDB/documents/news_right2.jpg[/img]




[img]http://ww8755.rw08.de/hola/holaDB/documents/links_right.jpg[/img]




[img]http://ww8755.rw08.de/hola/holaDB/documents/abi2006_rechts.jpg[/img]




[img]http://ww8755.rw08.de/hola/holaDB/documents/tjc_right.jpg[/img]




[img]http://ww8755.rw08.de/hola/holaDB/documents/graphics_right.jpg[/img]




</div>

</div>

<div id="inhalt">

[img]s.gif[/img]

<table width="450" border="0" cellpadding="0" align="center" class="normal" cellspacing="0">
  <tr>
    <td class="gro&szlig;"><center>Welcome to the philoskop

</center></td>
  </tr>  <tr>
    <td>

      <table width="450" border="0" cellpadding="5" cellspacing="5" class="normal">
     
        
        <tr> 
          <td  class="normal">
<div align="center">
<iframe width="440" src="http://ww8755.rw08.de/corenews2/shownews.php"
 scrolling="no" marginheight="0" marginwidth="0" frameborder="0"
 align="left" height="305">

Ihr Browser kann keine iframes anzeigen. Um diese Homepage in vollem Umfang betrachten zu können benötigen Sie einen Browser der iframes anzeigen kann. Ich empfehle: www.mozilla.org.
</iframe></div>
                                                                                           

		  </td>
        </tr>
    
      </table>
     
    </td>

  </tr>
</table>

</div>

<div id="titelunten" class="ganzklein" align="center">




[ 
url_ 
http://sts.name 
|
<a onfocus="this.blur()"  href="?content=imp" class="ganzklein"> 
        imprint</a> 

|  
 ads 
|  
admin 
|  
 link us  
|  
sitemap 
]

</div>

</div>

</center>

</body>
</html>

und die style.css nochmal:

Code:
body
{
background-image:url("");
background-repeat:no-repeat;
background-attachment:fixed;
margin-top:0pt;
margin-bottom:0pt;
margin-left:0pt;
margin-right:0pt;
background-color:#ffffff;
font-color:#000000
}


a{text-decoration:none;
color:#000000 } 

.normal {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; color: #000000}

.groß {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16px; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; color: #000000}

.klein {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; color: #000000}

.ganzklein {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; color: #000000}

.ganzganzklein {  font-family: Verdana; font-size: 9px; font-style: normal; line-height: normal; font-weight: 100; font-variant: normal; color: #000000}

.toptop {  font-family: "Courier New"; font-size: 10px; font-weight: normal; color: #cccccc}



#links {
width:115;
line-height:30px;
float:left;
padding:3px;
background-image: url(http://ww8755.rw08.de/hola/back.gif);
border-left-style:dashed;
border-left-width:thin;
border-right-style:dashed;
border-right-width:thin;
border-color:#c9c9c9;
clear:right;
}

#rechts {
width:115;
float:right;
padding:3px;
background-image: url(http://ww8755.rw08.de/hola/back.gif);
border-left-style:dashed;
border-left-width:thin;
border-right-style:dashed;
border-right-width:thin;
border-color:#c9c9c9;
}

#inhalt {
float:justify;
width:562;
margin:10;
}


#titel {
height:105px;
width:818px;
border-style:dashed;
border-width:thin;
border-color:#c9c9c9;
}

#titeloben {
height:43px;
width:820px;
padding:0px;
background-image: url(http://ww8755.rw08.de/hola/top.gif);
}

#titelunten {
height:43px;
width:820px;
padding:0px;
background-image: url(http://ww8755.rw08.de/hola/bottom.gif);
border-top-style:dashed;
border-top-width:thin;
border-top-color:#c9c9c9;
}

#spec {
border-style:solid;
border-width:thin;
border-color:#c9c9c9;
background-color:#ffffff;
width:105px;
float:center;
padding:0px;
margin:3px 3px 3px 3px;
}
Mit Zitat antworten
  #6 (permalink)  
Alt 11.07.2004, 23:02
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 24.05.2004
Beiträge: 1.176
terrikay befindet sich auf einem aufstrebenden Ast
Standard

Und beim nächsten Mal lernen wir dann, das Problem zu verkürzen und auf den Punkt zu bringen.....

Vielleicht ist aber dieser Ansatz was für Dich: http://www.pmob.co.uk/temp/3colfixedtest_4.htm
Mit Zitat antworten
  #7 (permalink)  
Alt 12.07.2004, 14:10
Gast
Thread-Ersteller
 
Beiträge: n/a
Standard

ich glaube der hier hat das richtig gut hingekriegt : ):

"3 column layout - any column can be the longest. Footer will stay at bottom of window unless content is greater then it stays at bottom of document."
Mit Zitat antworten
  #8 (permalink)  
Alt 12.07.2004, 18:16
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 11.07.2004
Beiträge: 106
come@death befindet sich auf einem aufstrebenden Ast
Standard

du solltest vielleicht darüber nachdenken, ein DTD anzugeben, und falls du deine Dokumente in XHTML schreibst, eine XML Deklaration gleich mit. In diesem Fall, sollte dein Dokument so anfangen:
Code:
<?xml version="1.0" encoding="iso-88589-1")>
<!DOCTYPE html 
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
    <head>
        <title>...</title>
        <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1">
Mit Zitat antworten
  #9 (permalink)  
Alt 13.07.2004, 17:00
Gast
Thread-Ersteller
 
Beiträge: n/a
Standard

momentan habe ich allerdings ein gemisch von dokumenten in html und xhtml, da ich meine inhaltsseiten per php einbinde und diese noch nicht auf css bzw. xhtml umgeschrieben worden sind, macht das was aus?
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 13.07.2004, 17:05
Gast
Thread-Ersteller
 
Beiträge: n/a
Standard

eine Frage: beim IE werden die CSS-Rahmen alles andere als "thin" angezeigt. mozilla und firefox dagegen stellen die rahmen "thin" dar. kann man da was gegen tun?
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Anfängerfrage: Zentrierung in Galerie und Border-Problem goldbeere CSS 3 04.11.2013 20:07
Positionierung von Container horizontal mayhemtl CSS 9 11.08.2007 16:25
div container verschachteln blau CSS 2 05.12.2006 20:44
Container nimmt nicht die Höhe seines Inhalts an Lestat CSS 10 04.08.2005 14:47
Mitwachsende DIV Container Myjestic CSS 9 27.07.2005 18:37


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:08 Uhr.