[Erledigt] div positionierung + textfluss

Screeze · 19.02.2009, 17:30

Folgendes Problem:

Eine seite (header, middle [links, mitte,rechts], footer) ist vorhanden.
Absolut bestimmt wird eine art bilderrahmen über Header und einen teil von middle(mitte,rechts) gelegt.
Bild:

Da wo ich mit blau so ein zickzack gemalt habe sollte normaler text stehen können. (das ganze is nur der rechte ausschnitt der seite)
Ich bräuchte jetzt eine möglichkeit, den bereich wo der rahmen in den contentbereich reingeht, diesen bereich irgendwie so zu definieren dass da kein text erscheint, links davon und unten davon schon, aber ohne dass der geteilt werden muss.

meine idee war ein div container irgendwie dort zu positionieren wo der rahmen ist,untendrunter aber und in dem middle bereich, aber irgendwie krieg ich das nicht hin wie ich es möchte.

Das design sieht so aus:

Code:

 <div id="wrapper">
        <div id="head">
            <div id="banner"></div>
            <div id="navi">
               <div class="nav">Home<br></div>
               <div class="nav">Gallerie</div>
            </div>
            <div id="rahmen"></div>
        </div>
        <div id="middle">
            <div id="m_left"></div>
            <div id="content">
               asdasdasdasdasdasdasdasd<br><br><br><br><br><br><br><br><br><br>
            </div>
            <div id="m_right"></div>
        </div>
        <div id="footer"></div>
    </div>

css:

Code:

*{
    margin:0px;
    padding:0px;
 }
html {
    background-color:#FFFFFF;
    text-align:left;
}
#wrapper  {
    position:relative;
    width:1020px;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}
#head {
    width:1020px;
}
#banner {
    background-image:url(img/header.jpg);
    width:1020px;
    height:190px;
    margin-left:auto;
    margin-right:auto;
    margin-top:10px;
}
#navi {
    position:absolute;
    top:176px;
    left:40px;
}
.nav {
    background-image:url(img/postit_off.gif);
    background-repeat:no-repeat;
    float:left;
    width:111px;
    height:43px;
    padding-top:9px;
    margin-left:5px;
}
.nav:hover {
    background-image:url(img/postit_on.gif);
    background-repeat:no-repeat;
    float:left;
    width:111px;
    height:43px;
    padding-top:9px;
    margin-left:5px;
}
#middle {
    position:relative;
    z-index:1;
}
#rahmen {
    background-image:url(img/rahmen_blank.gif);
    background-repeat:no-repeat;
    position:absolute;
    width:208px;
    height:210px;
    top:121px;
    right:1px;
    z-index:5;
}
#m_left{
    background-image:url(img/thread.gif);
    width:20px;
    float:left;
    height:200px;
    margin-left:9px;
}
#content {
    position:relative;
    top:30px;
    width:962px;
    float:left;
}

#m_right{
    float:right;
    background-image:url(img/thread.gif);
    width:20px;
    height:200px;
    margin-right:9px;
    float:right;
}

#footer {
    background-image:url(img/footer.jpg);
    float:right;
    width:1020px;
    height:30px;
}

Hat da jemand einen vorschlag für? (mein css wissen hält sich in grenzen)

Screeze · 19.02.2009, 18:32

Die situation hat sich leicht geändert wegen was andrem:
ich hab jetzt nichtmehr in der mitte 3 container nebeneinander, sondern 1 großen.

Code:

<div id="middle">
            <div id="spacer"></div>
            <div id="content">
               asdasdasdasdasdasdasdasd<br><br><br><br><br><br><br><br><br><br>
            </div>
        </div>

css:

Code:

*{
    margin:0px;
    padding:0px;
 }
html {
    background-color:#FFFFFF;
    text-align:left;
}
#wrapper  {
    position:relative;
    width:1020px;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}
#head {
    width:1020px;
    position:relative;
}
#banner {
    background-image:url(img/header.jpg);
    width:1020px;
    height:190px;
    margin-left:auto;
    margin-right:auto;
    margin-top:10px;
}
#navi {
    position:absolute;
    top:176px;
    left:40px;
    z-index:3;
}
.nav {
    background-image:url(img/postit_off.gif);
    background-repeat:no-repeat;
    float:left;
    width:111px;
    height:43px;
    padding-top:9px;
    margin-left:5px;
    z-index:3;
}
.nav:hover {
    background-image:url(img/postit_on.gif);
    background-repeat:no-repeat;
    float:left;
    width:111px;
    height:43px;
    padding-top:9px;
    margin-left:5px;
}
#bg {
    background-image:url(img/threads.gif);
    z-index:2;
    position:absolute;
    top:190px;
    width:1024px;
    height:30px;
}
#middle {
    z-index:1;
}
#rahmen {
    background-image:url(img/rahmen_blank.gif);
    background-repeat:no-repeat;
    position:absolute;
    width:208px;
    height:210px;
    top:121px;
    right:1px;
    z-index:5;
}

#content {
    position:relative;
    background-image:url(img/threads.gif);
    top:30px;
    width:1024px;
    min-height:150px;
}
#spacer {
    position:relative;
    float:right;
    background-color:black;
    z-index:6;
    width:209px;
    height:100px;
}

#footer {
    background-image:url(img/footer.jpg);
    position:relative;
    width:1020px;
    height:30px;
}

ich hab also ein div (zum positionieren isses hier schwarz und liegt oben noch) an die stelle gesetzt. Solange der text klein genug ist, dass er links von dem spacer hinpasst, is ok, sobald er größer wird verschiebt sich der gesamte text nach unterhalb des divs.

Gibts hier nur die möglichkeit den ganzen rechten Bereich zu "sperren"?
oder gibts villeicht doch noch eine?

Screeze · 19.02.2009, 19:16

oh mann bin ich blöd, natürlich klappt das so, man sollte halt zum testen nicht einfach
asdasdasdasdasdasd (+200 zeichen) eingeben, sondern zwischendrin mal leerzeichen packen, weil der browser ja nur bei neuen wörtern umbricht.

Somit mal wieder ein schönes selbstgespräch

Screeze · 19.02.2009, 20:14

Tja zu früh gefreut.
Im FF und safari sieht es erste Sahne aus.

Aber ihr ratet schon wer wiedermal nicht will?
der IE!

Im IE wird das ganze dann wieder unter dem spacer angezeigt.

Ich hab ehrlich gesagt keine Ahnung was ich noch ändern könnte das das klappt, aber villeicht einer von euch.
Das ganze wird ein Design für eine art Blog für nen kumpel der jetzt seit paar tagen im ausland studiert, damit er nicht immer 100 leuten erzählen muss was er gemacht hat

Ich hab hier mal ne live-demo vom design (ohne funktionen) online gestellt, damit ihr seht was ich mein:

{pagetitle}

Der Quelltext:

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">
<head>
    <title>{pagetitle}</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    .... (mehr metas)
    <meta name="revisit-after" content="1 days" />
    <link rel="stylesheet" type="text/css" href="css.css" />
    <!-- Browserweiche fuer den InternetExplorer -->
    <!--[if   IE]>
        <link rel="stylesheet" type="text/css" href="css-ie.css" >
    <![endif]-->
</head>
<body>
    <div id="wrapper">
        <div id="bg"></div>
        <div id="head">
            <div id="banner"></div>
           
            <div id="navi">
               <div class="nav">Home<br></div>
               <div class="nav">Gallerie</div>
            </div>
            <div id="rahmen"></div>
        </div>
        <div id="middle">
            <div id="spacer"></div>
            <div id="content">
               asdasdasdasdasd das  das  das  das  das  das  das  das  das  das  das  das  das  das  das  das  das  das  das1  das  das  das  das  das  das  das  das  das  das  das  das  das  das  das  das  das  das dsdasdasdasdasdasd dasdasdasdasdasdasd<br><br>
                   <br><br><br><br><br><br>
                   asdasdasdasdasda sdasdasda sdasdasdasdasda sdasdasdasdasd asdasdasda sdasdasdasdas dasdasdasdasda sdasdasdas dasdasdasd asdasda sdasdasdasda sdasdasda sdasdasdasda sdasdasdas dasdasdasd asdas dasdasd asdasd asdasdasdasd asdasdasda sdasdasdas dasdasdasdasdasd asdasdasdasda sdasdasdasda sdasdasdasdasdasdasdasd asdasdasdasdasdasdasdasdas dasdasdasdasdasdasdasdasdasda sdasdasdasdasdasdasd
                       <br><br>
            </div>
        </div>
        <div id="footer"></div>
    </div>
</body>
</html>

css.css

Code:

*{
    margin:0px;
    padding:0px;
 }
html {
    background-color:#FFFFFF;
    text-align:left;
}
#wrapper  {
    position:relative;
    width:1020px;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    z-index:1;
}
#head {
    width:1020px;
    position:relative;
    z-index:1;
}
#banner {
    background-image:url(img/header.jpg);
    width:1020px;
    height:190px;
    margin-left:auto;
    margin-right:auto;
    margin-top:10px;
    z-index:1;
}
#navi {
    position:absolute;
    top:176px;
    left:40px;
    z-index:3;
}
.nav {
    background-image:url(img/postit_off.gif);
    background-repeat:no-repeat;
    float:left;
    width:111px;
    height:43px;
    padding-top:9px;
    margin-left:5px;
    z-index:3;
}
.nav:hover {
    background-image:url(img/postit_on.gif);
    background-repeat:no-repeat;
    float:left;
    width:111px;
    height:43px;
    padding-top:9px;
    margin-left:5px;
}
#bg {
    background-image:url(img/threads.gif);
    background-repeat:repeat-y;
    z-index:1;
    position:absolute;
    top:190px;
    width:1024px;
    height:30px;
}
#middle {
    z-index:0;
    position:relative;
    background-image:url(img/threads.gif);
    background-repeat:repeat-y;
    width:1024px;
    min-height:150px;
    top:30px;
}
#rahmen {
    background-image:url(img/rahmen_blank.gif);
    background-repeat:no-repeat;
    position:absolute;
    width:208px;
    height:210px;
    top:121px;
    right:1px;
    z-index:5;
}

#content {
    position:relative;
    width:960px;
    text-align:left;
    padding-left:30px;
    z-index:1;
}
#spacer {
    z-index:1;
    position:relative;
    float:right;
    width:208px;
    height:111px;
    margin-right:5px;
}

#footer {
    background-image:url(img/footer.jpg);
    position:relative;
    width:1020px;
    height:30px;
    top:30px;
    z-index:1;
}

css-ie.css

Code:

#navi {
    top:186px;
}
#bg {
    position:absolute;
    top:200px;
    float:left;
}
#content {
     padding-left:8px;
}
#rahmen {
    top:131px;
}

Hat jemand eine Idee? bin für alles dankbar...

Screeze · 19.02.2009, 20:22

grrrrrr

ich würde mir grade gerne in den Arsch beißen!

Da probier ich ne halbe stunde rum und kriegs nich hin, poste das problem, und keine 5 minuten später fällt mir die lösung ein..

ich musste nur das "spacer" div in den "content" div reinpacken....

ja ähm sry....

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Positionierung im IE und FF unterschiedlich!	litterauspirna	HTML, Usability und Barrierefreiheit	6	20.10.2008 10:41
[Erledigt] Unterschiedl. CSS Positionierung IE Firefox..	drsoong	HTML, Usability und Barrierefreiheit	1	06.09.2008 00:28
Positionierung verschiedener Elemente in einer per PHP/JS erstellten Linkliste	tino	PHP Tipps 2008	5	13.08.2008 12:07
DIV positionierung HILFE	FreAkaZoiD	HTML, Usability und Barrierefreiheit	3	19.04.2008 15:58
ie css problem mit absoluter positionierung	obi	HTML, Usability und Barrierefreiheit	6	10.05.2007 17:30
automatische mauszeiger positionierung	snatch-ic	HTML, Usability und Barrierefreiheit	2	08.05.2006 16:57
CSS Positionierung, die in jedem browser funzt		HTML, Usability und Barrierefreiheit	2	20.12.2005 17:57
Positionierung im Listenfeld festlegen		HTML, Usability und Barrierefreiheit	1	23.11.2005 19:44
zentrierte Positionierung einer Seite bei höherer Auflösung		HTML, Usability und Barrierefreiheit	8	04.10.2005 12:35
iframe Positionierung		HTML, Usability und Barrierefreiheit	1	13.07.2005 16:44
CSS positionierung im DIV	JEGO	HTML, Usability und Barrierefreiheit	21	29.06.2005 14:25
Probleme bei Positionierung mittels CSS		HTML, Usability und Barrierefreiheit	3	25.04.2005 04:38
Wasserzeichen positionierung	kain	PHP Tipps 2005	4	19.04.2005 15:16
Hilfe bei Positionierung	nullplan	PHP Tipps 2005	6	16.03.2005 14:54
List-style-type Positionierung der Bulletpoints		HTML, Usability und Barrierefreiheit	6	05.11.2004 14:10


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

19.02.2009, 19:16
Screeze Erfahrener Benutzer Registriert seit: 04.01.2009 Beiträge: 844 PHP-Kenntnisse: Fortgeschritten	oh mann bin ich blöd, natürlich klappt das so, man sollte halt zum testen nicht einfach asdasdasdasdasdasd (+200 zeichen) eingeben, sondern zwischendrin mal leerzeichen packen, weil der browser ja nur bei neuen wörtern umbricht. Somit mal wieder ein schönes selbstgespräch

19.02.2009, 20:22
Screeze Erfahrener Benutzer Registriert seit: 04.01.2009 Beiträge: 844 PHP-Kenntnisse: Fortgeschritten	grrrrrr ich würde mir grade gerne in den Arsch beißen! Da probier ich ne halbe stunde rum und kriegs nich hin, poste das problem, und keine 5 minuten später fällt mir die lösung ein.. ich musste nur das "spacer" div in den "content" div reinpacken.... ja ähm sry....