Mitglied
Registrierungsdatum: Oct 2006
Beiträge: 432
Website "flexibel" machen...?
Hallo, habe eine Website erstellt, jedoch verändert sie sich nicht in der Größe, wenn man das Fenster kleiner zieht? Lässt sich das irgendwie realisieren? Habe in diesem Stück nicht so sehr viel Ahnung, da ich eine solche Seite noch nie erstellt habe.
Hier die
Seite
.html
Spoiler:
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" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title> Erlebnis
</title>
<link rel="stylesheet" type="text/css" href="objects/style.css" />
<link rel="stylesheet" href="objects/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/prototype.js" > </script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects" > </script>
<script type="text/javascript" src="js/lightbox.js" > </script>
</head>
<body>
<div id="hauptbereich" >
<div id="menu" >
<div id="menu_innen" >
<div class="linkliste" >
<div class="menu_eintrag" >
<a class="eintrag-format" href="#" target="_blank" > Seite1</a>
</div>
<div class="menu_eintrag" >
<a class="eintrag-format" href="#" target="_blank" > Seite2</a>
</div>
<div class="menu_eintrag" >
<a class="eintrag-format" href="#" target="_blank" > Seite3</a>
</div>
<div class="menu_eintrag" >
<a class="eintrag-format" href="#" target="_blank" > Seite4</a>
</div>
<div class="menu_eintrag" >
<a class="eintrag-format" href="#" target="_blank" > Seite5</a>
</div>
<div class="menu_eintrag" >
<a class="eintrag-format" href="#" target="_blank" > Seite6</a>
</div>
<div class="menu_eintrag2" >
<a class="eintrag-format" href="#" target="_blank" > Seite7</a>
</div>
</div>
</div>
</div>
</div>
<div id="copyright_box" >
<div id="link" > © <a class="normal" href="#impressum" > Impressum</a> - optimized for 1152x864
</div>
</div>
<div id="content" >
<ul>
<li style="font-size:24px;margin-left:0px;color: #f4b18c;" > Content</li>
</ul>
<p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<p> Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
<div id="bilder" >
<ul>
<li style="font-size:24px;margin-left:9px;" > Bilder</li>
</ul>
<p>
<a href="images/bild4.jpg" rel="lightbox" >
<img src="images/bild1.jpg" alt="bild" width="200" height="150" hspace="22" /> </a>
</p>
<p>
<a href="images/bild3.jpg" rel="lightbox" >
<img src="images/bild2.jpg" alt="bild" width="200" height="150" hspace="22" /> </a>
</p>
</div>
<div id="logo" >
</div>
</body>
</html>
CSS
Spoiler:
Code:
body{
font-family:tahoma,verdana,arial,helvetica;
font-size:11px;
margin:0;
padding:0;
background:url(../images/seiten-hintergrund.gif) #0779d9 repeat-x;
color:#fde5cc;
}
#hauptbereich{
width:977px;
height:323px;
position:absolute;
left:0px;
top:0px;
background:url(../images/header.jpg) no-repeat;
}
/*Menü*/
#menu{
width:246px;
position:absolute;
left:291px;
top:102px;
background:url(../images/menubox.png) #fde5cc repeat-x;
padding-top:15px;
padding-bottom:24px;
background-color: #02559B;
}
#menu_innen{
background:url(../images/menu-hintergrund.gif) repeat-y;
padding:0;
}
.linkliste{
padding:263px 17px 2px 17px;
color:#003;
font-size:11px;
}
.menu_eintrag{
padding:0px;
border-top:1px solid #fffff7;
border-bottom: 1px solid #FF6A1A;
font-size:11px;
line-height:12px;
height:19px;
}
.menu_eintrag2{
padding:0px;
border-top:1px solid #fffff7;
border-bottom: 1px solid #FFAB7D;
font-size:11px;
line-height:12px;
height:19px;
margin-bottom: 300px;
}
/*Inhalt, Logo, Bilder*/
#content{
position: absolute;
width: 400px;
height: 500px;
margin-left: 600px;
margin-top: 300px;
}
#logo{
position: absolute;
width: 210px;
height: 70px;
margin-left: 307px;
margin-top: 135px;
background: url(../images/logo.gif);
}
#bilder{
position: absolute;
width: 250px;
height: 400px;
margin-left: 15px;
margin-top: 310px;
top: -4px;
color: #f4b18c;
}
/*Compyright-Box (footer)*/
#copyright_box{
width:100%;
background:url(../images/footer.jpg);
position:absolute;
top:850px;
left:0px;
height:40px;
}
#link{
position:absolute;
top:24px;
height:15px;
width:400px;
left:7px;
}
/*Hyperlink Einstellungen*/
a{
color: #ffffff;
}
a:link, a:active, a:visited, a:hover{
text-decoration: none;
}
/*EInstellungen der Klasse "eintrag-format"*/
a.eintrag-format, a.eintrag-format:link, a.eintrag-format:active, a.eintrag-format:visited{
color: black;
padding: 3px 2px 3px 24px;
display: block;
color: black;
background: url(../images/pfeil.gif) no-repeat;
text-decoration: none;
background-position:left;
}
a.eintrag-format:hover{
color: #fff;
background-color: #01427A;
}
1
Der aus der Zukunft
Registrierungsdatum: Apr 2003
Beiträge: 3.256
Re: Website "flexibel" machen...?
Größenangaben in px - sind ja feste Pixelangaben > Seite wird nicht kleiner als die Angabe ...
% angaben sind Dynamisch
2
Mitglied
(Threadstarter)
Registrierungsdatum: Oct 2006
Beiträge: 432
Re: Website "flexibel" machen...?
aber bei jemandem der eine viel größere auflösung hat, sieht dat ja dann kacke aus?
3
Moderator
Registrierungsdatum: May 2000
Beiträge: 16.167
Re: Website "flexibel" machen...?
Du kannst in modernen Browsern ja mit einer max-width-Angabe in Pixeln nach oben ein Limit setzen. Der IE ignoriert die Angabe zwar, aber schaden richtet sie dort auch nicht an. Wenn du es unbedingt brauchst, kannst du dem IE über Workarounds aber auch ein Äquivalent zu max-width beibringen.
4
Werbekritiker
Registrierungsdatum: May 2003
Beiträge: 8.401
Re: Website "flexibel" machen...?
Zitat:
Zitat von aNtiCHrist
Wenn du es unbedingt brauchst, kannst du dem IE über Workarounds aber auch ein Äquivalent zu max-width beibringen.
ich glaub das macht man dann mit
_width: 100px ;
und
_height: 100px;
ich persönlich mach übrigens immer gerne ne browserweiche rein.
wenn es der IE ist wird ein zusätzlicher stylesheet geladen, welcher nur diese modifkationen beinhaltet.
diese ie-hacks werden nämlich vom css-validator als fehler anerkannt und ich persönlich lege viel wert auf validen code
5
Moderator
Registrierungsdatum: May 2000
Beiträge: 16.167
Re: Website "flexibel" machen...?
Auf diese Weise kann man zwar dem IE 6 und älter zwar Angaben unterschieben, die max-width-Eigenschaft kennt er dadurch aber auch noch nicht. Dass das kein gültiger CSS-Code ist, stimmt aber. Per Conditional Comments ein zusätzliches Stylesheet einzubinden ist da tatsächlich eine gute Möglichkeit. Als Browserweiche würde ich das aber nicht bezeichnen, schließlich erhält der IE ja keine anderen Daten, sondern zusätzliche. Echte Browserweichen sind schlecht, da sie nicht zuverlässig funktionieren und unnötigen Aufwand hervorrufen, weil man die Layouts zwei mal pflegen muss.
6
Mitglied
(Threadstarter)
Registrierungsdatum: Oct 2006
Beiträge: 432
Re: Website "flexibel" machen...?
Oder wenn wenigstens der Content-Bereich flexibel in der Größe wäre, wäre es schon ein Erfolg... jemand Ideen?
7
Moderator
Registrierungsdatum: May 2000
Beiträge: 16.167
Re: Website "flexibel" machen...?
Steht doch schon in meinen Beiträgen.
8
Mitglied
Registrierungsdatum: Dec 2004
Beiträge: 76
Re: Website "flexibel" machen...?
Zitat:
Zitat von NoghX
aber bei jemandem der eine viel größere auflösung hat, sieht dat ja dann kacke aus?
Nein .. tut es nicht .. deine seite ist mit div's gebaut die feste größen angaben haben.
Deine Seite ist für 1024x768 optimiert.
Wenn nun jemand 1600x1200 hat sieht die seite genau so aus wie bei 1024x768 (auser das rechts neben content mehr blau ist)
Der content hat ne feste breite von 400px .. über css gehen "100%" breite nicht .. meine meinung? Ich würds so lassen ... passt doch gut
Gruß,
1two1
9
Moderator
Registrierungsdatum: May 2000
Beiträge: 16.167
Re: Website "flexibel" machen...?
Zitat:
über css gehen "100%" breite nicht
Völliger Unsinn, jedes Blockelement ist von sich aus sogar 100% breit, man kann das aber auch noch mal explizit über width:100% definieren.
10
Alle Zeitangaben in UTC +1. Es ist jetzt 06:10 Uhr.
