kann ich diese seite zentrieren?

Gimli · 3 Februar 2008

Code:

/* #############################################################################################################################################################################
*****************************************************************************CSS DATEI FÜR DIE SEITE [URL="http://www.MALEGI.DE/ueber_mich_neu"]WWW.MALEGI.DE/ueber_mich_neu[/URL]***********************************************
################################################################################################################################################################################ */
html {font-family:"Comic Sans MS", "Arial Black", "Times New Roman", "Trebuchet MS";
}
/* #############################################################################################################################################################################
***********************************************************************************BODY DEFINITIONEN****************************************************************************
################################################################################################################################################################################ */
body {background-image:url(bg_space.jpg);
   background-repeat:repeat;
   font-family:"Comic Sans MS", "Arial Black", "Times New Roman", "Trebuchet MS";
   text-shadow:White;
   SCROLLBAR-FACE-COLOR:#666666;
   SCROLLBAR-HIGHLIGHT-COLOR:#333333;
   SCROLLBAR-SHADOW-COLOR:#333333;
   SCROLLBAR-3DLIGHT-COLOR:#344556;
   SCROLLBAR-ARROW-COLOR:#fefefe;
   SCROLLBAR-TRACK-COLOR:#000011;
   SCROLLBAR-DARKSHADOW-COLOR:#333333;
}
/* #############################################################################################################################################################################
***************************************************************************************LOGO DEFINITIONEN************************************************************************
################################################################################################################################################################################ */
#logo {background-image:url(Stern2.gif);
    color:red;
    top:0px;
    width:200px;
    height:210px;
    position:absolute;
    border-right-color:#333333;
    border-right-style:solid;
    border-right-width:10px;
    border-left-color:#333333;
    border-left-style:solid;
    border-left-width:10px;
    border-top-color:#333333;
    border-top-style:solid;
    border-top-width:10px;
    font-family:"Comic Sans MS", "Arial Black", "Times New Roman", "Trebuchet MS";
}
/* #############################################################################################################################################################################
******************************************************************************************NAVI DEFINITIONEN*********************************************************************
################################################################################################################################################################################ */
#navi {background-image:url(bg_space.jpg);
    background-repeat:repeat;
    color:#CCCCCC;
    border-color:#333333;
    border-style:solid;
    border-width:10px;
    width:200px;
    height:920px;
    position:absolute;
    top:200px;
    font-family:"Comic Sans MS", "Arial Black", "Times New Roman", "Trebuchet MS";
}
/* #############################################################################################################################################################################
**************************************************************************************TOP NAVI DEFINITIONEN*********************************************************************
################################################################################################################################################################################ */
#top_navi {border-top-color:#333333;
     border-top-style:solid;
     border-top-width:10px;
     border-right-color:#333333;
     border-right-style:solid;
     border-right-width:10px;
     height:100px;
     top:90px;
     left:220px;
     width:668px;
     position:absolute;
     padding:20px;
     font-family:"Comic Sans MS", "Arial Black", "Times New Roman", "Trebuchet MS";
}
/* #############################################################################################################################################################################
****************************************************************************************Banner DEFINITIONEN*********************************************************************
################################################################################################################################################################################ */
#banner {background-image:url(banner.gif);
   left:220px;
   width:698px;
   height:80px;
   top:0px;
   position:absolute;
   border-left-color:#333333;
   border-left-style:solid;
   border-left-width:10px;
   border-right-color:#333333;
   border-right-style:solid;
   border-right-width:10px;
   border-top-color:#333333;
   border-top-style:solid;
   border-top-width:10px;
   font-family:"Comic Sans MS", "Arial Black", "Times New Roman", "Trebuchet MS";
   cursor:pointer;
}
/* #############################################################################################################################################################################
***************************************************************************************CONTENT DEFINITIONEN*********************************************************************
################################################################################################################################################################################ */
#content {background-image:url(bg_space.jpg);
    border-color:#333333;
    border-style:solid;
    border-width:10px;
    top:200px;
    left:220px;
    position:absolute;
    width:678px;
    height:900px;
    color:#CCCCCC;
    padding:10px;
    font-family:"Comic Sans MS", "Arial Black", "Times New Roman", "Trebuchet MS";
    overflow:scroll;
}
/* #############################################################################################################################################################################
******************************************************************************************INFO DEFINITIONEN*********************************************************************
################################################################################################################################################################################ */
#info {left:928px;
    top:0px;
    border-color:#333333;
    border-style:solid;
    border-width:10px;
    position:absolute;
    width:150px;
    height:1120px;
    color:#CCCCCC;
    font-family:"Comic Sans MS", "Arial Black", "Times New Roman", "Trebuchet MS";
}
/*

Gimli · 3 Februar 2008

fortsetzung

Code:

#############################################################################################################################################################################
**************************************************************************************TOP LINK DEFINITIONEN*********************************************************************
################################################################################################################################################################################ */
a.top_nav:link,  a.top_nav:visited {color:#CCCCCC;
            background-image:url(bg_space.jpg);
            border-bottom-color:#0000FF;
            border-bottom-style:solid;
            border-bottom-width:thin;
            text-decoration:none;
            font-family:"Comic Sans MS", "Arial Black", "Times New Roman", "Trebuchet MS";
            font-size:20px;
         margin-right:10px;
}
a.top_nav:hover, a.top_nav:active {background-color:#666666;
           font-size:20px;
           color:#FF0000;
           margin-right:10px;
}
a.top_nav_on:link,  a.top_nav_on:visited {color:#666666;
            background-image:url(bg_space.jpg);
            border-bottom-color:#0000FF;
            border-bottom-style:solid;
            border-bottom-width:thin;
            text-decoration:none;
            font-family:"Comic Sans MS", "Arial Black", "Times New Roman", "Trebuchet MS";
            font-size:20px;
         margin-right:10px;
}
a.top_nav_on:hover, a.top_nav_on:active {background-color:#666666;
           font-size:20px;
           color:#CCCCCC;
           margin-right:10px;
}
/* #############################################################################################################################################################################
******************************************************************************************LINK DEFINITIONEN*********************************************************************
################################################################################################################################################################################ */
a.nav:link, a.nav:visited {color:#FFFFFF;
         background-image:url(bg_space.jpg);
         font-family:"Comic Sans MS", "Arial Black", "Times New Roman", "Trebuchet MS";
         font-size:18px;
}
a.nav:hover, a.nav:active {background-color:#FFFFFF;
         color:#FF0000;
         font-size:18px;
         font-family:"Comic Sans MS", "Arial Black", "Times New Roman", "Trebuchet MS";
}
/* #############################################################################################################################################################################
******************************************************************************************FORM DEFINITIONEN*********************************************************************
################################################################################################################################################################################ */
input {background-color:#FF6633;
}
textarea {background-color:#FF6633;
}

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="shortcut icon" href="Stern2.ico">
<link rel="stylesheet" href="style.css">
<script type="text/javascript">
<!--
function start() {
 time();
 window.setInterval("time()", 1000);
}
function time() {
 var now = new Date();
 hours = now.getHours();
 minutes = now.getMinutes();
 seconds = now.getSeconds();
 thetime = (hours < 10) ? "0" + hours + ":" : hours + ":";
 thetime += (minutes < 10) ? "0" + minutes + ":" : minutes + ":";
 thetime += (seconds < 10) ? "0" + seconds : seconds;
 element = document.getElementById("time");
 element.innerHTML = thetime;
}
//-->
</script>
</head>
<body onLoad="start()">
 <div id="logo">
 </div>
 
 <div id="banner" onClick="location.href='http://www.malegi.de'">
 
 </div>
 
 <div id="navi" align="center">
  <a href="?site=home" class="nav">Startseite</a><br>
  <a href="index.php?site=news" class="nav">News</a>
 </div>
 
 <div id="top_navi" align="center">
  <a href="" class="top_nav_on">Home</a>
  <a href="bilder.php" class="top_nav">Bilder</a>
  <a href="projekte.php" class="top_nav">Projekte</a>
  <a href="service.php" class="top_nav">Service</a>
  <a href="c.php" class="top_nav">Impressum</a>
 </div>
 
 <div id="content">
  <p><?php
    if(!isset($_GET['site'])) include('home.txt');
    else include($_GET['site'].'.txt');
     ?></p>
 </div>
 
 <div id="info">
  <p>Uhrzeit: <span id="time"></span></p>
 </div>
</body>
</html>

Hier der Link zu Seite

threadi · 3 Februar 2008

Leg noch ein div um den gesamten zu zentrierenden Inhalt, gibt diesem eine feste Breite und "margin: 0px auto;" mit. Im body dann noch "text-align: center;" für ältere Browser einfügen.

Gimli · 3 Februar 2008

geht nicht dann sieht das so aus :Untitled Document

threadi · 3 Februar 2008

Du hast keine feste Breite angegeben sondern 100%. In dem Fall geht das div über die gesamte Breite des Fensters - kann also nicht zentriert werden. Also: feste Breite angeben.

Gimli · 4 Februar 2008

dann gehts immer noch nicht!

threadi · 5 Februar 2008

Jetzt hast du 1500 Pixel angegeben - wie breit soll das Design, welches zentriert wird denn nun sein? Wenn ichs richtig sehe sind es eher 1000 Pixel.

Gimli · 5 Februar 2008

ich hab 1048px;
und dann kommt das:Untitled Document

ky_fr34k · 5 Februar 2008

ups :)
hast du vll unterschiedliche bzw gar keine breiten angegeben?

Gimli · 5 Februar 2008

ky_fr34k schrieb:
ups :)
hast du vll unterschiedliche bzw gar keine breiten angegeben?

doch hab ich! :|
aber die sind absolut positioniert und sind mit left:soundsovielpx; angeordnet!

Du solltest dir bevor du schreibs mal den css code durchlesen!;ugl:roll:

HTMLehrling · 5 Februar 2008

kann ich diese seite zentrieren?

wenn du absolut positionierst, geht die position vom bowser aus.
wenn du relative positionierst, geht die position vom vorherigen element aus. edit: umschliessenden-/eltern element
entweder machst du das mit js und berechnest den übrigen platz neben der page und addierst die hälfte zum left:soundsoviel;
oder du nimmst eine hässliche tabelle, die du absolut positionierst und die page divs werden darin relativ positioniert.
oder du löst dich von der absoluten positionierung, was ja bei dir, meines achtens möglich wäre.

Gimli · 5 Februar 2008

HTMLehrling schrieb:
oder du löst dich von der absoluten positionierung, was ja bei dir, meines achtens möglich wäre.

Danke ich werds mal versuchen

neuroleptika · 5 Februar 2008

HTMLehrling schrieb:
wenn du absolut positionierst, geht die position vom bowser aus.
wenn du relative positionierst, geht die position vom vorherigen element aus. edit: umschliessenden-/eltern element

Das stimmt nicht ganz.
Wenn das Elternelement positioniert ist, werden die darin Enthaltenen
Elemente von diesem absolute positioniert.
Man gibt dem Elternelement dazu ein position : relative; ohne Werte.

HTMLehrling · 5 Februar 2008

das stimmt natürlich

Gimli · 5 Februar 2008

VIELEN VIELEN DANK!! es klappt jetzt! ;heart;heart
Seite

kann ich diese seite zentrieren?

Gimli

Mitglied

Gimli

Mitglied

threadi

Moderator

Gimli

Mitglied

threadi

Moderator

Gimli

Mitglied

threadi

Moderator

Gimli

Mitglied

ky_fr34k

Mitglied

Gimli

Mitglied

HTMLehrling

Neues Mitglied

Gimli

Mitglied

neuroleptika

Aktives Mitglied

HTMLehrling

Neues Mitglied

Gimli

Mitglied

Neueste Beiträge