[HTML] [CSS]Problem mit Positionierung

Dieses Thema im Forum "Webentwicklung" wurde erstellt von White_Angel, 21. Januar 2007 .

Schlagworte:
Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 21. Januar 2007
    [CSS]Problem mit Positionierung

    Also ich will eine Navi leiste erstellen aber da der body-tag zentriert ist
    ist die navi leiste dann auch zentriest ich will es aber nach links und dann mit einen margin richten
    damit es unten links unter dem header ist.... hoffentlich ist das verstäntlich genug ^^


    Hier ist der Code

    Code:
    /* CSS Document */

/* body */

body { background: black;
 text-align: center;
 }



/* Header */
#header { border: 1px solid white ;
 width: 700px;
 height: 100px;
 
 }


/* navi */

#navi { border: 1px solid white;
 width: 120px;
 height: 20px; 
 
 
 }

    Bitte um hilfe ^^
     
  3. 21. Januar 2007
    AW: [CSS]Problem mit Positionierung

    float: left;

    CSS 4 You - The Finest in Stylesheets

    nein
     
  4. 21. Januar 2007
    AW: [CSS]Problem mit Positionierung

    ok thx es geht aber das problem jetzt ist
    die navi-box ist jetzt außerhalb der ersten box

    in die erste box sollen die anderen boxen auch rein der header schon drin

    jetzt habe ich die ganze sache mit mozilla angeguckt da ist alles kreuz und quer
    dreamweaver zeigt mir komplett anderes an -.-

    es ist nicht mehr zentriert
     
  5. 21. Januar 2007
    AW: [CSS]Problem mit Positionierung

    <center>
    <div style="width: 700px;">
    <div id="header" style="text-align: left;">
    [...]
    </div>
    <div id="navi" style="float: left; margin: 0px;">
    [...]
    </div>
    <div style="float: right; margin: 0px;">
    inhalt
    </div>
    </div>
    </center>
     
  6. 21. Januar 2007
    AW: [CSS]Problem mit Positionierung

    hmmm margin: 0px geht schonmal nicht es ist immer noch ein kleiner abstand zwischen header und navi.... und die navi-box ist zu weit links ich kann die werte nicht umändern es bleibt so wie es ist...
    bei jeder kleinen änderung ändert sich die ganze struktur und Dreamweaver und in Mozilla

    also hier ist nochmal alles

    Code:
    /* CSS Document */

/* body */

body { background: black;
 text-align: center;
 }




/* Header */
#header { border: 1px solid white ;
 width: 700px;
 height: 100px;
 margin: 2px;
 background-color: #333333;
 
 }


/* navi */

#navi { border: 1px solid white;
 float: left;
 margin-left: 260px;
 margin-top: 0px;
 padding-left: 10px;

 width: 120px;
 height: 20px;
 background-color: #333333;
 text-align: left;
 color: #FF0000;
 
 
 }
    HTML habe ich mal die Sachen da so reingemacht wie du es mir geschrieben hast

    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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<link rel="stylesheet" href="main.css" type="text/css" />
</head>

<body>
<center>
<div style="width: 700px;">
<div id="header" style="text-align: left;">
bild
</div>
<div id="navi" style="float: left; margin: 0px;">
test
</div>
</center>

</body>
</html>
     
  7. 21. Januar 2007
    AW: [CSS]Problem mit Positionierung

    habs eben bearbeitet, is denk ich so wie dus wolltest. bw wär nett

    Code:
    /* CSS Document */

/* body */

body {
background: black;
}

/* Header */

#header {
border: 1px solid white ;
width: 700px;
height: 100px;
margin-bottom: 1px;
background-color: #333333;
text-align: left
}

/* navi */

#navi {
border: 1px solid white;
float: left;
width: 120px;
margin: 0px;
height: 20px;
background-color: #333333;
text-align: left;
color: #FF0000;
}

/* inhalt */

#inhalt {
border: 1px solid white;
float: right;
background-color: #333333;
width: 577px;
margin: 0px;
text-align: left;
color: #FF0000;
}
    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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<link rel="stylesheet" href="main.css" type="text/css" />
</head>

<body>

<center>

<div style="width: 702px;">

<div id="header">
bild
</div>

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

<div id="inhalt">
inhalt
</div>

</div>

</center>

</body>
</html>
     
  8. 21. Januar 2007
    AW: [CSS]Problem mit Positionierung

    jo thx bw war schon raus :] genau so in der art wollte ich das
    also das ist schon der anfang aber wenn ich die buttons verdoppeln will
    also z.b. mit <br> nachunten setzen geht das nicht deswegen würde ich da noch eine box reinsetzen
    habe ich getan dann schiebt dich der content also die mitte ganz nach unten und in mozilla sieht das überhaupt anders aus....ich bin in sache css-style noch ein noob deswegen komme ich dabei net so klar mit dem schieben und so

    screen:
    FreeShare.us: The Leading Free Share Site on the Net


    damit es übersichtlicher ist habe ich mal mit ps skiziert:
    FreeShare.us: The Leading Free Share Site on the Net

    box 1 eigenldich nur so ein weißer rahmen,
    box 5 kommt warscheinlich ein frame rein
     
  9. 21. Januar 2007
    AW: [CSS]Problem mit Positionierung

    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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
/* CSS Document */

/* body */

body {
background: black;
}

/* Header */

#header {
border: 1px solid white ;
width: 700px;
height: 100px;
margin-bottom: 1px;
background-color: #333333;
text-align: left
}

/* navi */

#navi {
border: 1px solid white;
float: left;
width: 120px;
margin: 0px;
background-color: #333333;
text-align: left;
color: #FF0000;
}

/* inhalt */

#inhalt {
border: 1px solid white;
float: right;
background-color: #333333;
width: 577px;
margin: 0px;
text-align: left;
color: #FF0000;
}

#footer {
border: 1px solid white;
background-color: #333333;
width: 700px;
margin-top: 1px;
text-align: left;
color: #FF0000;
}
-->
</style>
</head>

<body><font color="white">box 1</font>
<center>
<div style="width: 702px; border: 1px solid red; padding: 2px;">
<div id="header" style="text-align: left;">
box 3
</div>
<div id="navi">
box 2
 <div style="margin: 0px;">
 bla
 </div>
 <div style="margin: 0px;">
 bla
 </div>
 <div style="margin: 0px;">
 bla
 </div>
 <div style="margin: 0px;">
 bla
 </div>
 <div style="margin: 0px;">
 bla
 </div>
 <div style="margin: 0px;">
 bla
 </div>
 <div style="margin: 0px;">
 bla
 </div>
 <div style="margin: 0px;">
 bla
 </div>
 <div style="margin: 0px;">
 bla
 </div>
 <div style="margin: 0px;">
 bla
 </div>
 <div style="margin: 0px;">
 bla
 </div>
 <div style="margin: 0px;">
 bla
 </div>
 <div style="margin: 0px;">
 bla
 </div>
 <div style="margin: 0px;">
 bla
 </div>
 <div style="margin: 0px;">
 bla
 </div>
 <div style="margin: 0px;">
 bla
 </div>
</div>
<div id="inhalt">
box 5
</div>
<div id="footer">
box 6
</div>
</div>
</center>

</body>
</html>
    jetzt hast alles. vlt doch mal bei CSS 4 You - The Finest in Stylesheets vorbeischauen?
     
  10. 21. Januar 2007
    AW: [CSS]Problem mit Positionierung

    nope ist wieder das selbe problem....
    hmm irgent ein fehler hat sich warscheinlich eingeschliechen...

    ich könnte ja auch mit den normalen <table> versuchen...aber ich finde css einfacher also nicht soviel codes....

    edit:

    beitrag war vorhin noch nicht editiert bei dir, jetzt geht es

    wirklich big thx!
     
  11. 23. Januar 2007
    AW: [CSS]Problem mit Positionierung

    Soo habe hier mal wieder geöffnet ein neues problem ^^"""

    der footer spielt verrückt, hab auf der seite geguckt aber finde da nix was zu diesem problem irgentwie passt

    er hat sich im hintergrund hoch gezoggen ohne grund... ich weiß auch nicht warum
    habe das gemerkt als ich margin 1px gemacht habe

    screen:
    http://m1.freeshare.us/127fs2700819.jpg

    wenn man genau hinguckt sieht man wo der footer endet und 2tes merkmal
    unten sieht man das da kein border ist am top außer weil es sich hochgezoggen hat

    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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
/* body */

body {
background: #999999;
margin-top: 30px;
}

/* Header */

#header {
border: 1px solid black ;
width: 700px;
height: 100px;
margin-bottom: 1px;
background-color: white;
text-align: left
}

/* navi */

#navi {
border: 1px solid black;
float: left;
width: 120px;
margin: 0px;
text-align: left;
color: black;
background-color: white;

}


div.navi { margin: 0px; background-color: #FF9900; padding-left: 12px}


/* inhalt */

#inhalt {
border: 1px solid black;
float: right;
background-color: white;
width: 577px;
height: 340px;
margin: 0px;
text-align: left;
color: black;
}

#footer {
border: 1px solid black;
background-color: white;
width: 700px;
margin-top: 5px;
text-align: center;
color: black;
}
-->
</style>
</head>

<body>


<center>
<div style="width: 702px; border: 1px solid white; padding: 2px; background-color: #CCCCCC;">
<div id="header" style="text-align: left;">
 <p>box 3</p>
 </div>
<div id="navi">
<div class="navi">Home</div>
 <div>
 bla
 </div>
 <div>
 bla
 </div>
 <div>
 bla
 </div>
 <div>
 bla
 </div>
 <div class="navi">
 Intern z.b.
 </div>
 <div>
 bla
 </div>
 <div>
 bla
 </div>
 <div>
 bla
 </div>
 <div>
 bla
 </div>
 <div class="navi">
 bla
 </div>
 <div>
 bla
 </div>
 <div>
 bla
 </div>
 <div>
 bla
 </div>
 <div>
 bla
 </div>
 <div>
 bla
 </div>
 <div>
 bla
 </div>
</div>
<div id="inhalt"></div>
<div id="footer">
</div>
</div>
</center>
<!-- RAUS AUS DEM CODE!!! -->
</body>
</html>
     
  12. 23. Januar 2007
    AW: [CSS]Problem mit Positionierung

    naja weiß ja nu nicht was im table so umständlicher ist kannst doch trotzdem die einzelnen styles der css einfach einbinden mit class="..."!
     
  13. 23. Januar 2007
    AW: [CSS]Problem mit Positionierung

    Schreib mal im css-code beim footer eine max-height hin.
    Müsste gehen
     
  14. 23. Januar 2007
    AW: [CSS]Problem mit Positionierung

    ja das geht zwar auch aber das löst nicht das problem mit dem footer ^^

    edit: funzt net mit dem height....
    der footer ist irgentwie unter dem header gesegtz aber hinter navi und content...

    es bleibt oben an der selben stelle

    der code steht da...könnt es ja mal näher anschauen
     
  15. 23. Januar 2007
    AW: [CSS]Problem mit Positionierung

    online preview bitte!!

    dann hier edit!

    // ich seh keinen fehler? schilder dein problem mal ein wenig genauer, was falsch is und was du anders haben willst

    screen:
    Bild=down!
     
  16. 23. Januar 2007
    AW: [CSS]Problem mit Positionierung

    wenns hilft, hier

    ->Klick

    dort ist es auch zu erkennen das der footer oben ist
    die gleiche höhe wie content und navi
     
  17. 24. Januar 2007
    AW: [CSS]Problem mit Positionierung

    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
body {
background-color: #6F6F6F;
font-family: tahoma, verdena;
font-size: 12px;
text-align: center;
}

.out {
text-align: center;
width: 700px;
padding: 2px;
border: 1px solid #FFFFFF;
background-color: #DFDFDF;
}

div {
text-align: left;
}

.header {
width: 700px;
height: 100px;
border: 1px solid #000000;
background-color: #EFEFEF;
margin-bottom: 1px;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
}

.menu {
width: 145px;
float: left;
height: 300px;
border: 1px solid #000000;
background-color: #EFEFEF;
margin: 0px;
padding-top: 0px;
}

.menusec {
border-bottom: 1px solid #000000;
margin: 0px;
background-color: #FFDF00;
text-align: center;
font-weight: bold;
}

.menu table td {
border-bottom: 1px solid #000000;
width: 100%;
}

.menu div {
width: 100%;
}

.menu a:link, .menu a:active, .menu a:visited {
text-decoration: none;
color: #000000;
}

/* mozilla */

.menu a:hover div {
background-color: #FFBF00;
width: 100%;
margin: 0px;
text-align: left;
}

/* ende mozilla */

.main {
border: 1px solid #000000;
width: 552px;
float: right;
height: 300px;
margin-bottom: 1px;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
}

.footer {
width: 700px;
height: 30px;
border: 1px solid #000000;
}
-->
</style>
<!--[if IE]>
<style type="text/css">
<!--
.menu a:hover {
background-color: #FFBF00;
width: 100%;
margin: 0px;
}
-->
</style>
<![endif]-->
</head>

<body>
<center><!--wegen mozilla -->
<div class="out">
<table border="0" cellspacing="0" cellpadding="0" align="center">
 <tr>
 <td colspan="2">
 <div class="header">
 Header
 </div>
 </td>
 </tr>
 <tr>
 <td>
 <div class="menu">
 <div class="menusec">Bla</div>
 <table border="0" cellspacing="0" cellpadding="0" width="100%">
 <tr>
 <td><a href="#"><div onmouseover="this.style.cursor=('hand')";>&nbsp;&raquo;&nbsp;Link</div></a></td>
 </tr>
 </table>
 </div>
 </td>
 <td>
 <div class="main">
 <table border="0" cellspacing="0" cellpadding="5" width="100%">
 <tr>
 <td>Inhalt</td>
 </tr>
 </table>
 </div>
 </td>
 </tr>
 <tr>
 <td colspan="2">
 <div class="footer">
 <table border="0" cellspacing="0" cellpadding="5" width="100%">
 <tr>
 <td>Footer</td>
 </tr>
 </table>
 </div>
 </td>
 </tr>
</table>
</div>
</center><!-- wegen mozilla -->
</body>
</html>
    jaja die gute alte table habs getestet mit ie und mozilla, jetzt sollte das alles passen. und weil ich grad lust hatte hab ich dir auch ein schönes a:hover menu gebaut

    (in der css kann teilweiße ein wenig schmarn stehen, aber das is ned schlimm xD)
     
  18. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.