phpBB.de • (erledigt) Faux Columns: Drei-Spalten-Layout

Seite 1 von 1

(erledigt) Faux Columns: Drei-Spalten-Layout

Verfasst: 28.02.2010 21:57

von Talk19zehn

Guten Abend, ich habe ein wenig herumprobiert und komme zu dem folgendem Ergebnis:

Um prozentual "falsche Spalten" unterzubringen ist es wohl von Nöten, je Spalte von einer Breite von zumindest 2000px auszugehen und die entsprechende Hintergrundgrafik derart zu gestalten.

Ich hoffe, ich habe mich nicht verrechnet und habe folgende Einträge vorgenommen:

Prosilver: ACP / Theme

An das Ende: ---> Grafiken nur symbolisch benannt

Code: Alles auswählen

#wrapper1links
{
background-image: url(http://img/darkleftbluewidth2000px.jpg);
background-position: 0 0;
background-repeat: repeat-y;
}

#wrapper2mitte
{
background-image: url(http://img/img/bluemiddlewidth2000px.jpg);
background-position: 25% 0;
background-repeat: repeat-y;
}

#wrapper3rechts
{
background-image: url(http://img/icebluerightwidth2000px.jpg);
background-position: 75% 0;
background-repeat: repeat-y;
}

#linksboxw
{
float: left;
width: 12%;
padding: 1%;
}

#contentw
{
float: left;
width: 70%;
padding: 1%;
}

#rechtsboxw
{
float: left;
width: 12%;
padding: 1%;
}

Bei den Boxen war ich mir nicht ganz einig. Denn eigentlich hätte es doch rechnerisch heißen müssen (?):

Code: Alles auswählen

#linksboxw
{
float: left;
width: 23%;
padding: 1%;
}

#contentw
{
float: left;
width: 48%;
padding: 1%;
}

#rechtsboxw
{
float: left;
width: 23%;
padding: 1%;

Das war jedoch offenbar "nicht wirklich so wichtig" (?). Jedenfalls hat erst genannte rechnerische Methode ebenso funktioniert. Für einen Rat der "Hier-Vor-Ort-Kapazitäten" danke ich natürlich.

ACP / Theme: Ich änderte entsprechend....

Code: Alles auswählen

body {
   /* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
   font-family: Verdana, Helvetica, Arial, sans-serif;
   color: #000000;
   background-color: #FFFFFF;
   /*font-size: 62.5%;          This sets the default font size to be equivalent to 10px */
   font-size: 10px;
   margin: 0 auto;
   padding: 0 0;
   width: 100%;
   height: 100%;
}

ACP / Theme

Code: Alles auswählen

#wrap {
   padding: 5px 5px;
   margin: 0 auto;
   background: #FFFFFF;
}

ACP / Template / Overall_header.html änderte ich:

Code: Alles auswählen

</head>

<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">
<div id="wrapper1links">
<div id="wrapper2mitte">
<div id="wrapper3rechts">
<div id="linksboxw">
... Inhalt...<div style="margin-left: 1px; margin-top: 1px;">
<img src="http://img400x70lang.gif" alt="Pinnwand" border="0" width="70" height="400">&nbsp;
</div>
Lorem ....

...</div><!--Ende #linksboxw-->
<div id="contentw">

ACP / Template / Overall_footer.html änderte ich:

Code: Alles auswählen

<div>
	<a id="bottom" name="bottom" accesskey="z"></a>
	<!-- IF not S_IS_BOT -->{RUN_CRON_TASK}<!-- ENDIF -->
</div>
</div><!--Ende #forumwrap-->
</div><!--Ende #contentw-->

<div id="rechtsbox">... Inhalt...</div><!--Ende #rechtsboxw-->

<div style="clear: left;"></div>

</div><!--Ende #wrapper3rechts-->
</div><!--Ende #wrapper2mitte-->
</div><!--Ende #wrapper1links-->
 
</body>
</html>

Nun habe ich das Problem, dass ich am unteren Rand ( Footer (?)) noch immer einen Abstand von rd. 20px habe, wenn ich im Forum navigiere. Ich finde den entsprechenden Wert einfach nicht, den ich zu korrigieren habe. Über eine Idee oder gar einen Tipp zur Fehlerbereinigung freue ich mich.

Motivierte Grüße und Dank

Upps: RS
=======================

Edit: Erledigt

Begründung: Ich fügte nun direkt nach < / head > in der overall_header.html ein:

Code: Alles auswählen

<div id="wrapper1links">
<div id="wrapper2mitte">
<div id="wrapper3rechts">
<div id="linksboxw">
... Inhalt...<div style="margin-left: 1px; margin-top: 1px;">
<img src="http://img400x70lang.gif" alt="Pinnwand" border="0" width="70" height="400">&nbsp;
</div>
Lorem ....

...</div><!--Ende #linksboxw-->
<div id="contentw">

Bei den Boxen spielte ich ein wenig mit den Prozentangaben und gestaltete ihren Background nunmehr transparent.
Theme: html, body - ich fügte ein Hintergrundbild ein (fixierte und zentrierte es).

Nun scheint alles seine Ordnung zu haben (ohne Gewähr).

Testreiche Grüße
.

Re: (erledigt) Faux Columns: Drei-Spalten-Layout

Verfasst: 03.04.2010 23:54

von wrestling4you

so da das ja vorher im falschen Topic war möchte ich gerne hier fortsetzen

ich habe jetzt diesen Code eingebaut dadurch wird allerdings mein Forum stark in der Breite gestaucht.

Code: Alles auswählen

  #wrapper1links
    {
    background-image: url(http://wrestlingsky.cwsurf.de/images/links.png);
   background-position: 0 0;
background-repeat: repeat-y;
    }

  #wrapper2mitte
    {

   background-position: 25% 0;
background-repeat: repeat-y;
    }

    #wrapper3rechts
    {
    background-image: url(http://wrestlingsky.cwsurf.de/images/rechts.png);
   background-position: 75% 0;
background-repeat: repeat-y;
}

    #linksboxw
    {
    float: left;
    width: 23%;
    padding: 1%;
    }

    #contentw
    {
    float: left;
    width: 48%;
    padding: 1%;
    }

    #rechtsboxw
    {
    float: left;
    width: 23%;
    padding: 1%;

bei der Mitte habe ich den Hintergrund bzw. die Farbe weggelassen weil dadurch meine Bild Links und Rechts überblendet werden, wobei die Grafik für die Rechte Seite durch mein Forum überblendet wird.

hier mal 2 Bilder dazu

Forenübersicht

Im Forum selber

Re: (erledigt) Faux Columns: Drei-Spalten-Layout

Verfasst: 04.04.2010 00:36

von Talk19zehn

OK, mal eben neu eingebaut und konzipiert.

Mein Theme: background-image / Url für die Wrapper einfach mal weggelassen, da ein Hintergrundbild offenbar zum Einsatz kommt?

Code: Alles auswählen

#wrapper1links
{
background-image: url();
background-position: 0 0;
background-repeat: repeat-y;
}

#wrapper2mitte
{
background-image: url();
background-position: 25% 0;
background-repeat: repeat-y;
}

#wrapper3rechts
{
background-image: url();
background-position: 75% 0;
background-repeat: repeat-y;
}

#linksboxw
{
float: left;
width: 12%;
padding: 1%;
}

#contentw
{
float: left;
width: 75%;
padding: 1%;
}

#rechtsboxw
{
float: left;
width: 5%;
padding: 1%;
}

Dortige Angabe für Body

Code: Alles auswählen

body {
   /* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
   font-family: Verdana, Helvetica, Arial, sans-serif;
   color: #000000;
   background-color: #FFFFFF;
   /*font-size: 62.5%;          This sets the default font size to be equivalent to 10px */
   font-size: 10px;
   margin: 0 auto;
   padding: 0 0;
   width: 100.1%;
   height: 100.1%;
}

Dortige Angabe für das Forum

Code: Alles auswählen

#wrap {
   padding: 5px 5px;
   margin: 0 auto;
}

Dortige Angabe für ein Hintergrundbild

Code: Alles auswählen

html, body {
   color: #000000;
   background-color: #B0E2FF;
   background: url("http://img191.images/img/gifwirbweather2000x1500.jpg") fixed center;
}

Meine overall_header nach < / head >

Code: Alles auswählen

<div id="wrapper1links">
<div id="wrapper2mitte">
<div id="wrapper3rechts">
<div id="linksboxw">

<div class="forumbg" style="margin-left: 1px; margin-top: 1px;">
<br />
             <div><a class="linklist navlinks" href="#">&bull; Dein Link</a></div>
             <div><a class="linklist navlinks" href="#">&bull; Dein Link</a></div>
             <div><a class="linklist navlinks" href="#">&bull; Dein Link</a></div>
             <div><a class="linklist navlinks" href="#">&bull; Dein Link</a></div>
             <div><a class="linklist navlinks" href="#">&bull; Dein Link</a></div>          
       </div>

<div style="margin-left: 1px; margin-top: 1px;">
<img src="http://img44.image/.gif" alt="..." border="0" width="70" height="400">&nbsp;
</div>

Lorem .....Inhalt

Meine overall_footer vor < / body > eingefügt

Code: Alles auswählen

 
</div><!--Ende #forumwrap-->
</div><!--Ende #contentw-->

<div id="rechtsbox">...

...

</div><!--Ende #rechtsboxw-->

<div style="clear: left;"></div>

</div><!--Ende #wrapper3rechts-->
</div><!--Ende #wrapper2mitte-->
</div><!--Ende #wrapper1links-->

Ergebnis:

http://img401.imageshack.us/img401/3474 ... 042010.jpg

Wir können gerne morgen weiter machen.

Re: (erledigt) Faux Columns: Drei-Spalten-Layout

Verfasst: 04.04.2010 01:07

von wrestling4you

bei deinen jetzigen Codes wird meine Forum komplett an die Linkeseite gedrückt und das auf wenige Pixel

ich habe die Codes aus dem Ausgangspost jetzt eingebaut und so sieht es aus

Forenübersicht

Im Forum selber

Edit: 04-04-2010 15:50

so ich habe gerade noch mal was im ACP / Theme an gepasst und herraus gefunden das dort der Fehler liegen müsste wenn ich es auf diesen Wert ändere

Code: Alles auswählen

#wrapper1links
    {background-image: url(http://wrestlingsky.cwsurf.de/images/links.png);
    
background-position: 0 0;
background-repeat: repeat-y;
    }

  #wrapper2mitte
    {
background-position: 25% 0;
background-repeat: repeat-y;
    }

    #wrapper3rechts
    {
background-image: url(http://wrestlingsky.cwsurf.de/images/rechts.png);    
background-position: 100% 0;
background-repeat: repeat-y;
}

#linksboxw
{
float: left;
width: 7%;
padding: 1%;
}

#contentw
{
float: center;
width: 80%;
padding: 1%;
}

#rechtsboxw
{
float: left;
width: 7%;
padding: 1%;
}

Forenübersicht

Im Forum selber

und wenn ich contentw wieder auf left setze ist in der Forenübersicht keines der Bilder zu sehen

Re: (erledigt) Faux Columns: Drei-Spalten-Layout

Verfasst: 05.04.2010 12:50

von wrestling4you

so habe den fehler gefunden ich hatte doch im overall was zu viel der ganze Fehler ist durch ein <div id="wrap"> zu viel entstanden

. Jetzt hat alles geklappt und ich habe links und Rechts vom Forum die Banner so wie ich sie haben wollte

Re: (erledigt) Faux Columns: Drei-Spalten-Layout

Verfasst: 05.04.2010 13:05

von Talk19zehn

Hallo wrestling4you,

ja, wir floaten ja nach links. Der mittige Bereich beginnt 25% von links und der rechte Bereich 75% von links jeweils vom linken Bildschirmrand aus gesehen.

Mein Zwischenstand:

Du hast recht, ich bin im eingehenden Beitrag bei dem Hinweis auf die Grafiken in den drei Bereichen nicht auf das Thema Float eingegangen. Je nachdem, wo man die Grafik setzt, kommt zu einer Überlappung bzw. Nichtanzeige der Grafik. Dank Deines Hinweises konnte ich nunmehr auf die Suche gehen, die Ursache klären. Dafür danke ich Dir.
Float:
Das liegt m. E. daran, dass die Grafiken im Hintergrund für die Mitte und den rechten Bereich einen transparenten Bereich von links benötigen, der sich rechnerisch auf den nach links gefloateten Bereich ausrichtet. Wie ich gestern bemerke, habe in meinem ersten Versuch (eingehender Beitrag) jeweils die gleiche Grafik (Farbverlauf) eingesetzt und mich zu früh gefreut. Sorry und kopfschüttelnde Grüße.

Meines Erachtens bedeutet es, dass ich die Hintergrundgrafiken folgendermaßen erstellen muss.
Wenn ich von 2000px einer Bildschirmbreite ausgehe:
Links: 500px von links in der Breite füllen, 1500px rechts transparent
Mitte: 1000px mittig füllen, rechts und links je 500px transparent
Rechts: 500px rechts füllen, links 1500px transparent
Die Berechnungen sollte stimmen und doch bin ich mir nicht ganz sicher. Vielleicht haben wir einen *CSS-Spezialisten hier am Board, der rechnerisch und gedanklich eine kurze Hilfe anbieten kann? Ich kann schon nicht mehr klar denken. Habe etliche Konstrukte durchprobiert. Den *Forenbereich dann passgenau in den Contentbereich einzugliedern, ist auch für mich nicht ganz so einfach um eine optimale Darstellung in der Breite zu erreichen.

Ich arbeite dran und sehe inzwischen den Wald vor Bäumen nicht. Deine Idee muss ich erst einbauen und selbst sehen, was sich ergibt.

Mein Konstrukt sieht momentan so aus: Bitte nicht am gekachelten Farbverlauf stören, es ist eine Testphase.

Theme:

Code: Alles auswählen

body {
   /* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
   font-family: Verdana, Helvetica, Arial, sans-serif;
   color: #000000;
   background-color: #FFFFFF;
   /*font-size: 52.5%;          This sets the default font size to be equivalent to 10px */
   font-size: 10px;
   margin: 0 auto;
   padding: 0 0;
   width: 100%;
   height: 100%;
}

Code: Alles auswählen

/* Main blocks
---------------------------------------- */
#wrap {
   padding: 0px 2px 2px 2px;
   background-color: #FFF;
width: 100%;
margin: 0 auto;
}

Code: Alles auswählen

#wrapper1links {
background-image: url();
background-position: 0 0;
background-repeat: repeat-y;
}

#wrapper2mitte {
background-image: url(http://mageshack/img/wirbweatherblueself2000.jpg);
background-position: 25% 0;
background-repeat: repeat-y;
}

#wrapper3rechts {
background-image: url(http://imageshack/img/wirbweatherblueself2000.jpg);
background-position: 75% 0;
background-repeat: repeat-y;
}

#linksboxw {
float: left;
width: 16%;
padding: 1%;
}

#contentw {
float: left;
width: 66%;
padding: 1%;
}

#rechtsboxw {
float: left;
width: 12%;
padding: 1%;
}

Code: Alles auswählen

</head>
<div style="width:100%; margin: 1px auto;">
<div id="wrapper1links">
<div id="wrapper2mitte">
<div id="wrapper3rechts">
<div id="linksboxw">

<div style="margin-left: 1px; margin-top: 1px;"> 
<img src="http://img/sgfstart1balken.jpg" alt="Eigene Grafik" border="0">&nbsp;
</div>

<!-- IF not S_IS_BOT && not $CA_SKIP_PM_NOTIFY && S_USER_LOGGED_IN && S_DISPLAY_PM -->
   <!-- IF S_USER_NEW_PRIVMSG -->
      <div class="pm-notify-new"><div class="pm-notify-header">{L_PRIVATE_MESSAGES}</div><a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}<!-- IF PRIVATE_MESSAGE_INFO_UNREAD -->, {PRIVATE_MESSAGE_INFO_UNREAD}<!-- ENDIF --></a></div>
   <!-- ELSEIF S_USER_UNREAD_PRIVMSG -->
      <div class="pm-notify-unread"><div class="pm-notify-header">{L_PRIVATE_MESSAGES}</div><a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}<!-- IF PRIVATE_MESSAGE_INFO_UNREAD -->, {PRIVATE_MESSAGE_INFO_UNREAD}<!-- ENDIF --></a></div>
   <!-- ENDIF -->
<!-- ENDIF -->




...Inhalt, Inhalt
...
</div><!--Ende #linksboxw-->

<div id="contentw">

<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">
<div id="wrap">

Code: Alles auswählen

</div><!--Ende #forumwrap-->
</div><!--Ende #contentw-->

<div id="rechtsbox">

...


<!-- IF not S_IS_BOT && not $CA_SKIP_PM_NOTIFY && S_USER_LOGGED_IN && S_DISPLAY_PM -->
   <!-- IF S_USER_NEW_PRIVMSG -->
      <div class="pm-notify-new"><div class="pm-notify-header">{L_PRIVATE_MESSAGES}</div><a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}<!-- IF PRIVATE_MESSAGE_INFO_UNREAD -->, {PRIVATE_MESSAGE_INFO_UNREAD}<!-- ENDIF --></a></div>
   <!-- ELSEIF S_USER_UNREAD_PRIVMSG -->
      <div class="pm-notify-unread"><div class="pm-notify-header">{L_PRIVATE_MESSAGES}</div><a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}<!-- IF PRIVATE_MESSAGE_INFO_UNREAD -->, {PRIVATE_MESSAGE_INFO_UNREAD}<!-- ENDIF --></a></div>
   <!-- ENDIF -->
<!-- ENDIF -->

...



</div><!--Ende #rechtsboxw-->

<div style="clear: left;"></div>

</div><!--Ende #wrapper3rechts-->
</div><!--Ende #wrapper2mitte-->
</div><!--Ende #wrapper1links-->

</div><!--Ende 100%--> 
</body>
</html>

Ergebnis:
http://img704.imageshack.us/img704/9858 ... 042010.jpg

Beste Grüße

Re: (erledigt) Faux Columns: Drei-Spalten-Layout

Verfasst: 05.04.2010 13:12

von Talk19zehn

Oh, hier hat sich nun Dein Beitrag mit meinem überschnitten.
Dann muss ich nicht mehr suchen.....? Denn ich war schon ganz konfus

und wusste schon nicht mehr, wo ich ansetzen sollte (naja - so ungefähr.........

Ich wäre Dir dennoch dankbar für den Hinweis, was Du grundlegend gestaltet hast. So hätten doch alle Suchenden etwas davon.

Viele Grüße

Re: (erledigt) Faux Columns: Drei-Spalten-Layout

Verfasst: 05.04.2010 18:49

von wrestling4you

also ich habe noch mal den kompletten Code aus dem Ausgangspost eingefügt bzw. bin noch mal Zeile für Zeile durch gegangen und dabei ist mir aufgefallen das ich diesen Code im overalll hatte

Code: Alles auswählen

</head>

<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">
<div id="wrapper1links">
<div id="wrapper2mitte">
<div id="wrapper3rechts">
<div id="linksboxw">
... Inhalt...<div style="margin-left: 1px; margin-top: 1px;">
<img src="http://img400x70lang.gif" alt="Pinnwand" border="0" width="70" height="400">&nbsp;
</div>
Lorem ....

...</div><!--Ende #linksboxw-->
<div id="contentw">
<div id="wrap">

die letzte Zeile war halt zu viel keine Ahnung wie die dahin gekommen ist aber jetzt wo sie weg ist klappt alles wunderbar