超ド素人nagomiがWEBデザイナー目指して学校通ってみました。 半年勉強して気づけば私もWEBデザイナー♪人生なんとかなるものですね★ 新米デザイナーになったnagomiのお仕事や勉強したことなどのメモブログです。これからどういう風になっていくのか楽しみです★
スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
Firefoxでfloat後clearしてもmarginがとれない
お久しぶりです!
ついログインするのが面倒で書き忘れてました。


でも、久々にメモしたい気分になったのでメモしときます。



今更???
って感じかもしれまんせんが、
某企業のサイトをコーディングしてて行き詰った。



Firefoxでfloat後clearしてもmarginがとれない・・・。



バナーをfloatで横に並べて
そのあと別の要素でまたバナーを同じように並べる。
その間にmarginを取りたいのだけど、Firefoxでうまく隙間があかない。。。



困ったぞ。



ってことで、ググってみたら無事解決。



div#container:after {
content : "";
display : block;
height : 0;
clear : both;
}



こんな感じでAfter擬似クラスを使ったら解決。


私・・・
After擬似クラスもよく理解してないんだけど・・・



とりあえず、OK!!!
今度勉強しまーす☆
スポンサーサイト
Mac のphotoshopでアンチエイリアスをとったら
お久しぶりです。
制作会社なんて入ってしまったもので、
あとは会社に慣れるのでバタバタしてて
気付いたら1ヶ月以上放置・・・



ぼちぼち復帰します。
てか、読んでくれてる人いないかもだけど、
自分もメモもかねて♪



htmlばかり組んでいてデザインはほとんどやらなく
(バナーくらいは作ってたけど)
久々に1ページデザインしました。


うちの会社、photoshopがMacにしかないので
大分仲良くなってきたMacくんとデザイン開始。



テキスト部分のアンチエイリアスをとったら・・・


な・・・なんて読みづらい。


とにかく見た目悪い。
何で?
なんでなんで?
アンチエイリアスとるよね?



色々試行錯誤してもわからなかったので
リーダーに聞いてみたら、
何か裏技(?)があるそうで。


フォントをOsaka-ul というのにして
文字幅を101%にすると・・・



!!!!!



キレになりました。
不思議~~~~


なんで?
文字幅はちなみに縦でも横でもどっちでも大丈夫だった。
いったいどういう仕組みなのでしょうか(^^;)


まぁ解決したからいっか。



まだまだMacくんと仲良くなりきれてないようで。
退職します
このたび退職勧奨にて退社することになりました。
しばらくプーです。


このご時勢厳しいかもだけど
転機だと思うので、


のんびりリフレッシュして
次の新しい環境を目指そうかと思ってます!


今の会社に未経験で飛び込み
そんな私を育て(?)てくれた会社に感謝です!!


南国にでもいってリフレッシュしようかと計画中でーす☆

floatの設定
すっごい単純なことでミスってばっかり。
画像とテキストを左右に並べたくて、
現状だと画像がない部分はテキストが回りこむようになってるんだけど、
それを回り込ませたくないという要望。

090119-01.jpg

こんなだったのを

090119-02.jpg

こんな風にして欲しいってこと。


今は単純にテーブルの中に
<img>があって、<p>があって、
なので、画像をよけてテキストが回りこんでるので、
両方にfloatかけて段落2つ並べりゃいいんじゃん!?

って、htmlかるーく修正したら
IEだと綺麗になるけどfirefoxがダメ。
上下にズレちゃう。

090119-03.jpg

こんな感じでズレる↑。

よくやる手法なんだけど、
多分ここで<p>の方に横幅widthを設定してあげれば解決すると思われる。

でも、指定したくない。
画像がないときは自由にのび縮みして欲しかったのですよ。

なので色々調べてみたけど
結局これといった回避策は見つからず。

とらいえず、cssで制御して
<img>と<p>両方にfloat:left を設定して
さらにwidthも設定。
そしたらfirefoxでも綺麗に並んだ。OK。

あとは、システムの人にお願いしちゃいました^^;;
画像がないときは、cssを外してもらう条件設定で・・・。

実は解決策・・・あるのかな?

今回は思いつかなかったので、
とりあえずfloatをかけるときはwidthも設定。。。と。今更メモ。



クラス名のつけ方
昨日某サイトのチェックをしていたら
firefoxでスタイルが効いてない部分を発見!

あれーー???
なんでなんで?

と原因を探してみるけど
バタバタしている時期で
あまり頭が働かない・・・
自分で探すのはこれは効率が悪いと判断し
となりのデザイナーさんになんとなく聞いてみた。

『ココがCSSがIEだと効いてFirefoxだと効かないんですけど、何でですかね?』

ときくと
あっさりと返答が。

『ソース見てみたけど
多分クラス名だよ?』

うっ・・・・

そんな単純ミスだったとは・・・

それも指摘されてみれば以前にもそんなことを記事に書いたこともあるような。
でも探すのも面倒だったので
もう一回書いておきます!
2回目だったらごめんなさい。
それだけ自分が成長してないということで・・・

クラス名を数字で初めてしまっていて
数字は使ってもいいけど
頭に使うと効かないみたいなんです。

クラス名をアルファベットに変えて無事解決。

よかったよかった♪

あともう一個バグと戦ってるんだけど・・・

ローカルだとテーブルの幅が予定通りのものになるのに
サーバーに上げると2pxくらい広がってしまう現象。
firefoxでは大丈夫で、
IE6とIE7で確認されてるんだよねーー・・・


困った。


これも解決したらまたご報告します。
まだまだ勉強不足みたいです。


© 初心者WEBデザイナーのメモ帳. all rights reserved.
Page top
FC2 BLOG
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。