html - Header CSS breaking -

-

i'm pretty terrible @ css/design i'm struggling css here.

the page looks fine when loaded in full screen browser @ 1920x1080, however, minimise or load page on mobile device header content loses placing body fine.

here's css elements in question:

#header {  background: url(assets/header_bckg.gif) repeat-x ; height:120px;   }  #logo { display:inline-block; float:mid-left; padding:50px 0 0 570px; } #logo { color:#ffffff; text-decoration:none; font-weight:bold; height:12px; font-size:20px; text-transform:uppercase;}   #login { display:inline-block; float:mid-right; padding-left:400px; padding-bottom: 7px; vertical-align:middle;} #login{ color:#ffffff; text-decoration:none; font-weight:bold; height:12px; font-size:12px; text-transform:uppercase;}   #avatar { display:inline-block; position:absolute; margin-top:28px; float:mid-right; padding-left: 505px; padding-bottom: 15px; vertical-align:middle; }  #avatar_online {     background: linear-gradient(to bottom, #7bafd6 5%, #506d92 95%) repeat scroll 0 0 transparent;     filter: none;     height: 50px;     width: 50px;     padding: 3px;     background-color: #545454;     border-radius: 3px 3px 3px 3px;      }  #avatar_offline {        background: linear-gradient(to bottom, #706c6b 5%, #4e4d4d 95%) repeat scroll 0 0 transparent;     filter: none;     height: 50px;     width: 50px;     padding: 3px;     border: 1px solid #545454;     border-radius: 3px 3px 3px 3px;      }     #avatar_playing {            background: linear-gradient(to bottom, #9bc861 5%, #789e4c 95%) repeat scroll 0 0 transparent;     filter: none;         height: 50px;     width: 50px;     padding: 3px;     border: 1px solid #545454;     border-radius: 3px 3px 3px 3px;      }  #menu {position: absolute; margin-left:550px; top:88px; color:#fff; text-align:center; margin-top:0px;} #menu ul{ width:800px; margin:0 auto;list-style:none; padding:0; text-align:left;} #menu ul li{display:inline} #menu ul { float:left; font-weight:bold; font-size:13px; text-decoration:none; color:#fff; padding:8px 10px; width:118px; text-align:center; text-transform:uppercase; background:url(assets/menu_active.gif) no-repeat bottom center; color:#232323; } #menu ul a:hover {      color: #85b0df;     cursor: pointer;     text-decoration: none; }

as always, appreciated.

  1. make sure css , html valid. others have pointed out, there no such thing float:mid-left. also, if jsfiddle indicative of html, you're throwing browsers quirksmode, because html isn't structured (your first 3 tags need wrapped in <head> tag, needs wrapped in <html> tag, , first line should <!doctype html>). use w3c's html validator , css validator ensure code correct. can begin fix other issues.

  2. learn various css declarations do. while css may valid, doesn't mean it's right. this: #avatar { display:inline-block; position:absolute; margin-top:28px; float:mid-right; padding-left: 505px; padding-bottom: 15px; vertical-align:middle; } technically validate once float part fixed. however, position: absolute , float mutually exclusive -- float doesn't work when position absolute or fixed. learn how padding , margin affect positioning of element, , how differ 1 another. finally, vertical-align doesn't work @ unless element table cell, or display set table-cell (and table-related set of display properties has own quirks, can't throw display: table-cell on element , expect work way).

  3. learn how elements naturally behave, can work with them, instead of against them. make sure know how block, inline, , inline-block elements behave, , work them layout want, instead of throwing display: inline-block on , hoping best. same goes things links (which naturally have cursor: pointer on hover, unless you've disabled elsewhere). doing substantially clean css, making easier maintain. may clean html, find out wrapper elements need or can without.


Comments

Post a Comment

Popular posts from this blog

plot - Remove Objects from Legend When You Have Also Used Fit, Matlab -

-
Image
i've plotted data points , fitted exponential curve between them using 'fit' in matlab. problem fit-function got fitted line wanted plot, markers on top of regular markers. solved problem plotting wanted markers on top of unwanted couldn't seen. problem. when want show legends dots in there. how can remove markers legend without removing fitted line since both of them hidden inside fit-function? can stop 'fit' plotting unwanted markers? so, want remove blue dot called 'hoff' in picture below. you can leave out legend-entries manually leaving out handles of lines, dont want in legend. try this: %if plot something, want showing in legend, save handle: h_line = plot(x,y) %you dont want show line? dont anything, plot it: plot(mymarker) %then set legend-> can add text legend-entries %a cell-array containing strings want show up: legend([h_line another_line],{'text1' 'text2'}) with example (see comments) came solution: ...
Read more

java - Why does my date parsing return a weird date? -

-
here code using: string string = "08/07/2013".replace('/', '-'); date date = new simpledateformat("yyyy-mm-dd").parse(string); why date return: "wen jan 3 00:00:00 est 14"? not @ date format told use. edit: need format because database using requires format. the format use parse date string, not match it. using yyyy 08 . use following format: new simpledateformat("dd-mm-yyyy") and why @ replacing / - ? can build pattern original string only: string string = "08/07/2013" date date = new simpledateformat("dd/mm/yyyy").parse(string); and if want date string in yyyy-mm-dd format, can format date using dateformat#format(date) method: string formatteddate = new simpledateformat("yyyy-mm-dd").format(date); see also: change date format in java string simpledateformat java doc
Read more

Need help in packaging app using TideSDK on Windows -

-
i developed application using tidesdk on windows , when click launchapp works fine. moved package , installed imagemagick , wix 3.0 required packaging on windows. clicked on package runtime , cannot guess packaged app is? found file 'installer' in workspace when click on it says installer not find application path . think application not being packaged properly. here log see in tidesdk: preparing package desktop app runtime. 1 moment... staging trial -> copying contents d:\lab\tidesdk\trial d:\lab\tidesdk\trial\packages\win32\bundle\trial -> copying installer c:\programdata\tidesdk\sdk\win32\1.3.1-beta\installer d:\lab\tidesdk\trial\packages\win32\bundle\trial -> copying runtime d:\lab\tidesdk\trial\packages\win32\bundle\trial -> date: d:\lab\tidesdk\trial\packages\win32\bundle\trial\modules\app\1.3.1-beta -> date: d:\lab\tidesdk\trial\packages\win32\bundle\trial\modules\codec\1.3.1-beta -> date: d:\lab\tidesdk\trial\packages\win32\bundle\trial\mod...
Read more