1. Tudásbázis
  2. Sminkek
  3. Aquia Marina smink css jobb oldala nem kell

Aquia Marina smink css jobb oldala nem kell

Beküldte makgab - 2009. november 17. 20.34
makgab képe

Hi!

A SUBJ-beli sminket szeretném testre szabni, létrehoztam belőle egy al-sminket.
A jobb oldalra nem tettem blokkokat és nem is szeretnék, viszont ezt a részt ki szeretném használni a középső résznek (tartalmaknak).
A css-ben mit kellene módosítanom, hogy a középen levő tartalom rész teljesen kihúzodjon jobb oldalra?

A többi smink-ben ha nincs jobboldalon definiálva semmi a blokkokban, akkor ezt automatikusan kihúzták jobb szélig.
Azt szeretném, mint itt:
http://drupal.org/files/acquia_marina-layouts.png
A bal felső képre gondolok.

G.

Drupal verzió: 
6.x
Fórum: 
Sminkek
makgab képe

Beküldte makgab - 2009. november 18. 16.52

CSS-ben kell módosítani? Kikommenteztem a nem szükséges részt (elvileg):

/****************************************/
/*          COLUMN LAYOUTS              */
/*                                      */
/* Classes for different column layouts */
/* that are applied to the <body> tag.  */
/****************************************/
 
 
 
/************************/
/* SINGLE COLUMN LAYOUT */
/* (Main Content)       */
/************************/
 
//body.layout-main #content-wrapper {
//  margin: 24px 0 0 0;    /* LTR */
//  width: 960px;
//}
 
/**************************/
/*   TWO COLUMN LAYOUT    */
/* (Sidebar:Main Content) */
/**************************/
body.layout-first-main #sidebar-first {
  margin: 24px 14px 0 0;
//  width: 240px;
  width: 18%;
}
 
 
body.layout-first-main #content-wrapper {
  margin: 34px 0 0 0;    /* LTR */
//  width: 706px;
  width: 79.9%;
}
 
/**************************/
/*   TWO COLUMN LAYOUT    */
/* (Main Content:Sidebar) */
/**************************/
//body.layout-main-last #content-wrapper {
//  margin: 32px 20px 0 0;
//  position: relative;
//  width: 470px;
//  z-index: 1;
//}
 
//body.layout-main-last #sidebar-last {
//  background-color: transparent;
//  margin: 32px 0 0 0;
//  width: 470px;
//}
 
/**********************************/
/*      THREE COLUMN LAYOUT       */
/* (Sidebar:Main Content:Sidebar) */
/**********************************/
//body.layout-first-main-last #sidebar-first {
//  margin: 40px 20px 0 0;    /* LTR */
//  width: 240px;
//}
 
//body.layout-first-main-last #content-wrapper {
//  margin: 40px 0 0;
//  width: 700px;
//}
 
//body.layout-first-main-last #content-wrapper #content-inner {
//}
 
//body.layout-first-main-last #content-wrapper #sidebar-last {
// background-color: #F4F7E7;
//  margin: 0;
//  padding: 0 0 0 20px;    /* LTR */
//  width: 280px;
//}
 
//body.full-node.layout-first-main-last #sidebar-last {
//  margin: 0;
//}

Ez már majdnem jó, csak a tartalmak "elcsúsznak". Az elős pl. jó, a második viszont jobbra csúszott és egy kicsit bele az elsőbe... :O

G.

0
0
aboros képe

Beküldte aboros - 2009. november 18. 17.52

http://www.cssmastery.com/

0
0

-
clear: both;

makgab képe

Beküldte makgab - 2009. november 18. 22.19

nálam egy teszt oldalon viszont jó. létezik?
A böngésző ugyanaz FF3.5.5.

G.

0
0
Szekeres_Juli képe

Beküldte Szekeres_Juli - 2009. november 19. 17.28

Az aboros által ajánlott könyvet nem ismerem, így nem feltétlenül alternatívaként, de ajánlom a http://www.w3schools.com/css/ oldalt. Én onnan indultam, aztán a neten mindent megtaláltam, ami eddig kellett. Van egy rakás linkem, szívesen megosztom, ha kéred. Még magyarul is találtam hasznos leírásokat. Az egyik nagy kedvencem a http://www.csszengarden.com/tr/magyar/

0
0
makgab képe

Beküldte makgab - 2009. november 20. 09.35

A css doksi megvan nekem is, kösz!

Ez egy saját node típus érdekes módon, ami elcsúszik.
Azt vettem észre, hogy mintha képernyő felbontástól függene. Valamelyiken jó, valamelyiken nem.

IE-ben jónal tűnik. FF alatt csúszik el a második saját node, jobbra:
Itt a screenshot.

G.

0
0
aboros képe

Beküldte aboros - 2009. november 20. 13.07

vagy mi floatol még ott?
ha három vagy több node van mi történik?

jó lenne egy olyan szkrínsot amin látom a firebugot is és éppen az elcsúszódó nodeot inspektálod. még jobb lenne persze egy élő link, ahol én inspektálhatok. :)

a könyvet nem viccből írtam, pont az ilyen "vajon mi is az a float és hogyan kell használni meg mire kell figyelni" típusú dolgokat rakja rendbe. persze, könnyű, float: left, aztán akkor balra igazodik és a többi jobbról körbefolyja, igenám, de mint láthatjuk ennél azért bonyolultabb az ügy. :)

szóval ott a bal floatot törölni kéne. de nem is értem, mert az egész alsó nodenak fel kéne egyébként csúszni a felső szövege alá közvetlen. (hacsak nincs valami ordas nagy margin ott vagy ilyesmi)

0
0

-
clear: both;

dj képe

Beküldte dj - 2009. november 20. 13.16

egy
clear : left;
hiányzik a címmező osztályból vagy id-ből.

0
0

Üdv!
Dudás József

makgab képe

Beküldte makgab - 2009. november 20. 14.42

megvan! ez volt az, köszi!
A css-ben hiányzott a "clear: left;"

h2.title {                                        /* block titles, node titles */
  clear: left;    /* LTR */
  font-family: Myriad Pro, Myriad Web Pro Regular, Lucida Grande, Geneva, Trebuchet MS, sans-serif;
  font-size: 1.333em;
  font-weight: 600;
  text-transform: uppercase;
}

G.

0
0
dj képe

Beküldte dj - 2009. november 20. 20.19

hogy miért akkor szívesen ;)

0
0

Üdv!
Dudás József

makgab képe

Beküldte makgab - 2009. november 20. 20.44

"The clear property specifies which sides of an element where other floating elements are not allowed."

A float opcióval is szokták használni, ahogy nézem. CSS-ben eddig ezt nem használtam. Pontosan mit is jelent? "Egy elem oldalait határozza meg, ahol más lebegő (float) elemek nincsenek engedélyezve."
:O

G.

0
0
dj képe

Beküldte dj - 2009. november 20. 21.11

Tulajdonképpen azt tudod beállítani vele, hogy a kiírandó elem előtt, mögött, vagy mindkét oldalon nem lehet más elem ami a saját szintjén érvényesül. Ez pont akkor érdekes amikor float-al megváltoztatod a jól bevált HTML alapértelmezett egymás alatti megjelenítését és egymás mellé rendelsz elemeket. Amikor ennek véget akarsz vetni - mint a saját példádban is - akkor kell a clear-t használni.

Ezt az oldalt is érdemes olvasgatni: http://www.standardsmode.hu/html-css/bevezetes/

0
0

Üdv!
Dudás József