LinkBack URL
About LinkBacks
ZitierenHilfe!
Webside mittig setzen und das sie sich am Browser anpasst.
Hallo zusammen,
habe eine homepage für mein fußball club erstellt nun habe ich das problem das ich die seite nicht mittig bekomme und sie sich nicht den browser anpasst.
kann mir jemand weiterhelfen?
www.fortunaessen.de
Danke
Hilfe!
<!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">
<head>
<title>Vor-Start</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- ImageReady Styles (Vor-Start.psd) -->
<style type="text/css">
<!--
#Tabelle_01 {
position:absolute;
left:0px;
top:0px;
width:1280px;
height:1024px;
}
#Phone-1_ {
position:absolute;
left:0px;
top:0px;
width:1280px;
height:217px;
}
#Vor-Start-02_ {
position:absolute;
left:0px;
top:217px;
width:428px;
height:200px;
background-color:#120C0E;
}
#Logo-Phone_ {
position:absolute;
left:428px;
top:217px;
width:367px;
height:501px;
}
#Vor-Start-04_ {
position:absolute;
left:795px;
top:217px;
width:485px;
height:807px;
background-color:#120C0E;
}
#Phone-2_ {
position:absolute;
left:428px;
top:718px;
width:367px;
height:108px;
}
#index-06_ {
position:absolute;
left:428px;
top:826px;
width:31px;
height:198px;
}
#Button-Webside_ {
position:absolute;
left:459px;
top:826px;
width:303px;
height:46px;
}
#index-08_ {
position:absolute;
left:762px;
top:826px;
width:33px;
height:198px;
}
#Vor-Start-09_ {
position:absolute;
left:459px;
top:872px;
width:303px;
height:152px;
background-color:#120C0E;
}
-->
</style>
<!-- End ImageReady Styles -->
</head>
<body style="background-color:#120C0E;">
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/de_DE/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="http://www.fortunaessen.de" data-send="false" data-layout="box_count" data-width="450" data-show-faces="true" data-font="verdana"></div>
<!-- ImageReady Slices (Vor-Start.psd) -->
<div id="Tabelle_01">
<div id="Phone-1_">
<img id="Phone_1" src="/bilder/phone_1.jpg" width="1280" height="217" alt="Phone_1" />
</div>
<div id="Logo-Phone_">
<img id="Logo_Phone" src="/bilder/logo_phone.jpg" width="367" height="501" alt="Logo_Phone" />
</div>
<div id="Vor-Start-04_">
</div>
<div id="Phone-2_">
<img id="Phone_2" src="/bilder/phone_2.jpg" width="367" height="108" alt="Phone_2" />
</div>
<div id="index-06_">
<img id="index_06" src="/bilder/index_06.jpg" width="31" height="198" alt="" />
</div>
<div id="Button-Webside_">
<a href="http://www.fortunaessen.de/index2.html">
<img id="Button_Webside" src="bilder/button_webside.jpg" width="303" height="46" border="0" alt="Button_Webside" /></a>
</div>
<div id="index-08_">
<img id="index_08" src="/bilder/index_08.jpg" width="33" height="198" alt="" />
</div>
<div id="Vor-Start-09_">
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.fortunaessen.de&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100%; height:80px;" allowTransparency="true"></iframe>
</div>
</div>
<!-- End ImageReady Slices -->
</body>
</html>
hallo,
am besten machst du einen hauptcontainer in dem alle anderen divs drin liegen und den mittest du so aus.
#container {
text-align: center;
margin-right: auto;
margin-left: auto;
}
also margin left und right auf auto setzt den div mittig.
Geändert von Nilix313 (31.01.2012 um 16:17 Uhr)
Danke hat funktioniert bis auf den Facebook Button, da vill. noch eine Idee
www.fortunaessen.de
womit arbeitest du? wer schreibt denn den code so verschachtel?
<div id="container">
<img id="container " src="/bilder/phone_1.jpg" width="1280" height="217" alt="Phone_1" />
<img id="container " src="/bilder/logo_phone.jpg" width="367" height="501" alt="Logo_Phone" />
<img id="container " src="/bilder/phone_2.jpg" width="367" height="108" alt="Phone_2" />
<a href="http://www.fortunaessen.de/index2.html">
<img id="container " src="bilder/button_webside.jpg" width="303" height="46" border="0" alt="Button_Webside" /></a>
tttttttt
</div>
das sollte den selben effekt haben und ist wesentlich übersichtlicher. wenn du den code von deinem fb-button in den div container legst, sollte der auch mittig sein.
hii habe die seite erst mit photoshop erstellt und beareite sie mit expression web weiter
jetzt habe ich alles durch einander fb button ist immer nonch ganz rechts...oje :-(
ich sehs gerade, kein problem, ich schaus mir nochmal an.... der button liegt in einem iframe, also must du per css anweisung den iframe mittig setzen
also, bring mal "phone_1.jpg" auch auf eine breite von 367 pixel....
Dann kannst den code auf das zusammenkürzen
<div id="container">
<img src="bilder/phone_1.jpg"/>
<img src="bilder/logo_phone.jpg"/>
<img src="bilder/phone_2.jpg"/>
<img src="bilder/button_webside.jpg" />
</div>
und die css anweisung sollte so aussehen
#container {
text-align: center;
margin-right: auto;
margin-left: auto;
width: 376px;
}
Ich DANKE dir rechtherzlich ohne dich hätte ich das nicht geschafft danke nochmals THX
keine ursache
Mit dem Codeerhalte ich eine Horizontale Zentrierung hin, wie Kriege ich das mit css3 vertikal hin?margin: 0px Auto;
Hier sind 2 Methoden zur horizontalen und vertiaklen Zentrierung beschrieben:
http://www.ohne-css.gehts-gar.net/0002.php
Hm, irgendwo steckt ein Fehler doch ich sehe diesen nicht....*{
margin: 0px auto;
padding: 0px;
border: none;
outline: 0;
font-size: 100%;
background: transparent;
}
html{
background: #E2E2DA;}
body {
font-family: Georgia, serif;
font-size: 2ex;
margin: 0px auto;
padding: 0px;
width: 100%;
height: 100%;
margin: 0px auto;
line-height: 1;}
#container{
margin: 0px auto;
display: block;
position: relative;
height: 500px;
width: 650px;
clear: left;
background: #C9D3C8;
border-color: #ffffff;
border-style: 2px solid;
-moz-border-radius:10px; /* Firefox */
-webkit-border-radius:10px; /* Safari, Chrome */
-khtml-border-radius:10px; /* Konqueror */
border-radius:10px; /* CSS3 */
-moz-box-shadow: 0px 0px 5px #21303b;
-khtml-box-shadow: 0px 0px 5px #21303b;
-webkit-box-shadow: 0px 0px 5px #21303b;
}
header{
padding-top: 10px;}
nav{
width: 620px;
height: 60px;
position: relative;
background-color: #21303b;
margin-top: 10px;
color: #ffffff;
font-size: 40px;
text-shadow: #ffffff 3px 3px 5px
-moz-border-radius:10px; /* Firefox */
-webkit-border-radius:10px; /* Safari, Chrome */
-khtml-border-radius:10px; /* Konqueror */
border-radius:10px; /* CSS3 */}
#content{
margin: 0px auto;
width: 620px;
height: 400px;
clear: left;
color: #ffffff;
background-color: #21303b;
border-style: 1px solid;
border-color: white;
-moz-border-radius:10px; /* Firefox */
-webkit-border-radius:10px; /* Safari, Chrome */
-khtml-border-radius:10px; /* Konqueror */
border-radius:10px; /* CSS3 **/}
#teaser{
margin: 0px auto;
width: 600px;
height: 40px; }
Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)