Theme

kalle1983

Hallo zusammen!

Bin gerade dabei ein neues Blog zu planen und habe folgende Idee zum Aufbau der Seite:

- die Größe (Höhe und Breite) soll fest definiert sein.
- horizontale Navigation mit Unterseiten
- links soll 2/3 der Content-Fläche ein Textfeld sein (mit automatischem Scrollbalken)
- rechts soll 1/3 der Content-Fläche für Bilder, welche je Seite und Artikel beliebig hinzugefügt werden können, sein.

Nun habe ich überlegt wie man das hinbekommen könnte, dass die Bilder fix auf einer Postion bleiben und unabhängig vom Text sind.

Hat da jemand eine Idee oder Erfahrungen?

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

marX

Zitat von kalle1983

- links soll 2/3 der Content-Fläche ein Textfeld sein (mit automatischem Scrollbalken)
[...]
Nun habe ich überlegt wie man das hinbekommen könnte, dass die Bilder fix auf einer Postion bleiben und unabhängig vom Text sind.

Suchst du sowas hier?
overflow: Übergroßer Inhalt: Beispiel zur CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

kalle1983

Hallo marX,

vielen Dank für die Antwort. Leider ist es aber nicht das was ich suche. Ist aber trotzdem mal gut zu wissen.

Ich möchte letztendlich das der text eines beitrages (links) in einem fest definierten bereich gezeigt wird (mit automatischen scrollbalken) und das die bilder bzw. das bild rechts in einem fest definierten, unabhängig von dem textbereich, gezeigt werden. du kannst das so verstehen, dass wenn man zwei dina4 seiten text hat und ein bild, das der text mit einem scrollbalken versehen wird und rechts neben dem text das bild/bilder immer auf der selben position sind. verstehst du?

bgeissler

Das realisierst du mit mehreren float-Spalten, die du separat formatierst.
Das geht aber nur in der Einzelanzeige eines Beitrags.

Das wäre etwa vergleichbar (sh. Navi links)? AWO Kreisverband Tirschenreuth

kalle1983

moin bgeissler!

das hört sich doch genau danach an was ich suche.
ich möchte pro seite auch immer nur einen artikel bzw. eine seite anzeigen.
die anzahl der bilder soll halt variieren, aber das ist ja nicht so schlimm oder?
wie meinst du denn das mit den "float-spalten"?

danke!

bgeissler

Wenn es sich um einzelne Seiten handeln soll, dann kannst z.B. den Text in die linke floatbox stellen und in Anhängigkeit von der angezeigten Seite ein oder mehrere Bilder in die rechte floatbox stellen. Dazu erstellst du 2 Seiten (1xText und 1x dazugehörige Bilder) und legst in deiner index.php mit if-Abfragen die Abhängikeiten fest.
Ein code-Schnipsel für die Anordnung:

PHP

<div id="plain">


<?php get_header(); ?>


<div id="left">
     Hier kann was stehen
   <div id="left-inside">
      Hier der Inhalt links
   </div>
</div>


<div id="right">
       Hier kann was stehen
    <div id="right-inside">
       Hier der Inhalt links
   </div>
</div>


<?php get_footer(); ?>

Alles anzeigen

css:

Code

#left {
   background-color:transparent;
   width: 23%;
   margin-top: 0px;
   float:left;
   }


#left-inside {
   width:100%;
   color: #2c2c6a;
   min-height:500px;
   }


#left-inside ul {list-style-type:none; padding: 0 0 0 10px; margin: 0 0 0 10px;}
#left-inside li {list-style-position:inside;}


#right {
   background-color: transparent;
   width:75%;
   height:540px;
   margin-top: 0px;
   float:right; 
   border-left: 2px #ddd dotted;
   overflow:auto;
   }


#right-inside {
   width: 98%;
   margin-left: 12px;
   color: #2c2c6a;
   }




#right-inside ul {list-style-type:circle;}
#right-inside li {list-style-position:outside; margin-left:20px;}

Alles anzeigen

if-Abfrage:

PHP

if ($page_id=='4')
      {
      print(Bild....);
      }
   else
      {
      print(Bild....);
      }

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Theme

Jetzt mitmachen!