"Position", Div-Container an Seitenbreite anpassen

Nadidz · 7. April 2009

Hallo,
ich habe mich in letzter Zeit sehr mit position etc. beschäftigt. Nun ist mir aufgefallen, wenn ich das in einem Div-Container benutze und es dann an den linken Rand von meiner Seite platziere in der Auflösung 1024*768 ist alles in Ordnung, nur wenn ich dann eine grtöeßre Auflösung habe, verschiebt sich der COntainer immer weiter nach Links. Nun wollte ich wissen, wie man dem Container sagen kann, das er in der Seiten-Breite meiner Page bleiben soll, sie ist übrogens 780 Pixel breit...

Hoffe ich habe mich klar genug ausgedrückt :lol:

YetiZwerg · 7. April 2009

das machst du mit css über float:left;

lauras · 7. April 2009

oder über margin und padding, in der breite, wie du ihn vom rand weghaben willst

YetiZwerg · 7. April 2009

matürlich alles mit CSS

also mit folgenden Methoden:

Code

body{
    float:left;
    margin: 10px;
    padding: 10px;
}

Nadidz · 8. April 2009

Oh danke für eure schnellen Antworten, habs gerade irgendwie versucht aber im moment is das noch zu hoch für mich :shock:

Also hier mal meine CSS-Datei:

Code

body {
  text-align: center; /* Zentrierung IE */
  background: #FFFDFD;
}




#seitenbereich {
  text-align:left;  /* Inhalt wieder links */
  margin: 0 auto;   /* Zentrierung mitte */
  width: 780px;
  background-color:#FFFDFD;
}




#navi {
  background-color:#FFFDFD;
  height:20px;
  margin-top:-15px;
}




#inhalte {
  background-color:#FFFDFD;
}




#kopfbereich {
  background:url(bilder/header_blau.jpg) no-repeat;
  height:100px
}




a         { font-family: Arial, sans-serif;color: #000066;
}




a:link    { text-decoration:none; color:#000066;
}




a:visited { text-decoration:none; color:#993366;
}




a:hover   { text-decoration:underline overline; color:#FF0000;
}




a:active  { text-decoration:underline overline; color:#3366FF;
}

Alles anzeigen

Und so siehts im moment in meiner HTML-Datei aus:

Code

<div id="seitenbereich">




<div id="kopfbereich">
</div>




<div id="navi">
<p> </p>
</div>




<div id="inhalte">
<div style="position:absolute; left:50px; top:160px;">
<p>Text</p>
</div>




</div>

Alles anzeigen

lauras · 8. April 2009

Da bei dir einfach alles weiß ist und ich nicht so viel Zeit habe, mich da jetzt reinzudenken, gebe ich dir jetzt einfach mal meinen Quellcode, den ich acuh auf meiner Page benutzt habe. Kannst ihn benutzen und natürlich auch verändern, aber bitte wenn du ihn so oder so ähnlich verwendest das Copyright drin lassen.
Schaus dir einfach mal an, da verschiebt sich auch nix, die Größen müssen nur je nach Textumfang angepasst werden und das mit dem Einbinden der Navigation ggf. ändern.
Bitte mit Vorsicht behandeln, hab lang dran gearbeitet

LG

PS: einige CSS-Elemente sind überflüssig, da auch für die anderen Seiten des Projektes gedacht, sind aber ganz praktisch (besonders die Bilder ;))
PS2: Wens interessiert: die fertige Seite gibts demnächst auf <a class="postlink" href="http://w92.bplaced.net">http://w92.bplaced.net</a> - ist aber noch im Aufbau und kriegt noch ein anderes Design, werde ich auch später nochmal vorstellen

HTML:

PHP

<!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>
    <title>Titel</title>




    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)" />




    <link href="style.css" type="text/css" rel="stylesheet" />
    <link href="favicon.ico" type="image/x-icon" rel="shortcut icon" />







</head>




<body>
<center>







    <div id="header">




            <p>Titel o.&Auml;.</p>
    </div>




    <div class="abstand"></div> <!-- Abstand von 10px -->




    <div id="main">
        <div id="navi">
        <!-- Einfügen der Navigation per PHP -->
        <?php
        include ("navi.php")
         ?>




        </div>




        <div id="text">
        <div id="text2"> <!-- erzeugt den Abstand zwischen #text und dem Inhalt -->







            <div class="abstand"></div>
            <h3>&Uuml;berschrift</h3><br />
            <br />
            Text<br />
            immer noch Text<br />
            Blub.<br />
            immer weiter Text<br />
            <div class="abstand"></div>  <!-- Abstand vom Text bis zum Ende der Seite pro div 10px -->
            <div class="abstand"></div>
            <div class="abstand"></div>
            <div class="abstand"></div>
            <div class="abstand"></div>
            <div class="abstand"></div>
            <div class="abstand"></div>













        </div>
        </div>
    </div>




    <div class="abstand"></div>




    <div id="footer">
        <a href="copyright.htm">Copyright</a> |
        <a href="kontakt.htm">Kontakt</a>




    </div>
</center>
</body>
<!-- Copyright 2009 by Laura Seidler -->
<!-- unerlaubte Verwendung des Quellcodes wird strafrechtlich verfolgt -->
</html>

Alles anzeigen

CSS:

Code

body {
background-color: #000000;
}




#navi hr {
color: #4A99D9 ;
}




a:link {color: #4A99D9;text-decoration:none;}
a:visited {color: #4A99D9; text-decoration:none;}
a:focus {color: #4A99D9; text-decoration:none;}
a:hover {color: #4A99D9; text-decoration:none;}
a:active {color: #4A99D9; text-decoration:none;}




#footer a:link {color: #000000;text-decoration:none;}
#footer a:visited {color: #000000; text-decoration:none;}
#footer a:focus {color: #000000; text-decoration:none;}
#footer a:hover {color: #000000; text-decoration:none;}
#footer a:active {color: #000000; text-decoration:none;}




h3 {
text-align: center;
}




h4 {
text-align: center;
}




td {
width: 200px;
height: auto;
padding: 4px;




}




table {
border: medium;
border-color: white;
}
.abstand {
height: 10px;
}







.bildrechts {
float: right;
}




.bildlinks {
float: left;
}




.antworten {
font-size: small;
}










#header {
height: 100px;
width: 750px;
background-color: #FFFF00;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
font-size: x-large;
line-height: 100px;
}




#main {
height: 1000px;
width: 750px;
background-color: #21415A;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;




}




#navi {
float: left;
background-color: #000000;
color: #4A99D9;
width: 150px;
height: 980px;
margin: 10px;







}




#navi a {
font-size: small;
color: #4A99D9;
}




#text {
float: right;




width: 550px;
height: 980px;
margin: 10px;
text-align: justify;







}




#text2  {
background-color: #000000;
color: #4A99D9;
text-align: justify;
width: 530px;
height: 960px;
padding: 10px;
}




#footer {
height: 25px;
width: 750px;
background-color: #FFFF00;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
line-height: 25px;
}



















<!-- Copyright 2009 by Laura Seidler -->
<!-- unerlaubte Verwendung des Quellcodes wird strafrechtlich verfolgt -->

Alles anzeigen

Nadidz · 9. April 2009

Hey vielen Dank, für deine Datei, ich habe mir aber nur mal zum testen "#text2" rausgenommen und habe damit mal ein bisschen rumgespielt. Irgendwie funktioniert das ja, dass es wirklich nur in der Seitenbreite bleibt, so breit wie meine Seite halt auch ist, egal bei welcher Auflösung.

Nun wollte ich nochmal fragen, was "justify" bedeutet:

Code

text-align: justify

Dann noch ein paar Fragen zu den Angaben, sry das ich mich so anstelle =( bei diesen Angaben:

Code

width: 600px;
height: 200px;

Da wird doch nur mit angegeben, wie groß das Textfeld ist, wo der Text drin steht oder??

Kann ich dann eigentlich auch das hier verwenden??

Code

position:absolute; left:200px; top:500px;

Weil somit kann ich ja auch sagen, wo genau der Text sein soll auf meiner Seite, aber nicht das der Text dann wieder aus meiner Seitenbreite verschwindet und dann irgendwo ganz links rumschwört xD

Ohh ich habe gerade meine letzte Frage glaube ich selber beantwortet...dafür kann ich margin und padding verwenden. Ich kenn bis jetzt nur margin-left oder so, was bedeutet nur margin oder nur padding??

lauras · 9. April 2009

letzte Frage: http://www.html-seminar.de/box-modell.htm einmal da gucken, da wird es gut erklärt!

justify guckst du da: http://www.html-seminar.de/css-definitionen-uebersicht.htm guckst du da!

width & height:

#box {
width: 200px;
height: 500px;
}

bedeutet, dass die Box, die hier angesprochen wird so groß ist (habe dein Beispiel in meinem Code nicht gefunden, deshalb nur ein Beispiel), mehr nicht.

Noch FRagen?

LG

PS.: Du nervst schon nicht

Nadidz · 10. April 2009

Hey,
also erstmal nicht, ich werde jetzt erstmal mein Glück versuchen und hoffe das ich das so hinbekomme, wie ich das will. Vielen Dank für eure top Hilfe, vorallem Lauras, hast echt viel Erfahrung

LG Nadidz

lauras · 10. April 2009

kein Problem... aber viel ERfahrung habe ich nciht, habe bis jetzt vielleicht zwei komplette pages erstellt

"Position", Div-Container an Seitenbreite anpassen

Jetzt mitmachen!

Teilen