Suche im Forum:
Suchen


Autor Nachricht
Beitrag05.09.2009 um 00:44 (UTC)    
Titel: Design CSS : Das Textfeld (content) frei positionieren

ich wollt mal fragen wie ich das content dings frei positionieren kann, ich hab gesucht nichts gefunden . . .
am code rumprobiert nichts
Zitat:

#content {
float:center;
height:300px;
width:650px;
padding:15px;
margin-left:-150px;
margin-bottom:10px;
font-size:14px;
font-family: arial;
color:#000000;
text-align:left;
background-color:#ffffff;
border:1px solid #002f2f; }


weiß evtl wer ob das möglich is???


Zuletzt bearbeitet von atomente am 05.09.2009, 09:26, insgesamt einmal bearbeitet
Beitrag05.09.2009 um 08:16 (UTC)    
Titel:

Du kannst den Content über einmal die Möglichkeit "margin" verschieben,
da du dieses bereits im Code hast, habe ich dir einfach mal die Stelle makiert.

Zitat:

#content {
float:center;
height:300px;
width:650px;
padding:15px;
margin-left:-150px;
margin-top:10px;
font-size:14px;
font-family: arial;
color:#000000;
text-align:left;
background-color:#ffffff;
border:1px solid #002f2f; }


-Rot: hier kannst du den Content von links platzieren, bei dir ist
dort momentan ein Minuswert angegeben (-150)!


-Grün: Gier kannst du den Content von oben verschieben.
______________

Beitrag05.09.2009 um 08:24 (UTC)    
Titel:

Hallo,

Es gibt mehrere Möglichkeiten, Felder im Design zu positionieren

- entweder mit absoluter Positionierung (top / left / position:absolute)
- oder mit float:left; / float:right; / clear:both; /

Einen Mix von beiden sollte man vermeiden . Entweder beim designen mit
float arbeiten, dabei oriientieren sich die Klassen / Felder an die gefloateten
Elemente (Abstände erzeugt man dann mit margin)
oder die absolute Positierung . Beides für eine Klasse ist nicht geeignet .

Ein Feld frei positionieren :

Zitat:

#content
position: absolute;
top: XXXpx;
left: XXXpx;

width:650px;
padding:15px;
margin-left:-150px;
margin-top:10px;
font-size:14px;
font-family: arial;
color:#000000;
text-align:left;
background-color:#ffffff;
border:1px solid #002f2f; }


Bei top den Abstand von oben , bei left den Abstand von linker Seite einfügen.
Alle anderen Klassen / Felder sollten dann ebenso positioniert werden .

Und bei Fragen zum Thema Design anpassen / ändern :
Bitte in der Foren-Rubrik "CSS" (unten im Forum) stellen .
Und bitte IMMER das eigene Design mit angeben. Weil sonst jeder Helfer selbst nachschauen muss Wink


Gruß Wolfgang
______________


Zuletzt bearbeitet von 24939 am 05.09.2009, 09:27, insgesamt 3-mal bearbeitet
Beitrag05.09.2009 um 08:57 (UTC)    
Titel:

Eine bessere Variante ist es aber einen Container zu erstellen, wo alle anderen Div´s reinkommen. Dann lassen sich die einzelnen Container entweder über
float, margin oder position:relative; positionieren.
______________

Beitrag05.09.2009 um 09:38 (UTC)    
Titel:

danke für die hilfe ;D

aber wenn ich jetzt das verändere, ziehts das komplette design iwie nach unten?!

Zitat:
-->
</style>
<center>
<style type="text/css">
<!--




td[height="102"] {
position:absolute;
left:50%;
margin-left:-384px; }


body {
background-color: #;
background-image:url();
text-align:center; }



margin:0px;
width: 970px;
padding-bottom:20px;
margin-bottom:20px;
text-align:center;
background-color:#;
background-image:url();
border:2px solid #; }



#nav_container {
float:left;
width:100%;
margin-left:20px;
margin-top:20px;
margin-bottom:15px;
background-image:url();
border:0px solid #FFFFFF; }


#nav_heading {
display:none; }

ul#nav {
margin:0px;
padding:0px; }


li.nav_element {
float:left;
position: relative;
list-style-type: none;
width:185px;
padding:10px 0px 2px 0px;
margin-right:10px;
margin-bottom:5px;
background-color:#;
background-image:url(http://img.webme.com/pic/t/tgw-hilfe/button5.png);
border:1px solid #; }


li.nav_element a {
display:inline;
color: #000000;
font-size:13px;
font-family:arial;
font-weight: bold;
text-decoration: none; }


#sidebar_container {
background-color:#CCCCCC;
color:#000000;
height:300px;
width:300px;
left:190px;
opacity:0.8;
padding:5px;
position:absolute;
top:220px;
width:250px;
}


#content {
float:center;
height:300px;
width:650px;
padding:15px;
margin-left:-150px;
margin-top:140px;
font-size:14px;
font-family: arial;
color:#000000;
text-align:left;
background-color:#ffffff;
border:1px solid #002f2f; }



#title , #sidebar_heading {
margin-bottom:10px;
padding:5px;
color:#FFFFFF;
font-size:14px;
font-family:arial;
background-color:#b8ab9c;
border:1px solid #3d2728; }


#header_container{display:none;}
#nav_heading {display:none;}
h1#header{display:none;}
#pre_content {display:none;}
#pre_header {display:none;}
#post_header {display:none;}
#post_content {display:none;}
#below_content {display:none;}
#extraDiv2 {display:none;}
#extraDiv3 {display:none;}
#extraDiv4 {display:none;}
#extraDiv5 {display:none;}
#extraDiv6 {display:none;}


woran liegt das?
also bin nich so der css profi ^^
Beitrag05.09.2009 um 11:10 (UTC)    
Titel:

Hab dein Code mal angepasst, etwas struktoriert und alles in einen Container gepackt:


Bei Text über Design:

Zitat:

<div id="all">


Bei Text unter Design:

Zitat:

</div>


Bei css code ohne style tags:

Zitat:

#header_container{display:none;}
#nav_heading {display:none;}
h1#header{display:none;}
#pre_content {display:none;}
#pre_header {display:none;}
#post_header {display:none;}
#post_content {display:none;}
#below_content {display:none;}
#extraDiv2 {display:none;}
#extraDiv3 {display:none;}
#extraDiv4 {display:none;}
#extraDiv5 {display:none;}
#extraDiv6 {display:none;}

body {
background-color: #;
background-image:url();
text-align:center; }

#all {
width:960px;
margin: 0 auto;
}

#nav_container {
float:left;
width:950px;
margin-left:20px;
margin-top:20px;
margin-bottom:15px;
background-image:url();
border:0px solid #FFFFFF; }


#nav_heading {
display:none; }

ul#nav {
margin:0px;
padding:0px; }


li.nav_element {
float:left;
position: relative;
list-style-type: none;
width:185px;
padding:10px 0px 2px 0px;
margin-right:10px;
margin-bottom:5px;
background-color:#;
background-image:url(http://img.webme.com/pic/t/tgw-hilfe/button5.png);
border:1px solid #; }


li.nav_element a {
display:inline;
color: #000000;
font-size:13px;
font-family:arial;
font-weight: bold;
text-decoration: none; }


#sidebar_container {
background-color:#CCCCCC;
color:#000000;
height:300px;
width:300px;
opacity:0.8;
padding:5px;
float:right;
}


#content {
float:left;
height:300px;
width:600px;
padding:15px;
font-size:14px;
font-family: arial;
color:#000000;
text-align:left;
background-color:#ffffff;
border:1px solid #002f2f; }


#title , #sidebar_heading {
margin-bottom:10px;
padding:5px;
color:#FFFFFF;
font-size:14px;
font-family:arial;
background-color:#b8ab9c;
border:1px solid #3d2728; }




Mfg Max
______________



Zuletzt bearbeitet von design-contest am 05.09.2009, 12:11, insgesamt 2-mal bearbeitet
Beitrag05.09.2009 um 16:55 (UTC)    
Titel:

danke :]
aber kann man eig das content teil frei bearbeiten, oder rutscht dann automatisch der header mit nach unten
Beitrag05.09.2009 um 17:28 (UTC)    
Titel:

ich wollt noch fragen wie ich den header reinbring

http://img.webme.com/pic/a/atomente/test.png
Beiträge der letzten Zeit anzeigen:   


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