Flexible Website
Eingetragen von sascha.n (1)am 24.02.2013 - 12:54 Uhr in
Hallo Zusammen .....Wie kann man bitte folgendes Layout so abändern das Sie flexibel wird? ( % auto % )
Vielen Dank
.container {
margin: 0 auto;
width: 960px;
}
.no-sidebars .main,
.no-sidebars .page-content {
width: 960px;
}
.sidebar-first .page-content {
float: right;
width: 670px;
}
.sidebar-second .main,
.sidebar-second .page-content {
float: left;
width: 670px;
}
.two-sidebars .main {
float: left;
width: 720px;
}
.two-sidebars .page-content {
float: right;
width: 480px;
}
.two-sidebars .first-sidebar {
float: left;
width: 240px;
}
.two-sidebars .second-sidebar {
float: right;
width: 240px;
}
.one-sidebar .first-sidebar {
float: left;
width: 290px;
}
.one-sidebar .second-sidebar {
float: right;
width: 290px;
}
/**
* column gutters
*/
.sidebar-first .page-content .gutter {
padding-left: 12px;
}
.sidebar-second .page-content .gutter {
padding-right: 11px;
}
.two-sidebars .page-content .gutter {
padding-left: 8px;
padding-right: 7px;
}
.sidebar .gutter {
padding: 0 7px 7px;
}
/**
* preface and bottom regions
*/
.preface-1,
.bottom-1 {
width: 960px;
}
.preface-2,
.bottom-2 {
float: left;
width: 480px;
}
.preface-3,
.bottom-3 {
float: left;
width: 320px;
}
.bottom-4 {
float: left;
width: 240px;
}
.preface .gutter,
.bottom .gutter {
padding: 0 10px 5px;
}
- Anmelden oder Registrieren um Kommentare zu schreiben
Für Fragen zu CSS würde ich
am 24.02.2013 - 13:09 Uhr
Für Fragen zu CSS würde ich dir ein entsprechendes Forum empfehlen. Wenn du mit CSS nicht vertraut bist würde ich dir empfehlen von vorneherein ein entsprechendes Theme für Drupal auszuwählen, das diese Funktionalität von Hause aus mitbringt. Der CSS Ausschnitt in deinem Post sieht mir nach einem 960 Grid-Layout aus welches eben nicht auf flexible Breite ausgelegt ist.
Sehe ich auch so
am 24.02.2013 - 13:29 Uhr
Sehe ich genauso wie @anax. Das Layout ist ein wahrscheinlich ein Gitter-Layout, das pixelgenau angelegt ist. Wenn Du da nicht weißt, was Du tust, hast Du ganz schnell das Layout zerschossen. Der Fachbegriff für dein "flexibeles" Layout lautet fluide. Das hilft vielleicht beim Googlen nach einem passenden Layout. Fluide bedeutet, dass sich das Layout (bis auf die Abmessungen der eingebundenen Grafiken) auf die Fensterbreite anpasst, es entstehen also keine horizontalen Srcollbalken bei kleineren Fensterabmessungen, falls Du das meintest.
Für ein fluide Layout setzt
am 24.02.2013 - 18:23 Uhr
Für ein fluide Layout setzt du statt der absoluten numerischen Werte wie px relative Werte wie em und % ein.
Also zum Beispiel statt:
.container {margin: 0 auto; width: 960px; }.container { width:80%; }
oder auch:
.two-sidebars .page-content {float: right; width: 480px;}.two-sidebars .page-content {float:right; width: 40%;}
Allerdings muss das gesamte Layout überarbeitet werden. Mal so nebenbei wird das nix. Davon abgesehen: Hast du dir mal angesehen, wie ein fluide Layout auf nem 17.3 Zoll Notebook widescreen Display oder gar nem Fernsehbildschirm aussieht? Grausam....
Dafür gibts heute doch clevere Lösungen. Stichwort: responsive Webdesign.