Sziasztok!
Van egy három oszlopból álló drupal oldalam. (4.7) BAL - KÖZÉP - JOBB
Azt szeretném megoldani, hogy a default Explorer gördítősávok (jobb és alul) le legyenek tiltva, és csak a KÖZÉP -ső oszlopnak (tartalmaknak) legyen egy jobb oldali scrollja. Így a két szélső 'blokkos' rész és a fejléc is állandóan látszik.
A következő kérdés pedig az lenne, hogyan lehet azt megcsinálni, hogy ebből 4 oszlopos legyen, azaz BAL - KÖZÉP - KÖZÉP - JOBB, és a gördítősávok külön jelenjenek meg a két KÖZÉP oszlopon?
Válaszokat előre is köszönöm!
Gondolom a CSS-ben kellene matatni, kérlek segítsetek hol, hogyan.
Most így néz ki a CSS:
body {
margin: 0;
padding: 0;
color: #000;
background: url(back.jpg) no-repeat;
background-attachment: fixed;
font: 80% Arial, Helvetica, sans-serif;
width: 100%;
}
tr.odd td, tr.even td {
padding: 0.3em;
}
tr.odd td {
background-color: #fff;
}
tr.even td {
background-color: #ccffff;
}
h1, h2, h3, h4, h5, h6 {
margin-bottom: 0.5em;
color:#000000;
}
h1 {
font-size: 1.3em;
color:#000000;
}
h2 {
font-size: 1.2em;
padding:2px;
color:#000000;
}
h3, h4, h5, h6 {
font-size: 1.1em;
color:#000000;
}
p {
margin-top: 0.5em;
margin-bottom: 0.9em;
}
a {
text-decoration: none;
font-style: italic;
}
a:link {
color: #660033;
font-weight: bold;
}
a:visited {
color: #660033;
font-weight: bold;
}
a:hover {
color: #00ffff;
font-weight: bold;
}
fieldset {
border: 1px solid #ccc;
}
pre {
background-color: #eee;
padding: 0.75em 1.5em;
font-size: 12px;
border: 0px solid #ddd;
}
table {
/* make sizes relative to body size! */
font-size: 1em;
}
.form-item input, .form-item textarea, .form-item select {
font-family: Verdana, Arila, Helvetica, sans-serif;
font-size: 11px;
border: 1px solid #ccc;
padding: 0.2em;
}
.form-item label {
font-size: 1em;
color: #222;
font-family: Arial, Helvetica, sans-serif;
}
.item-list .title {
font-size: 1em;
color: #FFFF00;
}
.form-item {
}
.form-submit {
border: 2px solid #5B80B2;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
padding: 0.2em;
background-image: url(images/default-bg.gif);
color: #fff;
font-weight: normal;
margin-top: 3px;
}
.links {
margin-bottom: 0em;
}
.comment .links {
margin-bottom: 0em;
background-color: #ffffcc;
}
/*
** Page layout blocks / IDs
*/
#body {
width: 98%;
border: 0px solid #ddd;
margin: 1%;
}
#header, #content {
width: 100%;
}
#header {
font-family: Verdana, Helvetica, sans-serif;
/*background-color: #5278A9;*/
border-bottom: 0px solid #6797CF;
height: 3em;
overflow: hidden;
}
#logo {
vertical-align: bottom;
border: 0;
}
#logo img {
float: left;
padding: 0em 1.0em 0em 1em;
border: 0;
}
#menu {
padding: 0.5em 0.5em 0 0.5em;
text-align: right;
vertical-align: middle;
}
#primary {
font-size: 1.0em;
padding: 0em 0.8em 0.5em 0;
color: #9cf;
}
#primary a {
font-weight: bold;
color: #F7F9C9;
}
#secondary {
padding: 0 1em 0.5em 0;
font-size: 0.8em;
color: #9cf;
}
#secondary a {
font-weight: bold;
color: #9cf;
}
#search {
}
#search .form-text {
width: 8em;
vertical-align: middle;
padding: 0 0.2em 0 0.2em;
margin-top: 2px;
background-color: #ffffcc;
}
#search .form-submit {
border: 0px solid #369;
font-size: 1em;
vertical-align: middle;
background-color: #ffffcc;
}
#mission {
/*background-color: #ccffff;*/
padding: 1.5em 2em;
color: #000;
background-image: url(images/default-bg.gif);
font-weight: bold;
}
#mission a, #mission a:visited {
color: #000000;
font-weight: bold;
background-image: url(images/default-bg.gif);
}
#mission a:hover {
color: #0000CC;
font-weight: bold;
}
.site-name {
margin: 0.1em 0em 0em 0.6em;
padding: 0em;
color: ##FFFFcc;
font-size: 1.5em;
vertical-align: center;
padding-top: 4px;
}
.site-name a:link, .site-name a:visited {
color: ##FFFFcc;
}
.site-name a:hover {
color: ##FFFFcc;
text-decoration: none;
}
.site-slogan {
font-size: 1em;
color: #FFFFcc;
display: block;
margin: 0em 0em 0em 0em;
padding-left: 2em;
font-style: italic;
font-weight: bold;
}
#main {
/* padding in px not ex because IE messes up 100% width tables otherwise */
border: 0px solid #ccc;
margin: 8px;
}
#main form {
padding: 4px;
}
#main h1.title {
/*background-image: url(images/default-bg.gif);*/
background-position:bottom;
padding: 6px;
margin: 0px;
color: #000000;
}
#main h2.title {
/*background-image: url(images/nav-bg.gif);*/
background-position:top;
background-color: #ffffcc;
padding: 2px;
margin: 0px;
color: #000000;
font: 100% Arial, Helvetica, sans-serif;
width: 100%;
}
#main .help {
background-color: #FFF3DF;
padding: 5px;
}
#mission, .node .content, .comment .content {
line-height: 1.4;
background-color: #ffffcc;
}
#help {
font-size: 0.9em;
margin-bottom: 1em;
}
.breadcrumb {
margin-bottom: 0px;
border-bottom: 0px solid #ccc;
color: #000000;
padding: 2px 0 3px 5px;
/*background-color: #000;*/
}
.breadcrumb a{
font-weight: normal;
color: #000;
}
.messages {
background-color: #eee;
border: 0px solid #ccc;
padding: 0.3em;
margin-bottom: 1em;
}
.error {
border-color: red;
}
#sidebar-left {
/*background-color: #fff;*/
}
#sidebar-right {
/* background-color: #eee; */
border-left: 0px solid #ccc;
border-right: 0px solid #ccc;
}
#sidebar-left, #sidebar-right {
width: 17em;
/* padding in px not ex because IE messes up 100% width tables otherwise */
vertical-align: top;
}
#footer {
color: #000;
border-top: 0px solid #ccc;
background-color: #fff;
padding: 1em;
font-size: 0.8em;
}
/*
** Common declarations for child classes of node, comment, block, box, etc.
** If you want any of them styled differently for a specific parent, add
** additional rules /with only the differing properties!/ to .parent .class.
** See .comment .title for an example.
*/
#sidebar-left .block .title {
font-size: 1em;
font-weight: bold;
color: #000;
font-weight: normal;
text-transform: capitalize;
background-image: url(images/nav-bg.gif);
background-position: bottom;
height: 14px;
margin: 0; /* decrease default margins for h.title */
font: 80% Arial, Helvetica, sans-serif;
width: 100%;
}
#sidebar-right .block .title {
font-size: 1em;
font-weight: bold;
color: #000;
font-weight: normal;
text-transform: capitalize;
background-image: url(images/default-bg.gif);
background-position: top;
margin: 0; /* decrease default margins for h.title */
padding: 6px;
font: 80% Arial, Helvetica, sans-serif;
width: 100%;
}
.submitted {
color:#000000;
font-size: 0.8em;
margin-left: 3px;
}
.links {
color: #000000;
}
.links a {
font-weight: bold;
}
.block, .box {
padding: 0 0 1.5em 0;
color: #000000;
font-weight: bold;
}
#sidebar-left .block {
padding-bottom: 0.75em;
margin-bottom: 1.5em;
border: 0px solid #ccc;
margin: 3px;
}
.block .content {
padding: 3px;
}
.box {
margin: 4px;
border: 0px solid #ccc;
color: #000;
background-color: #ffffcc;
}
.box .title {
font-size: 1.1em;
color:#000;
}
.node {
margin: .5em 0 2em 0;
}
.sticky {
margin: 3px;
border: 0px solid #aaa;
}
.node .content, .comment .content {
padding: 5px;
color: #000000;
border-top: 0px solid #ddd;
border-bottom: 0px solid #ddd;
background-color: #ffffcc;
}
.node .taxonomy {
color: #0000CC;
font-size: 0.8em;
padding: 1.5em;
}
.node .picture {
border: 0px solid #ddd;
float: right;
margin: 0.5em;
}
.comment {
border: 0px solid #abc;
padding: .5em;
margin-bottom: 1em;
background-color: #ffffcc;
}
.comment .title a {
font-size: 1.1em;
font-weight: normal;
background-color: #ffffcc;
color: #000;
}
.comment .new {
text-align: right;
font-weight: bold;
font-size: 0.8em;
float: right;
color: red;
}
.comment .picture {
border: 1px solid #abc;
float: right;
margin: 0.5em;
}
/*
** Module specific styles
*/
#aggregator .feed-source {
border: 1px solid #ccc;
padding: 1em;
margin: 1em 0 1em 0;
background-color: #ffffcc;
color: #000;
}
#aggregator .news-item .categories, #aggregator .source, #aggregator .age {
color:#000000;
font-style: italic;
font-size: 0.9em;
background-color: #ffffcc;
color: #000;
}
#aggregator .title {
margin-bottom: 0.5em;
font-size: 1em;
background-color: #ffffcc;
color: #000;
}
#aggregator h3 {
margin-top: 1em;
background-color: #ffffcc;
color: #000;
}
#forum table {
width: 100%;
background-color: #FFFFcc;
}
#forum td {
padding: 0.5em 0.5em 0.5em 0.5em;
background-color: #FFFFcc;
}
#forum td.forum, #forum td.posts {
background-color: #FFFFcc;
}
#forum td.topics, #forum td.last-reply {
background-color: #FFFFcc;
}
#forum td.container {
background-color: #FFFFcc;
}
#forum td.container a {
color: #555;
}
#forum td.statistics, #forum td.settings, #forum td.pager {
height: 1.5em;
border: 1px solid #bbb;
}
#forum td .name {
color: #96c;
background-color: ##FFFFcc;
}
#forum td .links {
padding-top: 0.7em;
font-size: 0.9em;
}
#profile .profile {
clear: both;
border: 1px solid #abc;
padding: .5em;
margin: 1em 0em 1em 0em;
}
#profile .profile .name {
padding-bottom: 0.5em;
}
.block-forum h3 {
margin-bottom: .5em;
}
.calendar a {
text-decoration: none;
}
.calendar td, .calendar th {
padding: 0.4em 0;
border-color: #888;
}
.calendar .day-today {
background-color: #69c;
}
.calendar .day-today a {
color: #fff;
}
.calendar .day-selected {
background-color: #369;
color: #fff;
}
.calendar .header-week {
background-color: #ccc;
}
.calendar .day-blank {
background-color: #ccc;
}
.calendar .row-week td a:hover {
background-color: #fff; color: #000;
}
.event-calendar td.fri {
background: #fdd;
}
.event-calendar td.sun {
background: white;
}
.event-calendar td.days {
color: #cce;
background: #224;
}
#container {
float:left;
width:100%;
/* IE doubles the margins on floats, this takes care of the problem */
display:inline;
/* this is where Ryan Brill (author of the ALA's article) and I go in "opposite directions" */
margin-left:-200px
}
Ez nem Drupal kérdés
Ha jól értem, CSS frame-eket akarsz csinálni. Ezeket ajánlom:
http://www.dynamicdrive.com/style/layouts/category/C11/
http://www.fu2k.org/alex/css/frames/
Nagy Gusztáv
köszi alakul a dolog!
köszi alakul a dolog!