zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden zentrierte seite skalieren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 07.01.2005, 17:01
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.01.2005
Beiträge: 6
floater76 befindet sich auf einem aufstrebenden Ast
Standard zentrierte seite skalieren

Hi!
Bin dabei eine zentrierte aber skalierbare seite zu bauen. Auf der rechten seite sollen 2 fixe spalten sein und der content breich soll je nach browserfenstergröße immer den ganzen rest kriegen.

Leider krieg ich zweiteres nicht hin. Hab im Moment dem content 50% gegeben was für die min-width stimmt, aber bei vergrößern des fensters wird mir der abstand zu groß.

Könnt ihr hier mal drauf schauen, einfach in den Browser kopieren, dann versteht ihr vielleicht auch eher was ich meine

Meine natürlich in den editor... oder
hierein
http://www.mywebra.net/TP-Samples/codebox.html
(danke an mywebra)

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">
  <head>
    <meta name="generator" content=
    "HTML Tidy for Windows (vers 1st September 2004), see www.w3.org" />
    <title>
      Test
    </title>
<style type="text/css">
/*<![CDATA[*/
<!--
  html {height:100%;}

  body {
    text-align:center;
    font-family: Verdana, Arial, Sans-Serif;
    background-color:#ABC2E5;
    padding: 0px;
    margin: 0px;
    color:#000;
    font-size : 11px;
    width: 100%;
    height: 100%;
 }

  .clear {
    clear: both;
    visible: hidden;
  }

  .horline {
    float: none;
    clear: left;
    background-color: #fff;
    margin: 0px;
    padding: 0px;
    line-height: 3px;
    height: 3px;
 /* f&uuml;r explorer */
    font-size:2px;
 }
  
 /* zentrierung der Seite + spacer.gif in table um min-width f&uuml;r ie zu erzeugen */  
 #minwidthhack {
    text-align:left;
    margin: -3px auto;
    width:80%;
    min-width:761px;
    background-color: white;
    border-left:3px solid white;
    border-right:3px solid white;
  }
  
  #minwidthhack img {
    display: block; 
    margin: -2px 0; 
    padding:0;
    border:0;
  }
  
  #minwidthhack td {
    margin:0px; 
    padding:0;

  }
  

  
  
  

/* mittlerer bereich mit content und rechten spalten */

  #container {
    position:relative; 
    display:block; 
    background:#dff; 
    border-right:0px 
    solid #a8a;
    width: 100%;
  }
  
  /* #inner {
    display:block; 
    margin-right:-382px; 
    padding:0px;
  } */
  
  #right {
    float:right; 
    position:relative; 
    width:188px; 
    margin-right:0px;
    background-color: blue;
  }
  
  #right2 {
    float:right; 
    position:relative; 
    width:188px; 
    right:0px;
    background-color: red;
  } 
  
  #center {
  float: left;
  width:50%;
  margin-right:0px; 
  position:relative; 
  /* display:block;  */
  height:1%;
  background-color: green;
  }
    

-->

/*]]>*/
</style>
  </head>
  <body>

      <table id="minwidthhack">
        <tr>
          <td class="minwidthhack">
           <div class="horline clear"></div>
            <div id="container">
              <div id="inner">
                <div id="center">
                  CONTENT column

                  bla

                  bla

                  bla

                  bla

                  bla

                  bla

                </div>
                <div id="right">
                  LINKBOXright column

                  bla

                  bla

                  bla

                  bla

                  bla

                  bla

                </div>
                <div id="right2">
                  BILDER right column

                  bla

                  bla

                  bla

                  bla

                  bla

                  bla

                </div>
                <div class="clear"></div>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            [img]images/space.gif[/img]
          </td>
        </tr>
      </table>

  </body>
</html>
Danke im voraus für eure mühe

gruß loater76
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 08.01.2005, 16:09
Benutzer
neuer user
 
Registriert seit: 04.01.2004
Beiträge: 41
lycka befindet sich auf einem aufstrebenden Ast
Standard

probier mal:
Code:
 #center {
  float: left;
width: auto;
  margin-right:376px;
  position:relative;
  /* display:block;  */
  height:1%;
  background-color: green;
  }
Die Breite solte man angeben, damit alles richtig floatet und margin-right bewirk, dass deine Box immer so breit ist wie der Rest.

Einzige Ausnahme: wenn nicht genügend Content vorhanden ist, so wie bei deinem Test z.B.

Falls du das ganze optisch von einander abheben willst, kannst du das mit einem hg-bild machen.
Die Technik wird hier näher beschrieben:

http://www.alistapart.com/articles/fauxcolumns/

lycka
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 08.01.2005, 20:39
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.01.2005
Beiträge: 6
floater76 befindet sich auf einem aufstrebenden Ast
Standard

Hi Lycka,
danke schon mal für die antwort!
Wenn ich allerdings mehr copytext reinschreibe in den centercontainer, bricht der zwar korrekt bei margin-right 376px um, aber die beiden randdivs rutschen in die nächste zeile...
hmm... muss ich noch mal weiterexperimentieren

Gruß Floater
Mit Zitat antworten
  #4 (permalink)  
Alt 10.01.2005, 11:20
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.01.2005
Beiträge: 6
floater76 befindet sich auf einem aufstrebenden Ast
Standard

Hi nochmal,

hab mir noch mal Stu Nichols "Three columns"-Layout angeschaut
(http://www.stunicholls.myby.co.uk/layouts/threecol.html)

und einfach die linke fixe spalte auch nach rechts gestellt. Das funktioniert auch prima mit unten stehendem Code.

Was ich jetzt nicht gut finde, aber nicht umgestellt bekomme per float, ist das im HTML zuerst die Randspalte-divs stehen und dann erst sozusagen ganz unten das Content-Div. Ist für die Suchmaschinen nicht so toll...

Hat jemand ne idee, wie ich das umstellen könnte??

Gruß Floater

Hier noch mal der Code bisher:
zum ansehen hier reinkopieren:
http://www.mywebra.net/TP-Samples/codebox.html
(danke an mywebra)


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">
  <head>
    <meta name="generator" content=
    "HTML Tidy for Windows (vers 1st September 2004), see www.w3.org" />
    <title>
      Test
    </title>
<style type="text/css">
/*<![CDATA[*/
<!--
  html {height:100%;}

  body {
    text-align:center;
    font-family: Verdana, Arial, Sans-Serif;
    background-color:#ABC2E5;
    padding: 0px;
    margin: 0px;
    color:#000;
    font-size : 11px;
    width: 100%;
    height: 100%;
 }

  .clear {
    clear: both;
    visible: hidden;
  }

  .horline {
    float: none;
    clear: left;
    background-color: #fff;
    margin: 0px;
    padding: 0px;
    line-height: 3px;
    height: 3px;
 /* f&uuml;r explorer */
    font-size:2px;
 }
 
 /* zentrierung der Seite + spacer.gif in table um min-width f&uuml;r ie zu erzeugen */ 
 #minwidthhack {
    text-align:left;
    margin: -3px auto;
    width:80%;
    min-width:761px;
    background-color: white;
    border-left:3px solid white;
    border-right:3px solid white;
  }
 
  #minwidthhack img {
    display: block;
    margin: -2px 0;
    padding:0;
    border:0;
  }
 
  #minwidthhack td {
    margin:0px;
    padding:0;

  }
 
/* mittlerer bereich mit content und rechten spalten */

#container {
  background:#fff; 
  }
#inner {
  margin:0px; 
  padding:0px;
  }
#linkspalte {
  float:right; 
  width:200px; 
  left:0px; 
  background:#f00;
  }
#bildspalte {
  float:right; 
  width:200px; 
  right:0px; 
  background:#00f;}
#content {
/*   float:left; */
  margin-left:0px; 
  margin-right:400px; 
  width: auto; 
  background:#090;
  }
-->

/*]]>*/
</style>
  </head>
  <body>

      <table id="minwidthhack">
        <tr>
          <td class="minwidthhack">
           <div class="horline clear"></div>
           <div id="container">
	          <div id="inner">
       
  	          <div id="linkspalte">links
links
links
links
links
</div>
  
		          <div id="bildspalte">bilder
bilder
bilder
bilder
</div>

    	        <div id="content">Content Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>

	          </div>
          </div>
          <div class="clear"></div>

       </td>
        </tr>
        <tr>
          <td>
            [img]images/space.gif[/img]
          </td>
        </tr>
      </table>

  </body>
</html>
Mit Zitat antworten
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
Wordpress Seite Passwort-Schützen? sepp88 Serveradministration und serverseitige Scripte 5 01.11.2009 13:56
Seite wird auf anderem Computer falsch dargestellt Patrick Egli CSS 3 01.11.2009 11:40
Bei zentrierter Seite Eltern-Div flexibel vergrössern +[Hagi]+ CSS 7 14.10.2009 21:03
Shtml auf jeder Seite einbinden - counter iVx Serveradministration und serverseitige Scripte 1 13.09.2007 18:31
Fixer Header (CSS Frame) und Sprung zu Anker auf dieser Seite Chico_wau CSS 2 14.05.2007 19:08


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