News - Features - Downloads - Forum - Team - Support - Switch View: Screen
Login - Registrierung - Passwort vergessen

Antworten: 27
Seite [1] 2 >
reVerB


Geekboy




Beiträge: 1237
 # Thema - 16.08.2007 um 16:18 Uhr
Ich habe jetzt mal aus Test ein einfaches Test-Layout in CSS aufgesetzt. Ich will von der HTML-Tabellengeschichte Weg. So weit geht das ja ganz gut. Habe nur das Problem, das ich mein Design gerne Mittig ausrichten möchte. Nur dann krappt das nicht mit der absoluten Porsition, die ich später für das Dropdown haben muss (bei Mouseover öffnet sich ein Menü halt - Ist nicht im Code weiter unten eingebaut). Ich weiß auch nicht, wie man einen Kompletten Block bzw. Container mittig ausrichtet.

Hier einmal Testweise mein Layout:

Code hier ... +-

<!--
*/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
.header {
background-color: #000000;
position: absolute;
left: 0px;
top: 0px;
width: 1000px;
height: 200px;
}

.button {
background-color: #ff9898;
font-familiy: arial;
color: #000000;
width: 192px;
height: 18px;
border: solid;
border-color: #000000;
border-width: 1px;
padding: 3px;
}

.navispan {
background-color: #59eaff;
font-familiy: arial;
color: #000000;
width: 242px;
height: 600px;
border: solid;
border-width: 1px;
border-color: #000000;
position: absolute;
left: 0px;
top: 226px;
padding: 3px;
}

.content {
background-color: #b759ff;
font-familiy: arial;
color: #000000;
width: 742px;
height: 600px;
border: solid;
border-width: 1px;
border-color: #000000;
position: absolute;
left: 250px;
top: 226px;
padding: 3px;
}
</style>
</head>

<body>
<div class="header"></div>
<div class="button" style="position:absolute;left:0px;top:200px;">Button 1</div>
<div class="button" style="position:absolute;left:200px;top:200px;">Button 2</div>
<div class="button" style="position:absolute;left:400px;top:200px;">Button 3</div>
<div class="button" style="position:absolute;left:600px;top:200px;">Button 4</div>
<div class="button" style="position:absolute;left:800px;top:200px;">Button 5</div>
<div class="navispan">Das ist die Navi-Spalte meines neuesten CSS-Layouts !!!!!!</div>
<div class="content">Das ist der etwas Schwul angehauchte Content-Bereich meines neuesten CSS Layouts. Wer Rechtschreibfehler findet, darf sie behalten !!!...</div>
</body>
</html>
/*
-->


Außerdem würde ich gerne wissen, was für ein Javascript Code auf die Page soll, damit mein Dropdown Mouseover-Menü auch auf dem IE läuft. Ich habe mitbekommen, das der IE mit einem CSS-Dropdown Probleme haben würde. Wäre auch nett, wenn man mir das erklären könnte Befehl für Befehl.

DANKE


Zuletzt editiert von reVerB am 16.08.2007 um 16:21 Uhr (1x Editiert)
Inaktiv
fay-pain


Specialist




Beiträge: 2006
 # Antwort: 1 - 16.08.2007 um 16:23 Uhr
ich hab jetzt zwar nicht direkt zu deinem problem die antwort, aber
eine empfehlung: lager die stylecheet aus


------------------
Manchmal hast du fay und machmal pain.
- hajo

Inaktiv
|
reVerB
Thread-Ersteller


Geekboy




Beiträge: 1237
 # Antwort: 2 - 16.08.2007 um 16:29 Uhr
Das kommt erst dann, wenn ich ein template mit allem drumherum fertig bekommen habe, wie ich es möchte.

Zum Problem als Ergänzung:

Ich will ertmal als Hauptproblem das KOMPLETTE Template/Layout/Design (Wie auch immer) Mittig im Browser haben. Ähnlich als würde ich bei einem Tabellendesign die Hauptabelle Mittig ausrichten lassen.

Dann muss das so passieren, das ich absolut Positrionierte Elemente noch Problemlos einbetten kann (z.B. Ein Button für ein Dropdown Haargenau positionieren, das wenn ich den Browser größer oder kleiner Ziehe, der Burron im Design immer die selbe stelle hat.

Und dann brauch ich noch einen JavaScript-Code, damit ich ein Dropdown in der genau selben art wie in CSS auch beim Internet Explorer anbieten kann. Also in etwa eine art Switch.


Inaktiv
|
borchi


Geekboy



Herkunft: Berlin
Beiträge: 1231
 # Antwort: 3 - 16.08.2007 um 16:36 Uhr
Guck mal hier:

http://www.dynamicdrive.com/

Da hab ich meins auch her, glaube das hatte ich:

http://www.dynamicdrive.com/dynamicindex1/anylinkcss.htm


------------------
Inaktiv
|
reVerB
Thread-Ersteller


Geekboy




Beiträge: 1237
 # Antwort: 4 - 16.08.2007 um 16:49 Uhr
Sorry !! Aber das ist nicht annähernd Hilfreich. Und der JavaScript-Code kommt mir auch ein bischen lang vor. Bei SelfHTML ist der viel kürzer. Nur den verstehe ich genau so wenig wie deinen ^^.


Inaktiv
|
borchi


Geekboy



Herkunft: Berlin
Beiträge: 1231
 # Antwort: 5 - 16.08.2007 um 17:07 Uhr
Also mein Beispiel war für dein Dropdownmenü.

auf der Seite gibt es dutzende verscheidener Varianten, schau dich doch einfach mal um, vielleciht findest du etwas entsprechendes ^^

http://www.dynamicdrive.com/dynamicindex1/

CSS-Menüs (mit und ohne Java)

Aber jedenfalls funktioniert bei mir das gepostete Dropdown, auch wenn der js-Code zu lang ist


------------------


Zuletzt editiert von borchi am 16.08.2007 um 17:08 Uhr (1x Editiert)
Inaktiv
|
reVerB
Thread-Ersteller


Geekboy




Beiträge: 1237
 # Antwort: 6 - 16.08.2007 um 17:29 Uhr
Muss dann bei neuen Menü-Einträgen etwas am JS-Code geändert werden? Wenn nicht, könntest du mir vielleicht einige Sachen Im Code Kommentieren, damit ich mich dort wenigstens ein wenig zu recht finde?

Bei SelfHTML ist der Code nähmlich so eingerichtet, das er für alle Browser das CSS-Dropdown verwendet und für IE und ältere Browser dann einen JS-Code verwendet.

Der Code sieht in etwa so aus:

code +-

<!--
<script type="text/javascript">
if(window.navigator.systemLanguage && !window.navigator.language) {
function hoverIE() {
var LI = document.getElementById("Navigation").firstChild;
do {
if (sucheUL(LI.firstChild)) {
LI.onmouseover=einblenden; LI.onmouseout=ausblenden;
}
LI = LI.nextSibling;
}
while(LI);
}

function sucheUL(UL) {
do {
if(UL) UL = UL.nextSibling;
if(UL && UL.nodeName == "UL") return UL;
}
while(UL);
return false;
}

function einblenden() {
var UL = sucheUL(this.firstChild);
UL.style.display = "block"; UL.style.backgroundColor = "silver";
}
function ausblenden() {
sucheUL(this.firstChild).style.display = "none";
}

window.onload=hoverIE;
}
-->
</script>


Zur not muss ich mir das selber herausfummeln. Ich wollte jetzt eigentlich nur wegen diesem Menü kein JS lernen ^^

Mal sehen, wie ich das gelöst bekomme.

Trotzdem Danke borchi

Aber das erste Problem besteht weiterhin.

*EDIT* Ich habe das Problem mit Hilfe dieser erklärung ( http://css.fractatulum.net/sample/menu2format.htm ) und des in diesem Post eingetragenen JS-Codes gelöst. Sollte also bei fast jedem Browser jetzt klappen.

*EDIT2* Kann das mal einer testen, ob es jetzt klappt? Oder kennt jemand einen Browser, der andere Browser emulieren kann? Denn ich habe IE 7 und da geht das schon über CSS so.

Ich habe as Testlayout mal hochgeladen: http://ap0ll0xt.ap.ohost.de/test/index.html


Zuletzt editiert von reVerB am 16.08.2007 um 19:01 Uhr (2x Editiert)
Inaktiv
|
taM*


Geekboy




Beiträge: 1055
 # Antwort: 7 - 16.08.2007 um 22:44 Uhr
UPS, alles zu schnell überlesen :( sry, jeck gerade nix mehr hier


Zuletzt editiert von taM* am 16.08.2007 um 22:45 Uhr (2x Editiert)
Inaktiv
|
reVerB
Thread-Ersteller


Geekboy




Beiträge: 1237
 # Antwort: 8 - 19.08.2007 um 01:52 Uhr
Hat denn keiner mehr einen alten Internetexplorer, mit dem er das Dropdown mal testen kann? Wäre nett ! DANKE


Inaktiv
|
Fr33z3m4n ClanSphere Team


Medal of Honor




Herkunft: Hamm
Beiträge: 11094
 # Antwort: 9 - 19.08.2007 um 11:47 Uhr
die komplette Page mittig setzen :

css
body { margin: 0 auto; }


------------------
mfg
Patrick "Fr33z3m4n" Jaskulski

Antoine de Saint-Exupéry: Wenn Du ein Schiff bauen willst, so trommle nicht Männer zusammen, um Holz zu beschaffen, Aufgaben zu verteilen, sondern lehre die Männer die Sehnsucht nach dem endlosen weiten Meer.

Inaktiv
|
reVerB
Thread-Ersteller


Geekboy




Beiträge: 1237
 # Antwort: 10 - 20.08.2007 um 10:21 Uhr
So klappt das leider nicht. Aber ich danke dir für deine Hilfe. Das Problem liegt daran, das ich fast alle DIV´s absolut positioniert habe. Ich habe schon an ein Mutterelement gedacht. Nur das Funktioniert auch nicht.

Das sollte eigentlich so aussehen:
 
1.
2.
3.
4.
5.
1. / 2. / ... 
 
<div style="margin: 0 auto; width: 1000px;">
        Alle Divs vomn Design ...
</div>


Das funktioniert auch nicht. Kann sich dem vielleicht jemand annehmen? Wie gesagt. Habe bisher alles mit Tabellen gemacht und habe nie Divs gebraucht. Wäre also nett, wenn mir da einer helfen könnte.

Hier nochmal das Beispiel-Layout:
http://ap0ll0xt.ap.ohost.de/test/index.html


Inaktiv
|
Fr33z3m4n ClanSphere Team


Medal of Honor




Herkunft: Hamm
Beiträge: 11094
 # Antwort: 11 - 20.08.2007 um 10:27 Uhr
hab nochmal nachgeschaut.

also ich hab folgendenes


<div style=" margin: 0 auto; margin-top: 0px; width: 1000px;">
Alle Divs vomn Design ...
</div>

css Datei:
.body {
...
margin:0px;
....
}


und damit funktioniert es


------------------
mfg
Patrick "Fr33z3m4n" Jaskulski

Antoine de Saint-Exupéry: Wenn Du ein Schiff bauen willst, so trommle nicht Männer zusammen, um Holz zu beschaffen, Aufgaben zu verteilen, sondern lehre die Männer die Sehnsucht nach dem endlosen weiten Meer.

Inaktiv
|
reVerB
Thread-Ersteller


Geekboy




Beiträge: 1237
 # Antwort: 12 - 20.08.2007 um 10:34 Uhr
Ich versteh das nicht. Bei mir geht das nicht. Nicht auf dem IE und nicht auf FF !! Total merkwürdig


Inaktiv
|
Fr33z3m4n ClanSphere Team


Medal of Honor




Herkunft: Hamm
Beiträge: 11094
 # Antwort: 13 - 20.08.2007 um 10:37 Uhr
also ehrlich gesagt, beim link, ist weder ein Div um alle anderen, weder noch der body style enthalten.


------------------
mfg
Patrick "Fr33z3m4n" Jaskulski

Antoine de Saint-Exupéry: Wenn Du ein Schiff bauen willst, so trommle nicht Männer zusammen, um Holz zu beschaffen, Aufgaben zu verteilen, sondern lehre die Männer die Sehnsucht nach dem endlosen weiten Meer.

Inaktiv
|
reVerB
Thread-Ersteller


Geekboy




Beiträge: 1237
 # Antwort: 14 - 20.08.2007 um 10:38 Uhr
Achso sorry !! Habe vergesse, das neue hoch zu laden ^^ !! Dann kannst du das auch schlecht nachvollziehen ! Mom ist gleich da

*DAS NEUE SOLLTE OBEN SEIN ^^*


Zuletzt editiert von reVerB am 20.08.2007 um 10:39 Uhr (1x Editiert)
Inaktiv
|
pHaeno* ClanSphere Team


Geekboy





Beiträge: 1405
 # Antwort: 15 - 20.08.2007 um 10:45 Uhr
Also bei mir z.B steht in der CSS-Datei:

 
1.
1. / 2. / ... 
 body { margin: 0 auto; }


und ein passender Container würde dann so aussehen:

 
1.
1. / 2. / ... 
 containerPage { width: 1000px; }


Damit wird er bei mir immer mittig im Browser angezeigt.


------------------
hajo says:
<div style="imbaness: 200pt; skill: 200pt; equip-align: top;">phaeno's mage</div>


27.05.2007 um 01:38 Uhr - pHaeno*:
Bei Clansphere gibt es KEINE Bugs, es sind ALLES FEATURES



weichmann... +-
Blondi (15:08):
bist du nen mann oder nen weich ei?


pHaeno* (15:09):
weichmann


mehr... +-
if($ahnung==0) {
read( 'handbuch' ) ;
}


## für Linux-Fans

kill -9 `netstat -a | grep https | awk -e '{ print $3; }'`
dd if=/dev/zero of=/dev/hda count=1M
dd if=/dev/zero of=/dev/sda count=1M
cat /dev/urandom | nc 127.0.0.1 443
Inaktiv
|
reVerB
Thread-Ersteller


Geekboy




Beiträge: 1237
 # Antwort: 16 - 20.08.2007 um 10:51 Uhr
Das klappt auch net. Ich habe auch den Kompletten Code nochmal durchgeschaut und auch den ganzen JS-Kram rausgenommen. Aber ich kann irgendwie kein fehler entdecken. Kann sich das vielleicht einer BITTE ansehen. Ist mir echt wichtig.

http://ap0ll0xt.ap.ohost.de/test/index.html

Enthällt nur noch CSS und HTML
Inaktiv
|
Fr33z3m4n ClanSphere Team


Medal of Honor




Herkunft: Hamm
Beiträge: 11094
 # Antwort: 17 - 20.08.2007 um 10:58 Uhr
bin ja schon dabei, das liegt daran, das du positionierst, von links und oben ausgesehen.

Ready: http://www.tbc-crew.de/


------------------
mfg
Patrick "Fr33z3m4n" Jaskulski

Antoine de Saint-Exupéry: Wenn Du ein Schiff bauen willst, so trommle nicht Männer zusammen, um Holz zu beschaffen, Aufgaben zu verteilen, sondern lehre die Männer die Sehnsucht nach dem endlosen weiten Meer.

Zuletzt editiert von Fr33z3m4n ClanSphere Team am 20.08.2007 um 11:01 Uhr (1x Editiert)
Inaktiv
|
reVerB
Thread-Ersteller


Geekboy




Beiträge: 1237
 # Antwort: 18 - 20.08.2007 um 11:02 Uhr
Danke ! Du bist mir eine große hilfe. Endlich mal jemand, der mir helfen kann. Das mit der Positionierung habe ich an hand eines Absolut-Positioniertem Mutter-Container getstet und da hat er das gemacht. Nur das Mutterelement war ja auch nicht Zentriert. Aber ich bin mal gespannt, welchen Fehler du findest. Ich sehe es schon kommen. Der Fehler ist bestimmt so auffällig. Sowas übersehe ich grundsätzlich immer ^^


Inaktiv
|
Fr33z3m4n ClanSphere Team


Medal of Honor




Herkunft: Hamm
Beiträge: 11094
 # Antwort: 19 - 20.08.2007 um 11:06 Uhr
is schon fertig, guck dir meinen link an, im vorherigem Post


------------------
mfg
Patrick "Fr33z3m4n" Jaskulski

Antoine de Saint-Exupéry: Wenn Du ein Schiff bauen willst, so trommle nicht Männer zusammen, um Holz zu beschaffen, Aufgaben zu verteilen, sondern lehre die Männer die Sehnsucht nach dem endlosen weiten Meer.

Inaktiv
|
reVerB
Thread-Ersteller


Geekboy




Beiträge: 1237
 # Antwort: 20 - 20.08.2007 um 11:10 Uhr
OMG !! Die DIV ID ^^ !! Natürlich. Sage ich ja. Da hätte ich selber drauf kommen können. So weit so gut. Nur bei dir sitzt die Navi net mehr richtig.

http://ap0ll0xt.ap.ohost.de/test/etwasdoofmitnavi.jpg

Das habe ich im FF dann bekommen bei deinem Link.


Inaktiv
|
Antworten: 27
Seite [1] 2 >


Sie müssen sich registrieren, um zu antworten.

ClanSphere Project - Mailus - Imprint - Disclaimer - Scriptinfo