css div container positionieren...

rammstein

hallo,

möchte unter #title und #contant
left und right boxen stellen.
das klappt auch bei der ersten box.
center habe ich iframe, geht auch, nun sollen mehrere left und rightboxen untereinander, aber die befinden sich unter dem iframe???help

sejuma

Vermutlich musst du clearen oder du packst alle left- und right-Boxen jeweils in einen übergeordneten Div.
Link zur Seite wäre hilfreich.

rammstein

hi,

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css"><!--
body
{
font-family:Verdana,Tahome,Arial,Sans Serif,Cloister Black;
font-size:12px;
font-color:ffffff;
background-color:#000000;
}
#title {
height:80px;
padding:10px;
border:2px solid #cc0000;
background-color:#000000;
margin-bottom:10px;
}
#left,#right {
width:98px;height:200px;
padding:5px;
spacing:5px;
border:2px solid #cc0000;
background-color:#000000;
margin-bottom:200px;
margin-left:2px;
margin-right:2px;
margin-top:0px;
}
#left {
float:left;
}

#right {
float:right;
}
#title {
float:center;
}
#content {
float:center;
}
p.cleartext {
clear: left;right;
}
#content {
float:center;
width:74%;height:54px;
padding:5px;
margin-left:2px;
margin-right:2px;
margin-top=10px;
margin-bottom:0px;
border:2px solid #dddddd;
background-color:#000000;
}

a:hover {text-decoration:none; color:#cc0000;}
a {text-decoration:underline; color:#dddddd;}
//--></style>
<title></title>
</head>
<body>
<div id="title">
<font color="#ffffff">
<div align="center">
<h1></h1>
<font color="#dddddd">
<h2></h2></>
</div>
<p><div align="center"></p></div>
<div id="left">
<font color="#ffffff">
<p><u>Menue</p></u>
<font color="#dddddd">
<u><li>Anmeldung</li>
<li>Anmeldung</li>
<li>Anmeldung</li>
<li>Anmeldung</li>
<li>Anmeldung</li>
<li>Anmeldung</></li></u>
<p>
<u>kostenlos anmelden</u>
</div>
<div id="right">
<p><u>Service</p></u>
<font color="#dddddd">
<u>
<li>sofortzugang</li>
<li><a href="referer=21181&site=dialer&languagestatus=de&wsid=FM1001745&wid=0" target="_self" title="Beispiel-Link 5">Sofortzugang</a></li>
<li><a href="referer=21181&site=pw&languagestatus=de&wsid=FM1001745&wid=0" target="_self" title="/ passwort">Passwort anfordern</a></li>
<li><a href="referer=21181&site=wmportal&languagestatus=de&wsid=FM1001745&wid=0" target="_self" title="/ webmaster werden">Webmaster werden</a></li>
<li><a href="referer=21181&site=galerien&languagestatus=de&wsid=FM1001745&wid=0" target="_self" title="/ sender gallerien">Top 10</a></li>
<li><a href="referer=21181&site=impr&languagestatus=de&wsid=FM1001745&wid=0" target="_self" title="/ kontakt">Kontakt</a></li>
</u>
<a href="referer=21181&site=impr&languagestatus=de&wsid=FM1001745&wid=0" target="_self" title="/ kontakt">Sender werden</a>
</u>
</div>
<div id="content">
<font color="#ffffff">
<div align="center">
<font color="#cc0000">
<p></p>
<font color="#cc0000">
<p></p>
</div>
<p>
<div align="center">
<p></p>
<p></p>
</div>
<p>

<div align="center">Ko..jetzt anmelden!!!</div></p>

Thonixx

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css"><!--
body 
{
font-family:Verdana,Tahome,Arial,Sans Serif,Cloister Black;
font-size:12px;
font-color:ffffff;
background-color:#000000;
}
#title {
height:80px;
padding:10px;
border:2px solid #cc0000;
background-color:#000000;
margin-bottom:10px;
}
#left,#right {
width:98px;height:200px;
padding:5px;
spacing:5px;
border:2px solid #cc0000;
background-color:#000000;
margin-bottom:200px;
margin-left:2px;
margin-right:2px;
margin-top:0px;
}
#left {
float:left;
}


#right {
float:right;
}
#title {
float:center;
}
#content {
float:center;
}
p.cleartext {
clear: left;right;
}
#content {
float:center;
width:74%;height:54px;
padding:5px;
margin-left:2px;
margin-right:2px;
margin-top=10px;
margin-bottom:0px;
border:2px solid #dddddd;
background-color:#000000;
}


a:hover {text-decoration:none; color:#cc0000;}
a {text-decoration:underline; color:#dddddd;}
//--></style>
<title></title>
</head>
<body>
<div id="title">
<font color="#ffffff">
<div align="center">
<h1></h1>
<font color="#dddddd">
<h2></h2></>
</div>
<p><div align="center"></p></div>
<div id="left">
<font color="#ffffff">
<p><u>Menue</p></u>
<font color="#dddddd">
<u><li>Anmeldung</li>
<li>Anmeldung</li>
<li>Anmeldung</li>
<li>Anmeldung</li>
<li>Anmeldung</li>
<li>Anmeldung</></li></u>
<p>
<u>kostenlos anmelden</u>
</div>
<div id="right">
<p><u>Service</p></u>
<font color="#dddddd">
<u>
<li>sofortzugang</li>
<li><a href="referer=21181&site=dialer&languagestatus=de&wsid=F  M1001745&wid=0" target="_self" title="Beispiel-Link 5">Sofortzugang</a></li>
<li><a href="referer=21181&site=pw&languagestatus=de&wsid=FM100  1745&wid=0" target="_self" title="/ passwort">Passwort anfordern</a></li>
<li><a href="referer=21181&site=wmportal&languagestatus=de&wsid  =FM1001745&wid=0" target="_self" title="/ webmaster werden">Webmaster werden</a></li>
<li><a href="referer=21181&site=galerien&languagestatus=de&wsid  =FM1001745&wid=0" target="_self" title="/ sender gallerien">Top 10</a></li>
<li><a href="referer=21181&site=impr&languagestatus=de&wsid=FM1  001745&wid=0" target="_self" title="/ kontakt">Kontakt</a></li>
</u>
<a href="referer=21181&site=impr&languagestatus=de&wsid=FM1  001745&wid=0" target="_self" title="/ kontakt">Sender werden</a>
</u>
</div>
<div id="content">
<font color="#ffffff">
<div align="center">
<font color="#cc0000">
<p></p>
<font color="#cc0000">
<p></p>
</div>
<p>
<div align="center">
<p></p>
<p></p>
</div>
<p>


<div align="center">Ko..jetzt anmelden!!!</div></p>


<iframe ID="nameiframe" allowtransparency="true" name="nameiframe"
src="referer=21295&site=online&languagestatus=de&wsid=F  M1001745&wid=0" width="716px" height=2540px" align="center"
scrolling="no" frameborder="0"></iframe>
</p>
<p>
<div align="center"><a href="" target="_self" title="www.sex-girls-live.com">www.live.com</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</p>
<p>
<div align="center"><a href="http://w.com" target="_self" title="www.geile-amateure-live.com">www-live.com</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<p>
<div align="center"><a href="http://ww.com" target="_self" title="www.a>www.amateur-sex-tv.com</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</div>
</p>
<div id="topnavi">
<div align="center"><a href="httreferer=21181&site=online&languagestatus=de&wsi  d=FM1001745&wid=0" target="_self" title="/ online sender">online sender</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                       <a href="http://web.privat-akt.com/dlink.php?...M1001745&wid=0" target="_self" title="/  agb`s">agb`s</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                      <a href="http://referer=21181&site=impr&langu...M1001745&wid=0" target="_self" title="`/ impressum">impressum</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
  <a href="http://referer=21181&site=faq&langua...M1001745&wid=0" target="_self" title="/ faq">faq</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                      <a href="http://referer=21181&site=mreg&langu...M1001745&wid=0" target="_self" title="/ member area">member area</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</div>
</p>
</font>
</body>
</html>

Alles anzeigen

Ist besser zu Lesen

Ou.... float:center ist im Fall keine gültige Angabe im CSS. Das kann nicht dargestellt werden.
Mach das hier anstattdessen: margin: 0 auto;
Dazu muss width definiert sein und jegliche margin-werte werden ignoriert.

rammstein

hi,
sitz schon 2 abende, bin etwas platt, weil seite schon mir gefällt...
aber habe gerade hochgestellt, left und right verschieben sich auf content und title...große bitte...falls du, und das hast du, das überschaust,
setze mir bitte die befehle rein,
viel verlangt, aber ich habe gerade seite verlinkt und hat was,
möchte nur left/ right einige boxen untereinander neben iframe...
ich werde mich bedanken...

Thonixx

Lies dir mal einige Dinge über float durch und suich mal in Google.
Da hast nämlich grad n Haufen Beispiele, wie man das am Betsen lösen kann.

http://www.gidf.de

rammstein

yes...
bin ja schon am suchen und basteln...
hab da 400 ideen, die nichts bringen...
aus foren ect. aber, wenn einer draufschaut, der das kann, sieht er das problem...
css ist gemacht, um websites aufzubauen, tabellen zu entfernen und
sollte anwenderfreundlich sein, kein studium...trotzdem danke!!!

driver

mal paar anmerkungen:

- wenn du mit css arbeitest, dann verzichte doch auch auf front-tags
- was sollen die leeren h-tags ?
- sowas -> <p><div align="center"></p></div> wird niemals funktionieren
- selbiges bei -> <p><u>Menue</p></u>
- zudem, was machst du mit den haufen fonts ? streust du die zufällig einfach irgendwo ein ?
-> <font color="#ffffff"><div align="center"><font color="#cc0000"> was bringt das ?
- eine liste definiert man mit <ul> .. nicht mit <u>

kleiner tip: setz dich dringend nochmal hin und lern bißchen html und css.
was du sa zusammenbaust deutet sehr stark darauf hin, dass du zwar in
etwa weißt was die tags bedeuteten - aber du keine ahnung hast wie man
sie korrekt anwendet. merk dir vorallem: immer so schließen wie man aufgemacht
hat. z.b. <div><span><a...></a></span></div>

ich hab mal versucht - grob - deine struktur zu korrigieren. allerdings wirfst du
so mit div-tags und p-tags um dich, dass kein normaler mensch mehr durchblickt
und weiß, was du damit eigentlich bezwecken willst. also falls elemente fehlen,
dann poste einfach nochmal..

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css"><!--
* {
    padding:0px;
    margin:0px;
    border:none;
}


body
{
    font-family:Verdana,Tahome,Arial,Sans Serif,Cloister Black;
    font-size:12px;
    font-color:#ffffff;
    background-color:#000000;
}


#page { 
    margin: 0 auto; 
    padding:10px;
}


#title {
    height:80px;
    padding:10px;
    border:2px solid #cc0000;
    background-color:#000000;
    margin-bottom:10px;
    color:#fff;
}


#left,#right {
    width:98px;
    height:200px;
    padding:5px;
    spacing:5px;
    border:2px solid #cc0000;
    background-color:#000000;
    margin-bottom:200px;
    margin-left:2px;
    margin-right:2px;
    margin-top:0px;
    color:#fff;
}


#content {
    width:74%;
    padding:5px;
    margin-left:2px;
    margin-right:2px;
    margin-bottom:0px;
    background-color:#000000;
}


#topnavi {
    text-align:center;
}


#left ul,
#right ul
{
    list-style-type:none;
    padding:0px;
}


.left { float:left;}
.right { float:right; }
.clearer { clear:both; }


a:link, a:visited, a:active {text-decoration:underline; color:#dddddd;}
a:hover {text-decoration:none; color:#cc0000;}


h2 { text-decoration:underline; }
//--></style>
<title></title>
</head>


<body>
    <div id="page">
        <div id="title">
            DER HEADER
        </div>

        <div id="left" class="left">
            <h2>Menue</h2>
            <ul>
                <li>Anmeldung</li>
                <li>Anmeldung</li>
                <li>Anmeldung</li>
                <li>Anmeldung</li>
                <li>Anmeldung</li>
                <li>Anmeldung</li>
            </u>
        <u>kostenlos anmelden</u>
        </div>

        <div id="right" class="right">
            <h2>Service</h2>
            <ul>
                <li>sofortzugang</li>
                <li><a href="referer=21181&site=dialer&languagestatus=de&wsid=F M1001745&wid=0" target="_self" title="Beispiel-Link 5">Sofortzugang</a></li>
                <li><a href="referer=21181&site=pw&languagestatus=de&wsid=FM100 1745&wid=0" target="_self" title="/ passwort">Passwort anfordern</a></li>
                <li><a href="referer=21181&site=wmportal&languagestatus=de&wsid =FM1001745&wid=0" target="_self" title="/ webmaster werden">Webmaster werden</a></li>
                <li><a href="referer=21181&site=galerien&languagestatus=de&wsid =FM1001745&wid=0" target="_self" title="/ sender gallerien">Top 10</a></li>
                <li><a href="referer=21181&site=impr&languagestatus=de&wsid=FM1 001745&wid=0" target="_self" title="/ kontakt">Kontakt</a></li>
            </ul>
            <a href="referer=21181&site=impr&languagestatus=de&wsid=FM1 001745&wid=0" target="_self" title="/ kontakt">Sender werden</a>
        </div>


        <div id="content" class="left">
            Ko..jetzt anmelden!!!<br/><br/>

            <iframe ID="nameiframe" allowtransparency="true" name="nameiframe" src="referer=21295&site=online&languagestatus=de&wsid=F M1001745&wid=0" width="716px" height="540px" align="center" scrolling="no" frameborder="0"></iframe>


        </div>            

        <br class="clearer" />

        <div id="topnavi">
            <a href="" target="_self" title="www.sex-girls-live.com">www.live.com</a>
            <a href="http://w.com" target="_self" title="www.geile-amateure-live.com">www-live.com</a>
            <a href="http://ww.com" target="_self" title="www.a>www.amateur-sex-tv.com</a>

            <a href="httreferer=21181&site=online&languagestatus=de&wsi d=FM1001745&wid=0" target="_self" title="/ online sender">online sender</a>
            <a href="http://web.privat-akt.com/dlink.php?...M1001745&wid=0" target="_self" title="/ agb`s">agb`s</a>
            <a href="http://referer=21181&site=impr&langu...M1001745&wid=0" target="_self" title="`/ impressum">impressum</a>
            <a href="http://referer=21181&site=faq&langua...M1001745&wid=0" target="_self" title="/ faq">faq</a>
            <a href="http://referer=21181&site=mreg&langu...M1001745&wid=0" target="_self" title="/ member area">member area</a>
        </div>
    </div>
</body>
</html>

Alles anzeigen

rammstein

hi, superschönen Dank!!!
Sieht sehr gut aus...hatte gestern gedacht, hätte Fehler und
<u> mit <ul> vertauscht und alles verkorrigiert.
Wenn ich jetzt unter die leftbox Menue weitere boxen,
gleiches format setzen möchte, geht das mit Nummerierung #left1 ???
Falls Du mir da noch Tipp geben kannst, sind meine Probleme gelöst!
DANKE!

driver

ne. da würd ich erstmal noch nen großen container anlegen,
dann in den die ganzen left-sachen reinschreiben.

ich sag ja, du solltest dir des ganze erst nochmal durchlesen
und etwas lernen. denn #left1 bewirkt garnix, gibts auch garnicht

rammstein

hi...
habe jetzt ein wenig gelesen und probiert, aber Du weißt ja selbst,
da gibt es so manche hürde...
ich bitte Dich nur, mir noch einen tipp zu geben, wie ich den Übercontainer baue...habe auf anderer seite leftbox und stelle dann leftbox_1 u.sw.
untereinander...ist aber muster gewesen, java oder so...
brauche nur zeile übercontainer, wo ich #left einfüge...danke!!!

yeti66

Hoho, ich habe erst mal etwas aufräumen müssen damit ich etwas auf dem Schirm sehe. Wenn das mal eine Webseite werden soll steckt noch viel Arbeit drinn: ...hier mal zur Ansicht:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
<!--
body {font-family:Verdana, Tahome, Arial, Sans Serif, Cloister Black;font-size:12px;color:#FFF;background-color:#000000;}
#title {height:80px;padding:10px;border:2px solid #cc0000;background-color:#000000;margin-bottom:10px;}
#left, #right {width:98px;height:200px;padding:5px;spacing:5px;border:2px solid #cc0000;background-color:#000000;margin-bottom:200px;margin-left:2px;margin-right:2px;margin-top:0px;}
#left {float:left;}
#right {float:right;text-align:left;}
#title {float:center;}
#content {float:center;}
p.cleartext {clear: both;}
#content {float:center;width:74%;height:54px;padding:5px;margin-left:2px;margin-right:2px;margin-top:10px;margin-bottom:0px;border:2px solid #dddddd;background-color:#000000;}
a:hover {text-decoration:none;color:#cc0000;}
a {    text-decoration:underline;color:#dddddd;}
-->
</style>
<title></title>
</head>
<body>
<div id="title">
  <h1>Man was`n Code ;-)) </h1>
  <h2>Wahnsinn</h2>
</div>
<div id="left">
  <ul>
    <li>Menue</li>
    <li>Anmeldung</li>
    <li>Anmeldung</li>
    <li>Anmeldung</li>
    <li>Anmeldung</li>
    <li>Anmeldung</li>
    <li>Anmeldung</li>
  </ul>
  <p>ostenlos anmelden</p>
</div>
<div id="right">
  <ul>
    <li>Service</li>
    <li>sofortzugang</li>
    <li><a href="referer=21181&amp;site=dialer&amp;languagestatus=de&amp;wsid=F M1001745&amp;wid=0"  title="Beispiel-Link 5">Sofortzugang</a></li>
    <li><a href="referer=21181&amp;site=pw&amp;languagestatus=de&amp;wsid=FM100 1745&amp;wid=0"  title="/ passwort">Passwort anfordern</a></li>
    <li><a href="referer=21181&amp;site=wmportal&amp;languagestatus=de&amp;wsid =FM1001745&amp;wid=0"  title="/ webmaster werden">Webmaster werden</a></li>
    <li><a href="referer=21181&amp;site=galerien&amp;languagestatus=de&amp;wsid =FM1001745&amp;wid=0"  title="/ sender gallerien">Top 10</a></li>
    <li><a href="referer=21181&amp;site=impr&amp;languagestatus=de&amp;wsid=FM1 001745&amp;wid=0"  title="/ kontakt">Kontakt</a></li>
    <li><a href="referer=21181&amp;site=impr&amp;languagestatus=de&amp;wsid=FM1 001745&amp;wid=0"  title="/ kontakt">Sender werden</a></li>
  </ul>
</div>
<div id="content">
  <div  >
    <h1>Komm...jetzt anmelden!!!</h1>
  </div>
  <iframe id="nameiframe" name="nameiframe"
src="referer=21295&amp;site=online&amp;languagestatus=de&amp;wsid=F M1001745&amp;wid=0" width="716" width="2540"align="middle"
scrolling="No" frameborder="0">
  </iframe>
  <div>
    <ul>
      <li> <a href="#"  title="www.sex-girls-live.com">www.live.com</a></li>
      <li><a href="#" title="www.geile-amateure-live.com">www-live.com</a></li>
      <li><a href="#"  title="www.a&gt;www.amateur-sex-tv.com">www-live.com</a></li>
    </ul>
  </div>
  <div id="topnavi">
    <ul>
      <li> <a href="httreferer=21181&site=online&languagestatus=de&wsi d=FM1001745&wid=0"  title="/ online sender">online sender</a></li>
      <li><a href="http://web.privat-akt.com/dlink.php?...M1001745&amp;wid=0"  title="/ agb`s">agb`s</a></li>
      <li><a href="http://referer=21181&amp;site=impr&amp;langu...M1001745&amp;wid=0"  title="`/ impressum">impressum</a></li>
      <li><a href="http://referer=21181&amp;site=faq&amp;langua...M1001745&amp;wid=0"  title="/ faq">faq</a></li>
      <li><a href="http://referer=21181&amp;site=mreg&amp;langu...M1001745&amp;wid=0"  title="/ member area">member area</a></li>
    </ul>
  </div>
</div>
</body>
</html>

Alles anzeigen

rammstein

hi, ich liebe den harz...(okertalsperre/bad harzburg/vienenburger seen)
ja, das sieht schon gut aus, ähnlich wie driver...
einfacher gestrickt...danke...
nun sag mir mal, und das ist ein geheimnis...
wenn ich unter #left jetzt weitere boxen stellen möchte...
wie ist der zauberspruch???
ps: die seite, habe ja für forum nicht alles angezeigt, sieht mit iframe
ect. schon gut aus, ich brauche bloß left/right boxen untereinander für
links/content u.s.w. dann ist linie drin und aufgeräumt...

thilda

Der große zauber ist das du IN das Left-div weitere "boxen" einfügst.
Mehr ist es garnicht.

driver

du nimmst dein left

HTML

<div id="left">
  <ul>
    <li>Menue</li>
    <li>Anmeldung</li>
    <li>Anmeldung</li>
    <li>Anmeldung</li>
    <li>Anmeldung</li>
    <li>Anmeldung</li>
    <li>Anmeldung</li>
  </ul>
  <p>ostenlos anmelden</p>
</div>

Alles anzeigen

und passt es entsprechend an

HTML

<div id="left">
  <div id="left_content">
   <ul>
    <li>Menue</li>
    <li>Anmeldung</li>
    <li>Anmeldung</li>
    <li>Anmeldung</li>
    <li>Anmeldung</li>
    <li>Anmeldung</li>
    <li>Anmeldung</li>
  </ul>
  <p>ostenlos anmelden</p>
  </div>


  <div id="left_content">
   <ul>
    <li>Menue</li>
    <li>Anmeldung</li>
    <li>Anmeldung</li>
    <li>Anmeldung</li>
    <li>Anmeldung</li>
    <li>Anmeldung</li>
    <li>Anmeldung</li>
  </ul>
  <p>ostenlos anmelden</p>
  </div>
</div>

Alles anzeigen

du musst die css-angaben von der id left teilen.
in "left" kommt float,width
ne neue erzeugen namens "left_content", da kommt da rest rein (farbe usw)

rammstein

hey, DU bist gut drauf...DANKE!!! teste ich gleich an...gruss rammstein

thilda

häämmm... Eine ID darf pro seite doch nur einmal vergeben werden oder habe ich das jetzt falsch in erinnerung? driver

driver

stimmt, sorry. nimm für left_content lieber ne class...

rammstein

ja, hab ich gerade gesehen...
aber habe jetzt relativ schnell border gesetzt für banner und text und
sieht interressant aus und das konnte ich gestern nicht...
jetzt macht das auch spass, wenn etwas läuft...
superdanke...hab was gelernt...gruss rammstein
ps: seite sieht jetzt dank Euch richtig gut aus!!!
3 farben, links, border, boxen, content...echt gut
so siehts z.z aus...
sorry, ab 18 !!!
http://rs-hardcore-line.com/test%203.html (kein zutritt unter 18 Jahren!!!)
grundgerüst, versuche jetzt eure befehle einzufügen, und aufzuräumen...

Tags