Autor |
Nachricht |
-
pur-fanseite
|
15.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 |
|
↑
|
|
|
-
fastfoodfactory
|
16.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
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
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 |
|
↑
|
|
|
-
fastfoodfactory
|
16.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;}
//-->
|
|
↑
|
|
|
-
poddi
|
16.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) |
|
↑
|
|
|
-
pur-fanseite
|
16.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 |
|
↑
|
|
|
-
fastfoodfactory
|
16.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
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
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
|
|
↑
|
|
|
-
rt-logins
|
16.04.2009 um 16:57 (UTC) Titel: |
|
|
Hi,
Es geht auch einfacher : Dies : overflow:auto; : rauslöschen dann verlängert sich dein content automatisch ______________ [url=http://img.webme.com/pic/r/rt-eliteclan/out.gif[/img:872askjd][/url] |
|
↑
|
|
|
-
pur-fanseite
|
16.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 |
|
↑
|
|
|
-
pur-fanseite
|
16.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 |
|
↑
|
|
|
-
andybabe27
|
16.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 |
|
↑
|
|
|
-
pur-fanseite
|
16.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 |
|
↑
|
|
|
-
pur-fanseite
|
16.04.2009 um 21:24 (UTC) Titel: |
|
|
asi werbung ist jetzt wieder scihtbar |
|
↑
|
|
|
-
pur-fanseite
|
17.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 |
|
↑
|
|
|
|