Suche im Forum:
Suchen


Autor Nachricht
Beitrag07.08.2009 um 06:45 (UTC)    
Titel: Design CSS : Textfeld #content den Scrollbalken raus

So, Titel sagt denke ich mal alles, doch ich erklärs nochmal. Wie mache ich es, das sich der Content in der größe verändert. Der Content sollte immer so groß sein wie der Text platz braucht. ich benutze diesen Code (unten) mir fällt aber grade nicht ein wie ich den ändern muss.

Zitat:
#content {
position: absolute;
left: 50%;
top: 140px;
margin-left:-320px;
width: 590px;
height: 380px;
padding:10px;
color: #F2F2F2;
font-size:13px;
background-color:#343434;
background-image:url();
border: 1px solid #FFFFFF;
overflow:auto;}






mfg flori


Zuletzt bearbeitet von home-of-designs am 07.08.2009, 10:01, insgesamt einmal bearbeitet
Beitrag07.08.2009 um 07:41 (UTC)    
Titel:

du musst die "heigh" auf 100% stellen.

Zitat:
#content {
position: absolute;
left: 50%;
top: 140px;
margin-left:-320px;
width: 590px;
height:100%;
padding:10px;
color: #F2F2F2;
font-size:13px;
background-color:#343434;
background-image:url();
border: 1px solid #FFFFFF;}


das dürfte klappen.
MFG Matz


Zuletzt bearbeitet von creationarea am 07.08.2009, 08:48, insgesamt 2-mal bearbeitet
Beitrag07.08.2009 um 09:00 (UTC)    
Titel:

Ursache waren in deinem Code :

height: 380px;
overflow: auto;

mit overflow.auto; wurde das Textfeld scrollbar , wenn Inhalt height:380px; überstieg Wink

Lösung : overflow und height heraus nehmen
Textfeld wächst dann mit dem Inhalt mit und wird selbst nicht scrollbar

Gruß Wolle
______________
Beitrag07.08.2009 um 09:20 (UTC)    
Titel:

hab ich ja gesagt..
Beitrag07.08.2009 um 09:41 (UTC)    
Titel:

Du kannst mithilfe von:

Zitat:
min-height: ??px;


noch eine Höhe festlegen welche der Content minimal haben soll.

Mfg Max
______________
Du hast eine Frage? Ich stehe dir selbstverständlich jeder Zeit zur Verfügung!
Beitrag07.08.2009 um 11:48 (UTC)    
Titel:

ööh Danke!! den code hab ich schon voll lange gesucht!
Beitrag07.08.2009 um 13:05 (UTC)    
Titel:

Hallo,

southpark-comedyclub hat Folgendes geschrieben:
Du kannst mithilfe von:

Zitat:
min-height: ??px;


noch eine Höhe festlegen welche der Content minimal haben soll.

Mfg Max


Der ist leider Mozilla spezifisch.
Dürfte in Opera, Safari, IE und Google Chrome gar nicht gehen.
Bitte auf die Lösungen von weiter oben achten.

Liebe Grüße,

Jan aka "Asgar"
______________
Beitrag07.08.2009 um 21:19 (UTC)    
Titel:

So nochmals dankeschön für die ganzen Antworten. Eine Frage hab ich aber noch. Ich möchte das die Klasse #contentso wächst, wie der Text groß ist. Außerdem möchte ich unter dem Content noch eine Klasse erstellen, sozusagen eine Abschlussleiste. Nun weiß ich aber nicht, wie es funktioniert, das wenn der content wächst, sich auch diese Leiste bewegt.

mfg flori
Beitrag08.08.2009 um 12:26 (UTC)    
Titel:

Wäre net wenn hierauf mal nochjemand antworten würde:
Code:
#content {
position: absolute;
left: 50%;
top: 323px;
margin-left:-350px;
width: 613px;
min-height:100px;
padding:10px;
color: #F2F2F2;
font-size:13px;
background-color:#ffffff;
background-image:url(http://img.webme.com/pic/h/home-of-designs/grungev1content2.png);
}


#Footer {
position: absolute;
left: 50%;
top: 442px;
margin-left:-350px;
width: 613px;
height:90px;
padding:10px;
color: #F2F2F2;
font-size:13px;
background-color:#ffffff;
background-image:url(http://img.webme.com/pic/h/home-of-designs/grungev1footer.png);
}




So, der Content hat eine variable größe. Rein theorethisch müsste jetzt der footer (Klasse habe ich selber erstellt) mit nach unten rutschen. Tut er aber nicht. Wie kann ich das ändern ?
Beitrag08.08.2009 um 17:08 (UTC)    
Titel:

kann keiner helfen ?
Beitrag08.08.2009 um 22:39 (UTC)    
Titel:

doch ich.


Also damit sich die Höhe des contents danach richtet, wieviel platz der Text benötigt musst du folgendes einfügen:

Zitat:
#content {
position: absolute;
left: 50%;
top: 323px;
margin-left:-350px;
width: 613px;
height:100%;
padding:10px;
color: #F2F2F2;
font-size:13px;
background-color:#ffffff;
background-image:url(http://img.webme.com/pic/h/home-of-designs/grungev1content2.png);
}


Das mit dem "min-height: ??px;" wäre nur ein zusatz gewesen.

Der Footer wird nun auch automatisch mit nach unten rutschen Wink

MFG Matz

EDIT: Dein Design gefällt mir übrigens sehr gut!


Zuletzt bearbeitet von creationarea am 08.08.2009, 23:40, insgesamt einmal bearbeitet
Beitrag09.08.2009 um 07:08 (UTC)    
Titel:

das funktioniert eben nicht so. Das ist ja grade men problem. meiner meinung nach wäre das auch so gewesen, nur leider rutsch bei mir die Klasse footer dann nicht mit nach unten sondern verschwindet unter dem contnt und das ist ein ziemliches Problem Wink
Beitrag09.08.2009 um 08:57 (UTC)    
Titel:

ach du hast iceblue design?
ich ging jetzt von css aus
Beitrag09.08.2009 um 09:14 (UTC)    
Titel:

nein das ist kein iceblue. Das ist css. Hier mal der momentan komplette code:

Code:
Text über dem design
<div id="Footer"></div>




Code:

Css Code ohne style tags


#extraDiv1 {display: none;}
 #extraDiv2 {display: none;}
 #extraDiv3 {display: none;}
 #extraDiv4 {display: none;}
 #extraDiv5 {display: none;}
 #extraDiv6 {display: none;}
 #pre_header {display: none;}
 #post_header {display: none;}
 #pre_content {display: none;}
 #nav_heading{display: none;}
 div.header{display: none;}
 h1#title{display: none;}
 h2#title span {display: none;}
#nav_container{display:none;}




#header_container {
position: absolute;
left: 50%;
margin-left:-350px;
width: 633px;
height:220px;
background-color:#fffff0;
background-image:url(http://img.webme.com/pic/h/home-of-designs/grungev1header1.png);
color:#FFFFFF;
font-size:13px;
}


body {
background-color:#000000;}

*{ padding: 0; margin: 0; }

#content {
position: absolute;
left: 50%;
top: 323px;
margin-left:-350px;
width: 633px;
height:100%
min-height:100px
padding:10px;
color: #ffffff;
font-size:13px;
background-image:url(http://img.webme.com/pic/h/home-of-designs/grungev1content2.png);
}
#Footer {
position: absolute;
left: 50%;
top: 358px;
margin-left:-350px;
width: 613px;
height:90px;
padding:10px;
color: #F2F2F2;
font-size:13px;
background-color:#ffffff;
background-image:url(http://img.webme.com/pic/h/home-of-designs/grungev1footer.png);
}




#sidebar_container{
position: absolute;
left: 50%;
top:140px;
margin-left:-310px;
width: 320px;
height: 165px;
background-color:#xxxxxx;
background-image:url(http://img.webme.com/pic/h/home-of-designs/headerbeschriftungsch.png);
color:#000000;
}



So, ich hab schon zichmal durchgeschaut aber kein Fehler entdeckt. Siehst du einen ?
Beitrag09.08.2009 um 10:20 (UTC)    
Titel:

Hallo,

das height:100%; das er vorgeschlagen hatte , setzen nicht alle Browser um

Das Problem liegt an der Positionierung . Du arbeitest mit :

- position:absolute;
- left: 50%;
- top:
- und margin-left;

das was Du vorhast , ist im Baukasten nicht so einfach umzusetzen .
Wir haben es mit anderer Ausrichtung der Felder probiert .
Alle ID's / bzw. Klassen nur mit float: left; , bzw. float: right und clear: both
Wir haben den Footer eine Baukasten-ID verpasst , bzw eine ID erfunden .
Wir haben sie innerhalb und ausserhalb eines <div> platziert .
Der Footer (Streifen unten) platziert sich NICHT unter dem Feld ,
sondern dahinter .

Unser Vorhaben war folgendes :
Zitat:

<div id="Beispiel">
<div id="Feld_1"> Inhalt </div>
<div id="Feld_2"> Inhalt </div>
<div id="Feld_3"> Inhalt </div>
</div>



Feld 1 / Feld 2 und Feld 3 passen sich dem Inhalt an
Und Feld "Beispiel" passt sich dem Inhalt der 3 Felder an .
Soweit klappt alles . Die 3 befinden sich ja auch innerhalb des </div>

Was bisher nicht klappt ist :

Zitat:

<div id="Beispiel">
<div id="Feld_1"> Inhalt </div>
<div id="Feld_2"> Inhalt </div>
<div id="Feld_3"> Inhalt </div>
</div>
<div id="Streifen_Unten"> Inhalt Streifen unten</div>


Mit dem Footer scheint es nur zu klappen, wenn das Textfeld eine feste
Höhe bekommt , und sich nicht dem Textfeld anpasst .
Hier hatte ich es ja an 3 Beispielen getesten .
http://www.homepage-baukasten.de/forum/viewtopic.php?t=62368

Gruß Wolle
______________


Zuletzt bearbeitet von 24939 am 09.08.2009, 11:34, insgesamt 2-mal bearbeitet
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de