Zentrierter Inhalt und variabler Rand

#1 J000S

WF-Fetischist

Gruppe: aktive Mitglieder
Beiträge: 2.073
Beigetreten: 13. Juni 09
Reputation: 38
Geschlecht:Männlich
Wohnort:C:\Home
Interessen:Computer, Feuerwehr, Sport

geschrieben 18. Mai 2011 - 15:57

Hallo alle zusammen,

ich steh gerade irgendwie voll aufm Schlauch... ich will, dass eine Website so aufgebaut wird:

Aber wie bekomme ich das hin? Im Prinzp ist das ja so wie WF auch aufgebaut ist :huh:

In der Mitte eine feste Größe für den Inhalt und recht/links daneben ein Rand, der sich je nach Fenstergröße vergrößert/verkleinert.

Nach oben
Nach oben of the page up there ^

#2 amalbhalbe

Spezialist

Gruppe: aktive Mitglieder
Beiträge: 639
Beigetreten: 14. Mai 04
Reputation: 0
Geschlecht:Männlich
Wohnort:BMW E38 740i V8 286 PS 4.4L Hubraum
Interessen:Design is the production of braindysentery

geschrieben 18. Mai 2011 - 22:54

body{margin:0px;padding:0px;}
.header{width:100%;height:100px;margin:0px;padding:0;}
.content{width:955px;margin:0px auto;height:auto;}

<html> u.s.w 

<div class="header"></div>
<div class="content"></div>

die Abstände links und rechts ergeben sich automatisch je nach Auflösung? oder willst du die 2 Bereiche explizit ansteuern / befüllen?

Pc is my life, amd my world, intel my enemy and Linux my Hell

Nach oben
Nach oben of the page up there ^

#3 J000S

WF-Fetischist

Gruppe: aktive Mitglieder
Beiträge: 2.073
Beigetreten: 13. Juni 09
Reputation: 38
Geschlecht:Männlich
Wohnort:C:\Home
Interessen:Computer, Feuerwehr, Sport

geschrieben 19. Mai 2011 - 06:05

Zitat (amalbhalbe: 18.05.2011, 23:54)

die Abstände links und rechts ergeben sich automatisch je nach Auflösung? oder willst du die 2 Bereiche explizit ansteuern / befüllen?

Ja, die sollen sich je nach Auflösung anpassen. Da soll aber noch was hinkommen (Werbüng :huh:

)

Nach oben
Nach oben of the page up there ^

#4 amalbhalbe

Spezialist

Gruppe: aktive Mitglieder
Beiträge: 639
Beigetreten: 14. Mai 04
Reputation: 0
Geschlecht:Männlich
Wohnort:BMW E38 740i V8 286 PS 4.4L Hubraum
Interessen:Design is the production of braindysentery

geschrieben 19. Mai 2011 - 08:22

Dann nimm dieses Layout und ergänze es z.B. mit

.ad{float:left;width:100px;height:100px;}

Willst du die Werbung immer am Rand vom Browser haben dann stell die Div außerhalb des content

<html> u.s.w 
<div class="ad"></div>
<div class="header"></div>
<div class="content"></div>

Bei breiten Monitoren hättest du viel Weißraum zwischen Werbung und Content, willst du das die Werbung am Content z.B links außen klebt dann machs so

.ad{float:left;width:100px;height:100px;margin-left:-100px /*eigene Breite*/}

<html> u.s.w 

<div class="header"></div>
<div class="content">
 <div class="ad"></div> <!-- 1. Element in Content -->
</div>

Pc is my life, amd my world, intel my enemy and Linux my Hell

Nach oben
Nach oben of the page up there ^

#5 DarkAlucard

Spezialist

Gruppe: aktive Mitglieder
Beiträge: 464
Beigetreten: 04. Dezember 09
Reputation: 5
Geschlecht:Männlich

geschrieben 19. Mai 2011 - 09:02

Ganz ehrlich, wo liegt das Problem,
lasse eine Tabelle einfach mit 100% breite skalieren
und dort machst du drei spalten,
aber nur der mittleren gibst du eine feste breite und schon klappt das:

  <table border=1 width=100% height=100%>
 <tr><td colspan=3 height=20>Header</td></tr>
 <tr><td>Links</td><td width=1000px>Mitte</td><td>Rechts</td></tr>
 </table>

Dieser Beitrag wurde von DarkAlucard bearbeitet: 19. Mai 2011 - 09:03

Du benutzt VMware Server 2, aber das Webplugin um auf die VMs zuzugreifen nervt dich extrem?
Probier meine GUI, den VMRConnector (Alucards Vmware Vmrc-gui)
Eingefügtes Bild

Nach oben
Nach oben of the page up there ^

#6 amalbhalbe

Spezialist

Gruppe: aktive Mitglieder
Beiträge: 639
Beigetreten: 14. Mai 04
Reputation: 0
Geschlecht:Männlich
Wohnort:BMW E38 740i V8 286 PS 4.4L Hubraum
Interessen:Design is the production of braindysentery

geschrieben 19. Mai 2011 - 09:10

Zitat (DarkAlucard: 19.05.2011, 10:02)

Ganz ehrlich, wo liegt das Problem...

http://seybold.jan-a.../everything.php
http://standards.webmasterpro.de/?article=...-+vs+CSS-Layout
http://www.w3.org/20...csslayout-howto

Dieser Beitrag wurde von amalbhalbe bearbeitet: 19. Mai 2011 - 09:12

Pc is my life, amd my world, intel my enemy and Linux my Hell

Nach oben
Nach oben of the page up there ^

#7 Ludacris

Elite

Gruppe: Moderation
Beiträge: 4.669
Beigetreten: 28. Mai 06
Reputation: 222
Geschlecht:Männlich

geschrieben 19. Mai 2011 - 09:27

tabellen sind *etwas* veraltet und man sollte sie nur noch dort verwenden wo man auch wirklich eine tabelle benötigt, nicht aber zum seitenaufbau

Nach oben
Nach oben of the page up there ^

#8 Stefan_der_held

>>Eierlegende-Woll-Milch-Sau<<

Gruppe: Offizieller Support
Beiträge: 14.292
Beigetreten: 08. April 06
Reputation: 935
Geschlecht:Männlich
Wohnort:Dortmund NRW
Interessen:Alles wo irgendwie Strom durchfließt fasziniert mich einfach weswegen ich halt Elektroinstallateur geworden bin :)

geschrieben 19. Mai 2011 - 10:17

Zitat (Ludacris: 19.05.2011, 10:27)

tabellen sind *etwas* veraltet und man sollte sie nur noch dort verwenden wo man auch wirklich eine tabelle benötigt, nicht aber zum seitenaufbau

hier fehlt irgendwie ein "jawoll"-Button :huh:

also...

"Mutterelement" (ob Body oder DIV ist egal) muss eine feste Breite haben. Diese in PX angeben - nicht in "%". Ebenso muss dieses Element die CSS-Eigenschaft "margin:auto" entsprechend haben.

Das zu zentrierende "Tochterelement" bekommt auch eine Breite festgelegt. diese kann aber in "%" erfolgen.

Nach oben
Nach oben of the page up there ^

#9 J000S

WF-Fetischist

Gruppe: aktive Mitglieder
Beiträge: 2.073
Beigetreten: 13. Juni 09
Reputation: 38
Geschlecht:Männlich
Wohnort:C:\Home
Interessen:Computer, Feuerwehr, Sport

geschrieben 19. Mai 2011 - 13:46

@amalbhalbe

mit letzterer Variante klappts

danke!

*Thread ausgrab*

Hab bei Dreamweaver genau das gefunden was ich wollte... war so eine Art Vorlage. Hab ich vorher nie gesehen, das es sowas da gibt