Suche im Forum:
Suchen


Autor Nachricht
Beitrag15.04.2009 um 18:04 (UTC)    
Titel: CSS - Design

Hallo zusammen,

ich hab 2 kleinere Problem. Und zwar hab ich ein eigeenes Design mit Hifle von CSS erstellt. Schau ich mir die HP auf dem IE an ist alles perfekt. Schua ich in mir aber auf den FF ist der Content total verschobe. Header, Nav box usw sind inordung von der position. Ich hab keine ahnung wie ich das machen soll. Hier mal der Code:

Code:

/* Gestalten der Links */
a:link {
color: #4A9AF6;
font-size: 13px;
text-decoration: none;}

a:visited {
color: #4A9AF6;
font-size: 13px;
text-decoration: none;}

a:hover {
color: #4A9AF6;
font-size: 13px;
text-decoration: none;}

body {
background-color:#FFFFFF;}

*{ padding: 0; margin: 0; }



#header_container {
position: absolute;
left: 50%;
margin-left:-500px;
width: 1050px;
height:200px;
background-color: #FFFFFF;
background-image:url(http://img.webme.com/pic/p/pur-fanseite/grafik.gif);

color:#FFFFFF;
font-size:13px;
border: 1px solid #FFFFFF;}


position: absolute;
left: 50%;
margin-left:-490px;
width: 150px;
height:150px;
background-color:#CCFF33;
color:#FFFFFF;
font-size:13px;
border: 1px solid #FFFFFF;}

#content {
position: relative;
left: 50%;
top: 240px;
margin-left: -400px;
width: 650px;
height: 1200px;
padding:10px;
color: #000000 ;
font-size:13px;
background-color:#FFFFFF;
background-image:url();
border: 1px solid #FFFFFF;
overflow:auto;}

#nav_container{
position: absolute;
left: 50%;
top:240px;
margin-left: -600px;
width: 160px;
border:1px solid #FFFFFF;}




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

li.nav_element{
list-style-type: none;
position: relative;
padding:5px;
width: 115px;}

li.nav_element a{
display: block;
width: 115px;
padding:4px;
font-weight: bold;
text-decoration: none;
text-align: left;
color:#000000 ;
background-color:#CCFF33;
background-image:url(HIER BUTTON-ULR_1);
border: 2px solid #000000;}

li.nav_element a:hover{
color: #000000;
background-color:#CCFF33;
background-image:url(HIER BUTTON-URL_2);}

#sidebar_container1{
position: absolute;
left: 50%;
top:240px;
margin-left: 300px;
width: 290px;
height: 300px;
background-image:url(http://img.webme.com/pic/p/pur-fanseite/55656555.jpg);
border:3px solid #000000 ;
color:#000000;
overflow:auto;}



und mein zweites problem ist der scrollbalke. wenn ich overflow: auto weg mach ist mein content verschwunden, aner ich würd den balken gern weg ahben.
weiß jemand wie man eig. die nav.box umändern muss damit das Menü horizontal ist?

sry wenn es auf einmal ein bissl viel ist. ich hoffe aber das man mir helfen kann.

Liebe Grüße Zwibelix
Beitrag16.04.2009 um 13:29 (UTC)    
Titel:

also ich hab mir das design in Opera, Firefox und IE angeguckt und es ist überall gleich verschoben und durcheinander Wink

Ich hab mir dann mal deinen quelltext angeguckt und dabei festgestellt dass du alles nur in <div></div> tags strukturiert hast..
Ich habe zwar selbst noch kaum erfahrung mit html, aber ich würde mal versuchen mit <table></table>tags ein bisschen ordnung darein zu bringen.
wenn du die quelldateien hier postest, kann ich dir vllt helfen die anzupassen

Es kann gut sein dass man das auch komplett mit dem css code erreichen kann aber da kann ich dir leider nicht weiterhelfen, da ich von css bisher nur sehr rudimentäre kenntnisse habe Wink

Ich hab mir aber noch mal deinen css-code angeguckt und bemerkt dass da was nicht stimmt:
Code:

#header_container {
position: absolute;
left: 50%;
margin-left:-500px;
width: 1050px;
height:200px;
background-color: #FFFFFF;
background-image:url(http://img.webme.com/pic/p/pur-fanseite/grafik.gif);

color:#FFFFFF;
font-size:13px;
border: 1px solid #FFFFFF;}

<----------<----------<---------- HIER FEHLT DOCH WAS :)
position: absolute;
left: 50%;
margin-left:-490px;
width: 150px;
height:150px;
background-color:#CCFF33;
color:#FFFFFF;
font-size:13px;
border: 1px solid #FFFFFF;}

#content {
position: relative;
left: 50%;
.
.
.

ich kenn mich aber wie gesagt mit css nicht sehr gut aus, weiß also nicht ob das die ursache für das chaos ist Wink
Beitrag16.04.2009 um 13:37 (UTC)    
Titel:

hab mir den gesamten code noch mal durchgelesen
und hab die zeile die fehlt eingefügt, alles funzt in allen browsern:
nav_heading{

hier nochmal dein kompletter code in korrigierter fassung zum copy&pasten:

Code:

<!--
                     /* Gestalten der Links */
         a:link {
         color: #4A9AF6;
         font-size: 13px;
         text-decoration: none;}

         a:visited {
         color: #4A9AF6;
         font-size: 13px;
         text-decoration: none;}

         a:hover {
         color: #4A9AF6;
         font-size: 13px;
         text-decoration: none;}

         body {
         background-color:#FFFFFF;}

         *{ padding: 0; margin: 0; }



         #header_container {
         position: absolute;
         left: 50%;
         margin-left:-500px;
         width: 1050px;
         height:200px;
         background-color: #FFFFFF;
         background-image:url(http://img.webme.com/pic/p/pur-fanseite/grafik.gif);

         color:#FFFFFF;
         font-size:13px;
         border: 1px solid #FFFFFF;}

         #nav_heading {
         position: absolute;
         left: 50%;
         margin-left:-490px;
         width: 150px;
         height:150px;
         background-color:#CCFF33;
         color:#FFFFFF;
         font-size:13px;
         border: 1px solid #FFFFFF;}

         #content {
         position: relative;
         left: 50%;
         top: 240px;
         margin-left: -400px;
         width: 650px;
         height: 1200px;
         padding:10px;
         color: #000000 ;
         font-size:13px;
         background-color:#FFFFFF;
         background-image:url();
         border: 1px solid #FFFFFF;
         overflow:auto;}

         #nav_container{
         position: absolute;
         left: 50%;
         top:240px;
         margin-left: -600px;
         width: 160px;
         border:1px solid #FFFFFF;}




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

         li.nav_element{
         list-style-type: none;
         position: relative;
         padding:5px;
         width: 115px;}

         li.nav_element a{
         display: block;
         width: 115px;
         padding:4px;
         font-weight: bold;
         text-decoration: none;
         text-align: left;
         color:#000000 ;
         background-color:#CCFF33;
         background-image:url(HIER BUTTON-ULR_1);
         border: 2px solid #000000;}

         li.nav_element a:hover{
         color: #000000;
         background-color:#CCFF33;
         background-image:url(HIER BUTTON-URL_2);}

         #sidebar_container{
         position: absolute;
         left: 50%;
         top:240px;
         margin-left: 300px;
         width: 290px;
         height: 300px;
         background-image:url(http://img.webme.com/pic/p/pur-fanseite/55656555.jpg);
         border:3px solid #000000 ;
         color:#000000;
         overflow:auto;}

         //-->
Beitrag16.04.2009 um 13:45 (UTC)    
Titel:

Also ich kann nur empfehlen NICHT mit absoluten und relativen Positions-Angaben zu arbeiten!!!! ICh kann nur float-Angaben empfehlen, benötigt aber etwas Ahnung in dem Gebiet...

Und @fastfoodfactory:
table-tags find ich persöhnlich nicht gut. man kann auch mit div-tags ordnung schaffen!!! (sieht man ja an meinen designs xD)
Beitrag16.04.2009 um 14:04 (UTC)    
Titel: Vercshiebung

Hallo,
okay also bie imir ist im IE nichst verschoben. Wie kann ich es ändern das es überall zu aus sieht wie bie mir?

Aso sollte ich den kompletten Quelcode geben, da der ja auf meheren Seiten aufgeteilt ist?

Liebe Grüße
Beitrag16.04.2009 um 15:53 (UTC)    
Titel:

@poddi: ich arbeite in erster linie mit table, weil ich in css noch keine allzu guten kenntnisse habe Wink

die scrollbar kriegst du weg wenn du folgende änderung vornimmst:

#content {
position: relative;
left: 50%;
top: 240px;
margin-left: -400px;
width: 650px;
height:
100%;
padding:10px;
color: #000000 ;
font-size:13px;
background-color:#FFFFFF;
background-image:url();
border: 1px solid #FFFFFF;
overflow:auto;}

vllt gibt es eine bessere lösung aber diese erfüllt zumindest vorübergehend den zweck genausogut Wink

EDIT: Du musst auf jeden fall was machen damit die werbung oben lesbar ist, sonst riskierst du eine sperrung!!
______________
( 2B || !(2B) )


Zuletzt bearbeitet von fastfoodfactory am 16.04.2009, 16:59, insgesamt 2-mal bearbeitet
Beitrag16.04.2009 um 16:57 (UTC)    
Titel:

Hi,
Es geht auch einfacher : Dies : overflow:auto; : rauslöschen dann verlängert sich dein content automatisch Wink
______________
[url=http://img.webme.com/pic/r/rt-eliteclan/out.gif[/img:872askjd][/url]
Beitrag16.04.2009 um 19:56 (UTC)    
Titel: Hat geklappt

vielen dank.. .der tip mit dem autoflow wegmachen auf das hätte cih auch selber kommen mussen. so doof von mir. nja da ich noch änfanger bin ich merke es mir fürs nächste mal
Beitrag16.04.2009 um 21:10 (UTC)    
Titel: Horizontales Menü

Hallo zusamen

ich hab noch mla ein frage und zwar möchte ihc uas meine vertikalen menü ein horizontales menü machen. wenn ich dann aber aus

Code:

li.nav_element a{
display: block;

das mache
Code:

li.nav_element a{
display: inline;


bewirkt es nur, das die boxne für die einzelnen links unterschiedlich groß sind und das sie alle rehcts am rand kleben

kann mir jemand helfen??

Ganz Liebe Grüße
Beitrag16.04.2009 um 21:10 (UTC)    
Titel:

Tja, aber wie gesagt:

Werbung muss sichtbar und lesbar sein, ansonsten war es das mit deiner Page.
______________
LG André

GMMTS.de
Beitrag16.04.2009 um 21:19 (UTC)    
Titel:

hallo
ich weiß das mit dre werbung aber ich bin scho unter einstellungen gegangen undhab da die afrbe auf schwarz gemacht
wirklich aber es geht net ichs schau aber gleich nochmal nach

liebe grüße
Beitrag16.04.2009 um 21:24 (UTC)    
Titel:

asi werbung ist jetzt wieder scihtbar
Beitrag17.04.2009 um 11:09 (UTC)    
Titel: Horizintales Design

Hallo zusammen,

ich würd gern aus meinem vertikalen menü ein horizontales menü machen. wenn ich aber aus display: blovk display: inline mach bleibt es immer noch untereinander. kann mir jemand helfen???


liebe Grüße Wink
Beiträge der letzten Zeit anzeigen:   


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