Honlap tervezés kérdés
Sziasztok!
Oldal tervezéssel kapcsolatben szeretnék kérdezni:
Milyen felbontást érdemes figyelembevenni az oldal tervezésénel?
800x600 számít még vagy inkább már csak min 1024x768-ra érdemes optimalizálni?
Elolvastam egy régi cikket itt a Weblaboron a CSS lépésről-lépésre: a design tervtől a kész oldalig címűt.
Egy hasonló oldalfelépítést szeretnék magamnak, de a szokásos problémám jött elő: ha azt szeretném, hogy minden fix méretű legyen, csak a "tartalom" div nyúljon meg, ha nagyobb felbontásnál nézik, akkor hogyan kell ezt definiálnom?
Egy másik probléma a befoglaló div (lap nevű amiben minden bele van ágyazva), annak középre igazítása nem megy a
text-align:center;
margin:10px auto 10px auto
beállításokkal csak ha az abszolut pozicionálást használom.
köszönöm a segítséget előre is!
■ Oldal tervezéssel kapcsolatben szeretnék kérdezni:
Milyen felbontást érdemes figyelembevenni az oldal tervezésénel?
800x600 számít még vagy inkább már csak min 1024x768-ra érdemes optimalizálni?
Elolvastam egy régi cikket itt a Weblaboron a CSS lépésről-lépésre: a design tervtől a kész oldalig címűt.
Egy hasonló oldalfelépítést szeretnék magamnak, de a szokásos problémám jött elő: ha azt szeretném, hogy minden fix méretű legyen, csak a "tartalom" div nyúljon meg, ha nagyobb felbontásnál nézik, akkor hogyan kell ezt definiálnom?
Egy másik probléma a befoglaló div (lap nevű amiben minden bele van ágyazva), annak középre igazítása nem megy a
text-align:center;
margin:10px auto 10px auto
beállításokkal csak ha az abszolut pozicionálást használom.
köszönöm a segítséget előre is!
Én úgy szoktam azt megoldani
felesleges
IE6
strict vs transitional
Tessék?
próbáld ki
Kipróbáltam
margin: autoadiv-en, Firefoxban középen, IE6-ban bal oldalt: http://jooadam.hu/center1.htmltext-align: centerabody-n, Firefoxban bal oldalt, IE6-ban középen: http://jooadam.hu/center2.htmlAz első sor a gyilkos
Próbáld ki, mi történik, ha kidobod az első sort!
Tudom
Öröklődés + igazítások
Először is mindenkinek köszönöm szépen az információkat!
Kicsit kezdő vagyok a témában, ez az első css oldalam.
Az öröklődés és az igazítások nem mennek még:
Ha a "konténer" divnek megadom az alábbi paramétereket mint
pl width: 994, text-align: center
akkor azt szeretném hogy a benne lévő divekre is ezek a tulajdonságok érvényesüljenek.
Lehet hogy más a baj mert beletettem egy vízszintes css menüt (linkek) a fejléc divbe amit
block-os megjelenítéssel teszek ki balra float-olgatva.
De valamiért ez a menü div "kitör" és teljes lap szélességű lesz nem akkora mint a konténer div.
Csak az a redikális megoldás segitett ha az index.html-ben a body-ban a "center" html tag-et
használom és mindegyik divnek beállítom a maximális fix szélességet (fej, közép, alja)
és a vizszintes menü divnek is beállítom a text-align-t.
Egy másik kérdés hogy mekkora legyen valójában a a konténer div szélessége 1024x768 vagy a
netbook felbontást figyelembe véve?
A régi weblabor tutorialnál a 800x600-as felbontásnál a konténer div 770px széles volt,
gondoltam akkor 1024 nél jól lesz a 994? De nem tudom, hogy miért pont ennyi.
Ha van benne görgetősáv akkor ezt kell levonni belőle illetve a margin, egyéb értékeket?
Hogyan lehet megadni egy div szélességét úgy hogy van mellette egy másik?
Valami ilyesmire gondolok hogy width: 100% - width(mellette lévő div mérete)
Ezt hogyan lehet megfogalmazni css-ben?
köszönöm!
Üdv !
A közepre igazítás pedig a margin: 10px auto 10px auto; -val , ahogy írtad tökéletesen működik. Nem tudom hogy nálad mi lehet a baj, mert nálam teljesen jól megy :)
800 x 600
Vegyük pl. ezt az oldalt, amit most olvasol. Ha nem lenne a jobb oldali oldalsáv (ami nem is biztos, hogy szükségszerű), akkor 800x600-ban kényelmesen olvasható az oldal érdemi része.
De tény és való, hogy általánosságban már nem érdemes 800x600-ban gondolkodni. 1024 is már lassan felejtős lehetne, ha nem jelentek volna meg a netbook-ok (jellemzően 1024x600-as felbontással) és nem nyomulnának ezerrel a mobil készülékek. iPhone böngészője pl. alap esetben 1024-ben renderel (legalábbis így rémlik).
Netbook
Rugalmasság
Ha viszont tényleg mindenképp a viewport szélességétől szeretnéd függővé tenni az oldal méretét, akkor javasolnám a rugalmas méretű résznek a %-ban megadott szélességet, a bodyhoz viszonyítva, tehát a rugalmas rész container eleme a body legyen. A szabványok szerint ez működik, de az IE elég érdekesen szokta értelmezni ezeket, úgyhogy nem vagyok benne biztos, hogy ez így IE-n is megy, de próba szerencse. :)
Segítség Myspace forráskód hiba. Mi lehet a baj?
Myspace-es oldalt frissítek új designra, csak egy kis gubanc merült fel. A myspace-es flash lejátszó, valamiért inaktív az kód alatt. Ha arréb teszem (top-margin, vagy vízszintesen) akkor aktivvá válik. Olyan mintha az adott helyen ahol van, eltakarná egy transparens valami. Ha más objektumot etszek arra a helyre akkor az is inaktív lesz (linkek, görgetők).
Mi lehet a probléma az adott hellyel? Köszi a segítséget! A kód:
<style>
.latestBlogEntry {display:none;}
.profileInfo {display:none;}
.userProfileURL {display:none;}
.interestsAndDetails, .userProfileDetail, .userProfileURL, .contactTable, .profileInfo, .latestBlogEntry, .extendedNetwork, { display:none; }
{!mp3 player verschieben ---------!}
table table td.text div object {position:relative; top:370px; right:0px;}
table table td.text div object object {position:static;}
{!-Size friendspace outer 2 tables !}
table.friendSpace {margin-top:1600px;}
table.friendSpace table,
table.friendSpace td,
table.friendSpace {width:400px !important;}
{!-Size inner levels to exactly 1/4 of above!}
table.friendspace table table td,
table.friendSpace table table table,
table.friendSpace table table table td {width:75px !important; margin:0px; border:0px; padding:5px;}
{!- set so that img PLUS padding = 1/4 of full table width-!}
table.friendspace img {width:74px !important}
{!-names above friend pictures. I keep these small. FF has wrap issues-!}
table.friendspace table table td a {font-size:9; font-family:Arial Narrow}
{!-ditch picture border-!}
table.friendspace a img {border:0px !important;}
{!-deal with view friends div-!}
table.friendSpace table div {width:98% !important; font-size:8px !important}
{!-Gets rid of some excess space-!}
table.friendspace br {line-height:2px;}
table.friendSpace div {display:none;}
{!shows verschieben geht hier---------!}
table table td.text div {margin-top:0px;}
body {
background-color:000000;
background-image:url('http://www.creative-device.com/clients/myspace/djfelipe/background.gif');
background-position:top center;
background-repeat:repeat-y;
padding-left:0px;
padding-right:0px;
position:relative;
left:0px; top:0px;
..;
}
table table table table td {filter:none;}
.bodyContent { background-color:000000}
table.friendsComments {width:800px;}
table.friendsComments img {max-width:200px; height:auto;}
table,tr,td{background-color: transparent;border-style: none;}
{ Text Properties }
table, tr, td, li, p, div {font-family:tahoma !important; font-size:10px !important; color:bebebe !important; }
.btext, .orangetext15, .nametext, .whitetext12 {color:a62a55 !important; font-weight:normal; font-style:normal; }
.blacktext10, .blacktext11, .blacktext12, .lightbluetext8, .redtext, .redbtext, .text {font-family:arial !important; color:c0c0c0!important;
font-weight:bold; font-style:normal; }
{ Link Properties }
a:active, a:visited, a:link {font-family:tahoma !important; color:828282 !important; font-weight:bold; font-style:normal; }
a:hover {font-family:tahoma !important; color:ffffff !important; font-weight:bold; font-style:normal; }
</style>
<style>{!---------- headimage ----------!}</style>
<div style="border: 0px none ; padding: 0px; position: absolute; left: 50%; right: 50%; top: 150px; width: 800px; z-index: 6; margin-left:
-400px; background-color: rgb(0, 0, 0);">
<img src="http://www.djsandymartinez.com/myspace/header/header_sandy01.jpg" width="800" height="400" /></div>
<style>{!---------- mainbox sart ----------!}</style>
<div style="position: absolute; left: 50%; right: 50%; top: 550px; width: 800px; margin-left: -400px; text-align: left;">
<style>{!---------- box left ----------!}</style>
<div style="float: left; width: 320px; top: 800px; height: 26px; text-align: left;">
<img src="http://www.djsandymartinez.com/myspace/savok/about_sav.jpg" width="320" height="26" />
<div style="overflow: auto; padding-top: 10px; width: 320px; height: 380px; background-color: rgb(0, 0, 0);">
I'm borning in 19th of january 1980, in Hungary. My musical style is club and electro house. I step closer to the disco works under the high
school. In 1999 I got my first serious chance, in a club,where I was the resident (Club Alcatraz) Since the year 2002 I'm played in a lot of
festivals, and meet a lot of good people in the world of the producers. After, in 2003 I savoured the really deep of this world, organising
programs and parties. Nowadays, I'm owner partner for 2 hungarian electronic music festival party series (Flower Festival | Aircraft). Since
2004 I spend a lot of time to producing musics at my home studio, but at the beginings I only made bootlegs and remixes. <br /><br />My first
music with a videoclip was released in 2007 summer, cooperated with my producer friend, Blue P. Since Autumn of 2007 I started a party series
under the name "Bombanő Party" (Sexy Girl Party), where I attended the best clubs in hungary with the hungarian playmates. In December of 2009
I releasing my first artist album, called Little Star and on this album there is 11 very good tracks, and I would like to make a videoclip for
3 tracks.<br /><br />My future future plans between it owes I would like to get geared airplan aviation
licence, and take more time for the producing. And finally i don't want to hide to I want to travel to USA and get more profession in
producing of music.<br /><br />Hobbies: Wake & snowboard, flying with a plane. "Im in over 10 years, but i feel that to the music world just
now opening for me, what I shall say? Like a child curiosity and gone blind I set about it with fanaticism in order to show it, what is it
what I like and i hope so I find many companions and a similar friend respecting music."<br /><br /></div>
</div>
<style>{!---------- seperator ----------!}</style>
<div style="float: left; width: 25px; height: 430px; text-align: left;">
</div>
<style>{!---------- box right ----------!}</style>
<div style="float: left; width: 450px; height: 26px; text-align: left;">
<img src="http://www.djsandymartinez.com/myspace/savok/listenrelease_sav.jpg" width="450" height="26" />
</div>
<style>{!---------- box second middle ----------!}</style>
<div style="padding: 0px; float: left; width: 800px; height: 150px; background-color: rgb(0, 0, 0); text-align: left; margin-top:
0px;">
<style>{!----- box second 1/3 -----!}</style>
<div style="float: left; width: 260px; height: 150px; background-color: rgb(0, 0, 0); text-align: left;">
<img src="http://www.djsandymartinez.com/myspace/savok/promotions_sav.jpg" width="260" height="25" />
<div style="width: 90px; height: 90px; float: left; margin-top: 10px;"></div>
<div style="width: 160px; height: 90px; float: left; margin-top: 10px; margin-left: 10px;"><br />
<br />
<a href="http://www.msplinks.com/MDFodHRwczovL3d3dy5iZWF0cG9ydC5jb20vZGUtREUvaHRtbC9jb250ZW50L3JlbGVhc2UvY2F0YWxvZy8/cGVyZm9ybWVySWQ9NTQwNDYmY29u
dGV4dFR5cGU9YXJ0aXN0cyZjb250ZXh0RW50aXR5SWQ9NTQwNDY="></a> </div>
</div>
<style>{!----- seperator 10px -----!}</style>
<div style="background: transparent url(http://www.djsandymartinez.com/myspace/header/separator.jpg) no-repeat scroll 0% 0%;
float: left; width: 10px; height: 150px; padding-top: 10px; text-align: left; -moz-background-clip: -moz-initial; -moz-background-origin:
-moz-initial; -moz-background-inline-policy: -moz-initial;">
</div>
<style>{!----- box second 2/3 -----!}</style>
<div style="float: left; width: 260px; height: 150px; background-color: rgb(0, 0, 0); text-align: left;">
<img src="http://www.djsandymartinez.com/myspace/savok/booking_sav.jpg" width="260" height="25" />
<div style="width: 100px; height: 90px; float: left; margin-top: 10px;"></div>
<div style="width: 150px; height: 90px; float: left; margin-top: 10px; margin-left: 10px;"><br />
<br />
<a href="http://www.msplinks.com/MDFodHRwOi8vd3d3LnRpdGFuLmNvLmF0"></a> </div>
</div>
<style>{!----- seperator 10px -----!}</style>
<div style="background: transparent url(http://www.djsandymartinez.com/myspace/header/separator.jpg) no-repeat scroll 0% 0%;
float: left; width: 10px; height: 150px; padding-top: 10px; text-align: left; -moz-background-clip: -moz-initial; -moz-background-origin:
-moz-initial; -moz-background-inline-policy: -moz-initial;">
</div>
<style>{!----- box second 3/3 -----!}</style>
<div style="float: left; width: 260px; height: 150px; background-color: rgb(0, 0, 0); text-align: left;">
<img src="http://www.djsandymartinez.com/myspace/savok/clubsession_sav.jpg" width="260" height="25" /></div>
<style>{!----- box second 1/2 -----!}</style>
<div style="float: left; width: 340px; height: 280px; background-color: rgb(0, 0, 0); text-align: left; font-size: 0px;">
<img src="http://www.djsandymartinez.com/myspace/savok/presspic_sav.jpg" width="320" height="26" />
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="250" width="340">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<param name="movie" value="philippstraub_elemei/p.swf" />
<param name="wmode" value="transparent" />
<param name="flashvars" value="aid=999384&sid=paparazzi&creationTime=1256598990000&uid=121545188&pr=3" />
<embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="philippstraub_elemei/p.swf" height="250" width="340" wmode="transparent" flashvars="aid=999384&sid=paparazzi&creationTime=1256598990000&uid=121545188&pr=3" />
</object>
</div>
<style>{!----- seperator 10px -----!}</style>
<div style="float: left; width: 10px; height: 280px; background-color: rgb(0, 0, 0); text-align: left; font-size: 0px;">
</div>
<style>{!----- box second 2/2 -----!}</style>
<div style="float: left; width: 450px; height: 280px; background-color: rgb(0, 0, 0); text-align: left; font-size: 0px;
line-height: 0px;">
<img src="http://www.djsandymartinez.com/myspace/savok/recordlabels_sav.jpg" width="450" height="26" /></div>
<div style="margin: 0px; float: left; width: 340px; height: 28px; background-color: rgb(0, 0, 0); text-align: left;
font-size: 0px;">
<img src="http://www.djsandymartinez.com/myspace/savok/mymovies_sav.jpg" width="320" height="26" />
</div>
<div style="margin: 0px; float: left; width: 10px; height: 28px; background-color: rgb(0, 0, 0); text-align: left;
font-size: 0px;">
</div>
<div style="margin: 0px; float: left; width: 440px; height: 28px; background-color: rgb(0, 0, 0); text-align: left;
font-size: 0px;">
<img src="http://www.djsandymartinez.com/myspace/savok/beatportplayer_sav.jpg" width="450" height="26" />
</div>
<div style="margin: 0px; float: left; width: 800px; height: 340px; text-align: left; font-size: 0px;">
<style>//---------------- BEGIN BEATPORT PLAYER -----------------------</style>
<div class="beatport" style="border: 0px none ; padding: 10px; background: transparent none repeat scroll 0%
0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;" align="right">
<map name="bottomlinks"><area href="http://www.msplinks.com/MDFodHRwOi8vd3d3LmJlYXRwb3J0LmNvbQ==" alt="Go to
Beatport.com" coords="0,0,225,50" />
<area href="http://www.msplinks.com/MDFodHRwOi8vd3d3LmJlYXRwb3J0LmNvbS92aXJhbFBsYXllci9yZWxheT9wbGF5ZXJJZD0yNTg1MTQ=" alt="Get These Tracks" coords="237,12,332,38" />
<area href="http://www.msplinks.com/MDFodHRwOi8vd3d3LmJlYXRwb3J0cGxheWVyLmNvbS8/cGxheWVySWQ9MjU4NTE0" alt="Add
This Player" coords="332,12,422,38" /></map>
<img src="http://x.myspace.com/images/tos.gif" style="border: medium none ; display: block;" usemap="bottomlinks" />
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="264" width="442" style="display: block;" align="center">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<param name="movie" value="philippstraub_elemei/viralplayer.swf" />
<param name="wmode" value="transparent" />
<param name="flashvars" value="playerId=258514&autoplay=0&volume=80" />
<param name="loop" value="false" />
<param name="menu" value="false" />
<param name="quality" value="high" />
<param name="salign" value="lt" />
<param name="scale" value="noscale" />
<embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="philippstraub_elemei/viralplayer.swf" height="264" width="442" style="display: block;" align="center" wmode="transparent" flashvars="playerId=258514&autoplay=0&volume=80" loop="false" menu="false" quality="high" salign="lt" scale="noscale" />
</object>
</div>
</div>
<div style="margin: 0px; float: left; width: 340px; height: 28px; background-color: rgb(0, 0, 0); text-align:
left; font-size: 0px;">
</div>
<div style="margin: 0px; float: left; width: 10px; height: 28px; background-color: rgb(0, 0, 0); text-align:
left; font-size: 0px;">
</div>
<div style="margin: 0px; float: left; width: 440px; height: 28px; background-color: rgb(0, 0, 0); text-align:
left; font-size: 0px;">
<img src="http://www.djsandymartinez.com/myspace/savok/upcomingshows_sav.jpg" width="450" height="26" />
</div>
</div>
</div>
colorer
1. Nyiss új témát ITT
2. Használj kódszinezőt.
3. Honnan tudjam ennyi kódból kiszedni a hibás részt? Hol van az inaktív rész?
Ha ezeket figyelembe veszed megpróbálok segíteni. Próbáld meg a kódot a hibás részre leszűkíteni.
Üdv.
Tamás
960.gs