• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

skyscraper rechts - wie einbinden in vb?

Status
Für weitere Antworten geschlossen.
S

sowosammerneger

Neues Mitglied
Hallo,

ich knabber daran auf der rechten Seite eines vbulletin einen skyscraper einzubauen und das will mir nicht richtig gelingen.

Ich hätte gerne:
  • eine Breite von 120px fest
  • keinen Abstand zwischen body des Forums und Skyscraper
  • das Forum sollte bei größeren Auflösungen als 1024 entsprechend skalieren können

Bei meinen Überlegungen ist aktuell dies das nächste mit dem ich an mein Ziel herankomme:
HTML: 
<div style="float:left;width:87%;border: 1px solid black;">
FORUM
</div>
<div style="float:right;width:120px;border:1px solid black;margin:1emx;">
SKYSCRAPER
</div>
Probleme:
  • Abstand zwischen Forum und Skyscraper
  • Zentrierung Inhalt Skyscraper
Ich würde mich über Tips sehr freuen, da ich mir seit geraumer Zeit die Augen wund lese und so recht keine passende Lösung finde - was daran liegen mag, daß ich nach den falschen Sachen suche.

Meine HTML/css-Kenntnisse sind allenfalls mit rudimentär zu beschreiben, aber ich lerne gerne dazu.

Danke für eventuelle Antworten und sonst zumindest fürs Lesen.
Peter
 
Zuletzt bearbeitet:
Mach's mal so:
Code: 
<div style="float:left;width:100%;border: 1px solid black; margin-right:130px;">
<div style="float:right;width:120px;border-left:1px solid black;margin:1emx;">
SKYSCRAPER
</div>
FORUM</div>
Gruß thuemmy
 
thuemmy schrieb:
Mach's mal so:
Code: 
<div style="float:left;width:100%;border: 1px solid black; margin-right:130px;">
<div style="float:right;width:120px;border-left:1px solid black;margin:1emx;">
SKYSCRAPER
</div>
FORUM</div>
Gruß thuemmy
Zum Vergrößern anklicken....


Leider nicht, da wandert die Spalte von der rechten Seite nach oben. :(
 

Anhänge

  • skyscraper_oben.jpg
    skyscraper_oben.jpg
    92,8 KB · Aufrufe: 7
Versuch's mal so:

Code: 
<div style="float:left;width:87%;border: 1px solid black;">
FORUM
</div> <div style="margin-left: 87%; width:120px;border:1px solid black;">
SKYSCRAPER
</div>

Dabei gibt es jedoch folgendes zu bedenken:
Hier werden unterschiedliche einheiten (% und px) verwendet, die sich nicht auf einen gemeinsamen Nenner bringen lassen. Sind - je nach viewportgröße die 120px des Skyscraper nämlich breiter als 13 Prozent des Viewports, dann ist für diesen nicht genügend Platz und er wandert nach unten.

In diesem Fall ist diese Konstruktion vielleicht besser:

Code: 
<div style="float:left;width:87%;border: 1px solid black; position: relative;">
FORUM
</div>
<div style="position: absolute;  left: 87%; width:120px;border:1px solid black;">
SKYSCRAPER
</div>
 
prm schrieb:
In diesem Fall ist diese Konstruktion vielleicht besser:

Code: 
<div style="float:left;width:87%;border: 1px solid black; position: relative;">
FORUM
</div>
<div style="position: absolute;  left: 87%; width:120px;border:1px solid black;">
SKYSCRAPER
</div>
Zum Vergrößern anklicken....

Das sieht gut aus ... morgen schau ich mir mal größere Auflösungen an.

Danke! :)

Was gibt es denn noch für Möglichkeiten, den Inhalt des Skyscrapers seitlich mittig zu zentrieren?
Im Moment hängt das alles noch auf der linken Seite, wenn man nicht die volle Breite nutzt. :o
 
Am besten setzt du das jetzt mal um und postest dann einen Link zur Seite. Dann kann man alles im Zusammenhang besser beurteilen und auch sehen.
 
prm schrieb:
Am besten setzt du das jetzt mal um ...
Zum Vergrößern anklicken....

Du hast vollkommen recht. :D

... und postest dann einen Link zur Seite. Dann kann man alles im Zusammenhang besser beurteilen und auch sehen.
Zum Vergrößern anklicken....

Das geht leider nicht, weil die Lizenz das nicht so ohne weiteres her gibt und ich das Testforum nicht auf eine lizenzgenehme und dann öffentliche Seite ziehen will.
Ich kann euch aber gerne wieder ein Bildchen einstellen.
Eines mit einer Auflösung von 1280x1024 kommt auf Wunsch oder wenn es ander aussehen sollte heute nachmittag.
 
prm schrieb:
Mal ganz abstrakt:
Am besten setzt du den ganzen Code zwischen <body> und </body> in einen Div.
Diesem kannst du eine fixe oder prozentuale Gesamtbreite geben und zentrierst ihn horizontal wie hier beschrieben: Horizontale Zentrierung mit CSS
Zum Vergrößern anklicken....

Danke, das klingt interessant, ich hatte schon mal weitergespielt und bin jetzt bei dieser Lösung.
Wobei sich mir dann die Frage stellt, ob etwas dagegen spricht, das div mit dem skyscraper mit einem "text-align" zu versehen?

Das sähe bei mir jetzt so aus:
HTML: 
<div style="position: absolute;  left: 87%; width:120px;text-align: center;">
SKYSCRAPER
</div>
(Anmerkung: die "border: 1px solid black;" entfernt, da diese nur zur Orientierung bei den Versuchen gedacht war)
Damit könnte man den Text jetzt beliebig rechts, links, mitte verschieben, wo man ihn gerne haben möchte. Oben klebt er am Rand und da soll er auch hin.
 
Ich schon wieder ... :o

Das macht eigentlich genau das, was ich möchte, aber leider sind jetzt im Forum die Pulldownmenüs nach unten verschoben.

Die Pulldowns im css:
HTML: 
.vbmenu_control
{
	background: #003300 url(images/hobbyschneiderin/gradient_thead_03.gif) repeat-x top left;
	color: #FFFFFF;
	font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
	padding: 3px 6px 3px 6px;
	white-space: nowrap;
}
.vbmenu_control a:link, .vbmenu_control_alink
{
	color: #FFFFFF;
	text-decoration: none;
}
.vbmenu_control a:visited, .vbmenu_control_avisited
{
	color: #FFFFcc;
	text-decoration: none;
}
.vbmenu_control a:hover, .vbmenu_control a:active, .vbmenu_control_ahover
{
	color: #FF0000;
	text-decoration: underline;
}
.vbmenu_popup
{
	background: #FFFFFF;
	color: #000000;
	border: 1px solid #0B198C;
}
.vbmenu_option
{
	background: #cccccc;
	color: #000000;
	font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
	white-space: nowrap;
	cursor: pointer;
}
.vbmenu_option a:link, .vbmenu_option_alink
{
	color: #000000;
	text-decoration: none;
}
.vbmenu_option a:visited, .vbmenu_option_avisited
{
	color: #676767;
	text-decoration: none;
}
.vbmenu_option a:hover, .vbmenu_option a:active, .vbmenu_option_ahover
{
	color: #FF0000;
	text-decoration: none;
}
.vbmenu_hilite
{
	background: #999999;
	color: #000000;
	font: bold 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
	white-space: nowrap;
	cursor: pointer;
}
.vbmenu_hilite a:link, .vbmenu_hilite_alink
{
	color: #000000;
	text-decoration: none;
}
.vbmenu_hilite a:visited, .vbmenu_hilite_avisited
{
	color: #676767;
	text-decoration: none;
}
.vbmenu_hilite a:hover, .vbmenu_hilite a:active, .vbmenu_hilite_ahover
{
	color: #FF0000;
	text-decoration: none;
}

Der Forenteil wird über die divs direkt unter der Adventschneiderinnenanzeige oben im Header gestartet und geht dann bis unten ans Ende des Footers, dort hängt dann das zweite div mit dem Skyscraper dran.
Verschiebe ich den Anfang der divs weiter nach oben, wandert auch das Dropdownmenü weiter nach oben, aber man muß es doch auch innerhalb des div positionieren können?
 

Anhänge

  • skyscraper_rechts_wrong_pulldown.jpg
    skyscraper_rechts_wrong_pulldown.jpg
    97,4 KB · Aufrufe: 6
Zuletzt bearbeitet:
Irgendwas kneift sich mit den divs.
Ich habe es jetzt in Tabellen umgemodelt:
HTML: 
<table cellspacing="0" cellpadding="0" border="0" align="center" width="100%">
<tbody>
<tr>
<td align="left">

FORUM

</td>
<td align="center" valign="top">

SKYSCRAPER

</td>
</tr>
</tbody>
</table>

So klappt das jetzt. Warum das mit den divs nicht klappt, verstehe ich allerdings weiterhin nicht. :oops:
 
Efchen schrieb:
AUA! .
Zum Vergrößern anklicken....

Ihr habt das hier übrigens auch mit Tabellen gemacht ... 8)

Wenn mir aber einer ein paar Ansatzpunkt geben kann, wie ich als css-div-DAU zumindest einen Ansatz für das Problem finden kann, dann werde ich mich gerne weiter damit beschäftigen und schauen, ob man das nicht doch anders machen kann.
Wenn mir aber keiner irgendwas sagt, dann steh ich einfach auf dem Schlauch. HTML und CSS sind nicht wirklich meine Baustellen. :o

Die divs gefielen mir auch besser, aber vbb ist immer schon ein wenig eigen gewesen, was die eigene Programmierung angeht.
Vielleicht wird das ab 4.0 alles besser, ich bin auf jeden Fall gespannt. :)
 
sowosammerneger schrieb:
Ihr habt das hier übrigens auch mit Tabellen gemacht ... 8)
Zum Vergrößern anklicken....
Wer "Ihr"? Was "das hier"?
Und, nur weil es Websites gibt, die Tabellen fürs Layout missbrauchen, ist das deswegen nicht gut. Wenn sich jemand vor Dir vor die U-Bahn schmeißt, springst Du doch auch nicht hinterher.

Wenn mir aber einer ein paar Ansatzpunkt geben kann, wie ich als css-div-DAU zumindest einen Ansatz für das Problem finden kann
Zum Vergrößern anklicken....
Auf "css-div-DAU" hin kann ich Dir nur empfehlen, erstmal HTML zu lernen und zu verstehen. Denn von divs ist ja gar nicht die Rede, sondern von CSS-Layout. divs sind ja auch nur wieder ein HTML-Tag wie table, HTML wird aber gar nicht fürs Layout benutzt. "Layout mit divs", wie man häufig liest, ist genauso Quatsch wie Layout mit Tabellen.

dann werde ich mich gerne weiter damit beschäftigen und schauen, ob man das nicht doch anders machen kann.
Zum Vergrößern anklicken....
Klar geht das. Lerne HTML richtig, zeichne damit Deinen Inhalt semantisch korrekt aus und mache alles Layout oder Design ausschleßlich mit CSS. Das ist je nach verfügbarer Zeit und Lernwille und Lernfähigkeiten ein einfacher bis steiniger Weg, aber wenn man es wirklich verstanden hat (und dazu gehört, erstmal HTML wirklich zu verstehen, das ist das, woran die meisten scheitern!), ist der Gewinn enorm. Sowohl für Dich als Webmaster als auch für Deine Besucher.

HTML und CSS sind nicht wirklich meine Baustellen.
Zum Vergrößern anklicken....
Dann musst Du sie zu Deinen Baustellen machen.

Die divs gefielen mir auch besser
Zum Vergrößern anklicken....
Sind aber fürs Layout genauso falsch. Layout ausschließlich mit CSS.

aber vbb ist immer schon ein wenig eigen gewesen, was die eigene Programmierung angeht.
Zum Vergrößern anklicken....
Das ist ja auch nicht das, was für Web-Entwicklung unbedingt nötig ist, im Gegensatz zu HTML und CSS.
Wer Webseiten bauen will, muss HTML und CSS beherrschen, bzw. es "zu seiner Baustelle" machen.

Grüße,
-Efchen
 
html.de hatte bis zum letzten Mal schauen auf der rechten Seite eine Tabelle mit einem Skyscraper-ähnlichen Werbeinhalt.

Ich kann vbulletin nicht neu schreiben und werde es auch nie können - ich gebe auch zu, daß ich das gar nicht will.
Wenn Du am Tag ein paar tausend Leute und ihre Probleme untereinander mit der eigenen Hardware, Software und deinem Server am Hacken hast, hält sich die Motivation neue Baustellen aufzumachen aus rein zeitlichen Gründen arg in Grenzen.

Was deine Anmerkung mit dem Zug angeht ... Menschen lernen durch nachmachen. Da ich keinen gefunden habe, der es gegen Bezahlung für mich gemacht hat und einige vorhandene Lösungen massive Probleme machten, habe ich selber nachgesehen, wie andere das Problem lösen. Es gibt aber kaum umsetzbare Lösungen. Nur Versatz hier und da.
Der Aufbau des Forums ist für mich in ganz großen Teilen uneveränderlich und die Tab-Lösung eine, die funktioniert.
Beim Springen vor Bahnen, sind die Springer nachher tot - das Ziel wäre damit nicht erreicht und insofern halte ich das nicht für vergleichbar.

Prinzipiell gebe ich Dir allerdings vollkommen recht, daß man sich erst mit den Grundlagen beschäftigen sollte. Wenn man das allerdings überall so macht, kommt man nie aus dem Quark.
Die eine oder andere fehlertolerante Lösung ist da effizienter.

Trotzdem Danke für die Geduld.
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben